Skip to content

feat: introduce ByLabelText, ByRole and ByHintText a11y aliases #445

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.

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

Merged
merged 12 commits into from
Jul 21, 2020
Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
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
4 changes: 2 additions & 2 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The core team works directly on GitHub and all work is public.
> **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).

1. Fork the repo and create your branch from `master` (a guide on [how to fork a repository](https://help.github.com/articles/fork-a-repo/)).
2. Run `yarn` to setup the developement environment.
2. Run `yarn` to setup the development environment.
3. Do the changes you want and test them out in the example app before sending a pull request.

### Commit message convention
Expand All @@ -32,7 +32,7 @@ Our pre-commit hooks verify that your commit message matches this format when co

### Linting and tests

We use `flow` for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when commiting. You can also run the following commands manually:
We use `flow` for type checking, `eslint` with `prettier` for linting and formatting the code, and `jest` for testing. Our pre-commit hooks verify that the linter and tests pass when committing. You can also run the following commands manually:

- `yarn flow`: run flow on all files.
- `yarn lint`: run eslint and prettier.
Expand Down
108 changes: 84 additions & 24 deletions src/__tests__/a11yAPI.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,20 @@ function Section() {
);
}

test('getByA11yLabel, queryByA11yLabel, findByA11yLabel', async () => {
const { getByA11yLabel, queryByA11yLabel, findByA11yLabel } = render(
<Section />
);
test('getByA11yLabel, getByLabelText, queryByA11yLabel, queryByLabelText, findByA11yLabel, findByLabelText', async () => {
const {
getByA11yLabel,
getByLabelText,
queryByA11yLabel,
queryByLabelText,
findByA11yLabel,
findByLabelText,
} = render(<Section />);

// Assert that query aliases are referencing the same function
expect(getByA11yLabel).toBe(getByLabelText);
expect(queryByA11yLabel).toBe(queryByLabelText);
expect(findByA11yLabel).toBe(findByLabelText);

expect(getByA11yLabel(BUTTON_LABEL).props.accessibilityLabel).toEqual(
BUTTON_LABEL
Expand All @@ -90,10 +100,20 @@ test('getByA11yLabel, queryByA11yLabel, findByA11yLabel', async () => {
);
});

test('getAllByA11yLabel, queryAllByA11yLabel', async () => {
const { getAllByA11yLabel, queryAllByA11yLabel, findAllByA11yLabel } = render(
<Section />
);
test('getAllByA11yLabel, getAllByLabelText, queryAllByA11yLabel, queryAllByLabelText, findAllByA11yLabel, findAllByLabelText', async () => {
const {
getAllByA11yLabel,
getAllByLabelText,
queryAllByA11yLabel,
queryAllByLabelText,
findAllByA11yLabel,
findAllByLabelText,
} = render(<Section />);

// Assert that query aliases are referencing the same function
expect(getAllByA11yLabel).toBe(getAllByLabelText);
expect(queryAllByA11yLabel).toBe(queryAllByLabelText);
expect(findAllByA11yLabel).toBe(findAllByLabelText);

expect(getAllByA11yLabel(TEXT_LABEL)).toHaveLength(2);
expect(queryAllByA11yLabel(/cool/g)).toHaveLength(3);
Expand All @@ -107,10 +127,20 @@ test('getAllByA11yLabel, queryAllByA11yLabel', async () => {
);
});

test('getByA11yHint, queryByA11yHint, findByA11yHint', async () => {
const { getByA11yHint, queryByA11yHint, findByA11yHint } = render(
<Section />
);
test('getByA11yHint, getByHintText, queryByA11yHint, queryByHintText, findByA11yHint, findByHintText', async () => {
const {
getByA11yHint,
getByHintText,
queryByA11yHint,
queryByHintText,
findByA11yHint,
findByHintText,
} = render(<Section />);

// Assert that query aliases are referencing the same function
expect(getByA11yHint).toBe(getByHintText);
expect(queryByA11yHint).toBe(queryByHintText);
expect(findByA11yHint).toBe(findByHintText);

expect(getByA11yHint(BUTTON_HINT).props.accessibilityHint).toEqual(
BUTTON_HINT
Expand All @@ -134,10 +164,20 @@ test('getByA11yHint, queryByA11yHint, findByA11yHint', async () => {
);
});

test('getAllByA11yHint, queryAllByA11yHint', async () => {
const { getAllByA11yHint, queryAllByA11yHint, findAllByA11yHint } = render(
<Section />
);
test('getAllByA11yHint, getAllByHintText, queryAllByA11yHint, queryAllByHintText, findAllByA11yHint, findAllByHintText', async () => {
const {
getAllByA11yHint,
getAllByHintText,
queryAllByA11yHint,
queryAllByHintText,
findAllByA11yHint,
findAllByHintText,
} = render(<Section />);

// Assert that query aliases are referencing the same function
expect(getAllByA11yHint).toBe(getAllByHintText);
expect(queryAllByA11yHint).toBe(queryAllByHintText);
expect(findAllByA11yHint).toBe(findAllByHintText);

expect(getAllByA11yHint(TEXT_HINT)).toHaveLength(2);
expect(queryAllByA11yHint(/static/g)).toHaveLength(2);
Expand All @@ -151,10 +191,20 @@ test('getAllByA11yHint, queryAllByA11yHint', async () => {
);
});

test('getByA11yRole, queryByA11yRole, findByA11yRole', async () => {
const { getByA11yRole, queryByA11yRole, findByA11yRole } = render(
<Section />
);
test('getByA11yRole, getByRole, queryByA11yRole, queryByRole, findByA11yRole, findByRole', async () => {
const {
getByA11yRole,
getByRole,
queryByA11yRole,
queryByRole,
findByA11yRole,
findByRole,
} = render(<Section />);

// Assert that query aliases are referencing the same function
expect(getByA11yRole).toBe(getByRole);
expect(queryByA11yRole).toBe(queryByRole);
expect(findByA11yRole).toBe(findByRole);

expect(getByA11yRole('button').props.accessibilityRole).toEqual('button');
const button = queryByA11yRole(/button/g);
Expand All @@ -174,10 +224,20 @@ test('getByA11yRole, queryByA11yRole, findByA11yRole', async () => {
await expect(findByA11yRole('link')).rejects.toThrow(FOUND_TWO_INSTANCES);
});

test('getAllByA11yRole, queryAllByA11yRole, findAllByA11yRole', async () => {
const { getAllByA11yRole, queryAllByA11yRole, findAllByA11yRole } = render(
<Section />
);
test('getAllByA11yRole, getAllByRole, queryAllByA11yRole, queryAllByRole, findAllByA11yRole, findAllByRole', async () => {
const {
getAllByA11yRole,
getAllByRole,
queryAllByA11yRole,
queryAllByRole,
findAllByA11yRole,
findAllByRole,
} = render(<Section />);

// Assert that query aliases are referencing the same function
expect(getAllByA11yRole).toBe(getAllByRole);
expect(queryAllByA11yRole).toBe(queryAllByRole);
expect(findAllByA11yRole).toBe(findAllByRole);

expect(getAllByA11yRole('link')).toHaveLength(2);
expect(queryAllByA11yRole(/ink/g)).toHaveLength(2);
Expand Down
102 changes: 84 additions & 18 deletions src/helpers/a11yAPI.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,45 @@ type FindAllReturn = Promise<GetAllReturn>;
type A11yAPI = {|
// Label
getByA11yLabel: (string | RegExp) => GetReturn,
getByLabelText: (string | RegExp) => GetReturn,
getAllByA11yLabel: (string | RegExp) => GetAllReturn,
getAllByLabelText: (string | RegExp) => GetAllReturn,
queryByA11yLabel: (string | RegExp) => QueryReturn,
queryByLabelText: (string | RegExp) => QueryReturn,
queryAllByA11yLabel: (string | RegExp) => QueryAllReturn,
queryAllByLabelText: (string | RegExp) => QueryAllReturn,
findByA11yLabel: (string | RegExp, ?WaitForOptions) => FindReturn,
findByLabelText: (string | RegExp, ?WaitForOptions) => FindReturn,
findAllByA11yLabel: (string | RegExp, ?WaitForOptions) => FindAllReturn,
findAllByLabelText: (string | RegExp, ?WaitForOptions) => FindAllReturn,

// Hint
getByA11yHint: (string | RegExp) => GetReturn,
getByHintText: (string | RegExp) => GetReturn,
getAllByA11yHint: (string | RegExp) => GetAllReturn,
getAllByHintText: (string | RegExp) => GetAllReturn,
queryByA11yHint: (string | RegExp) => QueryReturn,
queryByHintText: (string | RegExp) => QueryReturn,
queryAllByA11yHint: (string | RegExp) => QueryAllReturn,
queryAllByHintText: (string | RegExp) => QueryAllReturn,
findByA11yHint: (string | RegExp, ?WaitForOptions) => FindReturn,
findByHintText: (string | RegExp, ?WaitForOptions) => FindReturn,
findAllByA11yHint: (string | RegExp, ?WaitForOptions) => FindAllReturn,
findAllByHintText: (string | RegExp, ?WaitForOptions) => FindAllReturn,

// Role
getByA11yRole: (A11yRole | RegExp) => GetReturn,
getByRole: (A11yRole | RegExp) => GetReturn,
getAllByA11yRole: (A11yRole | RegExp) => GetAllReturn,
getAllByRole: (A11yRole | RegExp) => GetAllReturn,
queryByA11yRole: (A11yRole | RegExp) => QueryReturn,
queryByRole: (A11yRole | RegExp) => QueryReturn,
queryAllByA11yRole: (A11yRole | RegExp) => QueryAllReturn,
queryAllByRole: (A11yRole | RegExp) => QueryAllReturn,
findByA11yRole: (A11yRole, ?WaitForOptions) => FindReturn,
findByRole: (A11yRole, ?WaitForOptions) => FindReturn,
findAllByA11yRole: (A11yRole, ?WaitForOptions) => FindAllReturn,
findAllByRole: (A11yRole, ?WaitForOptions) => FindAllReturn,

// States
getByA11yStates: (A11yStates | Array<A11yStates>) => GetReturn,
Expand Down Expand Up @@ -103,36 +121,84 @@ const a11yAPI = (instance: ReactTestInstance): A11yAPI =>
...makeQuery(
'accessibilityLabel',
{
getBy: ['getByA11yLabel', 'getByAccessibilityLabel'],
getAllBy: ['getAllByA11yLabel', 'getAllByAccessibilityLabel'],
queryBy: ['queryByA11yLabel', 'queryByAccessibilityLabel'],
queryAllBy: ['queryAllByA11yLabel', 'queryAllByAccessibilityLabel'],
findBy: ['findByA11yLabel', 'findByAccessibilityLabel'],
findAllBy: ['findAllByA11yLabel', 'findAllByAccessibilityLabel'],
getBy: ['getByA11yLabel', 'getByAccessibilityLabel', 'getByLabelText'],
getAllBy: [
'getAllByA11yLabel',
'getAllByAccessibilityLabel',
'getAllByLabelText',
],
queryBy: [
'queryByA11yLabel',
'queryByAccessibilityLabel',
'queryByLabelText',
],
queryAllBy: [
'queryAllByA11yLabel',
'queryAllByAccessibilityLabel',
'queryAllByLabelText',
],
findBy: [
'findByA11yLabel',
'findByAccessibilityLabel',
'findByLabelText',
],
findAllBy: [
'findAllByA11yLabel',
'findAllByAccessibilityLabel',
'findAllByLabelText',
],
},
matchStringValue
)(instance),
...makeQuery(
'accessibilityHint',
{
getBy: ['getByA11yHint', 'getByAccessibilityHint'],
getAllBy: ['getAllByA11yHint', 'getAllByAccessibilityHint'],
queryBy: ['queryByA11yHint', 'queryByAccessibilityHint'],
queryAllBy: ['queryAllByA11yHint', 'queryAllByAccessibilityHint'],
findBy: ['findByA11yHint', 'findByAccessibilityHint'],
findAllBy: ['findAllByA11yHint', 'findAllByAccessibilityHint'],
getBy: ['getByA11yHint', 'getByAccessibilityHint', 'getByHintText'],
getAllBy: [
'getAllByA11yHint',
'getAllByAccessibilityHint',
'getAllByHintText',
],
queryBy: [
'queryByA11yHint',
'queryByAccessibilityHint',
'queryByHintText',
],
queryAllBy: [
'queryAllByA11yHint',
'queryAllByAccessibilityHint',
'queryAllByHintText',
],
findBy: ['findByA11yHint', 'findByAccessibilityHint', 'findByHintText'],
findAllBy: [
'findAllByA11yHint',
'findAllByAccessibilityHint',
'findAllByHintText',
],
},
matchStringValue
)(instance),
...makeQuery(
'accessibilityRole',
{
getBy: ['getByA11yRole', 'getByAccessibilityRole'],
getAllBy: ['getAllByA11yRole', 'getAllByAccessibilityRole'],
queryBy: ['queryByA11yRole', 'queryByAccessibilityRole'],
queryAllBy: ['queryAllByA11yRole', 'queryAllByAccessibilityRole'],
findBy: ['findByA11yRole', 'findByAccessibilityRole'],
findAllBy: ['findAllByA11yRole', 'findAllByAccessibilityRole'],
getBy: ['getByA11yRole', 'getByAccessibilityRole', 'getByRole'],
getAllBy: [
'getAllByA11yRole',
'getAllByAccessibilityRole',
'getAllByRole',
],
queryBy: ['queryByA11yRole', 'queryByAccessibilityRole', 'queryByRole'],
queryAllBy: [
'queryAllByA11yRole',
'queryAllByAccessibilityRole',
'queryAllByRole',
],
findBy: ['findByA11yRole', 'findByAccessibilityRole', 'findByRole'],
findAllBy: [
'findAllByA11yRole',
'findAllByAccessibilityRole',
'findAllByRole',
],
},
matchStringValue
)(instance),
Expand Down
Loading