Skip to content

Commit b38690d

Browse files
d4vidid4vidi
authored
Patch-fix some recent side-menu overlay mode changes (#8039)
1 parent a3a05d5 commit b38690d

File tree

4 files changed

+107
-86
lines changed

4 files changed

+107
-86
lines changed

‎e2e/SideMenu.test.js‎

Lines changed: 88 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -3,89 +3,105 @@ import TestIDs from '../playground/src/testIDs';
33

44
const {elementByLabel, elementById, expectImagesToBeEqual} = Utils;
55

6-
describe.each(['aboveContent', 'pushContent'])('SideMenu', (openMode) => {
7-
beforeEach(async () => {
8-
await device.launchApp({newInstance: true});
9-
await elementById(TestIDs.SIDE_MENU_BTN).tap();
10-
11-
if (openMode === 'aboveContent') {
12-
await elementById(TestIDs.TOGGLE_SIDE_MENU_OPEN_MODE_BTN).tap();
13-
}
14-
});
15-
16-
describe(`Open mode '${openMode}'`, () => {
17-
it('close SideMenu and push to stack with static id', async () => {
18-
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
19-
await elementById(TestIDs.LEFT_SIDE_MENU_PUSH_BTN).tap();
20-
await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
21-
await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
22-
await elementById(TestIDs.POP_BTN).tap();
23-
await expect(elementById(TestIDs.CENTER_SCREEN_HEADER)).toBeVisible();
6+
describe('SideMenu', () => {
7+
beforeEach(async () => {
8+
await device.launchApp({newInstance : true});
9+
await elementById(TestIDs.SIDE_MENU_BTN).tap();
2410
});
2511

26-
it('Push to stack with static id and close SideMenu with screen options', async () => {
27-
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
28-
await elementById(TestIDs.LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN).tap();
29-
await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
30-
await elementById(TestIDs.POP_BTN).tap();
31-
await expect(elementById(TestIDs.CENTER_SCREEN_HEADER)).toBeVisible();
32-
});
12+
describe.each(['aboveContent', 'pushContent'])('Open mode %s', (openMode) => {
13+
beforeEach(async () => {
14+
if (openMode === 'pushContent') {
15+
await elementById(TestIDs.TOGGLE_SIDE_MENU_OPEN_MODE_BTN).tap();
16+
}
17+
});
3318

34-
it('side menu visibility - left', async () => {
35-
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
36-
await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
37-
await expect(elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN)).toBeNotVisible();
38-
});
19+
it('close SideMenu and push to stack with static id', async () => {
20+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
21+
await elementById(TestIDs.LEFT_SIDE_MENU_PUSH_BTN).tap();
22+
await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
23+
await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
24+
await elementById(TestIDs.POP_BTN).tap();
25+
await expect(elementById(TestIDs.CENTER_SCREEN_HEADER)).toBeVisible();
26+
});
3927

40-
it('side menu visibility - right', async () => {
41-
await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
42-
await elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN).tap();
43-
await expect(elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN)).toBeNotVisible();
44-
});
28+
it('Push to stack with static id and close SideMenu with screen options', async () => {
29+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
30+
await elementById(TestIDs.LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN).tap();
31+
await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
32+
await elementById(TestIDs.POP_BTN).tap();
33+
await expect(elementById(TestIDs.CENTER_SCREEN_HEADER)).toBeVisible();
34+
});
4535

46-
it.e2e('should rotate', async () => {
47-
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
48-
await device.setOrientation('landscape');
49-
await expect(elementById(TestIDs.LEFT_SIDE_MENU_PUSH_BTN)).toBeVisible();
50-
});
36+
it('side menu visibility - left', async () => {
37+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
38+
await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
39+
await expect(elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN)).toBeNotVisible();
40+
});
5141

52-
it.e2e(':ios: rotation should update drawer height', async () => {
53-
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
54-
await expect(elementByLabel('left drawer height: 869')).toBeVisible();
55-
await device.setOrientation('landscape');
56-
await expect(elementByLabel('left drawer height: 428')).toBeVisible();
57-
await device.setOrientation('portrait');
58-
await expect(elementByLabel('left drawer height: 869')).toBeVisible();
59-
});
42+
it('side menu visibility - right', async () => {
43+
await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
44+
await elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN).tap();
45+
await expect(elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN)).toBeNotVisible();
46+
});
6047

61-
it.e2e('should set left drawer width', async () => {
62-
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
63-
await expect(elementById(TestIDs.SIDE_MENU_LEFT_DRAWER_HEIGHT_TEXT)).toBeVisible();
64-
await expect(elementByLabel('left drawer width: 250')).toBeVisible();
65-
});
48+
it.e2e('should rotate', async () => {
49+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
50+
await device.setOrientation('landscape');
51+
await expect(elementById(TestIDs.LEFT_SIDE_MENU_PUSH_BTN)).toBeVisible();
52+
});
6653

67-
it.e2e('should change left drawer width', async () => {
68-
await elementById(TestIDs.CHANGE_LEFT_SIDE_MENU_WIDTH_BTN).tap();
69-
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
70-
await expect(elementByLabel('left drawer width: 50')).toBeVisible();
71-
});
54+
it.e2e(':ios: rotation should update drawer height', async () => {
55+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
56+
await expect(elementByLabel('left drawer height: 869')).toBeVisible();
57+
await device.setOrientation('landscape');
58+
await expect(elementByLabel('left drawer height: 428')).toBeVisible();
59+
await device.setOrientation('portrait');
60+
await expect(elementByLabel('left drawer height: 869')).toBeVisible();
61+
});
7262

73-
it.e2e('should set right drawer width', async () => {
74-
await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
75-
await expect(elementByLabel('right drawer width: 250')).toBeVisible();
76-
});
63+
it.e2e('should set left drawer width', async () => {
64+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
65+
await expect(elementById(TestIDs.SIDE_MENU_LEFT_DRAWER_HEIGHT_TEXT)).toBeVisible();
66+
await expect(elementByLabel('left drawer width: 250')).toBeVisible();
67+
});
68+
69+
it.e2e('should change left drawer width', async () => {
70+
await elementById(TestIDs.CHANGE_LEFT_SIDE_MENU_WIDTH_BTN).tap();
71+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
72+
await expect(elementByLabel('left drawer width: 50')).toBeVisible();
73+
});
74+
75+
it.e2e('should set right drawer width', async () => {
76+
await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
77+
await expect(elementByLabel('right drawer width: 250')).toBeVisible();
78+
});
7779

78-
it.e2e('should change right drawer width', async () => {
79-
await elementById(TestIDs.CHANGE_RIGHT_SIDE_MENU_WIDTH_BTN).tap();
80-
await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
81-
await expect(elementByLabel('right drawer width: 50')).toBeVisible();
80+
it.e2e('should change right drawer width', async () => {
81+
await elementById(TestIDs.CHANGE_RIGHT_SIDE_MENU_WIDTH_BTN).tap();
82+
await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
83+
await expect(elementByLabel('right drawer width: 50')).toBeVisible();
84+
});
85+
86+
it.e2e(':ios: should render side menu correctly', async () => {
87+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
88+
const snapshottedImagePath = `./e2e/assets/side_menu.${openMode}.png`;
89+
const actual =
90+
await elementById('SideMenuContainer').takeScreenshot(`side_menu_${openMode}`);
91+
expectImagesToBeEqual(actual, snapshottedImagePath);
92+
});
8293
});
8394

84-
it.e2e(':ios: should render side menu correctly', async () => {
85-
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
86-
const snapshottedImagePath = `./e2e/assets/side_menu.${openMode}.png`;
87-
const actual = await elementById('SideMenuContainer').takeScreenshot(`side_menu_${openMode}`);
88-
expectImagesToBeEqual(actual, snapshottedImagePath);
95+
it.e2e(':ios: should open as push-content by default', async () => {
96+
await elementById(TestIDs.TOGGLE_SIDE_MENU_OPEN_MODE_BTN).tap(); // aboveContent --> pushContent
97+
await elementById(TestIDs.TOGGLE_SIDE_MENU_OPEN_MODE_BTN).tap(); // pushContent --> undefined
98+
await expect(elementByLabel('Open mode: undefined')).toBeVisible();
99+
100+
await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
101+
102+
const snapshottedImagePath = `./e2e/assets/side_menu.undefined.png`;
103+
const actual =
104+
await elementById('SideMenuContainer').takeScreenshot(`side_menu_undefined`);
105+
expectImagesToBeEqual(actual, snapshottedImagePath);
89106
});
90-
});
91107
});

‎e2e/assets/side_menu.undefined.png‎

160 KB
Loading

‎playground/src/screens/SideMenuCenterScreen.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,11 @@ const {
2020
CHANGE_RIGHT_SIDE_MENU_WIDTH_BTN,
2121
DISABLE_DRAWERS,
2222
ENABLE_DRAWERS,
23-
CENTER_SCREEN_CONTAINER
23+
SIDE_MENU_CENTER_SCREEN_CONTAINER,
2424
} = testIDs;
2525

2626
interface ScreenState {
27-
openMode: 'aboveContent' | 'pushContent';
27+
openMode: 'aboveContent' | 'pushContent' | undefined;
2828
}
2929

3030
export default class SideMenuCenterScreen extends NavigationComponent {
@@ -58,7 +58,7 @@ export default class SideMenuCenterScreen extends NavigationComponent {
5858
constructor(props: NavigationProps) {
5959
super(props);
6060
this.state = {
61-
openMode: 'pushContent',
61+
openMode: 'aboveContent',
6262
};
6363
Navigation.events().bindComponent(this);
6464
}
@@ -69,17 +69,11 @@ export default class SideMenuCenterScreen extends NavigationComponent {
6969
}
7070
}
7171

72-
toggleAboveContent = () => {
73-
this.setState((state: ScreenState) => ({
74-
openMode: state.openMode === 'pushContent' ? 'aboveContent' : 'pushContent',
75-
}));
76-
};
77-
7872
render() {
7973
const { openMode } = this.state;
8074

8175
return (
82-
<Root componentId={this.props.componentId} testID={CENTER_SCREEN_CONTAINER}>
76+
<Root componentId={this.props.componentId} testID={SIDE_MENU_CENTER_SCREEN_CONTAINER}>
8377
<Button
8478
label="Open Left"
8579
testID={OPEN_LEFT_SIDE_MENU_BTN}
@@ -112,11 +106,11 @@ export default class SideMenuCenterScreen extends NavigationComponent {
112106
/>
113107

114108
<TouchableOpacity
115-
onPress={this.toggleAboveContent}
109+
onPress={this.toggleOpenMode}
116110
testID={TOGGLE_SIDE_MENU_OPEN_MODE_BTN}
117111
style={{ margin: 10, padding: 10, backgroundColor: '#ddd', borderRadius: 5 }}
118112
>
119-
<Text>Open mode: {openMode}</Text>
113+
<Text>Open mode: {openMode || 'undefined'}</Text>
120114
</TouchableOpacity>
121115
</Root>
122116
);
@@ -135,6 +129,17 @@ export default class SideMenuCenterScreen extends NavigationComponent {
135129
});
136130
};
137131

132+
toggleOpenMode = () => {
133+
this.setState((state: ScreenState) => ({
134+
openMode:
135+
state.openMode === 'aboveContent'
136+
? 'pushContent'
137+
: state.openMode === 'pushContent'
138+
? undefined
139+
: 'aboveContent',
140+
}));
141+
};
142+
138143
open = (side: 'left' | 'right') =>
139144
Navigation.mergeOptions(this, {
140145
sideMenu: {

‎playground/src/testIDs.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -211,14 +211,14 @@ const testIDs = {
211211
SIDE_MENU_LEFT_DRAWER_HEIGHT_TEXT: 'SIDE_MENU_LEFT_DRAWER_HEIGHT_TEXT',
212212
SIDE_MENU_LEFT_DRAWER_WIDTH_TEXT: 'SIDE_MENU_LEFT_DRAWER_WIDTH_TEXT',
213213
SIDE_MENU_LEFT_DRAWER_CONTAINER: 'SIDE_MENU_LEFT_DRAWER_CONTAINER',
214-
CENTER_SCREEN_CONTAINER: 'CENTER_SCREEN_CONTAINER',
214+
SIDE_MENU_CENTER_SCREEN_CONTAINER: 'SIDE_MENU_CENTER_SCREEN_CONTAINER',
215215
SIDE_MENU_RIGHT_DRAWER_WIDTH_TEXT: 'SIDE_MENU_RIGHT_DRAWER_WIDTH_TEXT',
216216
TOGGLE_REACT_DECLARED_MODAL: 'TOGGLE_REACT_DECLARED_MODAL',
217217
REPLACE_TAB_TEST_ID: 'REPLACE_TAB_TEST_ID',
218218
REPLACED_TAB: 'REPLACED_TAB',
219219
MOUNTED_SCREENS_TEXT: 'MOUNTED_SCREENS_TEXT',
220220

221-
//External Component Buttons
221+
// External Component Buttons
222222
EXTERNAL_DISMISS_MODAL_BTN: 'EXTERNAL_DISMISS_MODAL_BTN',
223223
EXTERNAL_TOP_BAR_RIGHT_BTN: 'EXTERNAL_TOP_BAR_RIGHT_BTN',
224224
GOTO_SHARED_ELEMENT_SCREEN: 'GOTO_SHARED_ELEMENT_SCREEN',

0 commit comments

Comments
 (0)