Source code
Revision control
Copy as Markdown
Other Tools
import { A11yLinkButton } from "content-src/components/A11yLinkButton/A11yLinkButton";
import {
ErrorBoundary,
ErrorBoundaryFallback,
} from "content-src/components/ErrorBoundary/ErrorBoundary";
import React from "react";
import { shallow } from "enzyme";
describe("<ErrorBoundary>", () => {
it("should render its children if componentDidCatch wasn't called", () => {
const wrapper = shallow(
<ErrorBoundary>
<div className="kids" />
</ErrorBoundary>
);
assert.lengthOf(wrapper.find(".kids"), 1);
});
it("should render ErrorBoundaryFallback if componentDidCatch called", () => {
const wrapper = shallow(<ErrorBoundary />);
wrapper.instance().componentDidCatch();
// since shallow wrappers don't automatically manage lifecycle semantics:
wrapper.update();
assert.lengthOf(wrapper.find(ErrorBoundaryFallback), 1);
});
it("should render the given FallbackComponent if componentDidCatch called", () => {
class TestFallback extends React.PureComponent {
render() {
return <div className="my-fallback">doh!</div>;
}
}
const wrapper = shallow(<ErrorBoundary FallbackComponent={TestFallback} />);
wrapper.instance().componentDidCatch();
// since shallow wrappers don't automatically manage lifecycle semantics:
wrapper.update();
assert.lengthOf(wrapper.find(TestFallback), 1);
});
it("should pass the given className prop to the FallbackComponent", () => {
class TestFallback extends React.PureComponent {
render() {
return <div className={this.props.className}>doh!</div>;
}
}
const wrapper = shallow(
<ErrorBoundary FallbackComponent={TestFallback} className="sheep" />
);
wrapper.instance().componentDidCatch();
// since shallow wrappers don't automatically manage lifecycle semantics:
wrapper.update();
assert.lengthOf(wrapper.find(".sheep"), 1);
});
});
describe("ErrorBoundaryFallback", () => {
it("should render a <div> with a class of as-error-fallback", () => {
const wrapper = shallow(<ErrorBoundaryFallback />);
assert.lengthOf(wrapper.find("div.as-error-fallback"), 1);
});
it("should render a <div> with the props.className and .as-error-fallback", () => {
const wrapper = shallow(<ErrorBoundaryFallback className="monkeys" />);
assert.lengthOf(wrapper.find("div.monkeys.as-error-fallback"), 1);
});
it("should call window.location.reload(true) if .reload-button clicked", () => {
const fakeWindow = { location: { reload: sinon.spy() } };
const wrapper = shallow(<ErrorBoundaryFallback windowObj={fakeWindow} />);
wrapper.find(".reload-button").simulate("click");
assert.calledOnce(fakeWindow.location.reload);
assert.calledWithExactly(fakeWindow.location.reload, true);
});
it("should render .reload-button as an <A11yLinkButton>", () => {
const wrapper = shallow(<ErrorBoundaryFallback />);
assert.lengthOf(wrapper.find("A11yLinkButton.reload-button"), 1);
});
it("should render newtab-error-fallback-refresh-link node", () => {
const wrapper = shallow(<ErrorBoundaryFallback />);
const msgWrapper = wrapper.find(
'[data-l10n-id="newtab-error-fallback-refresh-link"]'
);
assert.lengthOf(msgWrapper, 1);
assert.isTrue(msgWrapper.is(A11yLinkButton));
});
it("should render newtab-error-fallback-info node", () => {
const wrapper = shallow(<ErrorBoundaryFallback />);
const msgWrapper = wrapper.find(
'[data-l10n-id="newtab-error-fallback-info"]'
);
assert.lengthOf(msgWrapper, 1);
});
});