Skip to content

Commit 8050773

Browse files
diasbrunodiasbruno
committed
[chore] clean up all element leaks between tests.
1 parent 9523683 commit 8050773

File tree

11 files changed

+863
-639
lines changed

11 files changed

+863
-639
lines changed

‎specs/Modal.events.spec.js‎

Lines changed: 106 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -11,74 +11,71 @@ import {
1111
mouseUpAt,
1212
escKeyDown,
1313
tabKeyDown,
14-
renderModal,
15-
emptyDOM,
16-
unmountModal
14+
withModal
1715
} from "./helper";
1816

1917
export default () => {
20-
afterEach("Unmount modal", emptyDOM);
21-
2218
it("should trigger the onAfterOpen callback", () => {
2319
const afterOpenCallback = sinon.spy();
24-
renderModal({ isOpen: true, onAfterOpen: afterOpenCallback });
20+
const props = { isOpen: true, onAfterOpen: afterOpenCallback };
21+
withModal(props, null, () => {});
2522
afterOpenCallback.called.should.be.ok();
2623
});
2724

2825
it("should call onAfterOpen with overlay and content references", () => {
2926
const afterOpenCallback = sinon.spy();
30-
const modal = renderModal({ isOpen: true, onAfterOpen: afterOpenCallback });
31-
32-
sinon.assert.calledWith(afterOpenCallback, {
33-
overlayEl: modal.portal.overlay,
34-
contentEl: modal.portal.content
27+
const props = { isOpen: true, onAfterOpen: afterOpenCallback };
28+
withModal(props, null, modal => {
29+
sinon.assert.calledWith(afterOpenCallback, {
30+
overlayEl: modal.portal.overlay,
31+
contentEl: modal.portal.content
32+
});
3533
});
3634
});
3735

3836
it("should trigger the onAfterClose callback", () => {
3937
const onAfterCloseCallback = sinon.spy();
40-
const modal = renderModal({
38+
withModal({
4139
isOpen: true,
4240
onAfterClose: onAfterCloseCallback
4341
});
44-
45-
modal.portal.close();
46-
4742
onAfterCloseCallback.called.should.be.ok();
4843
});
4944

5045
it("should not trigger onAfterClose callback when unmounting a closed modal", () => {
5146
const onAfterCloseCallback = sinon.spy();
52-
renderModal({ isOpen: false, onAfterClose: onAfterCloseCallback });
53-
unmountModal();
47+
withModal({ isOpen: false, onAfterClose: onAfterCloseCallback });
5448
onAfterCloseCallback.called.should.not.be.ok();
5549
});
5650

5751
it("should trigger onAfterClose callback when unmounting an opened modal", () => {
5852
const onAfterCloseCallback = sinon.spy();
59-
renderModal({ isOpen: true, onAfterClose: onAfterCloseCallback });
60-
unmountModal();
53+
withModal({ isOpen: true, onAfterClose: onAfterCloseCallback });
6154
onAfterCloseCallback.called.should.be.ok();
6255
});
6356

6457
it("keeps focus inside the modal when child has no tabbable elements", () => {
6558
let tabPrevented = false;
66-
const modal = renderModal({ isOpen: true }, "hello");
67-
const content = mcontent(modal);
68-
document.activeElement.should.be.eql(content);
69-
tabKeyDown(content, {
70-
preventDefault() {
71-
tabPrevented = true;
72-
}
59+
const props = { isOpen: true };
60+
withModal(props, "hello", modal => {
61+
const content = mcontent(modal);
62+
document.activeElement.should.be.eql(content);
63+
tabKeyDown(content, {
64+
preventDefault() {
65+
tabPrevented = true;
66+
}
67+
});
68+
tabPrevented.should.be.eql(true);
7369
});
74-
tabPrevented.should.be.eql(true);
7570
});
7671

7772
it("handles case when child has no tabbable elements", () => {
78-
const modal = renderModal({ isOpen: true }, "hello");
79-
const content = mcontent(modal);
80-
tabKeyDown(content);
81-
document.activeElement.should.be.eql(content);
73+
const props = { isOpen: true };
74+
withModal(props, "hello", modal => {
75+
const content = mcontent(modal);
76+
tabKeyDown(content);
77+
document.activeElement.should.be.eql(content);
78+
});
8279
});
8380

8481
it("traps tab in the modal on shift + tab", () => {
@@ -90,120 +87,142 @@ export default () => {
9087
{bottomButton}
9188
</div>
9289
);
93-
const modal = renderModal({ isOpen: true }, modalContent);
94-
const content = mcontent(modal);
95-
tabKeyDown(content, { shiftKey: true });
96-
document.activeElement.textContent.should.be.eql("bottom");
90+
const props = { isOpen: true };
91+
withModal(props, modalContent, modal => {
92+
const content = mcontent(modal);
93+
tabKeyDown(content, { shiftKey: true });
94+
document.activeElement.textContent.should.be.eql("bottom");
95+
});
9796
});
9897

9998
describe("shouldCloseOnEsc", () => {
10099
context("when true", () => {
101100
it("should close on Esc key event", () => {
102101
const requestCloseCallback = sinon.spy();
103-
const modal = renderModal({
104-
isOpen: true,
105-
shouldCloseOnEsc: true,
106-
onRequestClose: requestCloseCallback
107-
});
108-
escKeyDown(mcontent(modal));
109-
requestCloseCallback.called.should.be.ok();
110-
// Check if event is passed to onRequestClose callback.
111-
const event = requestCloseCallback.getCall(0).args[0];
112-
event.should.be.ok();
102+
withModal(
103+
{
104+
isOpen: true,
105+
shouldCloseOnEsc: true,
106+
onRequestClose: requestCloseCallback
107+
},
108+
null,
109+
modal => {
110+
escKeyDown(mcontent(modal));
111+
requestCloseCallback.called.should.be.ok();
112+
// Check if event is passed to onRequestClose callback.
113+
const event = requestCloseCallback.getCall(0).args[0];
114+
event.should.be.ok();
115+
}
116+
);
113117
});
114118
});
115119

116120
context("when false", () => {
117121
it("should not close on Esc key event", () => {
118122
const requestCloseCallback = sinon.spy();
119-
const modal = renderModal({
123+
const props = {
120124
isOpen: true,
121125
shouldCloseOnEsc: false,
122126
onRequestClose: requestCloseCallback
127+
};
128+
withModal(props, null, modal => {
129+
escKeyDown(mcontent(modal));
130+
requestCloseCallback.called.should.be.false;
123131
});
124-
escKeyDown(mcontent(modal));
125-
requestCloseCallback.called.should.be.false;
126132
});
127133
});
128134
});
129135

130136
describe("shouldCloseOnoverlayClick", () => {
131137
it("when false, click on overlay should not close", () => {
132138
const requestCloseCallback = sinon.spy();
133-
const modal = renderModal({
139+
const props = {
134140
isOpen: true,
135141
shouldCloseOnOverlayClick: false
142+
};
143+
withModal(props, null, modal => {
144+
const overlay = moverlay(modal);
145+
clickAt(overlay);
146+
requestCloseCallback.called.should.not.be.ok();
136147
});
137-
const overlay = moverlay(modal);
138-
clickAt(overlay);
139-
requestCloseCallback.called.should.not.be.ok();
140148
});
141149

142150
it("when true, click on overlay must close", () => {
143151
const requestCloseCallback = sinon.spy();
144-
const modal = renderModal({
152+
const props = {
145153
isOpen: true,
146154
shouldCloseOnOverlayClick: true,
147155
onRequestClose: requestCloseCallback
156+
};
157+
withModal(props, null, modal => {
158+
clickAt(moverlay(modal));
159+
requestCloseCallback.called.should.be.ok();
148160
});
149-
clickAt(moverlay(modal));
150-
requestCloseCallback.called.should.be.ok();
151161
});
152162

153163
it("overlay mouse down and content mouse up, should not close", () => {
154164
const requestCloseCallback = sinon.spy();
155-
const modal = renderModal({
165+
const props = {
156166
isOpen: true,
157167
shouldCloseOnOverlayClick: true,
158168
onRequestClose: requestCloseCallback
169+
};
170+
withModal(props, null, modal => {
171+
mouseDownAt(moverlay(modal));
172+
mouseUpAt(mcontent(modal));
173+
requestCloseCallback.called.should.not.be.ok();
159174
});
160-
mouseDownAt(moverlay(modal));
161-
mouseUpAt(mcontent(modal));
162-
requestCloseCallback.called.should.not.be.ok();
163175
});
164176

165177
it("content mouse down and overlay mouse up, should not close", () => {
166178
const requestCloseCallback = sinon.spy();
167-
const modal = renderModal({
179+
const props = {
168180
isOpen: true,
169181
shouldCloseOnOverlayClick: true,
170182
onRequestClose: requestCloseCallback
183+
};
184+
withModal(props, null, modal => {
185+
mouseDownAt(mcontent(modal));
186+
mouseUpAt(moverlay(modal));
187+
requestCloseCallback.called.should.not.be.ok();
171188
});
172-
mouseDownAt(mcontent(modal));
173-
mouseUpAt(moverlay(modal));
174-
requestCloseCallback.called.should.not.be.ok();
175189
});
176190
});
177191

178192
it("should not stop event propagation", () => {
179193
let hasPropagated = false;
180-
const modal = renderModal({
194+
const props = {
181195
isOpen: true,
182196
shouldCloseOnOverlayClick: true
197+
};
198+
withModal(props, null, modal => {
199+
const propagated = () => (hasPropagated = true);
200+
window.addEventListener("click", propagated);
201+
const event = new MouseEvent("click", { bubbles: true });
202+
moverlay(modal).dispatchEvent(event);
203+
hasPropagated.should.be.ok();
204+
window.removeEventListener("click", propagated);
183205
});
184-
window.addEventListener("click", () => {
185-
hasPropagated = true;
186-
});
187-
moverlay(modal).dispatchEvent(new MouseEvent("click", { bubbles: true }));
188-
hasPropagated.should.be.ok();
189206
});
190207

191208
it("verify event passing on overlay click", () => {
192209
const requestCloseCallback = sinon.spy();
193-
const modal = renderModal({
210+
const props = {
194211
isOpen: true,
195212
shouldCloseOnOverlayClick: true,
196213
onRequestClose: requestCloseCallback
214+
};
215+
withModal(props, null, modal => {
216+
// click the overlay
217+
clickAt(moverlay(modal), {
218+
// Used to test that this was the event received
219+
fakeData: "ABC"
220+
});
221+
requestCloseCallback.called.should.be.ok();
222+
// Check if event is passed to onRequestClose callback.
223+
const event = requestCloseCallback.getCall(0).args[0];
224+
event.should.be.ok();
197225
});
198-
// click the overlay
199-
clickAt(moverlay(modal), {
200-
// Used to test that this was the event received
201-
fakeData: "ABC"
202-
});
203-
requestCloseCallback.called.should.be.ok();
204-
// Check if event is passed to onRequestClose callback.
205-
const event = requestCloseCallback.getCall(0).args[0];
206-
event.should.be.ok();
207226
});
208227

209228
it("on nested modals, only the topmost should handle ESC key.", () => {
@@ -214,7 +233,7 @@ export default () => {
214233
innerModal = ref;
215234
};
216235

217-
renderModal(
236+
withModal(
218237
{
219238
isOpen: true,
220239
onRequestClose: requestCloseCallback
@@ -225,12 +244,13 @@ export default () => {
225244
ref={innerModalRef}
226245
>
227246
<span>Test</span>
228-
</Modal>
247+
</Modal>,
248+
() => {
249+
const content = mcontent(innerModal);
250+
escKeyDown(content);
251+
innerRequestCloseCallback.called.should.be.ok();
252+
requestCloseCallback.called.should.not.be.ok();
253+
}
229254
);
230-
231-
const content = mcontent(innerModal);
232-
escKeyDown(content);
233-
innerRequestCloseCallback.called.should.be.ok();
234-
requestCloseCallback.called.should.not.be.ok();
235255
});
236256
};

0 commit comments

Comments
 (0)