Skip to content

Commit 6f81e0d

Browse files
brauliodiezbrauliodiez
authored
Merge pull request #57 from Lemoncode/feature/52-fix-hoc-specs
Feature/52 fix hoc specs
2 parents 0fbe1a9 + f251e27 commit 6f81e0d

File tree

6 files changed

+70
-78
lines changed

6 files changed

+70
-78
lines changed

‎.vscode/launch.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,21 @@
2828
],
2929
"console": "integratedTerminal",
3030
"internalConsoleOptions": "neverOpen"
31+
},
32+
{
33+
"type": "node",
34+
"request": "launch",
35+
"name": "Jest current file",
36+
"program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
37+
"args": [
38+
"${fileBasename}",
39+
"--verbose",
40+
"-i",
41+
"--no-cache",
42+
"--watchAll"
43+
],
44+
"console": "integratedTerminal",
45+
"internalConsoleOptions": "neverOpen"
3146
}
3247
]
3348
}

‎src/__snapshots__/trackerHoc.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ exports[`trackerHoc Initial Status should render component with trackedPromiseIn
331331
"delay": 300,
332332
}
333333
}
334-
promiseInProgress={false}
334+
promiseInProgress={true}
335335
>
336336
<span>
337337
test

‎src/trackerHoc.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { Component } from "react";
1+
import React, { Component } from 'react';
22
import {
33
emitter,
44
getCounter,
55
promiseCounterUpdateEventId
6-
} from "./trackPromise";
6+
} from './trackPromise';
77
import { setupConfig } from './setupConfig';
88

99
// Props:
@@ -20,26 +20,31 @@ export const promiseTrackerHoc = ComponentToWrap => {
2020
this.state = {
2121
promiseInProgress: false,
2222
internalPromiseInProgress: false,
23-
config: setupConfig(props.config),
23+
config: setupConfig(props.config)
2424
};
25+
26+
this.notifyPromiseInProgress = this.notifyPromiseInProgress.bind(this);
27+
this.updateProgress = this.updateProgress.bind(this);
28+
this.subscribeToCounterUpdate = this.subscribeToCounterUpdate.bind(this);
2529
}
2630

27-
updateProgressWithDelay() {
28-
setTimeout(() => {
29-
this.setState({
30-
promiseInProgress: this.state.internalPromiseInProgress
31-
});
32-
}, this.state.config.delay);
31+
notifyPromiseInProgress() {
32+
this.state.config.delay === 0
33+
? this.setState({ promiseInProgress: true })
34+
: setTimeout(() => {
35+
this.setState({ promiseInProgress: true });
36+
}, this.state.config.delay);
3337
}
3438

3539
updateProgress(progress, afterUpdateCallback) {
3640
this.setState(
3741
{ internalPromiseInProgress: progress },
3842
afterUpdateCallback
3943
);
40-
this.state.config.delay === 0
41-
? this.setState({ promiseInProgress: progress })
42-
: this.updateProgressWithDelay();
44+
45+
!progress
46+
? this.setState({ promiseInProgress: false })
47+
: this.notifyPromiseInProgress();
4348
}
4449

4550
subscribeToCounterUpdate() {

‎src/trackerHoc.test.js‎

Lines changed: 31 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from "react";
22
import { promiseTrackerHoc } from "./trackerHoc";
33
import * as trackPromiseAPI from "./trackPromise";
44
import { defaultArea } from "./constants";
5-
import { act } from "react-dom/test-utils"; // ES6
65

76
describe("trackerHoc", () => {
87
describe("Initial Status", () => {
@@ -471,90 +470,65 @@ describe("trackerHoc", () => {
471470
jest.useRealTimers();
472471
});
473472

474-
it("should render <h1>NO SPINNER</h2> when counter is 1 but delay is set to 200 (before timing out)", () => {
473+
it("should render <h1>NO SPINNER</h2> when counter is 1 but delay is set to 300 (before timing out)", done => {
475474
// Arrange
476-
let TestSpinnerComponent = null;
477-
act(() => {
478-
TestSpinnerComponent = props => {
479-
return (
480-
<div>
481-
{props.promiseInProgress ? <h1>SPINNER</h1> : <h2>NO SPINNER</h2>}
482-
</div>
483-
);
484-
};
485-
486-
trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
487-
});
475+
const TestSpinnerComponent = props => {
476+
return (
477+
<div>
478+
{props.promiseInProgress ? <h1>SPINNER</h1> : <h2>NO SPINNER</h2>}
479+
</div>
480+
);
481+
};
482+
483+
const getCounterStub = jest
484+
.spyOn(trackPromiseAPI, "getCounter")
485+
.mockReturnValue(0);
488486

489487
// Act
490-
let component = null;
491-
act(() => {
492-
const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
493-
component = mount(<TrackedComponent config={{ delay: 300 }} />);
494-
});
488+
const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
489+
const component = mount(<TrackedComponent config={{ delay: 300 }} />);
495490

496491
// Check very beginning (no promises going on) NO SPINNER is shown
497492
// TODO: this assert could be skipped (move to another test)
498-
expect(component.text()).toMatch("NO SPINNER");
499-
expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
493+
expect(component.text()).toEqual("NO SPINNER");
494+
expect(getCounterStub).toHaveBeenCalled();
500495

501496
// Assert
502497
// This promise will resolved after 1 seconds, by doing this
503498
// we will be able to test 2 scenarios:
504499
// [0] first 200ms spinner won't be shown (text NOSPINNER)
505500
// [1] after 200ms spinner will be shown (text SPINNER)
506501
// [2] after 1000ms spinner will be hidded again (text NOSPINNER)
507-
let myFakePromise = null;
508-
509-
act(() => {
510-
myFakePromise = new Promise(resolve => {
511-
setTimeout(() => {
512-
resolve(true);
513-
}, 1000);
514-
});
515-
});
516-
517-
act(() => {
518-
trackPromiseAPI.trackPromise(myFakePromise);
519502

520-
// Runs all pending timers. whether it's a second from now or a year.
521-
// https://jestjs.io/docs/en/timer-mocks.html
522-
//jest.advanceTimersByTime(300);
503+
const myFakePromise = new Promise(resolve => {
504+
setTimeout(() => {
505+
resolve(true);
506+
}, 1000);
523507
});
524508

525-
act(() => {
526-
// Runs all pending timers. whether it's a second from now or a year.
527-
// https://jestjs.io/docs/en/timer-mocks.html
528-
jest.advanceTimersByTime(100);
529-
});
509+
trackPromiseAPI.trackPromise(myFakePromise);
510+
511+
jest.advanceTimersByTime(100);
530512

531513
// [0] first 200ms spinner won't be shown (text NOSPINNER)
532-
expect(component.text()).toMatch("NO SPINNER");
514+
expect(component.text()).toEqual("NO SPINNER");
533515

534-
act(() => {
535-
// Runs all pending timers. whether it's a second from now or a year.
536-
// https://jestjs.io/docs/en/timer-mocks.html
537-
jest.advanceTimersByTime(300);
538-
});
516+
jest.advanceTimersByTime(300);
539517

540518
// Before the promise get's resolved
541519
// [1] after 200ms spinner will be shown (text SPINNER)
542-
expect(component.text()).toMatch("SPINNER");
520+
expect(component.text()).toEqual("SPINNER");
543521

544522
// After the promise get's resolved
545-
546-
act(() => {
547-
jest.advanceTimersByTime(1500);
548-
//jest.runAllTimers();
549-
});
523+
jest.runAllTimers();
550524

551525
// [2] after 1000ms spinner will be hidded again (text NOSPINNER)
552526
// Wait for fakePromise (simulated ajax call) to be completed
553527
// no spinner should be shown
554-
act(() => {
555-
myFakePromise.then(() => {
556-
expect(component.text()).toMatch("NO SPINNER");
557-
});
528+
529+
myFakePromise.then(() => {
530+
expect(component.text()).toEqual("NO SPINNER");
531+
done();
558532
});
559533
});
560534
});

‎src/trackerHook.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import { emitter, promiseCounterUpdateEventId, getCounter} from "./trackPromise";
3-
import { defaultArea } from "./constants";
43
import { defaultConfig, setupConfig } from './setupConfig';
54

65

‎src/trackerHook.test.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from "react";
22
import { usePromiseTracker } from "./trackerHook";
33
import * as trackPromiseAPI from "./trackPromise";
4-
import { defaultArea } from "./constants";
5-
import { trackPromise, emitter } from "./trackPromise";
64
import { act } from "react-dom/test-utils"; // ES6
75

86
describe("trackerHook", () => {
@@ -164,7 +162,7 @@ describe("trackerHook", () => {
164162
jest.useRealTimers();
165163
});
166164

167-
it("should render <h1>NO SPINNER</h2> when counter is 1 but delay is set to 200 (before timing out)", () => {
165+
it("should render <h1>NO SPINNER</h2> when counter is 1 but delay is set to 200 (before timing out)", done => {
168166
// Arrange
169167
let TestSpinnerComponent = null;
170168
act(() => {
@@ -191,7 +189,7 @@ describe("trackerHook", () => {
191189

192190
// Check very beginning (no promises going on) NO SPINNER is shown
193191
// TODO: this assert could be skipped (move to another test)
194-
expect(component.text()).toMatch("NO SPINNER");
192+
expect(component.text()).toEqual("NO SPINNER");
195193
expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
196194

197195
// Assert
@@ -225,7 +223,7 @@ describe("trackerHook", () => {
225223
});
226224

227225
// [0] first 200ms spinner won't be shown (text NOSPINNER)
228-
expect(component.text()).toMatch("NO SPINNER");
226+
expect(component.text()).toEqual("NO SPINNER");
229227

230228
act(() => {
231229
// Runs all pending timers. whether it's a second from now or a year.
@@ -235,7 +233,7 @@ describe("trackerHook", () => {
235233

236234
// Before the promise get's resolved
237235
// [1] after 200ms spinner will be shown (text SPINNER)
238-
expect(component.text()).toMatch("SPINNER");
236+
expect(component.text()).toEqual("SPINNER");
239237

240238
// After the promise get's resolved
241239

@@ -248,7 +246,8 @@ describe("trackerHook", () => {
248246
// no spinner should be shown
249247
act(() => {
250248
myFakePromise.then(() => {
251-
expect(component.text()).toMatch("NO SPINNER");
249+
expect(component.text()).toEqual("NO SPINNER");
250+
done();
252251
});
253252
});
254253
});

0 commit comments

Comments
 (0)