Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Commit 20f68e2

Browse files
cvlecvle
committed
Improve tests
1 parent b90588c commit 20f68e2

File tree

5 files changed

+436
-139
lines changed

5 files changed

+436
-139
lines changed

‎test/integration/appear.test.tsx

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/**
2+
* @license
3+
* Copyright (C) 2016 Chi Vinh Le and contributors.
4+
*
5+
* This software may be modified and distributed under the terms
6+
* of the MIT license. See the LICENSE file for details.
7+
*/
8+
9+
import * as React from "react";
10+
import { CSSProperties } from "react";
11+
import { ReactWrapper, mount } from "enzyme";
12+
import { assert } from "chai";
13+
import { SinonSpy, spy } from "sinon";
14+
15+
import { createTestDiv } from "../utils";
16+
import { CSSTransitionProps, CSSTransition, transit } from "../../src";
17+
18+
const TICK = 17;
19+
20+
describe("appear integration test", () => {
21+
describe("<CSSTransition>", () => {
22+
const activeStyle: CSSProperties = { width: "100px" };
23+
const defaultStyle: CSSProperties = { width: "50px" };
24+
const enterStyle: CSSProperties = { width: transit("100px", 150, "ease", 25) };
25+
const leaveStyle: CSSProperties = { width: transit("50px", 150, "ease", 25) };
26+
const enterStyleProcessed: CSSProperties = { width: "100px", transition: "width 150ms ease 25ms" };
27+
const leaveStyleProcessed: CSSProperties = { width: "50px", transition: "width 150ms ease 25ms" };
28+
let onTransitionComplete: SinonSpy;
29+
let getWrapper: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;
30+
31+
before(() => {
32+
const render = (props?: CSSTransitionProps) => (
33+
<CSSTransition {...props}>
34+
<span>dummy</span>
35+
</CSSTransition>
36+
);
37+
getWrapper = (props?: CSSTransitionProps) => mount(render(props), { attachTo: createTestDiv() });
38+
});
39+
40+
describe("transition appear", () => {
41+
let wrapper: ReactWrapper<any, {}>;
42+
let target: ReactWrapper<any, {}>;
43+
44+
before(() => {
45+
onTransitionComplete = spy();
46+
wrapper = getWrapper({
47+
activeStyle, enterStyle, leaveStyle, defaultStyle,
48+
onTransitionComplete,
49+
active: true,
50+
transitionAppear: true,
51+
});
52+
target = wrapper.find("div");
53+
});
54+
55+
after(() => {
56+
wrapper.detach();
57+
});
58+
59+
it("should start with default style", () => {
60+
const style = target.props().style;
61+
assert.deepEqual(style, defaultStyle);
62+
});
63+
64+
describe("after mount", () => {
65+
before((done) => {
66+
setTimeout(() => {
67+
done();
68+
}, TICK + 5);
69+
});
70+
71+
it("should automatically trigger transition", () => {
72+
const style = target.props().style;
73+
assert.deepEqual(style, enterStyleProcessed);
74+
});
75+
76+
describe("when transition starts", () => {
77+
before((done) => {
78+
setTimeout(() => {
79+
done();
80+
}, 100);
81+
});
82+
83+
it("should ignore", () => {
84+
const style = target.props().style;
85+
assert.deepEqual(style, enterStyleProcessed);
86+
});
87+
88+
it("should not call onTransitionComplete yet", () => {
89+
assert.isTrue(onTransitionComplete.notCalled);
90+
});
91+
});
92+
93+
describe("when transition ends", () => {
94+
before((done) => {
95+
setTimeout(() => {
96+
done();
97+
}, 100);
98+
});
99+
100+
it("should become default", () => {
101+
const style = target.props().style;
102+
assert.deepEqual(style, activeStyle);
103+
});
104+
105+
it("should call onTransitionComplete", () => {
106+
assert.isTrue(onTransitionComplete.calledOnce);
107+
});
108+
});
109+
});
110+
});
111+
112+
describe("transition appear interrupted", () => {
113+
let wrapper: ReactWrapper<any, {}>;
114+
let target: ReactWrapper<any, {}>;
115+
116+
before(() => {
117+
onTransitionComplete = spy();
118+
wrapper = getWrapper({
119+
activeStyle, enterStyle, leaveStyle, defaultStyle,
120+
onTransitionComplete,
121+
active: true,
122+
transitionAppear: true,
123+
});
124+
target = wrapper.find("div");
125+
});
126+
127+
after(() => {
128+
wrapper.detach();
129+
});
130+
131+
it("should start with default style", () => {
132+
const style = target.props().style;
133+
assert.deepEqual(style, defaultStyle);
134+
});
135+
136+
describe("after mount", () => {
137+
it("should not call onTransitionComplete yet", () => {
138+
assert.isTrue(onTransitionComplete.notCalled);
139+
});
140+
141+
describe("when transition was interrupted", () => {
142+
before(() => {
143+
wrapper.setProps({ active: false });
144+
});
145+
146+
it("should remain in default", () => {
147+
const style = target.props().style;
148+
assert.deepEqual(style, defaultStyle);
149+
});
150+
151+
it("should continue to remain in default", (done) => {
152+
setTimeout(() => {
153+
const style = target.props().style;
154+
assert.deepEqual(style, defaultStyle);
155+
done();
156+
}, 100);
157+
});
158+
159+
it("should call onTransitionComplete", () => {
160+
assert.isTrue(onTransitionComplete.calledOnce);
161+
});
162+
});
163+
});
164+
});
165+
166+
});
167+
});

‎test/integration.test.tsx renamed to ‎test/integration/basic.test.tsx

+12-139
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,24 @@
77
*/
88

99
import * as React from "react";
10-
10+
import { CSSProperties } from "react";
1111
import { ReactWrapper, mount } from "enzyme";
1212
import { assert } from "chai";
1313
import { SinonSpy, spy } from "sinon";
1414

15-
import { CSSTransitionProps, CSSTransition, transit } from "../src";
15+
import { createTestDiv } from "../utils";
16+
import { CSSTransitionProps, CSSTransition, transit } from "../../src";
1617

1718
const TICK = 17;
1819

19-
describe("integration test", () => {
20+
describe("basic integration test", () => {
2021
describe("<CSSTransition>", () => {
21-
const activeStyle: React.CSSProperties = { width: "100px" };
22-
const defaultStyle: React.CSSProperties = { width: "50px" };
23-
const enterStyle: React.CSSProperties = { width: transit("100px", 150, "ease", 25) };
24-
const leaveStyle: React.CSSProperties = { width: transit("50px", 150, "ease", 25) };
25-
const enterStyleProcessed: React.CSSProperties = { width: "100px", transition: "width 150ms ease 25ms" };
26-
const leaveStyleProcessed: React.CSSProperties = { width: "50px", transition: "width 150ms ease 25ms" };
22+
const activeStyle: CSSProperties = { width: "100px" };
23+
const defaultStyle: CSSProperties = { width: "50px" };
24+
const enterStyle: CSSProperties = { width: transit("100px", 150, "ease", 25) };
25+
const leaveStyle: CSSProperties = { width: transit("50px", 150, "ease", 25) };
26+
const enterStyleProcessed: CSSProperties = { width: "100px", transition: "width 150ms ease 25ms" };
27+
const leaveStyleProcessed: CSSProperties = { width: "50px", transition: "width 150ms ease 25ms" };
2728
let onTransitionComplete: SinonSpy;
2829
let getWrapper: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;
2930
let getWrapperAttached: (props?: CSSTransitionProps) => ReactWrapper<any, {}>;
@@ -35,7 +36,7 @@ describe("integration test", () => {
3536
</CSSTransition>
3637
);
3738
getWrapper = (props?: CSSTransitionProps) => mount(render(props));
38-
getWrapperAttached = (props?: CSSTransitionProps) => mount(render(props), { attachTo: document.body });
39+
getWrapperAttached = (props?: CSSTransitionProps) => mount(render(props), { attachTo: createTestDiv() });
3940
});
4041

4142
it("should render dummy text", () => {
@@ -47,11 +48,10 @@ describe("integration test", () => {
4748
});
4849

4950
it("should pass down unknown props", () => {
50-
const wrapper = getWrapper({ id: "abc", "data-test": "test" });
51+
const wrapper = getWrapper({ id: "abc" });
5152
const div = wrapper.find("#abc");
5253
assert.lengthOf(div, 1);
5354
assert.strictEqual(div.type(), "div");
54-
assert.strictEqual((div.props() as any)["data-test"], "test");
5555
});
5656

5757
describe("transition default -> active", () => {
@@ -506,132 +506,5 @@ describe("integration test", () => {
506506
});
507507
});
508508
});
509-
510-
describe("transition appear", () => {
511-
let wrapper: ReactWrapper<any, {}>;
512-
let target: ReactWrapper<any, {}>;
513-
514-
before(() => {
515-
onTransitionComplete = spy();
516-
wrapper = getWrapperAttached({
517-
activeStyle, enterStyle, leaveStyle, defaultStyle,
518-
onTransitionComplete,
519-
active: true,
520-
transitionAppear: true,
521-
});
522-
target = wrapper.find("div");
523-
});
524-
525-
after(() => {
526-
wrapper.detach();
527-
});
528-
529-
it("should start with default style", () => {
530-
const style = target.props().style;
531-
assert.deepEqual(style, defaultStyle);
532-
});
533-
534-
describe("after mount", () => {
535-
before((done) => {
536-
setTimeout(() => {
537-
done();
538-
}, TICK + 5);
539-
});
540-
541-
it("should automatically trigger transition", () => {
542-
const style = target.props().style;
543-
assert.deepEqual(style, enterStyleProcessed);
544-
});
545-
546-
describe("when transition starts", () => {
547-
before((done) => {
548-
setTimeout(() => {
549-
done();
550-
}, 100);
551-
});
552-
553-
it("should ignore", () => {
554-
const style = target.props().style;
555-
assert.deepEqual(style, enterStyleProcessed);
556-
});
557-
558-
it("should not call onTransitionComplete yet", () => {
559-
assert.isTrue(onTransitionComplete.notCalled);
560-
});
561-
});
562-
563-
describe("when transition ends", () => {
564-
before((done) => {
565-
setTimeout(() => {
566-
done();
567-
}, 100);
568-
});
569-
570-
it("should become default", () => {
571-
const style = target.props().style;
572-
assert.deepEqual(style, activeStyle);
573-
});
574-
575-
it("should call onTransitionComplete", () => {
576-
assert.isTrue(onTransitionComplete.calledOnce);
577-
});
578-
});
579-
});
580-
});
581-
582-
describe("transition appear interrupted", () => {
583-
let wrapper: ReactWrapper<any, {}>;
584-
let target: ReactWrapper<any, {}>;
585-
586-
before(() => {
587-
onTransitionComplete = spy();
588-
wrapper = getWrapperAttached({
589-
activeStyle, enterStyle, leaveStyle, defaultStyle,
590-
onTransitionComplete,
591-
active: true,
592-
transitionAppear: true,
593-
});
594-
target = wrapper.find("div");
595-
});
596-
597-
after(() => {
598-
wrapper.detach();
599-
});
600-
601-
it("should start with default style", () => {
602-
const style = target.props().style;
603-
assert.deepEqual(style, defaultStyle);
604-
});
605-
606-
describe("after mount", () => {
607-
it("should not call onTransitionComplete yet", () => {
608-
assert.isTrue(onTransitionComplete.notCalled);
609-
});
610-
611-
describe("when transition was interrupted", () => {
612-
before(() => {
613-
wrapper.setProps({ active: false });
614-
});
615-
616-
it("should remain in default", () => {
617-
const style = target.props().style;
618-
assert.deepEqual(style, defaultStyle);
619-
});
620-
621-
it("should continue to remain in default", (done) => {
622-
setTimeout(() => {
623-
const style = target.props().style;
624-
assert.deepEqual(style, defaultStyle);
625-
done();
626-
}, 100);
627-
});
628-
629-
it("should call onTransitionComplete", () => {
630-
assert.isTrue(onTransitionComplete.calledOnce);
631-
});
632-
});
633-
});
634-
});
635-
636509
});
637510
});

0 commit comments

Comments
 (0)