@applicaster/zapp-react-native-app 12.0.0-alpha.4155487673 → 12.0.0-alpha.4173603919
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.
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Layout should match snapshot when appReady is true 1`] = `
|
|
4
|
+
<RNCSafeAreaProvider
|
|
5
|
+
onInsetsChange={[Function]}
|
|
6
|
+
style={
|
|
7
|
+
Array [
|
|
8
|
+
Object {
|
|
9
|
+
"flex": 1,
|
|
10
|
+
},
|
|
11
|
+
undefined,
|
|
12
|
+
]
|
|
13
|
+
}
|
|
14
|
+
>
|
|
15
|
+
<View
|
|
16
|
+
onLayout={[Function]}
|
|
17
|
+
style={
|
|
18
|
+
Object {
|
|
19
|
+
"flex": 1,
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
testID="on-layout-view"
|
|
23
|
+
>
|
|
24
|
+
<View
|
|
25
|
+
style={
|
|
26
|
+
Object {
|
|
27
|
+
"display": "none",
|
|
28
|
+
"flex": 1,
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
>
|
|
32
|
+
<View
|
|
33
|
+
style={
|
|
34
|
+
Object {
|
|
35
|
+
"height": "100%",
|
|
36
|
+
"opacity": 1,
|
|
37
|
+
"paddingBottom": 50,
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
>
|
|
41
|
+
<View
|
|
42
|
+
contentStyle={
|
|
43
|
+
Object {
|
|
44
|
+
"height": "100%",
|
|
45
|
+
"opacity": 1,
|
|
46
|
+
"paddingBottom": 50,
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
isRTL={false}
|
|
50
|
+
testID="transitioner"
|
|
51
|
+
transitionConfig={[Function]}
|
|
52
|
+
>
|
|
53
|
+
<View
|
|
54
|
+
pathname="home"
|
|
55
|
+
screenData={Object {}}
|
|
56
|
+
/>
|
|
57
|
+
</View>
|
|
58
|
+
</View>
|
|
59
|
+
<View
|
|
60
|
+
bottomTabBarHeight={50}
|
|
61
|
+
closeMenu={[MockFunction]}
|
|
62
|
+
dimensions={
|
|
63
|
+
Object {
|
|
64
|
+
"window": Object {
|
|
65
|
+
"height": 100,
|
|
66
|
+
"width": 100,
|
|
67
|
+
},
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
id="home"
|
|
71
|
+
isRTL={false}
|
|
72
|
+
navigator={
|
|
73
|
+
Object {
|
|
74
|
+
"activeRiver": Object {
|
|
75
|
+
"navigations": Array [],
|
|
76
|
+
},
|
|
77
|
+
"currentRoute": "home",
|
|
78
|
+
"data": Object {},
|
|
79
|
+
"isVideoModalDocked": false,
|
|
80
|
+
"videoModalState": Object {
|
|
81
|
+
"mode": "MINIMIZED",
|
|
82
|
+
"visible": false,
|
|
83
|
+
},
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
openMenu={[MockFunction]}
|
|
87
|
+
setCloseMenu={[MockFunction]}
|
|
88
|
+
setOpenMenu={[MockFunction]}
|
|
89
|
+
setToggleMenu={[MockFunction]}
|
|
90
|
+
testID="menu"
|
|
91
|
+
toggleMenu={[MockFunction]}
|
|
92
|
+
/>
|
|
93
|
+
<View
|
|
94
|
+
testID="zappHooksModal"
|
|
95
|
+
/>
|
|
96
|
+
</View>
|
|
97
|
+
</View>
|
|
98
|
+
</RNCSafeAreaProvider>
|
|
99
|
+
`;
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { View } from "react-native";
|
|
3
|
+
import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
|
|
4
|
+
|
|
5
|
+
const mockUseMenuToggleContext = jest.fn(() => ({
|
|
6
|
+
toggleMenu: jest.fn(),
|
|
7
|
+
setToggleMenu: jest.fn(),
|
|
8
|
+
openMenu: jest.fn(),
|
|
9
|
+
setOpenMenu: jest.fn(),
|
|
10
|
+
closeMenu: jest.fn(),
|
|
11
|
+
setCloseMenu: jest.fn(),
|
|
12
|
+
}));
|
|
13
|
+
|
|
14
|
+
jest.mock("../layoutHelpers", () => ({
|
|
15
|
+
// eslint-disable-next-line react/display-name
|
|
16
|
+
getNavigationPluginModule: () => (props) => <View testID="menu" {...props} />,
|
|
17
|
+
}));
|
|
18
|
+
|
|
19
|
+
jest.mock(
|
|
20
|
+
"@applicaster/zapp-react-native-ui-components/Components/Transitioner",
|
|
21
|
+
() => ({
|
|
22
|
+
// eslint-disable-next-line react/display-name
|
|
23
|
+
Transitioner: (props) => <View testID="transitioner" {...props} />,
|
|
24
|
+
})
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
jest.mock(
|
|
28
|
+
"@applicaster/zapp-react-native-ui-components/Components/Screen",
|
|
29
|
+
() => ({
|
|
30
|
+
// eslint-disable-next-line react/display-name
|
|
31
|
+
Screen: (props) => <View {...props} />,
|
|
32
|
+
})
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
jest.mock(
|
|
36
|
+
"@applicaster/zapp-react-native-ui-components/Contexts/MenuToggleContext",
|
|
37
|
+
() => ({
|
|
38
|
+
useMenuToggleContext: mockUseMenuToggleContext,
|
|
39
|
+
})
|
|
40
|
+
);
|
|
41
|
+
|
|
42
|
+
const mockUseNavigation = jest.fn();
|
|
43
|
+
|
|
44
|
+
jest.mock(
|
|
45
|
+
"@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
|
|
46
|
+
() => ({
|
|
47
|
+
useNavigation: mockUseNavigation,
|
|
48
|
+
})
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
|
|
52
|
+
...(jest.requireActual(
|
|
53
|
+
"@applicaster/zapp-react-native-utils/reactHooks/navigation"
|
|
54
|
+
) as {}),
|
|
55
|
+
useGetBottomTabBarHeight: jest.fn(() => 50),
|
|
56
|
+
}));
|
|
57
|
+
|
|
58
|
+
jest.mock(
|
|
59
|
+
"@applicaster/zapp-react-native-utils/reactHooks/layout/useDimensions",
|
|
60
|
+
() => ({
|
|
61
|
+
useDimensions: jest.fn(() => ({ width: 100, height: 100 })),
|
|
62
|
+
})
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
jest.mock(
|
|
66
|
+
"@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
|
|
67
|
+
() => ({
|
|
68
|
+
useNavbarState: jest.fn(() => ({ title: "Test Title" })),
|
|
69
|
+
})
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
|
|
73
|
+
useIsRTL: jest.fn(() => false),
|
|
74
|
+
}));
|
|
75
|
+
|
|
76
|
+
jest.mock(
|
|
77
|
+
"@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext",
|
|
78
|
+
() => ({
|
|
79
|
+
...(jest.requireActual(
|
|
80
|
+
"@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext"
|
|
81
|
+
) as {}),
|
|
82
|
+
useModalAnimationContext: jest.fn(() => ({
|
|
83
|
+
isActiveGesture: false,
|
|
84
|
+
})),
|
|
85
|
+
})
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
jest.mock(
|
|
89
|
+
"@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler",
|
|
90
|
+
() => ({
|
|
91
|
+
isMenuVisible: jest.fn(() => true),
|
|
92
|
+
})
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
jest.mock(
|
|
96
|
+
"@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal",
|
|
97
|
+
() => ({
|
|
98
|
+
// eslint-disable-next-line react/display-name
|
|
99
|
+
ZappHooksModal: (props) => <View testID="zappHooksModal" {...props} />,
|
|
100
|
+
})
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
jest.mock(
|
|
104
|
+
"@applicaster/zapp-react-native-ui-components/Components/VideoModal",
|
|
105
|
+
() => ({
|
|
106
|
+
// eslint-disable-next-line react/display-name
|
|
107
|
+
VideoModal: (props) => <View testID="videoModal" {...props} />,
|
|
108
|
+
})
|
|
109
|
+
);
|
|
110
|
+
|
|
111
|
+
jest.mock("@applicaster/zapp-react-native-utils/navigationUtils", () => ({
|
|
112
|
+
getNavigationProps: () => ({}),
|
|
113
|
+
resolveNavigationPlugin: () => ({
|
|
114
|
+
identifier: "quick-brick-bottom-tabs",
|
|
115
|
+
}),
|
|
116
|
+
}));
|
|
117
|
+
|
|
118
|
+
const { Layout } = require("../");
|
|
119
|
+
|
|
120
|
+
describe("Layout", () => {
|
|
121
|
+
beforeEach(() => {
|
|
122
|
+
jest.clearAllMocks();
|
|
123
|
+
|
|
124
|
+
mockUseNavigation.mockImplementation(() => ({
|
|
125
|
+
activeRiver: { navigations: [] },
|
|
126
|
+
videoModalState: { visible: false, mode: "MINIMIZED" },
|
|
127
|
+
isVideoModalDocked: false,
|
|
128
|
+
currentRoute: "home",
|
|
129
|
+
data: {},
|
|
130
|
+
}));
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
it("should match snapshot when appReady is true", () => {
|
|
134
|
+
const { toJSON } = renderWithProviders(<Layout />);
|
|
135
|
+
expect(toJSON()).toMatchSnapshot();
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
it("should not render transitioner with screen when appReady is false", () => {
|
|
139
|
+
const { queryByTestId } = renderWithProviders(<Layout />, {
|
|
140
|
+
appState: {
|
|
141
|
+
appReady: false,
|
|
142
|
+
appLaunched: true,
|
|
143
|
+
},
|
|
144
|
+
});
|
|
145
|
+
|
|
146
|
+
expect(queryByTestId("transitioner")).toBeNull();
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
it("should render menu when showMenu is true", () => {
|
|
150
|
+
const { getByTestId } = renderWithProviders(<Layout />);
|
|
151
|
+
expect(getByTestId("menu")).toBeTruthy();
|
|
152
|
+
});
|
|
153
|
+
|
|
154
|
+
it("should render VideoModal when visible & VideoModal is true", () => {
|
|
155
|
+
mockUseNavigation.mockReturnValue({
|
|
156
|
+
activeRiver: { navigations: [] },
|
|
157
|
+
videoModalState: { visible: true, mode: "MINIMIZED" },
|
|
158
|
+
isVideoModalDocked: false,
|
|
159
|
+
currentRoute: "home",
|
|
160
|
+
data: {},
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
const { getByTestId } = renderWithProviders(<Layout />);
|
|
164
|
+
expect(getByTestId("videoModal")).toBeTruthy();
|
|
165
|
+
});
|
|
166
|
+
|
|
167
|
+
it("should render ZappHooksModal", () => {
|
|
168
|
+
const { getByTestId } = renderWithProviders(<Layout />);
|
|
169
|
+
expect(getByTestId("zappHooksModal")).toBeTruthy();
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
it("padding should be non-0 when showMenu is true and isBottomTabsPlugin is true", () => {
|
|
173
|
+
mockUseNavigation.mockReturnValueOnce({
|
|
174
|
+
activeRiver: { navigations: [{ identifier: "quick-brick-bottom-tabs" }] },
|
|
175
|
+
videoModalState: { visible: false, mode: "MINIMIZED" },
|
|
176
|
+
isVideoModalDocked: false,
|
|
177
|
+
currentRoute: "home",
|
|
178
|
+
data: {},
|
|
179
|
+
});
|
|
180
|
+
|
|
181
|
+
const { getByTestId } = renderWithProviders(<Layout />);
|
|
182
|
+
|
|
183
|
+
expect(getByTestId("transitioner").props.contentStyle.paddingBottom).toBe(
|
|
184
|
+
50
|
|
185
|
+
);
|
|
186
|
+
});
|
|
187
|
+
|
|
188
|
+
it("transitioner should have contentStyle with specific styles", () => {
|
|
189
|
+
const { getByTestId } = renderWithProviders(<Layout />);
|
|
190
|
+
|
|
191
|
+
expect(getByTestId("transitioner").props.contentStyle).toEqual({
|
|
192
|
+
height: "100%",
|
|
193
|
+
paddingBottom: 50,
|
|
194
|
+
opacity: 1,
|
|
195
|
+
});
|
|
196
|
+
});
|
|
197
|
+
});
|
package/App/Layout/index.tsx
CHANGED
|
@@ -113,19 +113,17 @@ const LayoutWithMenu = () => {
|
|
|
113
113
|
|
|
114
114
|
const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
|
|
115
115
|
|
|
116
|
-
const
|
|
116
|
+
const paddingBottom = React.useMemo(() => {
|
|
117
|
+
return showMenu && isBottomTabsPlugin ? bottomTabBarHeight : 0; // if activeRiver?.navigations has quick-brick-bottom-tabs - append bottomTabBarHeight as padding
|
|
118
|
+
}, [showMenu, isBottomTabsPlugin, bottomTabBarHeight]);
|
|
117
119
|
|
|
118
120
|
const contentStyle = React.useMemo(
|
|
119
121
|
() => ({
|
|
120
|
-
...(shouldApplyStyleForBottomTabs
|
|
121
|
-
? {
|
|
122
|
-
paddingBottom: bottomTabBarHeight,
|
|
123
|
-
}
|
|
124
|
-
: {}),
|
|
125
122
|
...containerStyle,
|
|
123
|
+
paddingBottom,
|
|
126
124
|
opacity: videoModalState.visible && !isVideoModalDocked ? 0 : 1,
|
|
127
125
|
}),
|
|
128
|
-
[
|
|
126
|
+
[videoModalState.visible, isVideoModalDocked, paddingBottom]
|
|
129
127
|
);
|
|
130
128
|
|
|
131
129
|
const menuProps = React.useMemo(() => {
|
|
@@ -172,7 +170,7 @@ const LayoutWithMenu = () => {
|
|
|
172
170
|
<View style={contentStyle}>
|
|
173
171
|
<Transitioner
|
|
174
172
|
transitionConfig={transitionConfig}
|
|
175
|
-
contentStyle={
|
|
173
|
+
contentStyle={contentStyle}
|
|
176
174
|
isRTL={isRTL}
|
|
177
175
|
>
|
|
178
176
|
<Screen
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@applicaster/zapp-react-native-app",
|
|
3
|
-
"version": "12.0.0-alpha.
|
|
3
|
+
"version": "12.0.0-alpha.4173603919",
|
|
4
4
|
"description": "Zapp App Component for Applicaster's Quick Brick React Native App",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
},
|
|
30
30
|
"homepage": "https://github.com/applicaster/quickbrick#readme",
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@applicaster/quick-brick-core": "12.0.0-alpha.
|
|
33
|
-
"@applicaster/zapp-react-native-bridge": "12.0.0-alpha.
|
|
34
|
-
"@applicaster/zapp-react-native-redux": "12.0.0-alpha.
|
|
35
|
-
"@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.
|
|
36
|
-
"@applicaster/zapp-react-native-utils": "12.0.0-alpha.
|
|
32
|
+
"@applicaster/quick-brick-core": "12.0.0-alpha.4173603919",
|
|
33
|
+
"@applicaster/zapp-react-native-bridge": "12.0.0-alpha.4173603919",
|
|
34
|
+
"@applicaster/zapp-react-native-redux": "12.0.0-alpha.4173603919",
|
|
35
|
+
"@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.4173603919",
|
|
36
|
+
"@applicaster/zapp-react-native-utils": "12.0.0-alpha.4173603919",
|
|
37
37
|
"axios": "^0.28.0",
|
|
38
38
|
"camelize": "^1.0.0",
|
|
39
39
|
"query-string": "7.1.3",
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
describe("Layout", () => {
|
|
2
|
-
it.todo("should match snapshot when appReady is true");
|
|
3
|
-
it.todo("should not render transitioner with screen when appReady is false");
|
|
4
|
-
it.todo("should render menu when showMenu is true");
|
|
5
|
-
it.todo("should render VideoModal when visible & VideoModal is true");
|
|
6
|
-
it.todo("should render ZappHooksModal");
|
|
7
|
-
});
|