add widget fallback
parent
ccdbb511f6
commit
a5d0a3266b
|
@ -0,0 +1,25 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { mount, shallow } from "enzyme";
|
||||||
|
import { FallbackWidget } from "../fallback_widget";
|
||||||
|
|
||||||
|
describe("<FallbackWidget/>", function () {
|
||||||
|
|
||||||
|
it("renders widget fallback", function () {
|
||||||
|
const wrapper = mount(<FallbackWidget title="FakeWidget" />);
|
||||||
|
const widget = wrapper.find(".widget-wrapper");
|
||||||
|
const header = widget.find(".widget-header");
|
||||||
|
expect(header.text()).toContain("FakeWidget");
|
||||||
|
const body = widget.find(".widget-body");
|
||||||
|
expect(body.text()).toContain("Widget load failed.");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders widget fallback with help text", function () {
|
||||||
|
const helpText = "This is a fake widget.";
|
||||||
|
const wrapper = shallow(<FallbackWidget
|
||||||
|
title="FakeWidget" helpText={helpText} />);
|
||||||
|
expect(wrapper.html()).toContain(
|
||||||
|
"<i class=\"fa fa-question-circle help-icon\">" +
|
||||||
|
"<div class=\"help-text\">This is a fake widget.</div></i>");
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
|
@ -0,0 +1,39 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { t } from "i18next";
|
||||||
|
import { Widget, WidgetHeader } from "./ui";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Widget to display if the desired widget fails to load.
|
||||||
|
*
|
||||||
|
* Example usage where `this.props.feed` is required, but may be undefined:
|
||||||
|
* {this.props.feed
|
||||||
|
* ? <WebcamPanel
|
||||||
|
* bot={this.props.bot}
|
||||||
|
* feed={this.props.feed}
|
||||||
|
* dispatch={this.props.dispatch} />
|
||||||
|
* : <FallbackWidget
|
||||||
|
* title="Webcam"
|
||||||
|
* helpText={ToolTips.WEBCAM} />}
|
||||||
|
*/
|
||||||
|
|
||||||
|
export interface FallbackWidgetProps {
|
||||||
|
title: string;
|
||||||
|
helpText?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class FallbackWidget extends
|
||||||
|
React.Component<FallbackWidgetProps, {}> {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Widget>
|
||||||
|
<WidgetHeader
|
||||||
|
title={t(this.props.title)}
|
||||||
|
helpText={this.props.helpText} />
|
||||||
|
<div className="widget-body">
|
||||||
|
{t("Widget load failed.")}
|
||||||
|
</div>
|
||||||
|
</Widget>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue