Skip to content

Commit a051793

Browse files
cvlecvle
committed
Introduce prepare states
1 parent ea4bb0c commit a051793

File tree

5 files changed

+241
-101
lines changed

5 files changed

+241
-101
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
"test": "npm run test:unit && npm run test:integration",
3232
"test:unit": "cross-env TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' nyc mocha --opts mocha.opts",
3333
"test:unit:watch": "npm run test:unit -- --watch",
34-
"test:integration": "karma start",
35-
"test:integration:watch": "karma start --single-run=false"
34+
"test:integration": "cross-env NODE_ENV=integration karma start",
35+
"test:integration:watch": "cross-env NODE_ENV=integration karma start --single-run=false"
3636
},
3737
"engines": {
3838
"node": ">=4"

‎src/reducer.spec.ts‎

Lines changed: 129 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
defaultInitState, activeInitState, appearInitState,
88
defaultState, activeState,
99
appearPendingState, enterPendingState, leavePendingState,
10+
appearPrepareState, enterPrepareState, leavePrepareState,
1011
appearTriggeredState, enterTriggeredState, leaveTriggeredState,
1112
appearStartedState, enterStartedState, leaveStartedState,
1213
} from "./reducer";
@@ -68,7 +69,7 @@ describe("reducer.ts", () => {
6869
});
6970
it("should return transition init state", () => {
7071
transitionNames.forEach((name) => {
71-
const id = StateID.EnterStarted;
72+
const id = StateID.EnterPending;
7273
const inTransition = false;
7374
const style = { top: 0 };
7475
const className = "foo";
@@ -105,7 +106,7 @@ describe("reducer.ts", () => {
105106
},
106107
];
107108
cases.forEach((c, idx) => {
108-
assert.deepEqual(getState(id, name, c.props, { init: true }), c.out,
109+
assert.deepEqual(getState(id, name, c.props, { mode: "init" }), c.out,
109110
`Case ${name} ${idx} unexpected state.`);
110111
});
111112
});
@@ -114,7 +115,7 @@ describe("reducer.ts", () => {
114115
it("should return transition init fallback state", () => {
115116
transitionNames.forEach((name) => {
116117
const fallbackName = name === "leave" ? "active" : "default";
117-
const id = StateID.EnterStarted;
118+
const id = StateID.EnterPending;
118119
const inTransition = false;
119120
const style = { top: 0 };
120121
const className = "foo";
@@ -149,72 +150,118 @@ describe("reducer.ts", () => {
149150
},
150151
];
151152
cases.forEach((c, idx) => {
152-
assert.deepEqual(getState(id, name, c.props, { init: true }), c.out,
153+
assert.deepEqual(getState(id, name, c.props, { mode: "init" }), c.out,
153154
`Case ${name} ${idx} unexpected state.`);
154155
});
155156
});
156157
});
157-
it("should fallback appear to enter", () => {
158-
const id = StateID.AppearInit;
159-
const style = { left: "0px" };
160-
const className = "foo";
161-
const inTransition = true;
162-
const cases = [
163-
{
164-
props: {
165-
enterStyle: style,
158+
it("should return transition prepare state", () => {
159+
transitionNames.forEach((name) => {
160+
const id = StateID.EnterPrepare;
161+
const inTransition = false;
162+
const style = { top: 0 };
163+
const transition = "opacity 200ms";
164+
const styleWithTransition = { ...style, transition };
165+
const className = "foo";
166+
const cases = [
167+
{
168+
props: {
169+
[name + "InitStyle"]: style,
170+
[name + "Style"]: { transition },
171+
},
172+
out: { id, style: styleWithTransition, inTransition, className: "" },
166173
},
167-
out: { id, style, inTransition, className: "" },
168-
},
169-
{
170-
props: {
171-
enterClassName: className,
174+
{
175+
props: {
176+
[name + "InitStyle"]: style,
177+
[name + "Style"]: { transition },
178+
[name + "InitClassName"]: className,
179+
},
180+
out: { id, style: styleWithTransition, inTransition, className },
172181
},
173-
out: { id, className, inTransition, style: {} },
174-
},
175-
{
176-
props: {
177-
enterStyle: style,
178-
enterClassName: className,
182+
{
183+
props: {
184+
[name + "InitStyle"]: style,
185+
[name + "ClassName"]: "bar",
186+
[name + "InitClassName"]: className,
187+
},
188+
out: { id, style, inTransition, className },
179189
},
180-
out: { id, style, inTransition, className },
181-
},
182-
];
183-
cases.forEach((c, idx) => {
184-
assert.deepEqual(getState(id, "appear", c.props), c.out,
185-
`Case ${name} ${idx} unexpected state.`);
190+
{
191+
props: {
192+
[name + "ClassName"]: "bar",
193+
[name + "InitClassName"]: className,
194+
},
195+
out: { id, style: {}, inTransition, className },
196+
},
197+
];
198+
cases.forEach((c, idx) => {
199+
assert.deepEqual(getState(id, name, c.props, { mode: "prepare" }), c.out,
200+
`Case ${name} ${idx} unexpected state.`);
201+
});
186202
});
187203
});
188-
it("should fallback appearInit to enterInit", () => {
189-
const id = StateID.AppearInit;
190-
const style = { left: "0px" };
191-
const className = "foo";
192-
const inTransition = false;
193-
const cases = [
194-
{
195-
props: {
196-
enterInitStyle: style,
197-
},
198-
out: { id, style, inTransition, className: "" },
204+
});
205+
it("should fallback appear to enter", () => {
206+
const id = StateID.AppearInit;
207+
const style = { left: "0px" };
208+
const className = "foo";
209+
const inTransition = true;
210+
const cases = [
211+
{
212+
props: {
213+
enterStyle: style,
199214
},
200-
{
201-
props: {
202-
enterInitClassName: className,
203-
},
204-
out: { id, className, inTransition, style: {} },
215+
out: { id, style, inTransition, className: "" },
216+
},
217+
{
218+
props: {
219+
enterClassName: className,
205220
},
206-
{
207-
props: {
208-
enterInitStyle: style,
209-
enterInitClassName: className,
210-
},
211-
out: { id, style, inTransition, className },
221+
out: { id, className, inTransition, style: {} },
222+
},
223+
{
224+
props: {
225+
enterStyle: style,
226+
enterClassName: className,
212227
},
213-
];
214-
cases.forEach((c, idx) => {
215-
assert.deepEqual(getState(id, "appear", c.props, { init: true }), c.out,
216-
`Case ${name} ${idx} unexpected state.`);
217-
});
228+
out: { id, style, inTransition, className },
229+
},
230+
];
231+
cases.forEach((c, idx) => {
232+
assert.deepEqual(getState(id, "appear", c.props), c.out,
233+
`Case ${name} ${idx} unexpected state.`);
234+
});
235+
});
236+
it("should fallback appearInit to enterInit", () => {
237+
const id = StateID.AppearInit;
238+
const style = { left: "0px" };
239+
const className = "foo";
240+
const inTransition = false;
241+
const cases = [
242+
{
243+
props: {
244+
enterInitStyle: style,
245+
},
246+
out: { id, style, inTransition, className: "" },
247+
},
248+
{
249+
props: {
250+
enterInitClassName: className,
251+
},
252+
out: { id, className, inTransition, style: {} },
253+
},
254+
{
255+
props: {
256+
enterInitStyle: style,
257+
enterInitClassName: className,
258+
},
259+
out: { id, style, inTransition, className },
260+
},
261+
];
262+
cases.forEach((c, idx) => {
263+
assert.deepEqual(getState(id, "appear", c.props, { mode: "init" }), c.out,
264+
`Case ${name} ${idx} unexpected state.`);
218265
});
219266
});
220267
describe("states", () => {
@@ -250,6 +297,18 @@ describe("states", () => {
250297
"leavePendingState",
251298
testState(StateID.LeavePending, "leaveInitStyle", (props) => leavePendingState(props)),
252299
);
300+
describe(
301+
"appearPrepareState",
302+
testState(StateID.AppearPrepare, "appearInitStyle", (props) => appearPrepareState(props)),
303+
);
304+
describe(
305+
"enterPrepareState",
306+
testState(StateID.EnterPrepare, "enterInitStyle", (props) => enterPrepareState(props)),
307+
);
308+
describe(
309+
"leavePrepareState",
310+
testState(StateID.LeavePrepare, "leaveInitStyle", (props) => leavePrepareState(props)),
311+
);
253312
describe(
254313
"appearTriggeredState",
255314
testState(StateID.AppearTriggered, "appearStyle", (props) => appearTriggeredState(props)),
@@ -312,7 +371,7 @@ describe("actions", () => {
312371
appearStyle: {},
313372
},
314373
});
315-
assert.strictEqual(pending, ActionID.TransitionTrigger);
374+
assert.strictEqual(pending, ActionID.TransitionPrepare);
316375
assert.strictEqual(state.id, StateID.AppearPending);
317376
});
318377

@@ -334,21 +393,21 @@ describe("actions", () => {
334393
it("should transit to enter pending state", () => {
335394
[StateID.Default, StateID.DefaultInit].forEach((id) => {
336395
const {state, pending} = reducer(id, { kind: actionID, props: { enterStyle: {} } });
337-
assert.strictEqual(pending, ActionID.TransitionTrigger);
396+
assert.strictEqual(pending, ActionID.TransitionPrepare);
338397
assert.strictEqual(state.id, StateID.EnterPending);
339398
});
340399
});
341400
it("should transit to leave pending state", () => {
342401
[StateID.Active, StateID.ActiveInit].forEach((id) => {
343402
const {state, pending} = reducer(id, { kind: actionID, props: { leaveStyle: {} } });
344-
assert.strictEqual(pending, ActionID.TransitionTrigger);
403+
assert.strictEqual(pending, ActionID.TransitionPrepare);
345404
assert.strictEqual(state.id, StateID.LeavePending);
346405
});
347406
});
348407
it("should transit to appear pending state", () => {
349408
const id = StateID.AppearInit;
350409
const {state, pending} = reducer(id, { kind: actionID, props: { appearStyle: {} } });
351-
assert.strictEqual(pending, ActionID.TransitionTrigger);
410+
assert.strictEqual(pending, ActionID.TransitionPrepare);
352411
assert.strictEqual(state.id, StateID.AppearPending);
353412
});
354413
it("should skip to active and complete", () => {
@@ -433,47 +492,46 @@ describe("actions", () => {
433492
});
434493
describe("TransitionTrigger", () => {
435494
const actionID = ActionID.TransitionTrigger;
436-
437495
it("should transit to enter pending state", () => {
438496
[StateID.Default, StateID.DefaultInit].forEach((id) => {
439497
const {state, pending} = reducer(id, { kind: actionID, props: { enterStyle: {} } });
440-
assert.strictEqual(pending, ActionID.TransitionTrigger);
498+
assert.strictEqual(pending, ActionID.TransitionPrepare);
441499
assert.strictEqual(state.id, StateID.EnterPending);
442500
});
443501
});
444502
it("should transit to leave pending state", () => {
445503
[StateID.Active, StateID.ActiveInit].forEach((id) => {
446504
const {state, pending} = reducer(id, { kind: actionID, props: { leaveStyle: {} } });
447-
assert.strictEqual(pending, ActionID.TransitionTrigger);
505+
assert.strictEqual(pending, ActionID.TransitionPrepare);
448506
assert.strictEqual(state.id, StateID.LeavePending);
449507
});
450508
});
451509
it("should transit to appear pending state", () => {
452510
const id = StateID.AppearInit;
453511
const {state, pending} = reducer(id, { kind: actionID, props: { appearStyle: {} } });
454-
assert.strictEqual(pending, ActionID.TransitionTrigger);
512+
assert.strictEqual(pending, ActionID.TransitionPrepare);
455513
assert.strictEqual(state.id, StateID.AppearPending);
456514
});
457515
it("should transit to enter triggered state", () => {
458-
const id = StateID.EnterPending;
516+
const id = StateID.EnterPrepare;
459517
const {state, pending} = reducer(id, { kind: actionID, props: { active: true } });
460518
assert.isUndefined(pending);
461519
assert.strictEqual(state.id, StateID.EnterTriggered);
462520
});
463521
it("should transit to leave triggered state", () => {
464-
const id = StateID.LeavePending;
522+
const id = StateID.LeavePrepare;
465523
const {state, pending} = reducer(id, { kind: actionID, props: { active: false } });
466524
assert.isUndefined(pending);
467525
assert.strictEqual(state.id, StateID.LeaveTriggered);
468526
});
469527
it("should transit to appear triggered state", () => {
470-
const id = StateID.AppearPending;
528+
const id = StateID.AppearPrepare;
471529
const {state, pending} = reducer(id, { kind: actionID, props: { active: true } });
472530
assert.isUndefined(pending);
473531
assert.strictEqual(state.id, StateID.AppearTriggered);
474532
});
475533
it("should interrupt enter pending and triggered", () => {
476-
[StateID.EnterPending, StateID.EnterTriggered].forEach((id) => {
534+
[StateID.EnterPending, StateID.EnterPrepare, StateID.EnterTriggered].forEach((id) => {
477535
const props = { active: false };
478536
const {state, pending, completed} = reducer(id, { kind: actionID, props });
479537
assert.isUndefined(pending);
@@ -482,7 +540,7 @@ describe("actions", () => {
482540
});
483541
});
484542
it("should interrupt leave pending and triggered", () => {
485-
[StateID.LeavePending, StateID.LeaveTriggered].forEach((id) => {
543+
[StateID.LeavePending, StateID.LeavePrepare, StateID.LeaveTriggered].forEach((id) => {
486544
const props = { active: true };
487545
const {state, pending, completed} = reducer(id, { kind: actionID, props });
488546
assert.isUndefined(pending);
@@ -491,7 +549,7 @@ describe("actions", () => {
491549
});
492550
});
493551
it("should interrupt appear pending and triggered", () => {
494-
[StateID.AppearPending, StateID.AppearTriggered].forEach((id) => {
552+
[StateID.AppearPending, StateID.AppearPrepare, StateID.AppearTriggered].forEach((id) => {
495553
const props = { active: false };
496554
const {state, pending, completed} = reducer(id, { kind: actionID, props });
497555
assert.isUndefined(pending);
@@ -537,7 +595,6 @@ function testState(id: StateID, styleName: string, state: (props: ActionProps) =
537595
const styleProcessed = { top: "5px", transition: "top 120ms ease 0ms" };
538596
assert.deepEqual(state({ ...extraProps, [styleName]: style }).style, styleProcessed);
539597
});
540-
541598
it("should return transition style with extra delay", () => {
542599
const style = { top: transit("5px", 120, "ease", 10) };
543600
const styleProcessed = { top: "5px", transition: "top 120ms ease 30ms" };

0 commit comments

Comments
 (0)