;
+/**
+ * Configuration contract: user can setup areas (display more than one spinner) or delay when
+ * the spinner is shown (this is useful when a user has a fast connection, to avoid unneccessary flickering)
+ */
+
+interface Config {
+ area: string;
+ delay: number;
+}
/**
* It wraps a given React component into a new component that adds properties to watch
- * pending promises.
+ * pending promises (HOC).
* @param component Input component to be wrapped.
* @returns It returns a new component that extends the input one.
*/
export interface ComponentToWrapProps {
- area: string;
- trackedPromiseInProgress: boolean;
+ config: Config;
+ promiseInProgress: boolean;
}
export interface TrackerHocProps {
- area?: string;
+ config?: Config;
}
export function promiseTrackerHoc(component: React.ComponentType
): React.ComponentType
;
+
+/**
+ * React Promise Tracker custom hook, this hook will expose a promiseInProgress boolean flag.
+ *
+ * @param configuration (optional can be null).
+ * @returns promiseInProgressFlag.
+ */
+export function usePromiseTracker(outerConfig? : Config) : { promiseInProgress : boolean };
diff --git a/src/index.js b/src/index.js
index 077eb9e..befeaf0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,2 +1,3 @@
export { trackPromise } from './trackPromise';
export { promiseTrackerHoc } from './trackerHoc';
+export { usePromiseTracker } from './trackerHook';
diff --git a/src/setupConfig.js b/src/setupConfig.js
new file mode 100644
index 0000000..9e3bce9
--- /dev/null
+++ b/src/setupConfig.js
@@ -0,0 +1,9 @@
+import { defaultArea } from "./constants";
+
+export const defaultConfig = { area: defaultArea, delay: 0 };
+
+// Defensive config setup, fulfill default values
+export const setupConfig = (outerConfig) => ({
+ area: (!outerConfig || !outerConfig.area) ? defaultArea : outerConfig.area,
+ delay: (!outerConfig || !outerConfig.delay) ? 0 : outerConfig.delay,
+})
diff --git a/src/setupConfig.test.js b/src/setupConfig.test.js
new file mode 100644
index 0000000..a967159
--- /dev/null
+++ b/src/setupConfig.test.js
@@ -0,0 +1,94 @@
+import { defaultArea } from "./constants";
+import {setupConfig} from './setupConfig';
+
+describe("setupConfig", () => {
+ it("should return same config as param if all values are informed", () => {
+ // Arrange
+ const userConfig = {area: 'myarea', delay: 200};
+ // Act
+ const result = setupConfig(userConfig);
+
+ // Assert
+ expect(result.area).toBe('myarea');
+ expect(result.delay).toBe(200);
+ });
+
+ it("should return default config (default are, 0 delay) if input param is undefined", () => {
+ // Arrange
+ const userConfig = void(0);
+ // Act
+ const result = setupConfig(userConfig);
+
+ // Assert
+ expect(result.area).toBe(defaultArea);
+ expect(result.delay).toBe(0);
+ });
+
+ it("should return default config (default area, 0 delay) if input para is null", () => {
+ // Arrange
+ const userConfig = null;
+ // Act
+ const result = setupConfig(userConfig);
+
+ // Assert
+ expect(result.area).toBe(defaultArea);
+ expect(result.delay).toBe(0);
+ });
+
+ it("should fullfill default config and area if input param informed but empty object {}", () => {
+ // Arrange
+ const userConfig = null;
+ // Act
+ const result = setupConfig(userConfig);
+
+ // Assert
+ expect(result.area).toBe(defaultArea);
+ expect(result.delay).toBe(0);
+ });
+
+
+ it("should fullfill defaultArea param if undefined but delay informed", () => {
+ // Arrange
+ const userConfig = {area: void(0), delay: 200};
+ // Act
+ const result = setupConfig(userConfig);
+
+ // Assert
+ expect(result.area).toBe(defaultArea);
+ expect(result.delay).toBe(200);
+ });
+
+ it("should fullfill defaultArea param if null but delay informed", () => {
+ // Arrange
+ const userConfig = {area: null, delay: 200};
+ // Act
+ const result = setupConfig(userConfig);
+
+ // Assert
+ expect(result.area).toBe(defaultArea);
+ expect(result.delay).toBe(200);
+ });
+
+ it("should fullfill delay param (0) if undefined but area informed", () => {
+ // Arrange
+ const userConfig = {area: 'myarea', delay: void(0)};
+ // Act
+ const result = setupConfig(userConfig);
+
+ // Assert
+ expect(result.area).toBe('myarea');
+ expect(result.delay).toBe(0);
+ });
+
+ it("should fullfill delay param (0) if null but area informed", () => {
+ // Arrange
+ const userConfig = {area: 'myarea', delay: null};
+ // Act
+ const result = setupConfig(userConfig);
+
+ // Assert
+ expect(result.area).toBe('myarea');
+ expect(result.delay).toBe(0);
+ });
+
+});
diff --git a/src/trackPromise.js b/src/trackPromise.js
index 123195d..a461700 100644
--- a/src/trackPromise.js
+++ b/src/trackPromise.js
@@ -1,14 +1,14 @@
-import { Emitter } from './tinyEmmiter';
-import { defaultArea } from './constants';
+import { Emitter } from "./tinyEmmiter";
+import { defaultArea } from "./constants";
export const emitter = new Emitter();
-export const promiseCounterUpdateEventId = 'promise-counter-update';
+export const promiseCounterUpdateEventId = "promise-counter-update";
let counter = {
- [defaultArea]: 0,
+ [defaultArea]: 0
};
-export const getCounter = (area) => counter[area];
+export const getCounter = area => counter[area];
export const trackPromise = (promise, area) => {
area = area || defaultArea;
@@ -23,7 +23,7 @@ export const trackPromise = (promise, area) => {
return promise;
};
-const incrementCounter = (area) => {
+const incrementCounter = area => {
if (Boolean(counter[area])) {
counter[area]++;
} else {
@@ -31,15 +31,15 @@ const incrementCounter = (area) => {
}
};
-const anyPromiseInProgress = (area) => (counter[area] > 0);
+const anyPromiseInProgress = area => counter[area] > 0;
-const decrementPromiseCounter = (area) => {
+const decrementPromiseCounter = area => {
decrementCounter(area);
- const promiseInProgress = anyPromiseInProgress();
+ const promiseInProgress = anyPromiseInProgress(area);
emitter.emit(promiseCounterUpdateEventId, promiseInProgress, area);
};
-const decrementCounter = (area) => {
+const decrementCounter = area => {
counter[area]--;
};
diff --git a/src/trackPromise.test.js b/src/trackPromise.test.js
index d939938..df9ed51 100644
--- a/src/trackPromise.test.js
+++ b/src/trackPromise.test.js
@@ -1,9 +1,9 @@
-import { trackPromise, emitter } from './trackPromise';
-import { defaultArea } from './constants';
+import { trackPromise, emitter } from "./trackPromise";
+import { defaultArea } from "./constants";
-describe('trackPromise', () => {
- describe('using default area', () => {
- it('On Initial case, promise fired, promise emitter.emit is called', () => {
+describe("trackPromise", () => {
+ describe("using default area", () => {
+ it("On Initial case, promise fired, promise emitter.emit is called", () => {
// Arrange
emitter.emit = jest.fn();
@@ -15,10 +15,14 @@ describe('trackPromise', () => {
// Assert
expect(emitter.emit).toHaveBeenCalledTimes(1);
- expect(emitter.emit).toHaveBeenCalledWith('promise-counter-update', true, defaultArea);
+ expect(emitter.emit).toHaveBeenCalledWith(
+ "promise-counter-update",
+ true,
+ defaultArea
+ );
});
- it('Promise tracked, we got resolve, check that emit is called 2 times', (done) => {
+ it("Promise tracked, we got resolve, check that emit is called 2 times", done => {
// Arrange
emitter.emit = jest.fn();
@@ -31,14 +35,24 @@ describe('trackPromise', () => {
myPromise.then(() => {
expect(emitter.emit).toHaveBeenCalledTimes(2);
- expect(emitter.emit).toHaveBeenNthCalledWith(1, 'promise-counter-update', true, defaultArea);
-
- expect(emitter.emit).toHaveBeenNthCalledWith(2, 'promise-counter-update', false, defaultArea);
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 1,
+ "promise-counter-update",
+ true,
+ defaultArea
+ );
+
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 2,
+ "promise-counter-update",
+ false,
+ defaultArea
+ );
done();
});
});
- it('Promise tracked, we got fail, check that emit is called 2 times', (done) => {
+ it("Promise tracked, we got fail, check that emit is called 2 times", done => {
// Arrange
emitter.emit = jest.fn();
@@ -51,16 +65,25 @@ describe('trackPromise', () => {
myPromise.catch(() => {
expect(emitter.emit).toHaveBeenCalledTimes(2);
- expect(emitter.emit).toHaveBeenNthCalledWith(1, 'promise-counter-update', true, defaultArea);
-
- expect(emitter.emit).toHaveBeenNthCalledWith(2, 'promise-counter-update', false, defaultArea);
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 1,
+ "promise-counter-update",
+ true,
+ defaultArea
+ );
+
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 2,
+ "promise-counter-update",
+ false,
+ defaultArea
+ );
done();
});
});
-
// Pending promise failed
- it('Two Promises tracked, we got resolve on both, check that emit is called 4 times', (done) => {
+ it("Two Promises tracked, we got resolve on both, check that emit is called 4 times", done => {
// Arrange
emitter.emit = jest.fn();
@@ -76,19 +99,39 @@ describe('trackPromise', () => {
Promise.all(promises).then(() => {
expect(emitter.emit).toHaveBeenCalledTimes(4);
- expect(emitter.emit).toHaveBeenNthCalledWith(1, 'promise-counter-update', true, defaultArea);
-
- expect(emitter.emit).toHaveBeenNthCalledWith(2, 'promise-counter-update', true, defaultArea);
-
- expect(emitter.emit).toHaveBeenNthCalledWith(3, 'promise-counter-update', false, defaultArea);
-
- expect(emitter.emit).toHaveBeenNthCalledWith(4, 'promise-counter-update', false, defaultArea);
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 1,
+ "promise-counter-update",
+ true,
+ defaultArea
+ );
+
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 2,
+ "promise-counter-update",
+ true,
+ defaultArea
+ );
+
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 3,
+ "promise-counter-update",
+ true,
+ defaultArea
+ );
+
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 4,
+ "promise-counter-update",
+ false,
+ defaultArea
+ );
done();
});
});
// Promise chaining working properly.
- it('Promise returned must handle transparently the result when resolved', (done) => {
+ it("Promise returned must handle transparently the result when resolved", done => {
// Arrange
const expectedPromiseResult = "promise result";
const promise = Promise.resolve(expectedPromiseResult);
@@ -97,16 +140,15 @@ describe('trackPromise', () => {
const trackedPromise = trackPromise(promise);
// Assert
- trackedPromise.then((trackedPromiseResult) => {
+ trackedPromise.then(trackedPromiseResult => {
expect(trackedPromiseResult).toEqual(expectedPromiseResult);
done();
});
});
-
});
- describe('using custom area', () => {
- it('should call emitter.emit one time when feeding promise and area equals undefined', () => {
+ describe("using custom area", () => {
+ it("should call emitter.emit one time when feeding promise and area equals undefined", () => {
// Arrange
emitter.emit = jest.fn();
@@ -118,10 +160,14 @@ describe('trackPromise', () => {
// Assert
expect(emitter.emit).toHaveBeenCalledTimes(1);
- expect(emitter.emit).toHaveBeenCalledWith('promise-counter-update', true, defaultArea);
+ expect(emitter.emit).toHaveBeenCalledWith(
+ "promise-counter-update",
+ true,
+ defaultArea
+ );
});
- it('should call emitter.emit one time when feeding promise and area equals null', () => {
+ it("should call emitter.emit one time when feeding promise and area equals null", () => {
// Arrange
emitter.emit = jest.fn();
@@ -133,32 +179,40 @@ describe('trackPromise', () => {
// Assert
expect(emitter.emit).toHaveBeenCalledTimes(1);
- expect(emitter.emit).toHaveBeenCalledWith('promise-counter-update', true, defaultArea);
+ expect(emitter.emit).toHaveBeenCalledWith(
+ "promise-counter-update",
+ true,
+ defaultArea
+ );
});
- it('should call emitter.emit one time when feeding promise and area equals testArea', () => {
+ it("should call emitter.emit one time when feeding promise and area equals testArea", () => {
// Arrange
emitter.emit = jest.fn();
const myPromise = Promise.resolve();
- const area = 'testArea';
+ const area = "testArea";
// Act
trackPromise(myPromise, area);
// Assert
expect(emitter.emit).toHaveBeenCalledTimes(1);
- expect(emitter.emit).toHaveBeenCalledWith('promise-counter-update', true, 'testArea');
+ expect(emitter.emit).toHaveBeenCalledWith(
+ "promise-counter-update",
+ true,
+ "testArea"
+ );
});
- it('should call emitter.emit two times when feeding two promises in same area', () => {
+ it("should call emitter.emit two times when feeding two promises in same area", () => {
// Arrange
emitter.emit = jest.fn();
const myPromise1 = Promise.resolve();
const myPromise2 = Promise.resolve();
- const area = 'testArea';
+ const area = "testArea";
// Act
trackPromise(myPromise1, area);
@@ -166,19 +220,29 @@ describe('trackPromise', () => {
// Assert
expect(emitter.emit).toHaveBeenCalledTimes(2);
- expect(emitter.emit).toHaveBeenNthCalledWith(1, 'promise-counter-update', true, 'testArea');
- expect(emitter.emit).toHaveBeenNthCalledWith(2, 'promise-counter-update', true, 'testArea');
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 1,
+ "promise-counter-update",
+ true,
+ "testArea"
+ );
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 2,
+ "promise-counter-update",
+ true,
+ "testArea"
+ );
});
- it('should call emitter.emit two times when feeding two promises in different areas', () => {
+ it("should call emitter.emit two times when feeding two promises in different areas", () => {
// Arrange
emitter.emit = jest.fn();
const myPromise1 = Promise.resolve();
const myPromise2 = Promise.resolve();
- const area1 = 'testArea1';
- const area2 = 'testArea2';
+ const area1 = "testArea1";
+ const area2 = "testArea2";
// Act
trackPromise(myPromise1, area1);
@@ -186,9 +250,18 @@ describe('trackPromise', () => {
// Assert
expect(emitter.emit).toHaveBeenCalledTimes(2);
- expect(emitter.emit).toHaveBeenNthCalledWith(1, 'promise-counter-update', true, 'testArea1');
- expect(emitter.emit).toHaveBeenNthCalledWith(2, 'promise-counter-update', true, 'testArea2');
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 1,
+ "promise-counter-update",
+ true,
+ "testArea1"
+ );
+ expect(emitter.emit).toHaveBeenNthCalledWith(
+ 2,
+ "promise-counter-update",
+ true,
+ "testArea2"
+ );
});
});
});
-
diff --git a/src/trackerHoc.js b/src/trackerHoc.js
index dfe0aac..496e56a 100644
--- a/src/trackerHoc.js
+++ b/src/trackerHoc.js
@@ -1,49 +1,79 @@
-import React, { Component } from 'react'
-import { emitter, getCounter, promiseCounterUpdateEventId } from './trackPromise';
-import { defaultArea } from './constants';
-
-export const promiseTrackerHoc = (ComponentToWrap) => {
- return class promiseTrackerComponent extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- trackedPromiseInProgress: false,
- area: props.area || defaultArea,
- };
- }
-
- updateProgress(progress, afterUpdateCallback) {
- this.setState({ trackedPromiseInProgress: progress }, afterUpdateCallback);
- }
-
- subscribeToCounterUpdate() {
- emitter.on(promiseCounterUpdateEventId, (anyPromiseInProgress, area) => {
- if (this.state.area === area) {
- this.updateProgress(anyPromiseInProgress);
- }
- });
- }
-
- componentDidMount() {
- this.updateProgress(
- Boolean(getCounter(this.state.area) > 0),
- this.subscribeToCounterUpdate
- );
- }
-
- componentWillUnmount() {
- emitter.off(promiseCounterUpdateEventId);
- }
-
- render() {
- return (
-
- )
- }
- }
-}
+import React, { Component } from 'react';
+import {
+ emitter,
+ getCounter,
+ promiseCounterUpdateEventId
+} from './trackPromise';
+import { setupConfig } from './setupConfig';
+
+// Props:
+// config: {
+// area: // can be null|undefined|'' (will default to DefaultArea) or area name
+// delay: // Wait Xms to display the spinner (fast connections scenario avoid blinking)
+// default value 0ms
+// }
+export const promiseTrackerHoc = ComponentToWrap => {
+ return class promiseTrackerComponent extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ promiseInProgress: false,
+ internalPromiseInProgress: false,
+ config: setupConfig(props.config)
+ };
+
+ this.notifyPromiseInProgress = this.notifyPromiseInProgress.bind(this);
+ this.updateProgress = this.updateProgress.bind(this);
+ this.subscribeToCounterUpdate = this.subscribeToCounterUpdate.bind(this);
+ }
+
+ notifyPromiseInProgress() {
+ this.state.config.delay === 0
+ ? this.setState({ promiseInProgress: true })
+ : setTimeout(() => {
+ this.setState({ promiseInProgress: true });
+ }, this.state.config.delay);
+ }
+
+ updateProgress(progress, afterUpdateCallback) {
+ this.setState(
+ { internalPromiseInProgress: progress },
+ afterUpdateCallback
+ );
+
+ !progress
+ ? this.setState({ promiseInProgress: false })
+ : this.notifyPromiseInProgress();
+ }
+
+ subscribeToCounterUpdate() {
+ emitter.on(promiseCounterUpdateEventId, (anyPromiseInProgress, area) => {
+ if (this.state.config.area === area) {
+ this.updateProgress(anyPromiseInProgress);
+ }
+ });
+ }
+
+ componentDidMount() {
+ this.updateProgress(
+ Boolean(getCounter(this.state.config.area) > 0),
+ this.subscribeToCounterUpdate
+ );
+ }
+
+ componentWillUnmount() {
+ emitter.off(promiseCounterUpdateEventId);
+ }
+
+ render() {
+ return (
+
+ );
+ }
+ };
+};
diff --git a/src/trackerHoc.test.js b/src/trackerHoc.test.js
index 3e25a12..e3dae2a 100644
--- a/src/trackerHoc.test.js
+++ b/src/trackerHoc.test.js
@@ -1,91 +1,535 @@
-import React from 'react';
-import { promiseTrackerHoc } from './trackerHoc';
-import * as trackPromiseAPI from './trackPromise';
-
-describe('trackerHoc', () => {
- it('should render component with trackedPromiseInProgress equals false and area equals "default-area" when render promiseTrackerHoc', () => {
- // Arrange
- const TestSpinnerComponent = (props) => test;
-
- // Act
- const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
-
- // Assert
- const component = mount(
- ,
- );
-
- expect(component).toMatchSnapshot();
- });
-
- it('should render component with trackedPromiseInProgress equals false, area equals "default-area" and customProp equals "test" when feeding customProp equals "test"', () => {
- // Arrange
- const TestSpinnerComponent = (props) => test;
-
- // Act
- const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
-
- // Assert
- const component = mount(
- ,
- );
-
- expect(component).toMatchSnapshot();
- });
-
- it('should render component with trackedPromiseInProgress equals false and area equals "testArea" when feeding area equals "testArea"', () => {
- // Arrange
- const TestSpinnerComponent = (props) => test;
-
- // Act
- const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
-
- // Assert
- const component = mount(
- ,
- );
-
- expect(component).toMatchSnapshot();
- });
-
- it('should render component with trackedPromiseInProgress equals false when counter is 0', () => {
- // Arrange
- const TestSpinnerComponent = (props) => test;
- trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
-
- // Act
- const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
-
- // Assert
- const component = mount(
- ,
- );
-
- expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
- expect(component).toMatchSnapshot();
- });
-
- it('should render component with trackedPromiseInProgress equals true when counter is 1', () => {
- // Arrange
- const TestSpinnerComponent = (props) => test;
- trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
-
- // Act
- const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
-
- // Assert
- const component = mount(
- ,
- );
-
- expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
- expect(component).toMatchSnapshot();
- });
-});
+import React from "react";
+import { promiseTrackerHoc } from "./trackerHoc";
+import * as trackPromiseAPI from "./trackPromise";
+import { defaultArea } from "./constants";
+
+describe("trackerHoc", () => {
+ describe("Initial Status", () => {
+ it('should render component with trackedPromiseInProgress equals false and area equals "default-area" when render promiseTrackerHoc without props', () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(component).toMatchSnapshot();
+ });
+
+ it('should render component with trackedPromiseInProgress equals false, area equals "default-area" and customProp equals "test" when feeding customProp equals "test"', () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(component).toMatchSnapshot();
+ });
+
+ it('should render component with trackedPromiseInProgress equals false and area equals "testArea" when feeding area equals "testArea"', () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and emit event with progress equals false", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = false;
+ const area = defaultArea;
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and emit event with progress equals false to different area", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = false;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 0 and emit event with progress equals true", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = true;
+ const area = defaultArea;
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and emit event with progress equals true to different area", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = true;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 1", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 1 and emit event with progress equals true", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ const progress = true;
+ const area = defaultArea;
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 1 and emit event with progress equals true to different area", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ const progress = true;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 1 and emit event with progress equals false", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ const progress = false;
+ const area = defaultArea;
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 1 and emit event with progress equals false to different area", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ const progress = false;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it('should render component with trackedPromiseInProgress equals false and area equals "testArea" when feeding area equals "testArea" and delay equals 300', () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and emit event with progress equals false and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = false;
+ const area = defaultArea;
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and emit event with progress equals false to different area and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = false;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 0 and emit event with progress equals true and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = true;
+ const area = defaultArea;
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+ const setTimeoutStub = jest
+ .spyOn(window, "setTimeout")
+ .mockImplementation(callback => callback());
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and emit event with progress equals true to different area and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = true;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 1 and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 1 and emit event with progress equals true and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ const progress = true;
+ const area = defaultArea;
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 1 and emit event with progress equals true to different area and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ const progress = true;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 1 and emit event with progress equals false and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ const progress = false;
+ const area = defaultArea;
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals true when counter is 1 and emit event with progress equals false to different area and delay equals 300", () => {
+ // Arrange
+ const TestSpinnerComponent = props => test;
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ const progress = false;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+
+ // Assert
+ const component = mount();
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+ });
+
+ describe("Handling delay timeouts", () => {
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+
+ afterAll(() => {
+ jest.useRealTimers();
+ });
+
+ it("should render
NO SPINNER when counter is 1 but delay is set to 300 (before timing out)", done => {
+ // Arrange
+ const TestSpinnerComponent = props => {
+ return (
+
+ {props.promiseInProgress ?
SPINNER
: NO SPINNER
}
+
+ );
+ };
+
+ const getCounterStub = jest
+ .spyOn(trackPromiseAPI, "getCounter")
+ .mockReturnValue(0);
+
+ // Act
+ const TrackedComponent = promiseTrackerHoc(TestSpinnerComponent);
+ const component = mount();
+
+ // Check very beginning (no promises going on) NO SPINNER is shown
+ // TODO: this assert could be skipped (move to another test)
+ expect(component.text()).toEqual("NO SPINNER");
+ expect(getCounterStub).toHaveBeenCalled();
+
+ // Assert
+ // This promise will resolved after 1 seconds, by doing this
+ // we will be able to test 2 scenarios:
+ // [0] first 200ms spinner won't be shown (text NOSPINNER)
+ // [1] after 200ms spinner will be shown (text SPINNER)
+ // [2] after 1000ms spinner will be hidded again (text NOSPINNER)
+
+ const myFakePromise = new Promise(resolve => {
+ setTimeout(() => {
+ resolve(true);
+ }, 1000);
+ });
+
+ trackPromiseAPI.trackPromise(myFakePromise);
+
+ jest.advanceTimersByTime(100);
+
+ // [0] first 200ms spinner won't be shown (text NOSPINNER)
+ expect(component.text()).toEqual("NO SPINNER");
+
+ jest.advanceTimersByTime(300);
+
+ // Before the promise get's resolved
+ // [1] after 200ms spinner will be shown (text SPINNER)
+ expect(component.text()).toEqual("SPINNER");
+
+ // After the promise get's resolved
+ jest.runAllTimers();
+
+ // [2] after 1000ms spinner will be hidded again (text NOSPINNER)
+ // Wait for fakePromise (simulated ajax call) to be completed
+ // no spinner should be shown
+
+ myFakePromise.then(() => {
+ expect(component.text()).toEqual("NO SPINNER");
+ done();
+ });
+ });
+ });
+});
diff --git a/src/trackerHook.js b/src/trackerHook.js
new file mode 100644
index 0000000..2ff6225
--- /dev/null
+++ b/src/trackerHook.js
@@ -0,0 +1,80 @@
+import React from "react";
+import { emitter, promiseCounterUpdateEventId, getCounter} from "./trackPromise";
+import { defaultConfig, setupConfig } from './setupConfig';
+
+
+export const usePromiseTracker = (outerConfig = defaultConfig) => {
+ // Included in state, it will be evaluated just the first time,
+ // TODO: discuss if this is a good approach
+ // We need to apply defensive programming, ensure area and delay default to secure data
+ // cover cases like not all params informed, set secure defaults
+ const [config] = React.useState(setupConfig(outerConfig));
+
+ // Edge case, when we start the application if we are loading just onComponentDidMount
+ // data, event emitter could have already emitted the event but subscription is not yet
+ // setup
+ React.useEffect(() => {
+ if(config && config.area && getCounter(config.area) > 0) {
+ setInternalPromiseInProgress(true);
+ setInternalPromiseInProgress(true);
+ setPromiseInProgress(true);
+ }
+ }, config)
+
+ // Internal will hold the current value
+ const [
+ internalPromiseInProgress,
+ setInternalPromiseInProgress
+ ] = React.useState(false);
+ // Promise in progress is 'public', it can be affected by the _delay_ parameter
+ // it may not show the current state
+ const [promiseInProgress, setPromiseInProgress] = React.useState(false);
+
+ // We need to hold a ref to latestInternal, to check the real value on
+ // callbacks (if not we would get always the same value)
+ // more info: https://overreacted.io/a-complete-guide-to-useeffect/
+ const latestInternalPromiseInProgress = React.useRef(
+ internalPromiseInProgress
+ );
+
+ const notifiyPromiseInProgress = () => {
+ (!config || !config.delay || config.delay === 0) ?
+ setPromiseInProgress(true)
+ :
+ setTimeout(() => {
+ // Check here ref to internalPromiseInProgress
+ if (latestInternalPromiseInProgress.current) {
+ setPromiseInProgress(true);
+ }
+ }, config.delay);
+ };
+
+ const updatePromiseTrackerStatus = (anyPromiseInProgress, areaAffected) => {
+ if (config.area === areaAffected) {
+ setInternalPromiseInProgress(anyPromiseInProgress);
+ // Update the ref object as well, we will check it when we need to
+ // cover the _delay_ case (setTimeout)
+ latestInternalPromiseInProgress.current = anyPromiseInProgress;
+ if (!anyPromiseInProgress) {
+ setPromiseInProgress(false);
+ } else {
+ notifiyPromiseInProgress();
+ }
+ }
+ };
+
+ React.useEffect(() => {
+ latestInternalPromiseInProgress.current = internalPromiseInProgress;
+ emitter.on(promiseCounterUpdateEventId,
+ (anyPromiseInProgress, areaAffected) => {
+ updatePromiseTrackerStatus(anyPromiseInProgress, areaAffected);
+ }
+ );
+
+ return () => {
+ emitter.off(promiseCounterUpdateEventId);
+ };
+ }, []);
+
+ return { promiseInProgress };
+};
diff --git a/src/trackerHook.test.js b/src/trackerHook.test.js
new file mode 100644
index 0000000..dd7b73c
--- /dev/null
+++ b/src/trackerHook.test.js
@@ -0,0 +1,255 @@
+import React from "react";
+import { usePromiseTracker } from "./trackerHook";
+import * as trackPromiseAPI from "./trackPromise";
+import { act } from "react-dom/test-utils"; // ES6
+
+describe("trackerHook", () => {
+ describe("Initial Status", () => {
+ it("renders without crashing", () => {
+ // Arrange
+ const TestSpinnerComponent = props => {
+ const { promiseInProgress } = usePromiseTracker();
+
+ return test;
+ };
+
+ // Act
+ const component = mount();
+
+ // Assert
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0", () => {
+ // Arrange
+ const TestSpinnerComponent = props => {
+ const { promiseInProgress } = usePromiseTracker();
+
+ return test;
+ };
+
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ // Act
+ const component = mount();
+
+ // Assert
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and emit event with progress equals false to different area", () => {
+ // Arrange
+ const TestSpinnerComponent = props => {
+ const { promiseInProgress } = usePromiseTracker();
+
+ return test;
+ };
+
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = false;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const component = mount();
+
+ // Assert
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render component with trackedPromiseInProgress equals false when counter is 0 and emit event with progress equals true to different area", () => {
+ // Arrange
+ const TestSpinnerComponent = props => {
+ const { promiseInProgress } = usePromiseTracker();
+
+ return test;
+ };
+
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ const progress = true;
+ const area = "otherArea";
+ const emitterStub = jest
+ .spyOn(trackPromiseAPI.emitter, "on")
+ .mockImplementation((id, callback) => callback(progress, area));
+
+ // Act
+ const component = mount();
+
+ // Assert
+
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ expect(component).toMatchSnapshot();
+ });
+
+ it("should render No Spinner
when counter is 0", () => {
+ // Arrange
+ const TestSpinnerComponent = props => {
+ const { promiseInProgress } = usePromiseTracker();
+
+ return (
+
+ {promiseInProgress ?
SPINNER
: NO SPINNER
}
+
+ );
+ };
+
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+
+ // Act
+ const component = mount();
+
+ // Assert
+
+ expect(component.find("h2")).toHaveLength(1);
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ });
+
+ it("should render Spinner
when counter is 1", () => {
+ // Arrange
+ const TestSpinnerComponent = props => {
+ const { promiseInProgress } = usePromiseTracker();
+
+ return (
+
+ {promiseInProgress ?
SPINNER
: NO SPINNER
}
+
+ );
+ };
+
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 1);
+
+ // Act
+ const component = mount();
+
+ // Assert
+
+ expect(component.find("h1")).toHaveLength(1);
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+ });
+
+ it('should render component with trackedPromiseInProgress equals false and area equals "testArea" when feeding area equals "testArea" and delay equals 300', () => {
+ // Arrange
+ const TestSpinnerComponent = props => {
+ const { promiseInProgress } = usePromiseTracker({
+ area: "testArea",
+ delay: 300
+ });
+
+ return test;
+ };
+
+ // Act
+ const component = mount();
+
+ // Assert
+
+ expect(component).toMatchSnapshot();
+ });
+ });
+
+ describe("Handling delay timeouts", () => {
+ beforeEach(() => {
+ jest.useFakeTimers();
+ });
+
+ afterAll(() => {
+ jest.useRealTimers();
+ });
+
+ it("should render NO SPINNER when counter is 1 but delay is set to 200 (before timing out)", done => {
+ // Arrange
+ let TestSpinnerComponent = null;
+ act(() => {
+ TestSpinnerComponent = props => {
+ // Do not show spinner in the first 200 milliseconds (delay)
+ const { promiseInProgress } = usePromiseTracker({ delay: 200 });
+
+ return (
+
+ {promiseInProgress ?
SPINNER
: NO SPINNER
}
+
+ );
+ };
+
+ trackPromiseAPI.getCounter = jest.fn().mockImplementation(() => 0);
+ });
+
+ // Act
+ let component = null;
+
+ act(() => {
+ component = mount();
+ });
+
+ // Check very beginning (no promises going on) NO SPINNER is shown
+ // TODO: this assert could be skipped (move to another test)
+ expect(component.text()).toEqual("NO SPINNER");
+ expect(trackPromiseAPI.getCounter).toHaveBeenCalled();
+
+ // Assert
+ // This promise will resolved after 1 seconds, by doing this
+ // we will be able to test 2 scenarios:
+ // [0] first 200ms spinner won't be shown (text NOSPINNER)
+ // [1] after 200ms spinner will be shown (text SPINNER)
+ // [2] after 1000ms spinner will be hidded again (text NOSPINNER)
+ let myFakePromise = null;
+
+ act(() => {
+ myFakePromise = new Promise(resolve => {
+ setTimeout(() => {
+ resolve(true);
+ }, 1000);
+ });
+ });
+
+ act(() => {
+ trackPromiseAPI.trackPromise(myFakePromise);
+
+ // Runs all pending timers. whether it's a second from now or a year.
+ // https://jestjs.io/docs/en/timer-mocks.html
+ //jest.advanceTimersByTime(300);
+ });
+
+ act(() => {
+ // Runs all pending timers. whether it's a second from now or a year.
+ // https://jestjs.io/docs/en/timer-mocks.html
+ jest.advanceTimersByTime(100);
+ });
+
+ // [0] first 200ms spinner won't be shown (text NOSPINNER)
+ expect(component.text()).toEqual("NO SPINNER");
+
+ act(() => {
+ // Runs all pending timers. whether it's a second from now or a year.
+ // https://jestjs.io/docs/en/timer-mocks.html
+ jest.advanceTimersByTime(300);
+ });
+
+ // Before the promise get's resolved
+ // [1] after 200ms spinner will be shown (text SPINNER)
+ expect(component.text()).toEqual("SPINNER");
+
+ // After the promise get's resolved
+
+ act(() => {
+ jest.runAllTimers();
+ });
+
+ // [2] after 1000ms spinner will be hidded again (text NOSPINNER)
+ // Wait for fakePromise (simulated ajax call) to be completed
+ // no spinner should be shown
+ act(() => {
+ myFakePromise.then(() => {
+ expect(component.text()).toEqual("NO SPINNER");
+ done();
+ });
+ });
+ });
+ });
+});
diff --git a/test/shim.js b/test/shim.js
deleted file mode 100644
index bea6cad..0000000
--- a/test/shim.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// https://github.com/facebook/jest/issues/4545#issuecomment-332762365
-global.requestAnimationFrame = (callback) => {
- setTimeout(callback, 0);
-};
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
deleted file mode 100644
index 2dacb59..0000000
--- a/webpack.config.babel.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import webpack from 'webpack';
-import path from 'path';
-
-const NODE_ENV = process.env.NODE_ENV;
-
-const version = JSON.stringify(process.env.npm_package_version).replace(/"/g, '');
-const filename = `react-promise-tracker-${version}${NODE_ENV === 'production' ? '.min' : ''}.js`;
-
-export default {
- entry: ['./src/index.js'],
- output: {
- path: path.join(__dirname, 'dist'),
- filename,
- library: {
- root: 'ReactPromiseTracker',
- amd: 'react-promise-tracker',
- commonjs: 'react-promise-tracker',
- },
- libraryTarget: 'umd',
- },
- externals: {
- react: {
- commonjs: 'react',
- commonjs2: 'react',
- amd: 'react',
- },
- },
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- loader: 'babel-loader',
- },
- ],
- },
-};