Skip to content

Commit 20896a3

Browse files
markdevochtmarkdevocht
committed
e2e test
1 parent e493a21 commit 20896a3

File tree

6 files changed

+171
-6
lines changed

6 files changed

+171
-6
lines changed

‎playground/e2e/Options.test.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,4 +92,21 @@ describe('Options', () => {
9292
await element(by.id(TestIDs.SCROLLVIEW_ELEMENT)).swipe('down', 'fast');
9393
await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
9494
});
95+
96+
it(':android: TopBar custom title with subtitle should be visible', async () => {
97+
await elementById(TestIDs.GOTO_TOPBAR_TITLE_TEST).tap();
98+
await expect(elementById(TestIDs.TOPBAR_TITLE_TEXT)).toBeVisible();
99+
await expect(elementById(TestIDs.TOPBAR_TITLE_AVATAR)).toBeVisible();
100+
await device.pressBack();
101+
await expect(elementByLabel('Styling Options')).toBeVisible();
102+
});
103+
104+
it(':android: TopBar custom title without subtitle should be visible', async () => {
105+
await elementById(TestIDs.GOTO_TOPBAR_TITLE_TEST).tap();
106+
await elementById(TestIDs.SET_TOPBAR_WITHOUT_SUBTITLE_BTN).tap();
107+
await expect(elementById(TestIDs.TOPBAR_TITLE_TEXT)).toBeVisible();
108+
await expect(elementById(TestIDs.TOPBAR_TITLE_AVATAR)).toBeVisible();
109+
await device.pressBack();
110+
await expect(elementByLabel('Styling Options')).toBeVisible();
111+
});
95112
});

‎playground/src/screens/OptionsScreen.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,10 @@ const {
2020
GOTO_SEARCHBAR_MODAL,
2121
REPLACE_TAB_TEST_ID,
2222
REPLACED_TAB,
23+
GOTO_TOPBAR_TITLE_TEST,
2324
} = testIDs;
2425

25-
interface Props extends NavigationProps {}
26+
interface Props extends NavigationProps { }
2627

2728
export default class Options extends NavigationComponent<Props> {
2829
static options() {
@@ -75,6 +76,12 @@ export default class Options extends NavigationComponent<Props> {
7576
testID={SET_REACT_TITLE_VIEW}
7677
onPress={this.setReactTitleView}
7778
/>
79+
<Button
80+
label="TopBar Title Test"
81+
testID={GOTO_TOPBAR_TITLE_TEST}
82+
platform="android"
83+
onPress={this.gotoTopBarTitleTest}
84+
/>
7885
<Button
7986
label="Show Yellow Box"
8087
testID={SHOW_YELLOW_BOX_BTN}
@@ -136,6 +143,13 @@ export default class Options extends NavigationComponent<Props> {
136143
},
137144
});
138145

146+
gotoTopBarTitleTest = () =>
147+
Navigation.push(this, {
148+
component: {
149+
name: Screens.TopBarTitleTest,
150+
},
151+
});
152+
139153
hideSearchBar = () =>
140154
Navigation.mergeOptions(this, {
141155
topBar: {

‎playground/src/screens/Screens.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ const Screens = {
132132
SearchBar: 'SearchBar',
133133
SearchBarModal: 'SearchBarModal',
134134
TopBar: 'TopBar',
135+
TopBarTitleTest: 'TopBarTitleTest',
135136
};
136137

137138
export default Screens;

‎playground/src/screens/TopBarTitleTestScreen.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React from 'react';
2+
import { View, Text } from 'react-native';
3+
import { NavigationComponent, NavigationProps, Navigation as Nav } from 'react-native-navigation';
4+
import Button from '../components/Button';
5+
import Root from '../components/Root';
6+
import Navigation from '../services/Navigation';
7+
import testIDs from '../testIDs';
8+
9+
const {
10+
TOPBAR_TITLE_TEXT,
11+
TOPBAR_TITLE_AVATAR,
12+
SET_TOPBAR_WITH_SUBTITLE_BTN,
13+
SET_TOPBAR_WITHOUT_SUBTITLE_BTN,
14+
} = testIDs;
15+
16+
// TopBar title component WITH subtitle
17+
function TopBarWithSubtitle() {
18+
return (
19+
<View style={{ flex: 1 }}>
20+
<View style={{ flexDirection: 'row' }}>
21+
<View
22+
testID={TOPBAR_TITLE_AVATAR}
23+
style={{ alignSelf: 'center', marginRight: 20, width: 10, height: 10, backgroundColor: 'red' }}
24+
/>
25+
<View style={{ flex: 1, justifyContent: 'center' }}>
26+
<Text testID={TOPBAR_TITLE_TEXT} numberOfLines={1}>
27+
Title - pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed
28+
</Text>
29+
<Text numberOfLines={1}>Subtitle</Text>
30+
</View>
31+
</View>
32+
</View>
33+
);
34+
}
35+
36+
// TopBar title component WITHOUT subtitle - this triggers the bug on Android
37+
function TopBarWithoutSubtitle() {
38+
return (
39+
<View style={{ flex: 1 }}>
40+
<View style={{ flexDirection: 'row' }}>
41+
<View
42+
testID={TOPBAR_TITLE_AVATAR}
43+
style={{ alignSelf: 'center', marginRight: 20, width: 10, height: 10, backgroundColor: 'red' }}
44+
/>
45+
<View style={{ flex: 1, justifyContent: 'center' }}>
46+
<Text testID={TOPBAR_TITLE_TEXT} numberOfLines={1}>
47+
Title - pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas sed
48+
</Text>
49+
{/* No subtitle - this causes the bug on Android */}
50+
</View>
51+
</View>
52+
</View>
53+
);
54+
}
55+
56+
Nav.registerComponent('TopBarWithSubtitle', () => TopBarWithSubtitle);
57+
Nav.registerComponent('TopBarWithoutSubtitle', () => TopBarWithoutSubtitle);
58+
59+
interface Props extends NavigationProps { }
60+
61+
export default class TopBarTitleTestScreen extends NavigationComponent<Props> {
62+
static options() {
63+
return {
64+
topBar: {
65+
title: {
66+
component: {
67+
name: 'TopBarWithSubtitle',
68+
alignment: 'fill',
69+
},
70+
},
71+
},
72+
};
73+
}
74+
75+
constructor(props: Props) {
76+
super(props);
77+
Navigation.events().bindComponent(this);
78+
}
79+
80+
render() {
81+
return (
82+
<Root componentId={this.props.componentId}>
83+
<Button
84+
label="With Subtitle"
85+
testID={SET_TOPBAR_WITH_SUBTITLE_BTN}
86+
onPress={this.setTopBarWithSubtitle}
87+
/>
88+
<Button
89+
label="Without Subtitle (Bug Test)"
90+
testID={SET_TOPBAR_WITHOUT_SUBTITLE_BTN}
91+
platform="android"
92+
onPress={this.setTopBarWithoutSubtitle}
93+
/>
94+
</Root>
95+
);
96+
}
97+
98+
setTopBarWithSubtitle = () =>
99+
Navigation.mergeOptions(this, {
100+
topBar: {
101+
title: {
102+
component: {
103+
name: 'TopBarWithSubtitle',
104+
alignment: 'fill',
105+
},
106+
},
107+
},
108+
});
109+
110+
setTopBarWithoutSubtitle = () =>
111+
Navigation.mergeOptions(this, {
112+
topBar: {
113+
title: {
114+
component: {
115+
name: 'TopBarWithoutSubtitle',
116+
alignment: 'fill',
117+
},
118+
},
119+
},
120+
});
121+
}
122+

‎playground/src/screens/index.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -123,17 +123,21 @@ function registerScreens() {
123123
() => require('../components/TopBarBackground').default
124124
);
125125
Navigation.registerComponent(Screens.Toast, () => require('./Toast').default);
126+
Navigation.registerComponent(
127+
Screens.TopBarTitleTest,
128+
() => require('./TopBarTitleTestScreen').default
129+
);
126130

127131
const { ContextProvider } = require('../context');
128132
const ContextScreen = require('./ContextScreen').default;
129133
Navigation.registerComponent(
130134
Screens.ContextScreen,
131135
() => (props) =>
132-
(
133-
<ContextProvider>
134-
<ContextScreen {...props} />
135-
</ContextProvider>
136-
),
136+
(
137+
<ContextProvider>
138+
<ContextScreen {...props} />
139+
</ContextProvider>
140+
),
137141
() => ContextScreen
138142
);
139143

‎playground/src/testIDs.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,13 @@ const testIDs = {
219219
REPLACE_TAB_TEST_ID: 'REPLACE_TAB_TEST_ID',
220220
REPLACED_TAB: 'REPLACED_TAB',
221221
MOUNTED_SCREENS_TEXT: 'MOUNTED_SCREENS_TEXT',
222+
223+
GOTO_TOPBAR_TITLE_TEST: 'GOTO_TOPBAR_TITLE_TEST',
224+
TOPBAR_TITLE_TEXT: 'TOPBAR_TITLE_TEXT',
225+
TOPBAR_TITLE_AVATAR: 'TOPBAR_TITLE_AVATAR',
226+
SET_TOPBAR_WITH_SUBTITLE_BTN: 'SET_TOPBAR_WITH_SUBTITLE_BTN',
227+
SET_TOPBAR_WITHOUT_SUBTITLE_BTN: 'SET_TOPBAR_WITHOUT_SUBTITLE_BTN',
228+
222229
SCREEN_ROOT: 'SCREEN_ROOT',
223230
SCREEN_ROOT_LIST: 'SCREEN_ROOT_LIST',
224231

0 commit comments

Comments
 (0)