Skip to content

Commit ba4bab1

Browse files
elicwhitegrabbou
elicwhite
authored and
grabbou
committed
Add detox tests for Switch (facebook#22470)
Summary: Reorganized some of the switch examples to be more testable: Before: ![simulator screen shot - iphone xs - 2018-12-01 at 02 27 47](https://user-images.githubusercontent.com/249164/49327066-bcc35580-f510-11e8-860d-fc07a574f80c.png) After: ![simulator screen shot - iphone xs - 2018-12-01 at 02 27 06](https://user-images.githubusercontent.com/249164/49327068-bf25af80-f510-11e8-95c6-7aa4a9095b91.png) Tests pass! ``` yarn build-ios-e2e && yarn test-ios-e2e ``` <img width="711" alt="screen shot 2018-12-01 at 2 20 33 am" src="https://user-images.githubusercontent.com/249164/49327070-c64cbd80-f510-11e8-8cad-84c3fe42941e.png"> Changelog: ---------- Help reviewers and the release process by writing your own changelog entry. When the change doesn't impact React Native developers, it may be ommitted from the changelog for brevity. See below for an example. [Internal] [Added] - Detox tests for Switch Pull Request resolved: facebook#22470 Reviewed By: RSNara Differential Revision: D13290329 Pulled By: TheSavior fbshipit-source-id: 91c1b895dd5e1acc4330618e6d3165c7f9215997
1 parent 16faf86 commit ba4bab1

File tree

3 files changed

+226
-15
lines changed

3 files changed

+226
-15
lines changed

‎RNTester/e2e/__tests__/Button-test.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @emails oncall+react_native
8+
* @format
9+
*/
10+
11+
/* global element, by, expect */
12+
13+
describe('Button', () => {
14+
beforeAll(async () => {
15+
await element(by.id('explorer_search')).replaceText('<Button>');
16+
await element(
17+
by.label('<Button> Simple React Native button component.'),
18+
).tap();
19+
});
20+
21+
afterAll(async () => {
22+
//TODO - remove app state persistency, till then, we must go back to main screen,
23+
await element(by.label('Back')).tap();
24+
});
25+
26+
it('Simple button should be tappable', async () => {
27+
await element(by.label('Press Me')).tap();
28+
await expect(element(by.text('Simple has been pressed!'))).toBeVisible();
29+
await element(by.text('OK')).tap();
30+
});
31+
32+
it('Adjusted color button should be tappable', async () => {
33+
await element(by.label('Press Purple')).tap();
34+
await expect(element(by.text('Purple has been pressed!'))).toBeVisible();
35+
await element(by.text('OK')).tap();
36+
});
37+
38+
it("Two buttons with JustifyContent:'space-between' should be tappable", async () => {
39+
await element(by.label('This looks great!')).tap();
40+
await expect(element(by.text('Left has been pressed!'))).toBeVisible();
41+
await element(by.text('OK')).tap();
42+
43+
await element(by.label('Ok!')).tap();
44+
await expect(element(by.text('Right has been pressed!'))).toBeVisible();
45+
await element(by.text('OK')).tap();
46+
});
47+
48+
it('Disabled button should not interact', async () => {
49+
await element(by.label('I Am Disabled')).tap();
50+
await expect(
51+
element(by.text('Disabled has been pressed!')),
52+
).toBeNotVisible();
53+
});
54+
});

‎RNTester/e2e/__tests__/Switch-test.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/**
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @emails oncall+react_native
8+
* @format
9+
*/
10+
11+
/* global element, by, expect */
12+
13+
const jestExpect = require('expect');
14+
15+
describe('Switch', () => {
16+
beforeAll(async () => {
17+
await element(by.id('explorer_search')).replaceText('<Switch>');
18+
await element(by.label('<Switch> Native boolean input')).tap();
19+
});
20+
21+
afterAll(async () => {
22+
await element(by.label('Back')).tap();
23+
});
24+
25+
it('Switch that starts on should switch', async () => {
26+
const testID = 'on-off-initial-off';
27+
const indicatorID = 'on-off-initial-off-indicator';
28+
29+
await expect(element(by.id(testID))).toHaveValue('0');
30+
await expect(element(by.id(indicatorID))).toHaveText('Off');
31+
await element(by.id(testID)).tap();
32+
await expect(element(by.id(testID))).toHaveValue('1');
33+
await expect(element(by.id(indicatorID))).toHaveText('On');
34+
});
35+
36+
it('Switch that starts off should switch', async () => {
37+
const testID = 'on-off-initial-on';
38+
const indicatorID = 'on-off-initial-on-indicator';
39+
40+
await expect(element(by.id(testID))).toHaveValue('1');
41+
await expect(element(by.id(indicatorID))).toHaveText('On');
42+
await element(by.id(testID)).tap();
43+
await expect(element(by.id(testID))).toHaveValue('0');
44+
await expect(element(by.id(indicatorID))).toHaveText('Off');
45+
});
46+
47+
it('disabled switch should not toggle', async () => {
48+
const onTestID = 'disabled-initial-on';
49+
const offTestID = 'disabled-initial-off';
50+
const onIndicatorID = 'disabled-initial-on-indicator';
51+
const offIndicatorID = 'disabled-initial-off-indicator';
52+
53+
await expect(element(by.id(onTestID))).toHaveValue('1');
54+
await expect(element(by.id(onIndicatorID))).toHaveText('On');
55+
56+
try {
57+
await element(by.id(onTestID)).tap();
58+
throw new Error('Does not match');
59+
} catch (err) {
60+
jestExpect(err.message.message).toEqual(
61+
jestExpect.stringContaining(
62+
'Cannot perform action due to constraint(s) failure',
63+
),
64+
);
65+
}
66+
await expect(element(by.id(onTestID))).toHaveValue('1');
67+
await expect(element(by.id(onIndicatorID))).toHaveText('On');
68+
69+
await expect(element(by.id(offTestID))).toHaveValue('0');
70+
await expect(element(by.id(offIndicatorID))).toHaveText('Off');
71+
try {
72+
await element(by.id(offTestID)).tap();
73+
throw new Error('Does not match');
74+
} catch (err) {
75+
jestExpect(err.message.message).toEqual(
76+
jestExpect.stringContaining(
77+
'Cannot perform action due to constraint(s) failure',
78+
),
79+
);
80+
}
81+
await expect(element(by.id(offTestID))).toHaveValue('0');
82+
await expect(element(by.id(offIndicatorID))).toHaveText('Off');
83+
});
84+
});

‎RNTester/js/SwitchExample.js‎

Lines changed: 88 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,37 @@
1111
'use strict';
1212

1313
const React = require('react');
14-
const ReactNative = require('react-native');
15-
const {Switch, Text, View} = ReactNative;
14+
const {Switch, Text, View} = require('react-native');
1615

17-
class BasicSwitchExample extends React.Component<{}, $FlowFixMeState> {
16+
type OnOffIndicatorProps = $ReadOnly<{|on: boolean, testID: string|}>;
17+
function OnOffIndicator({on, testID}: OnOffIndicatorProps) {
18+
return <Text testID={testID}>{on ? 'On' : 'Off'}</Text>;
19+
}
20+
21+
type ExampleRowProps = $ReadOnly<{|children: React.Node|}>;
22+
function ExampleRow({children}: ExampleRowProps) {
23+
return (
24+
<View
25+
style={{
26+
flexDirection: 'row',
27+
justifyContent: 'space-between',
28+
alignItems: 'center',
29+
marginBottom: 10,
30+
}}>
31+
{children}
32+
</View>
33+
);
34+
}
35+
36+
type SimpleSwitchExampleState = $ReadOnly<{|
37+
trueSwitchIsOn: boolean,
38+
falseSwitchIsOn: boolean,
39+
|}>;
40+
41+
class BasicSwitchExample extends React.Component<
42+
{||},
43+
SimpleSwitchExampleState,
44+
> {
1845
state = {
1946
trueSwitchIsOn: true,
2047
falseSwitchIsOn: false,
@@ -23,26 +50,72 @@ class BasicSwitchExample extends React.Component<{}, $FlowFixMeState> {
2350
render() {
2451
return (
2552
<View>
26-
<Switch
27-
onValueChange={value => this.setState({falseSwitchIsOn: value})}
28-
style={{marginBottom: 10}}
29-
value={this.state.falseSwitchIsOn}
30-
/>
31-
<Switch
32-
onValueChange={value => this.setState({trueSwitchIsOn: value})}
33-
value={this.state.trueSwitchIsOn}
34-
/>
53+
<ExampleRow>
54+
<Switch
55+
testID="on-off-initial-off"
56+
onValueChange={value => this.setState({falseSwitchIsOn: value})}
57+
value={this.state.falseSwitchIsOn}
58+
/>
59+
<OnOffIndicator
60+
on={this.state.falseSwitchIsOn}
61+
testID="on-off-initial-off-indicator"
62+
/>
63+
</ExampleRow>
64+
<ExampleRow>
65+
<Switch
66+
testID="on-off-initial-on"
67+
onValueChange={value => this.setState({trueSwitchIsOn: value})}
68+
value={this.state.trueSwitchIsOn}
69+
/>
70+
<OnOffIndicator
71+
on={this.state.trueSwitchIsOn}
72+
testID="on-off-initial-on-indicator"
73+
/>
74+
</ExampleRow>
3575
</View>
3676
);
3777
}
3878
}
3979

40-
class DisabledSwitchExample extends React.Component<{}> {
80+
class DisabledSwitchExample extends React.Component<
81+
{||},
82+
SimpleSwitchExampleState,
83+
> {
84+
state = {
85+
trueSwitchIsOn: true,
86+
falseSwitchIsOn: false,
87+
};
88+
4189
render() {
4290
return (
4391
<View>
44-
<Switch disabled={true} style={{marginBottom: 10}} value={true} />
45-
<Switch disabled={true} value={false} />
92+
<ExampleRow>
93+
<Switch
94+
testID="disabled-initial-off"
95+
disabled={true}
96+
onValueChange={value => this.setState({falseSwitchIsOn: value})}
97+
value={this.state.falseSwitchIsOn}
98+
/>
99+
100+
<OnOffIndicator
101+
on={this.state.falseSwitchIsOn}
102+
testID="disabled-initial-off-indicator"
103+
/>
104+
</ExampleRow>
105+
106+
<ExampleRow>
107+
<Switch
108+
testID="disabled-initial-on"
109+
disabled={true}
110+
onValueChange={value => this.setState({trueSwitchIsOn: value})}
111+
value={this.state.trueSwitchIsOn}
112+
/>
113+
114+
<OnOffIndicator
115+
on={this.state.trueSwitchIsOn}
116+
testID="disabled-initial-on-indicator"
117+
/>
118+
</ExampleRow>
46119
</View>
47120
);
48121
}

0 commit comments

Comments
 (0)