-
-
Notifications
You must be signed in to change notification settings - Fork 65
/
Copy pathOverflowMenu.test.js
130 lines (115 loc) · 4.53 KB
/
OverflowMenu.test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// @flow
import { HiddenItem } from '../../HeaderItems';
import { fireEvent, render } from '@testing-library/react-native';
import { Text } from 'react-native';
import React from 'react';
import { OverflowMenu } from '../OverflowMenu';
import { overflowMenuPressHandlerDropdownMenu } from '../../overflowMenuPressHandlers';
import { OverflowMenuProvider } from '../OverflowMenuContext';
import { HeaderButtons } from '../../HeaderButtons';
import { ButtonsWrapper } from '../../ButtonsWrapper';
describe('overflowMenu', () => {
it('onPress is given correct params when HiddenItem is a direct or indirect child', () => {
const searchOnPress = jest.fn();
const deleteOnPress = jest.fn();
const onPress = jest.fn();
const WrappedItem = () => <HiddenItem title="delete" onPress={deleteOnPress} />;
const { queryAllByText, getByA11yLabel } = render(
<OverflowMenu OverflowIcon={<Text>+</Text>} onPress={onPress}>
<HiddenItem icon={<Text>O</Text>} title="search" onPress={searchOnPress} />
<HiddenItem title="search2" onPress={searchOnPress} disabled />
<WrappedItem />
</OverflowMenu>
);
expect(queryAllByText('Search')).toHaveLength(0);
fireEvent.press(getByA11yLabel('More options'));
expect(onPress).toHaveBeenCalledWith({
hiddenButtons: [
{ title: 'search', onPress: searchOnPress, destructive: false, disabled: false },
{ title: 'search2', onPress: searchOnPress, destructive: false, disabled: true },
{ title: 'delete', onPress: deleteOnPress, destructive: false, disabled: false },
],
overflowButtonRef: expect.any(Object),
children: expect.any(Array),
_private_toggleMenu: expect.any(Function),
});
});
it('renders dropdown material menu correctly', () => {
const searchOnPress = jest.fn();
const deleteOnPress = jest.fn();
const WrappedItem = () => <HiddenItem title="delete" onPress={deleteOnPress} />;
const { queryAllByText, getByA11yLabel, UNSAFE_queryAllByProps } = render(
<OverflowMenu OverflowIcon={<Text>+</Text>} onPress={overflowMenuPressHandlerDropdownMenu}>
<HiddenItem icon={<Text>O</Text>} title="search" onPress={searchOnPress} />
<HiddenItem title="search2" onPress={searchOnPress} disabled />
<WrappedItem />
</OverflowMenu>,
{ wrapper: OverflowMenuProvider }
);
expect(queryAllByText('Search')).toHaveLength(0);
const menuAnchor = UNSAFE_queryAllByProps({ collapsable: false })[0];
menuAnchor.instance.measureInWindow = (callback) => {
callback(0, 0, 100);
};
fireEvent.press(getByA11yLabel('More options'));
expect(queryAllByText('search')).toHaveLength(1);
expect(queryAllByText('search2')).toHaveLength(1);
expect(queryAllByText('delete')).toHaveLength(1);
});
it(
'OverflowMenu, when rendered inside HeaderButtons which has left=false/true (false by default)' +
'will not render extra margin which was already rendered by HeaderButtons',
() => {
const ReusableOverflowMenu = ({ children }) => {
return (
<OverflowMenu
OverflowIcon={<Text>+</Text>}
onPress={overflowMenuPressHandlerDropdownMenu}
>
{children}
</OverflowMenu>
);
};
const { UNSAFE_getAllByType } = render(
<HeaderButtons>
<ReusableOverflowMenu>
<HiddenItem title="search2" onPress={() => jest.fn()} />
</ReusableOverflowMenu>
</HeaderButtons>
);
const buttonWrappers = UNSAFE_getAllByType(ButtonsWrapper);
expect(buttonWrappers[0].children[0].props.style).toStrictEqual([
{
flexDirection: 'row',
justifyContent: 'center',
},
{ marginRight: 5 },
]);
expect(buttonWrappers[1].children[0].props.style).toStrictEqual({
flexDirection: 'row',
justifyContent: 'center',
});
}
);
describe('should not render overflow button when', () => {
it('only single falsy child is specified', () => {
const onPress = jest.fn();
const { toJSON } = render(
<OverflowMenu OverflowIcon={<Text>+</Text>} onPress={onPress}>
{null}
</OverflowMenu>
);
expect(toJSON()).toBeNull();
});
it('only falsy children are specified', () => {
const onPress = jest.fn();
const { toJSON } = render(
<OverflowMenu OverflowIcon={<Text>+</Text>} onPress={onPress}>
{false}
{null}
</OverflowMenu>
);
expect(toJSON()).toBeNull();
});
});
});