Skip to content

Add filtering to RNTester examples #22827

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rickhanlonii wants to merge 1 commit into from
Closed

Add filtering to RNTester examples #22827

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions RNTester/e2e/__tests__/Button-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,18 +25,27 @@ describe('Button', () => {
});

it('Simple button should be tappable', async () => {
await element(by.id('explorer_example_search')).replaceText(
'Simple Button',
);
await element(by.id('simple_button')).tap();
await expect(element(by.text('Simple has been pressed!'))).toBeVisible();
await element(by.text('OK')).tap();
});

it('Adjusted color button should be tappable', async () => {
await element(by.id('explorer_example_search')).replaceText(
'Adjusted color',
);
await element(by.id('purple_button')).tap();
await expect(element(by.text('Purple has been pressed!'))).toBeVisible();
await element(by.text('OK')).tap();
});

it("Two buttons with JustifyContent:'space-between' should be tappable", async () => {
await element(by.id('explorer_example_search')).replaceText(
'Fit to text layout',
);
await element(by.id('left_button')).tap();
await expect(element(by.text('Left has been pressed!'))).toBeVisible();
await element(by.text('OK')).tap();
Expand All @@ -47,6 +56,9 @@ describe('Button', () => {
});

it('Disabled button should not interact', async () => {
await element(by.id('explorer_example_search')).replaceText(
'Disabled Button',
);
await element(by.id('disabled_button')).tap();
await expect(
element(by.text('Disabled has been pressed!')),
Expand Down
4 changes: 4 additions & 0 deletions RNTester/e2e/__tests__/DatePickerIOS-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ describe('DatePickerIOS', () => {
});

it('Should change indicator with datetime picker', async () => {
await element(by.id('explorer_example_search')).replaceText(
'Date and time picker',
);
const testID = 'date-and-time';
const indicatorID = 'date-and-time-indicator';

Expand All @@ -45,6 +48,7 @@ describe('DatePickerIOS', () => {
});

it('Should change indicator with date-only picker', async () => {
await element(by.id('explorer_example_search')).replaceText('Date only');
const testID = 'date-only';
const indicatorID = 'date-and-time-indicator';

Expand Down
1 change: 1 addition & 0 deletions RNTester/e2e/__tests__/Picker-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ describe('Picker', () => {
});

it('should be selectable by ID', async () => {
await element(by.id('explorer_example_search')).replaceText('Basic picker');
await expect(element(by.id('basic-picker'))).toBeVisible();
});
});
116 changes: 66 additions & 50 deletions RNTester/e2e/__tests__/Switch-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,63 +19,79 @@ describe('Switch', () => {
await element(by.label('<Switch> Native boolean input')).tap();
});

it('Switch that starts off should switch', async () => {
const testID = 'on-off-initial-off';
const indicatorID = 'on-off-initial-off-indicator';
describe('Switches can be set to true or false', () => {
beforeEach(async () => {
await element(by.id('explorer_example_search')).replaceText(
'Switches can be set to true or false',
);
});

await expect(element(by.id(testID))).toHaveValue('0');
await expect(element(by.id(indicatorID))).toHaveText('Off');
await element(by.id(testID)).tap();
await expect(element(by.id(testID))).toHaveValue('1');
await expect(element(by.id(indicatorID))).toHaveText('On');
});
it('Switch that starts off should switch', async () => {
const testID = 'on-off-initial-off';
const indicatorID = 'on-off-initial-off-indicator';

it('Switch that starts on should switch', async () => {
const testID = 'on-off-initial-on';
const indicatorID = 'on-off-initial-on-indicator';
await expect(element(by.id(testID))).toHaveValue('0');
await expect(element(by.id(indicatorID))).toHaveText('Off');
await element(by.id(testID)).tap();
await expect(element(by.id(testID))).toHaveValue('1');
await expect(element(by.id(indicatorID))).toHaveText('On');
});

await expect(element(by.id(testID))).toHaveValue('1');
await expect(element(by.id(indicatorID))).toHaveText('On');
await element(by.id(testID)).tap();
await expect(element(by.id(testID))).toHaveValue('0');
await expect(element(by.id(indicatorID))).toHaveText('Off');
it('Switch that starts on should switch', async () => {
const testID = 'on-off-initial-on';
const indicatorID = 'on-off-initial-on-indicator';

await expect(element(by.id(testID))).toHaveValue('1');
await expect(element(by.id(indicatorID))).toHaveText('On');
await element(by.id(testID)).tap();
await expect(element(by.id(testID))).toHaveValue('0');
await expect(element(by.id(indicatorID))).toHaveText('Off');
});
});

it('disabled switch should not toggle', async () => {
const onTestID = 'disabled-initial-on';
const offTestID = 'disabled-initial-off';
const onIndicatorID = 'disabled-initial-on-indicator';
const offIndicatorID = 'disabled-initial-off-indicator';
describe('Switches can be disabled', () => {
beforeEach(async () => {
await element(by.id('explorer_example_search')).replaceText(
'Switches can be disabled',
);
});

await expect(element(by.id(onTestID))).toHaveValue('1');
await expect(element(by.id(onIndicatorID))).toHaveText('On');
it('disabled switch should not toggle', async () => {
const onTestID = 'disabled-initial-on';
const offTestID = 'disabled-initial-off';
const onIndicatorID = 'disabled-initial-on-indicator';
const offIndicatorID = 'disabled-initial-off-indicator';

try {
await element(by.id(onTestID)).tap();
throw new Error('Does not match');
} catch (err) {
jestExpect(err.message.message).toEqual(
jestExpect.stringContaining(
'Cannot perform action due to constraint(s) failure',
),
);
}
await expect(element(by.id(onTestID))).toHaveValue('1');
await expect(element(by.id(onIndicatorID))).toHaveText('On');
await expect(element(by.id(onTestID))).toHaveValue('1');
await expect(element(by.id(onIndicatorID))).toHaveText('On');

await expect(element(by.id(offTestID))).toHaveValue('0');
await expect(element(by.id(offIndicatorID))).toHaveText('Off');
try {
await element(by.id(offTestID)).tap();
throw new Error('Does not match');
} catch (err) {
jestExpect(err.message.message).toEqual(
jestExpect.stringContaining(
'Cannot perform action due to constraint(s) failure',
),
);
}
await expect(element(by.id(offTestID))).toHaveValue('0');
await expect(element(by.id(offIndicatorID))).toHaveText('Off');
try {
await element(by.id(onTestID)).tap();
throw new Error('Does not match');
} catch (err) {
jestExpect(err.message.message).toEqual(
jestExpect.stringContaining(
'Cannot perform action due to constraint(s) failure',
),
);
}
await expect(element(by.id(onTestID))).toHaveValue('1');
await expect(element(by.id(onIndicatorID))).toHaveText('On');

await expect(element(by.id(offTestID))).toHaveValue('0');
await expect(element(by.id(offIndicatorID))).toHaveText('Off');
try {
await element(by.id(offTestID)).tap();
throw new Error('Does not match');
} catch (err) {
jestExpect(err.message.message).toEqual(
jestExpect.stringContaining(
'Cannot perform action due to constraint(s) failure',
),
);
}
await expect(element(by.id(offTestID))).toHaveValue('0');
await expect(element(by.id(offIndicatorID))).toHaveText('Off');
});
});
});
9 changes: 9 additions & 0 deletions RNTester/e2e/__tests__/Touchable-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ describe('Touchable', () => {
});

it('Touchable Highlight should be tappable', async () => {
await element(by.id('explorer_example_search')).replaceText(
'<TouchableHighlight>',
);
const buttonID = 'touchable_highlight_image_button';
const button2ID = 'touchable_highlight_text_button';
const consoleID = 'touchable_highlight_console';
Expand All @@ -45,6 +48,9 @@ describe('Touchable', () => {
});

it('Touchable Without Feedback should be tappable', async () => {
await element(by.id('explorer_example_search')).replaceText(
'<TouchableWithoutFeedback>',
);
const buttonID = 'touchable_without_feedback_button';
const consoleID = 'touchable_without_feedback_console';

Expand All @@ -60,6 +66,9 @@ describe('Touchable', () => {
});

it('Text should be tappable', async () => {
await element(by.id('explorer_example_search')).replaceText(
'<Text onPress={fn}> with highlight',
);
const buttonID = 'tappable_text';
const consoleID = 'tappable_text_console';

Expand Down
32 changes: 16 additions & 16 deletions RNTester/js/ActivityIndicatorExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,22 @@ class ToggleAnimatingActivityIndicator extends Component<
}
}

const styles = StyleSheet.create({
Copy link
Member Author

@rickhanlonii rickhanlonii Dec 29, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In many of these files I moved the stylesheet declaration (or other code) above the example exports so that every example has the exports at the bottom for consistency

centering: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
gray: {
backgroundColor: '#cccccc',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 8,
},
});

exports.displayName = (undefined: ?string);
exports.framework = 'React';
exports.title = '<ActivityIndicator>';
Expand Down Expand Up @@ -158,19 +174,3 @@ exports.examples = [
},
},
];

const styles = StyleSheet.create({
centering: {
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
gray: {
backgroundColor: '#cccccc',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 8,
},
});
104 changes: 52 additions & 52 deletions RNTester/js/AlertIOSExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,58 +16,6 @@ const {StyleSheet, View, Text, TouchableHighlight, AlertIOS} = ReactNative;

const {SimpleAlertExampleBlock} = require('./AlertExample');

exports.framework = 'React';
exports.title = 'AlertIOS';
exports.description = 'iOS alerts and action sheets';
exports.examples = [
{
title: 'Alerts',
render() {
return <SimpleAlertExampleBlock />;
},
},
{
title: 'Prompt Options',
render(): React.Element<any> {
return <PromptOptions />;
},
},
{
title: 'Prompt Types',
render() {
return (
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Plain Text Entry')}>
<View style={styles.button}>
<Text>plain-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
AlertIOS.prompt('Secure Text', null, null, 'secure-text')
}>
<View style={styles.button}>
<Text>secure-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
AlertIOS.prompt('Login & Password', null, null, 'login-password')
}>
<View style={styles.button}>
<Text>login-password</Text>
</View>
</TouchableHighlight>
</View>
);
},
},
];

class PromptOptions extends React.Component<$FlowFixMeProps, any> {
customButtons: Array<Object>;

Expand Down Expand Up @@ -196,3 +144,55 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
},
});

exports.framework = 'React';
exports.title = 'AlertIOS';
exports.description = 'iOS alerts and action sheets';
exports.examples = [
{
title: 'Alerts',
render() {
return <SimpleAlertExampleBlock />;
},
},
{
title: 'Prompt Options',
render(): React.Element<any> {
return <PromptOptions />;
},
},
{
title: 'Prompt Types',
render() {
return (
<View>
<TouchableHighlight
style={styles.wrapper}
onPress={() => AlertIOS.prompt('Plain Text Entry')}>
<View style={styles.button}>
<Text>plain-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
AlertIOS.prompt('Secure Text', null, null, 'secure-text')
}>
<View style={styles.button}>
<Text>secure-text</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.wrapper}
onPress={() =>
AlertIOS.prompt('Login & Password', null, null, 'login-password')
}>
<View style={styles.button}>
<Text>login-password</Text>
</View>
</TouchableHighlight>
</View>
);
},
},
];
Loading