1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
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);
});
});
|
