@fluentui-react-native/menu 0.13.0 → 0.14.1
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.
- package/CHANGELOG.json +58 -1
- package/CHANGELOG.md +28 -2
- package/jest.config.js +2 -0
- package/lib/Menu/Menu.types.d.ts +2 -0
- package/lib/Menu/Menu.types.d.ts.map +1 -1
- package/lib/Menu/useMenu.d.ts.map +1 -1
- package/lib/Menu/useMenu.js +8 -3
- package/lib/Menu/useMenu.js.map +1 -1
- package/lib/Menu/useMenuContextValue.d.ts.map +1 -1
- package/lib/Menu/useMenuContextValue.js +4 -1
- package/lib/Menu/useMenuContextValue.js.map +1 -1
- package/lib/MenuPopover/MenuPopover.d.ts.map +1 -1
- package/lib/MenuPopover/MenuPopover.js +7 -3
- package/lib/MenuPopover/MenuPopover.js.map +1 -1
- package/lib/MenuPopover/MenuPopover.types.d.ts +4 -10
- package/lib/MenuPopover/MenuPopover.types.d.ts.map +1 -1
- package/lib/MenuPopover/useMenuPopover.d.ts.map +1 -1
- package/lib/MenuPopover/useMenuPopover.js +35 -8
- package/lib/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib/MenuTrigger/MenuTrigger.js +8 -8
- package/lib/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib/MenuTrigger/useMenuTrigger.d.ts.map +1 -1
- package/lib/MenuTrigger/useMenuTrigger.js +21 -20
- package/lib/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib/__tests__/Menu.test.d.ts +2 -0
- package/lib/__tests__/Menu.test.d.ts.map +1 -0
- package/lib/__tests__/Menu.test.js +145 -0
- package/lib/__tests__/Menu.test.js.map +1 -0
- package/lib/consts.d.ts +3 -0
- package/lib/consts.d.ts.map +1 -0
- package/lib/consts.js +7 -0
- package/lib/consts.js.map +1 -0
- package/lib/context/menuContext.d.ts +10 -4
- package/lib/context/menuContext.d.ts.map +1 -1
- package/lib/context/menuContext.js.map +1 -1
- package/lib-commonjs/Menu/Menu.types.d.ts +2 -0
- package/lib-commonjs/Menu/Menu.types.d.ts.map +1 -1
- package/lib-commonjs/Menu/useMenu.d.ts.map +1 -1
- package/lib-commonjs/Menu/useMenu.js +8 -3
- package/lib-commonjs/Menu/useMenu.js.map +1 -1
- package/lib-commonjs/Menu/useMenuContextValue.d.ts.map +1 -1
- package/lib-commonjs/Menu/useMenuContextValue.js +4 -1
- package/lib-commonjs/Menu/useMenuContextValue.js.map +1 -1
- package/lib-commonjs/MenuPopover/MenuPopover.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/MenuPopover.js +5 -2
- package/lib-commonjs/MenuPopover/MenuPopover.js.map +1 -1
- package/lib-commonjs/MenuPopover/MenuPopover.types.d.ts +4 -10
- package/lib-commonjs/MenuPopover/MenuPopover.types.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.d.ts.map +1 -1
- package/lib-commonjs/MenuPopover/useMenuPopover.js +35 -8
- package/lib-commonjs/MenuPopover/useMenuPopover.js.map +1 -1
- package/lib-commonjs/MenuTrigger/MenuTrigger.js +8 -8
- package/lib-commonjs/MenuTrigger/MenuTrigger.js.map +1 -1
- package/lib-commonjs/MenuTrigger/useMenuTrigger.d.ts.map +1 -1
- package/lib-commonjs/MenuTrigger/useMenuTrigger.js +21 -20
- package/lib-commonjs/MenuTrigger/useMenuTrigger.js.map +1 -1
- package/lib-commonjs/__tests__/Menu.test.d.ts +2 -0
- package/lib-commonjs/__tests__/Menu.test.d.ts.map +1 -0
- package/lib-commonjs/__tests__/Menu.test.js +148 -0
- package/lib-commonjs/__tests__/Menu.test.js.map +1 -0
- package/lib-commonjs/consts.d.ts +3 -0
- package/lib-commonjs/consts.d.ts.map +1 -0
- package/lib-commonjs/consts.js +10 -0
- package/lib-commonjs/consts.js.map +1 -0
- package/lib-commonjs/context/menuContext.d.ts +10 -4
- package/lib-commonjs/context/menuContext.d.ts.map +1 -1
- package/lib-commonjs/context/menuContext.js.map +1 -1
- package/package.json +5 -3
- package/src/Menu/Menu.types.ts +1 -0
- package/src/Menu/useMenu.ts +9 -2
- package/src/Menu/useMenuContextValue.ts +4 -1
- package/src/MenuPopover/MenuPopover.tsx +7 -14
- package/src/MenuPopover/MenuPopover.types.ts +4 -9
- package/src/MenuPopover/useMenuPopover.ts +48 -8
- package/src/MenuTrigger/MenuTrigger.tsx +9 -9
- package/src/MenuTrigger/useMenuTrigger.ts +36 -26
- package/src/__tests__/Menu.test.tsx +235 -0
- package/src/__tests__/__snapshots__/Menu.test.tsx.snap +2098 -0
- package/src/consts.ts +8 -0
- package/src/context/menuContext.ts +6 -1
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { AccessibilityActionName } from 'react-native';
|
|
3
|
+
import * as renderer from 'react-test-renderer';
|
|
4
|
+
import { Menu } from '../Menu/Menu';
|
|
5
|
+
import { checkReRender } from '@fluentui-react-native/test-tools';
|
|
6
|
+
import MenuTrigger from '../MenuTrigger/MenuTrigger';
|
|
7
|
+
import { ButtonV1 as Button } from '@fluentui-react-native/button';
|
|
8
|
+
import MenuPopover from '../MenuPopover/MenuPopover';
|
|
9
|
+
import { MenuList } from '../MenuList/MenuList';
|
|
10
|
+
import { MenuItem } from '../MenuItem/MenuItem';
|
|
11
|
+
import { MenuItemCheckbox } from '../MenuItemCheckbox/MenuItemCheckbox';
|
|
12
|
+
import { MenuDivider } from '../MenuDivider/MenuDivider';
|
|
13
|
+
import { MenuItemRadio } from '../MenuItemRadio/MenuItemRadio';
|
|
14
|
+
|
|
15
|
+
describe('Checkbox component tests', () => {
|
|
16
|
+
it('Menu default', () => {
|
|
17
|
+
const tree = renderer
|
|
18
|
+
.create(
|
|
19
|
+
<Menu>
|
|
20
|
+
<MenuTrigger>
|
|
21
|
+
<Button>Default</Button>
|
|
22
|
+
</MenuTrigger>
|
|
23
|
+
<MenuPopover>
|
|
24
|
+
<MenuList>
|
|
25
|
+
<MenuItem content="Option 1" />
|
|
26
|
+
</MenuList>
|
|
27
|
+
</MenuPopover>
|
|
28
|
+
</Menu>,
|
|
29
|
+
)
|
|
30
|
+
.toJSON();
|
|
31
|
+
expect(tree).toMatchSnapshot();
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
it('Menu open', () => {
|
|
35
|
+
const tree = renderer
|
|
36
|
+
.create(
|
|
37
|
+
<Menu open>
|
|
38
|
+
<MenuTrigger>
|
|
39
|
+
<Button>Open</Button>
|
|
40
|
+
</MenuTrigger>
|
|
41
|
+
<MenuPopover>
|
|
42
|
+
<MenuList>
|
|
43
|
+
<MenuItem content="Option 1" />
|
|
44
|
+
</MenuList>
|
|
45
|
+
</MenuPopover>
|
|
46
|
+
</Menu>,
|
|
47
|
+
)
|
|
48
|
+
.toJSON();
|
|
49
|
+
expect(tree).toMatchSnapshot();
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
it('Menu defaultOpen', () => {
|
|
53
|
+
const tree = renderer
|
|
54
|
+
.create(
|
|
55
|
+
<Menu defaultOpen>
|
|
56
|
+
<MenuTrigger>
|
|
57
|
+
<Button>Open</Button>
|
|
58
|
+
</MenuTrigger>
|
|
59
|
+
<MenuPopover>
|
|
60
|
+
<MenuList>
|
|
61
|
+
<MenuItem content="Option 1" />
|
|
62
|
+
<MenuItem disabled content="Option 2" />
|
|
63
|
+
</MenuList>
|
|
64
|
+
</MenuPopover>
|
|
65
|
+
</Menu>,
|
|
66
|
+
)
|
|
67
|
+
.toJSON();
|
|
68
|
+
expect(tree).toMatchSnapshot();
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
it('Menu open checkbox and divider', () => {
|
|
72
|
+
const tree = renderer
|
|
73
|
+
.create(
|
|
74
|
+
<Menu open>
|
|
75
|
+
<MenuTrigger>
|
|
76
|
+
<Button>Open</Button>
|
|
77
|
+
</MenuTrigger>
|
|
78
|
+
<MenuPopover>
|
|
79
|
+
<MenuList>
|
|
80
|
+
<MenuItemCheckbox content="Option 1" name="Option 1" />
|
|
81
|
+
<MenuDivider />
|
|
82
|
+
<MenuItemCheckbox disabled content="Option 2" name="Option 2" />
|
|
83
|
+
</MenuList>
|
|
84
|
+
</MenuPopover>
|
|
85
|
+
</Menu>,
|
|
86
|
+
)
|
|
87
|
+
.toJSON();
|
|
88
|
+
expect(tree).toMatchSnapshot();
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
it('Menu open radio', () => {
|
|
92
|
+
const tree = renderer
|
|
93
|
+
.create(
|
|
94
|
+
<Menu open>
|
|
95
|
+
<MenuTrigger>
|
|
96
|
+
<Button>Open</Button>
|
|
97
|
+
</MenuTrigger>
|
|
98
|
+
<MenuPopover>
|
|
99
|
+
<MenuList>
|
|
100
|
+
<MenuItemRadio content="Option 1" name="Option 1" />
|
|
101
|
+
<MenuItemRadio content="Option 2" name="Option 2" />
|
|
102
|
+
</MenuList>
|
|
103
|
+
</MenuPopover>
|
|
104
|
+
</Menu>,
|
|
105
|
+
)
|
|
106
|
+
.toJSON();
|
|
107
|
+
expect(tree).toMatchSnapshot();
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
it('Menu open checkbox defaultChecked', () => {
|
|
111
|
+
const tree = renderer
|
|
112
|
+
.create(
|
|
113
|
+
<Menu open defaultChecked={{ 'Option 1': true }}>
|
|
114
|
+
<MenuTrigger>
|
|
115
|
+
<Button>Open</Button>
|
|
116
|
+
</MenuTrigger>
|
|
117
|
+
<MenuPopover>
|
|
118
|
+
<MenuList>
|
|
119
|
+
<MenuItemCheckbox content="Option 1" name="Option 1" />
|
|
120
|
+
<MenuDivider />
|
|
121
|
+
<MenuItemCheckbox content="Option 2" name="Option 2" />
|
|
122
|
+
</MenuList>
|
|
123
|
+
</MenuPopover>
|
|
124
|
+
</Menu>,
|
|
125
|
+
)
|
|
126
|
+
.toJSON();
|
|
127
|
+
expect(tree).toMatchSnapshot();
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
it('Menu open checkbox checked', () => {
|
|
131
|
+
const tree = renderer
|
|
132
|
+
.create(
|
|
133
|
+
<Menu open checked={{ 'Option 1': true }}>
|
|
134
|
+
<MenuTrigger>
|
|
135
|
+
<Button>Open</Button>
|
|
136
|
+
</MenuTrigger>
|
|
137
|
+
<MenuPopover>
|
|
138
|
+
<MenuList>
|
|
139
|
+
<MenuItemCheckbox content="Option 1" name="Option 1" />
|
|
140
|
+
<MenuDivider />
|
|
141
|
+
<MenuItemCheckbox content="Option 2" name="Option 2" />
|
|
142
|
+
</MenuList>
|
|
143
|
+
</MenuPopover>
|
|
144
|
+
</Menu>,
|
|
145
|
+
)
|
|
146
|
+
.toJSON();
|
|
147
|
+
expect(tree).toMatchSnapshot();
|
|
148
|
+
});
|
|
149
|
+
|
|
150
|
+
it('Menu submenu', () => {
|
|
151
|
+
const tree = renderer
|
|
152
|
+
.create(
|
|
153
|
+
<Menu open>
|
|
154
|
+
<MenuTrigger>
|
|
155
|
+
<Button>Default</Button>
|
|
156
|
+
</MenuTrigger>
|
|
157
|
+
<MenuPopover>
|
|
158
|
+
<MenuList>
|
|
159
|
+
<MenuItem content="Option 1" />
|
|
160
|
+
<Menu>
|
|
161
|
+
<MenuTrigger>
|
|
162
|
+
<MenuItem content="Option 2" />
|
|
163
|
+
</MenuTrigger>
|
|
164
|
+
<MenuPopover>
|
|
165
|
+
<MenuList>
|
|
166
|
+
<MenuItem content="Option 1" />
|
|
167
|
+
</MenuList>
|
|
168
|
+
</MenuPopover>
|
|
169
|
+
</Menu>
|
|
170
|
+
</MenuList>
|
|
171
|
+
</MenuPopover>
|
|
172
|
+
</Menu>,
|
|
173
|
+
)
|
|
174
|
+
.toJSON();
|
|
175
|
+
expect(tree).toMatchSnapshot();
|
|
176
|
+
});
|
|
177
|
+
});
|
|
178
|
+
|
|
179
|
+
describe('Menu rerender tests', () => {
|
|
180
|
+
it('Menu re-renders correctly', () => {
|
|
181
|
+
checkReRender(
|
|
182
|
+
() => (
|
|
183
|
+
<Menu open>
|
|
184
|
+
<MenuTrigger>
|
|
185
|
+
<Button>Rerender twice</Button>
|
|
186
|
+
</MenuTrigger>
|
|
187
|
+
<MenuPopover>
|
|
188
|
+
<MenuList>
|
|
189
|
+
<MenuItem content="Option 1" />
|
|
190
|
+
</MenuList>
|
|
191
|
+
</MenuPopover>
|
|
192
|
+
</Menu>
|
|
193
|
+
),
|
|
194
|
+
3,
|
|
195
|
+
);
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
it('Menu re-renders correctly with style', () => {
|
|
199
|
+
const style = { backgroundColor: 'black' };
|
|
200
|
+
checkReRender(
|
|
201
|
+
() => (
|
|
202
|
+
<Menu>
|
|
203
|
+
<MenuTrigger>
|
|
204
|
+
<Button style={style}>Rerender twice</Button>
|
|
205
|
+
</MenuTrigger>
|
|
206
|
+
<MenuPopover>
|
|
207
|
+
<MenuList>
|
|
208
|
+
<MenuItem content="Option 1" />
|
|
209
|
+
</MenuList>
|
|
210
|
+
</MenuPopover>
|
|
211
|
+
</Menu>
|
|
212
|
+
),
|
|
213
|
+
3,
|
|
214
|
+
);
|
|
215
|
+
});
|
|
216
|
+
|
|
217
|
+
it('Menu re-renders correctly with accessibilityAction', () => {
|
|
218
|
+
const action = [{ name: 'Expand' as AccessibilityActionName }];
|
|
219
|
+
checkReRender(
|
|
220
|
+
() => (
|
|
221
|
+
<Menu>
|
|
222
|
+
<MenuTrigger>
|
|
223
|
+
<Button>Rerender twice</Button>
|
|
224
|
+
</MenuTrigger>
|
|
225
|
+
<MenuPopover>
|
|
226
|
+
<MenuList>
|
|
227
|
+
<MenuItem accessibilityActions={action} content="Option 1" />
|
|
228
|
+
</MenuList>
|
|
229
|
+
</MenuPopover>
|
|
230
|
+
</Menu>
|
|
231
|
+
),
|
|
232
|
+
3,
|
|
233
|
+
);
|
|
234
|
+
});
|
|
235
|
+
});
|