@applicaster/zapp-react-native-ui-components 15.0.0-rc.35 → 15.0.0-rc.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/Components/ScreenRevealManager/ScreenRevealManager.ts +40 -8
  2. package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts +86 -69
  3. package/package.json +5 -5
package/Components/ScreenRevealManager/ScreenRevealManager.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
2
2
  import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
3
- import { once } from "ramda";
3
+ import { race, Subject, Subscription } from "rxjs";
4
+ import { first } from "rxjs/operators";
5
+
6
+ import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
7
+
8
+ const MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD = 2000; // 2 seconds
4
9
 
5
10
  const INITIAL_NUMBER_TO_LOAD = 3;
6
11
 
@@ -34,7 +39,8 @@ const getNumberOfComponentsWaitToLoadBeforePresent = (
34
39
  export class ScreenRevealManager {
35
40
  public numberOfComponentsWaitToLoadBeforePresent: number;
36
41
  private renderingState: Array<ComponentLoadingState>;
37
- private callback: Callback;
42
+ private subject$ = new Subject<void>();
43
+ private subscription: Subscription;
38
44
 
39
45
  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
40
46
  this.numberOfComponentsWaitToLoadBeforePresent =
@@ -45,32 +51,58 @@ export class ScreenRevealManager {
45
51
  this.numberOfComponentsWaitToLoadBeforePresent
46
52
  );
47
53
 
48
- this.callback = once(callback);
54
+ this.subscription = race(
55
+ withTimeout$(MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD),
56
+ this.subject$
57
+ )
58
+ .pipe(first())
59
+ .subscribe(callback);
49
60
  }
50
61
 
51
62
  onLoadFinished = (index: number): void => {
63
+ const currentState = this.renderingState[index];
64
+
65
+ if (
66
+ COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
67
+ COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
68
+ ) {
69
+ return;
70
+ }
71
+
52
72
  this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
53
73
 
54
74
  if (
55
75
  getNumberOfLoaded(this.renderingState) >=
56
76
  this.numberOfComponentsWaitToLoadBeforePresent
57
77
  ) {
58
- this.setIsReadyToShow();
78
+ this.subject$.next();
79
+ this.subject$.complete();
59
80
  }
60
81
  };
61
82
 
62
83
  onLoadFailed = (index: number): void => {
84
+ const currentState = this.renderingState[index];
85
+
86
+ if (
87
+ COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
88
+ COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
89
+ ) {
90
+ return;
91
+ }
92
+
63
93
  this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
64
94
 
65
95
  if (
66
96
  getNumberOfLoaded(this.renderingState) >=
67
97
  this.numberOfComponentsWaitToLoadBeforePresent
68
98
  ) {
69
- this.setIsReadyToShow();
99
+ this.subject$.next();
100
+ this.subject$.complete();
70
101
  }
71
102
  };
72
103
 
73
- setIsReadyToShow = (): void => {
74
- this.callback();
75
- };
104
+ dispose(): void {
105
+ this.subscription?.unsubscribe();
106
+ this.subject$.complete();
107
+ }
76
108
  }
package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts CHANGED
@@ -2,106 +2,123 @@ import {
2
2
  ScreenRevealManager,
3
3
  COMPONENT_LOADING_STATE,
4
4
  } from "../ScreenRevealManager";
5
+ import { Subject } from "rxjs";
6
+
7
+ jest.mock("@applicaster/zapp-react-native-utils/arrayUtils", () => ({
8
+ makeListOf: jest.fn((value: any, length: number) =>
9
+ Array(length).fill(value)
10
+ ),
11
+ }));
12
+
13
+ jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
14
+ isFirstComponentGallery: jest.fn(),
15
+ }));
16
+
17
+ jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
18
+ withTimeout$: jest.fn(),
19
+ }));
20
+
21
+ import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
22
+ import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
23
+ import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
5
24
 
6
25
  describe("ScreenRevealManager", () => {
7
- const mockCallback = jest.fn();
26
+ let mockCallback: jest.Mock;
27
+ let timeout$: Subject<void>;
8
28
 
9
29
  beforeEach(() => {
10
- jest.clearAllMocks();
11
- });
12
-
13
- it("should initialize with the correct number of components to wait for", () => {
14
- const componentsToRender: ZappUIComponent[] = [
15
- { component_type: "component1" },
16
- { component_type: "component2" },
17
- { component_type: "component3" },
18
- ];
30
+ jest.useFakeTimers();
31
+ mockCallback = jest.fn();
32
+ timeout$ = new Subject();
19
33
 
20
- const manager = new ScreenRevealManager(componentsToRender, mockCallback);
34
+ (withTimeout$ as jest.Mock).mockReturnValue(timeout$);
35
+ (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
21
36
 
22
- expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
37
+ (makeListOf as jest.Mock).mockImplementation((value, length) =>
38
+ Array(length).fill(value)
39
+ );
40
+ });
23
41
 
24
- expect(manager.renderingState).toEqual([
25
- COMPONENT_LOADING_STATE.UNKNOWN,
26
- COMPONENT_LOADING_STATE.UNKNOWN,
27
- COMPONENT_LOADING_STATE.UNKNOWN,
28
- ]);
42
+ afterEach(() => {
43
+ jest.clearAllTimers();
44
+ jest.useRealTimers();
45
+ jest.resetAllMocks();
29
46
  });
30
47
 
31
- it("should call the callback when the required number of components are loaded successfully", () => {
32
- const componentsToRender: ZappUIComponent[] = [
33
- { component_type: "component1" },
34
- { component_type: "component2" },
35
- { component_type: "component3" },
36
- ];
48
+ // ────────────────────────────────────────────────
49
+ it("should initialize with correct number of components and UNKNOWN state", () => {
50
+ const components = new Array(5).fill({});
51
+ const mgr = new ScreenRevealManager(components, mockCallback);
37
52
 
38
- const manager = new ScreenRevealManager(componentsToRender, mockCallback);
53
+ expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
54
+ expect(makeListOf).toHaveBeenCalledWith(COMPONENT_LOADING_STATE.UNKNOWN, 3);
55
+ });
39
56
 
40
- manager.onLoadFinished(0);
41
- manager.onLoadFinished(1);
42
- manager.onLoadFinished(2);
57
+ // ────────────────────────────────────────────────
58
+ it("should set numberOfComponentsWaitToLoadBeforePresent to 1 if first component is gallery", () => {
59
+ (isFirstComponentGallery as jest.Mock).mockReturnValue(true);
43
60
 
44
- expect(mockCallback).toHaveBeenCalledTimes(1);
61
+ const components = new Array(5).fill({});
62
+ const mgr = new ScreenRevealManager(components, mockCallback);
63
+
64
+ expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(1);
45
65
  });
46
66
 
47
- it("should call the callback when the required number of components fail to load", () => {
48
- const componentsToRender: ZappUIComponent[] = [
49
- { component_type: "component1" },
50
- { component_type: "component2" },
51
- { component_type: "component3" },
52
- ];
67
+ // ────────────────────────────────────────────────
68
+ it("should trigger callback after all components load successfully", () => {
69
+ const components = new Array(3).fill({});
70
+ const mgr = new ScreenRevealManager(components, mockCallback);
53
71
 
54
- const manager = new ScreenRevealManager(componentsToRender, mockCallback);
72
+ mgr.onLoadFinished(0);
73
+ expect(mockCallback).not.toHaveBeenCalled();
55
74
 
56
- manager.onLoadFailed(0);
57
- manager.onLoadFailed(1);
58
- manager.onLoadFailed(2);
75
+ mgr.onLoadFinished(1);
76
+ expect(mockCallback).not.toHaveBeenCalled();
59
77
 
78
+ mgr.onLoadFinished(2);
60
79
  expect(mockCallback).toHaveBeenCalledTimes(1);
61
80
  });
62
81
 
63
- it("should call the callback when a mix of successful and failed loads meet the required number", () => {
64
- const componentsToRender: ZappUIComponent[] = [
65
- { component_type: "component1" },
66
- { component_type: "component2" },
67
- { component_type: "component3" },
68
- ];
69
-
70
- const manager = new ScreenRevealManager(componentsToRender, mockCallback);
82
+ // ────────────────────────────────────────────────
83
+ it("should trigger callback after some components fail to load but all finished", () => {
84
+ const components = new Array(3).fill({});
85
+ const mgr = new ScreenRevealManager(components, mockCallback);
71
86
 
72
- manager.onLoadFinished(0);
73
- manager.onLoadFailed(1);
74
- manager.onLoadFinished(2);
87
+ mgr.onLoadFinished(0);
88
+ mgr.onLoadFailed(1);
89
+ mgr.onLoadFailed(2);
75
90
 
76
91
  expect(mockCallback).toHaveBeenCalledTimes(1);
77
92
  });
78
93
 
79
- it("should not call the callback if the required number of components are not loaded", () => {
80
- const componentsToRender: ZappUIComponent[] = [
81
- { component_type: "component1" },
82
- { component_type: "component2" },
83
- { component_type: "component3" },
84
- ];
85
-
86
- const manager = new ScreenRevealManager(componentsToRender, mockCallback);
94
+ // ────────────────────────────────────────────────
95
+ it("should not trigger callback twice when same component finishes twice", () => {
96
+ const components = new Array(3).fill({});
97
+ const mgr = new ScreenRevealManager(components, mockCallback);
87
98
 
88
- manager.onLoadFinished(0);
89
- manager.onLoadFailed(1);
99
+ mgr.onLoadFinished(0);
100
+ mgr.onLoadFinished(0); // duplicate
101
+ mgr.onLoadFinished(1);
102
+ mgr.onLoadFinished(2);
90
103
 
91
- expect(mockCallback).not.toHaveBeenCalled();
104
+ expect(mockCallback).toHaveBeenCalledTimes(1);
92
105
  });
93
106
 
94
- it("should call the callback when the when first component is gallery and it was loaded successfully", () => {
95
- const componentsToRender: ZappUIComponent[] = [
96
- { component_type: "gallery-qb" },
97
- { component_type: "component2" },
98
- { component_type: "component3" },
99
- ];
107
+ // ────────────────────────────────────────────────
108
+ it("should trigger callback when timeout$ emits before all loaded", () => {
109
+ const components = new Array(3).fill({});
110
+ new ScreenRevealManager(components, mockCallback);
100
111
 
101
- const manager = new ScreenRevealManager(componentsToRender, mockCallback);
102
-
103
- manager.onLoadFinished(0);
112
+ timeout$.next(); // simulate timeout event from withTimeout$
104
113
 
105
114
  expect(mockCallback).toHaveBeenCalledTimes(1);
106
115
  });
116
+
117
+ // ────────────────────────────────────────────────
118
+ it("should not call callback if nothing loads and no timeout emitted", () => {
119
+ const components = new Array(3).fill({});
120
+ new ScreenRevealManager(components, mockCallback);
121
+
122
+ expect(mockCallback).not.toHaveBeenCalled();
123
+ });
107
124
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@applicaster/zapp-react-native-ui-components",
3
- "version": "15.0.0-rc.35",
3
+ "version": "15.0.0-rc.37",
4
4
  "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
@@ -28,10 +28,10 @@
28
28
  },
29
29
  "homepage": "https://github.com/applicaster/quickbrick#readme",
30
30
  "dependencies": {
31
- "@applicaster/applicaster-types": "15.0.0-rc.35",
32
- "@applicaster/zapp-react-native-bridge": "15.0.0-rc.35",
33
- "@applicaster/zapp-react-native-redux": "15.0.0-rc.35",
34
- "@applicaster/zapp-react-native-utils": "15.0.0-rc.35",
31
+ "@applicaster/applicaster-types": "15.0.0-rc.37",
32
+ "@applicaster/zapp-react-native-bridge": "15.0.0-rc.37",
33
+ "@applicaster/zapp-react-native-redux": "15.0.0-rc.37",
34
+ "@applicaster/zapp-react-native-utils": "15.0.0-rc.37",
35
35
  "promise": "^8.3.0",
36
36
  "url": "^0.11.0",
37
37
  "uuid": "^3.3.2"