Skip to content
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

Use Cases for Button and E2E Tests #207

Open
wants to merge 3 commits into
base: mlh-fellowship-migrated-ui-changes
Choose a base branch
from
+166 −83
Open

Use Cases for Button and E2E Tests #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b6defc1
use cases for button example
chirag-singhal Aug 13, 2020
c680d5d
e2e tests for button example
chirag-singhal Aug 13, 2020
716b96e
fix Button tests
anku255 Aug 14, 2020
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
77 changes: 62 additions & 15 deletions packages/rn-tester/e2e/__tests__/Button-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,83 @@ describe('Button', () => {
);
});

it('Simple button should be tappable', async () => {
await openExampleWithTitle('Simple Button');
await element(by.id('simple_button')).tap();
await expect(element(by.text('Simple has been pressed!'))).toBeVisible();
it('Default Styling button should be tappable', async () => {
await openExampleWithTitle('Default Styling');
await element(by.id('button_default_styling')).tap();
await expect(
element(by.text('Your application has been submitted!')),
).toBeVisible();
await element(by.text('OK')).tap();
});

it('Adjusted color button should be tappable', async () => {
await openExampleWithTitle('Adjusted color');
await element(by.id('purple_button')).tap();
await expect(element(by.text('Purple has been pressed!'))).toBeVisible();
it('Red color button should be tappable', async () => {
await openExampleWithTitle('Color');
await element(by.id('cancel_button')).tap();
await expect(
element(by.text('Your application has been cancelled!')),
).toBeVisible();
await element(by.text('OK')).tap();
});

it("Two buttons with JustifyContent:'space-between' should be tappable", async () => {
await openExampleWithTitle('Fit to text layout');
await element(by.id('left_button')).tap();
await expect(element(by.text('Left has been pressed!'))).toBeVisible();
await openExampleWithTitle('Two Buttons');
await element(by.id('two_cancel_button')).tap();
await expect(
element(by.text('Your application has been cancelled!')),
).toBeVisible();
await element(by.text('OK')).tap();

await element(by.id('two_submit_button')).tap();
await expect(
element(by.text('Your application has been submitted!')),
).toBeVisible();
await element(by.text('OK')).tap();
});

it("Three buttons with JustifyContent:'space-between' should be tappable", async () => {
await openExampleWithTitle('Three Buttons');
await element(by.id('three_cancel_button')).tap();
await expect(
element(by.text('Your application has been cancelled!')),
).toBeVisible();
await element(by.text('OK')).tap();

await element(by.id('right_button')).tap();
await expect(element(by.text('Right has been pressed!'))).toBeVisible();
await openExampleWithTitle('Three Buttons');
await element(by.id('three_save_button')).tap();
await expect(
element(by.text('Your application has been saved!')),
).toBeVisible();
await element(by.text('OK')).tap();

await element(by.id('three_submit_button')).tap();
await expect(
element(by.text('Your application has been submitted!')),
).toBeVisible();
await element(by.text('OK')).tap();
});

it('Disabled button should not interact', async () => {
await openExampleWithTitle('Disabled Button');
await openExampleWithTitle('Disabled');
await element(by.id('disabled_button')).tap();
await expect(
element(by.text('Disabled has been pressed!')),
element(by.text('Your application has been submitted!')),
).toBeNotVisible();
});
});

it('AccessibilityLabel button should be tappable', async () => {
await openExampleWithTitle('AccessibilityLabel');
await element(by.id('accessibilityLabel_button')).tap();
await expect(
element(by.text('Your application has been submitted!')),
).toBeVisible();
await element(by.text('OK')).tap();
});

it('No onPress button should not interact', async () => {
await openExampleWithTitle('OnPress');
await element(by.id('onPress_button')).tap();
await expect(
element(by.text('Your application has been submitted!')),
).toBeNotVisible();
});
172 changes: 104 additions & 68 deletions packages/rn-tester/js/examples/Button/ButtonExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,9 @@
const React = require('react');

const {Alert, Button, View, StyleSheet} = require('react-native');
import {RNTesterThemeContext} from '../../components/RNTesterTheme';

function onButtonPress(buttonName) {
Alert.alert(`${buttonName} has been pressed!`);
Alert.alert(`Your application has been ${buttonName}!`);
}

exports.displayName = 'ButtonExample';
Expand All @@ -26,92 +25,129 @@ exports.description = 'Simple React Native button component.';

exports.examples = [
{
title: 'Simple Button',
description: ('The title and onPress handler are required. It is ' +
'recommended to set accessibilityLabel to help make your app usable by ' +
'everyone.': string),
render: function(): React.Node {
title: 'Button with default styling',
render: function (): React.Node {
return (
<RNTesterThemeContext.Consumer>
{theme => {
return (
<Button
onPress={() => onButtonPress('Simple')}
testID="simple_button"
color={theme.LinkColor}
title="Press Me"
accessibilityLabel="See an informative alert"
/>
);
}}
</RNTesterThemeContext.Consumer>
<Button
onPress={() => onButtonPress('submitted')}
testID="button_default_styling"
title="Submit Application"
accessibilityLabel="Press to submit your application!"
/>
);
},
},
{
title: 'Adjusted color',
description: ('Adjusts the color in a way that looks standard on each ' +
'platform. On iOS, the color prop controls the color of the text. On ' +
title: 'Button with color="red"',
description: ('Note: On iOS, the color prop controls the color of the text. On ' +
'Android, the color adjusts the background color of the button.': string),
render: function(): React.Node {
render: function (): React.Node {
return (
<Button
onPress={() => onButtonPress('cancelled')}
testID="cancel_button"
color="red"
title="Cancel Application"
accessibilityLabel="Press to cancel your application!"
/>
);
},
},
{
title: 'Two Buttons with Flexbox layout',
description: ('Two buttons wrapped inside view with justifyContent: spaceBetween,' +
'This layout strategy lets the title define the width of the button': string),
render: function (): React.Node {
return (
<RNTesterThemeContext.Consumer>
{theme => {
return (
<Button
onPress={() => onButtonPress('Purple')}
testID="purple_button"
color={theme.SystemPurpleColor}
title="Press Purple"
accessibilityLabel="Learn more about purple"
/>
);
}}
</RNTesterThemeContext.Consumer>
<View style={styles.container}>
<Button
onPress={() => onButtonPress('cancelled')}
testID="two_cancel_button"
color="red"
title="Cancel"
accessibilityLabel="Press to cancel your application!"
/>
<Button
onPress={() => onButtonPress('submitted')}
testID="two_submit_button"
color="green"
title="Submit"
accessibilityLabel="Press to submit your application!"
/>
</View>
);
},
},
{
title: 'Fit to text layout',
description: ('This layout strategy lets the title define the width of ' +
'the button': string),
render: function(): React.Node {
title: 'Three Buttons with Flexbox layout',
render: function (): React.Node {
return (
<RNTesterThemeContext.Consumer>
{theme => {
return (
<View style={styles.container}>
<Button
onPress={() => onButtonPress('Left')}
testID="left_button"
color={theme.LinkColor}
title="This looks great!"
accessibilityLabel="This sounds great!"
/>
<Button
onPress={() => onButtonPress('Right')}
testID="right_button"
color={theme.SystemPurpleColor}
title="Ok!"
accessibilityLabel="Ok, Great!"
/>
</View>
);
}}
</RNTesterThemeContext.Consumer>
<View style={styles.container}>
<Button
onPress={() => onButtonPress('cancelled')}
testID="three_cancel_button"
color="red"
title="Cancel"
accessibilityLabel="Press to cancel your application!"
/>
<Button
onPress={() => onButtonPress('saved')}
testID="three_save_button"
title="Save For Later"
accessibilityLabel="Press to save your application!"
/>
<Button
onPress={() => onButtonPress('submitted')}
testID="three_submit_button"
color="green"
title="Submit"
accessibilityLabel="Press to submit your application!"
/>
</View>
);
},
},
{
title: 'Disabled Button',
description: 'All interactions for the component are disabled.',
render: function(): React.Node {
title: 'Button with disabled={true}',
description:
'By passing disabled={true} all interactions for the button are disabled.',
render: function (): React.Node {
return (
<Button
disabled
onPress={() => onButtonPress('Disabled')}
onPress={() => onButtonPress('submitted')}
testID="disabled_button"
title="I Am Disabled"
title="Submit Application"
accessibilityLabel="Press to submit your application!"
/>
);
},
},
{
title: 'Button with accessibilityLabel="label"',
description:
'Note: This prop changes the text that a screen ' +
'reader announces (there are no visual differences).',
render: function (): React.Node {
return (
<Button
onPress={() => onButtonPress('submitted')}
testID="accessibilityLabel_button"
title="Submit Application"
accessibilityLabel="Press to submit your application!"
/>
);
},
},
{
title: 'Button with no onPress',
description:
'Note: This button does not interact on touch. To fix, always remember to pass onPress handler to the button.',
render: function (): React.Node {
return (
<Button
testID="onPress_button"
title="Submit Application"
accessibilityLabel="See an informative alert"
/>
);
Expand Down