Skip to content

chore: deprecate some a11y queries #1226

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 11 commits into from
Jan 28, 2023
33 changes: 33 additions & 0 deletions src/helpers/deprecation.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
export function deprecateAllQueries<Queries extends Record<string, any>>(
queriesObject: Queries,
querySuffix: string,
recommendationSuffix: string
): Queries {
const result = {} as Queries;
Object.keys(queriesObject).forEach((queryName) => {
const queryFn = queriesObject[queryName];
const recommendation = queryName.replace(querySuffix, recommendationSuffix);
// @ts-expect-error: generic typing is hard
result[queryName] = deprecateQuery(queryFn, queryName, recommendation);
});

return result;
}

export function deprecateQuery<QueryFn extends (...args: any) => any>(
queryFn: QueryFn,
queryName: string,
recommendation: string
): QueryFn {
// @ts-expect-error: generic typing is hard
const wrapper: QueryFn = (...args: any) => {
// eslint-disable-next-line no-console
console.warn(
`${queryName}(...) is deprecated. Please use ${recommendation} instead.`
);

return queryFn(...args);
};

return wrapper;
}
77 changes: 77 additions & 0 deletions src/queries/__tests__/a11yState.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
/* eslint-disable no-console */
import * as React from 'react';
import { View, Text, Pressable, TouchableOpacity } from 'react-native';
import { render } from '../..';

type ConsoleLogMock = jest.Mock<typeof console.log>;

beforeEach(() => {
jest.spyOn(console, 'warn').mockImplementation(() => {});
});

const TEXT_LABEL = 'cool text';

const Typography = ({ children, ...rest }: any) => {
Expand Down Expand Up @@ -251,3 +258,73 @@ test('byA11yState queries support hidden option', () => {
`"Unable to find an element with expanded state: false"`
);
});

test('*ByA11yState deprecation warnings', () => {
const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
const view = render(<View accessibilityState={{ disabled: true }} />);

view.getByA11yState({ disabled: true });
expect(mockCalls[0][0]).toMatchInlineSnapshot(
`"getByA11yState(...) is deprecated. Please use getByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.getAllByA11yState({ disabled: true });
expect(mockCalls[1][0]).toMatchInlineSnapshot(
`"getAllByA11yState(...) is deprecated. Please use getAllByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.queryByA11yState({ disabled: true });
expect(mockCalls[2][0]).toMatchInlineSnapshot(
`"queryByA11yState(...) is deprecated. Please use queryByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.queryAllByA11yState({ disabled: true });
expect(mockCalls[3][0]).toMatchInlineSnapshot(
`"queryAllByA11yState(...) is deprecated. Please use queryAllByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.findByA11yState({ disabled: true });
expect(mockCalls[4][0]).toMatchInlineSnapshot(
`"findByA11yState(...) is deprecated. Please use findByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.findAllByA11yState({ disabled: true });
expect(mockCalls[5][0]).toMatchInlineSnapshot(
`"findAllByA11yState(...) is deprecated. Please use findAllByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);
});

test('*ByAccessibilityState deprecation warnings', () => {
const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
const view = render(<View accessibilityState={{ disabled: true }} />);

view.getByAccessibilityState({ disabled: true });
expect(mockCalls[0][0]).toMatchInlineSnapshot(
`"getByAccessibilityState(...) is deprecated. Please use getByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.getAllByAccessibilityState({ disabled: true });
expect(mockCalls[1][0]).toMatchInlineSnapshot(
`"getAllByAccessibilityState(...) is deprecated. Please use getAllByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.queryByAccessibilityState({ disabled: true });
expect(mockCalls[2][0]).toMatchInlineSnapshot(
`"queryByAccessibilityState(...) is deprecated. Please use queryByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.queryAllByAccessibilityState({ disabled: true });
expect(mockCalls[3][0]).toMatchInlineSnapshot(
`"queryAllByAccessibilityState(...) is deprecated. Please use queryAllByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.findByAccessibilityState({ disabled: true });
expect(mockCalls[4][0]).toMatchInlineSnapshot(
`"findByAccessibilityState(...) is deprecated. Please use findByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);

view.findAllByAccessibilityState({ disabled: true });
expect(mockCalls[5][0]).toMatchInlineSnapshot(
`"findAllByAccessibilityState(...) is deprecated. Please use findAllByRole(role, { disabled, selected, checked, busy, expanded }) instead."`
);
});
77 changes: 77 additions & 0 deletions src/queries/__tests__/a11yValue.test.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
/* eslint-disable no-console */
import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { render } from '../..';

type ConsoleLogMock = jest.Mock<typeof console.log>;

beforeEach(() => {
jest.spyOn(console, 'warn').mockImplementation(() => {});
});

const TEXT_LABEL = 'cool text';

const Typography = ({ children, ...rest }: any) => {
Expand Down Expand Up @@ -130,3 +137,73 @@ test('byA11yValue error messages', () => {
`"Unable to find an element with min value: 1, max value: 2, now value: 3, text value: /foo/i"`
);
});

test('*ByA11yValue deprecation warnings', () => {
const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
const view = render(<View accessibilityValue={{ min: 10 }} />);

view.getByA11yValue({ min: 10 });
expect(mockCalls[0][0]).toMatchInlineSnapshot(
`"getByA11yValue(...) is deprecated. Please use getByRole(role, { value: ... }) instead."`
);

view.getAllByA11yValue({ min: 10 });
expect(mockCalls[1][0]).toMatchInlineSnapshot(
`"getAllByA11yValue(...) is deprecated. Please use getAllByRole(role, { value: ... }) instead."`
);

view.queryByA11yValue({ min: 10 });
expect(mockCalls[2][0]).toMatchInlineSnapshot(
`"queryByA11yValue(...) is deprecated. Please use queryByRole(role, { value: ... }) instead."`
);

view.queryAllByA11yValue({ min: 10 });
expect(mockCalls[3][0]).toMatchInlineSnapshot(
`"queryAllByA11yValue(...) is deprecated. Please use queryAllByRole(role, { value: ... }) instead."`
);

view.findByA11yValue({ min: 10 });
expect(mockCalls[4][0]).toMatchInlineSnapshot(
`"findByA11yValue(...) is deprecated. Please use findByRole(role, { value: ... }) instead."`
);

view.findAllByA11yValue({ min: 10 });
expect(mockCalls[5][0]).toMatchInlineSnapshot(
`"findAllByA11yValue(...) is deprecated. Please use findAllByRole(role, { value: ... }) instead."`
);
});

test('*ByAccessibilityValue deprecation warnings', () => {
const mockCalls = (console.warn as ConsoleLogMock).mock.calls;
const view = render(<View accessibilityValue={{ min: 10 }} />);

view.getByAccessibilityValue({ min: 10 });
expect(mockCalls[0][0]).toMatchInlineSnapshot(
`"getByAccessibilityValue(...) is deprecated. Please use getByRole(role, { value: ... }) instead."`
);

view.getAllByAccessibilityValue({ min: 10 });
expect(mockCalls[1][0]).toMatchInlineSnapshot(
`"getAllByAccessibilityValue(...) is deprecated. Please use getAllByRole(role, { value: ... }) instead."`
);

view.queryByAccessibilityValue({ min: 10 });
expect(mockCalls[2][0]).toMatchInlineSnapshot(
`"queryByAccessibilityValue(...) is deprecated. Please use queryByRole(role, { value: ... }) instead."`
);

view.queryAllByAccessibilityValue({ min: 10 });
expect(mockCalls[3][0]).toMatchInlineSnapshot(
`"queryAllByAccessibilityValue(...) is deprecated. Please use queryAllByRole(role, { value: ... }) instead."`
);

view.findByAccessibilityValue({ min: 10 });
expect(mockCalls[4][0]).toMatchInlineSnapshot(
`"findByAccessibilityValue(...) is deprecated. Please use findByRole(role, { value: ... }) instead."`
);

view.findAllByAccessibilityValue({ min: 10 });
expect(mockCalls[5][0]).toMatchInlineSnapshot(
`"findAllByAccessibilityValue(...) is deprecated. Please use findAllByRole(role, { value: ... }) instead."`
);
});
37 changes: 25 additions & 12 deletions src/queries/a11yState.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { ReactTestInstance } from 'react-test-renderer';
import { AccessibilityState } from 'react-native';
import { accessibilityStateKeys } from '../helpers/accessiblity';
import { deprecateAllQueries } from '../helpers/deprecation';
import { findAll } from '../helpers/findAll';
import { matchAccessibilityState } from '../helpers/matchers/accessibilityState';
import { makeQueries } from './makeQueries';
Expand Down Expand Up @@ -92,18 +93,30 @@ export const bindByA11yStateQueries = (
const findAllByA11yState = findAllBy(instance);

return {
getByA11yState,
getAllByA11yState,
queryByA11yState,
queryAllByA11yState,
findByA11yState,
findAllByA11yState,
...deprecateAllQueries(
{
getByA11yState,
getAllByA11yState,
queryByA11yState,
queryAllByA11yState,
findByA11yState,
findAllByA11yState,
},
'A11yState',
'Role(role, { disabled, selected, checked, busy, expanded })'
),

getByAccessibilityState: getByA11yState,
getAllByAccessibilityState: getAllByA11yState,
queryByAccessibilityState: queryByA11yState,
queryAllByAccessibilityState: queryAllByA11yState,
findByAccessibilityState: findByA11yState,
findAllByAccessibilityState: findAllByA11yState,
...deprecateAllQueries(
{
getByAccessibilityState: getByA11yState,
getAllByAccessibilityState: getAllByA11yState,
queryByAccessibilityState: queryByA11yState,
queryAllByAccessibilityState: queryAllByA11yState,
findByAccessibilityState: findByA11yState,
findAllByAccessibilityState: findAllByA11yState,
},
'AccessibilityState',
'Role(role, { disabled, selected, checked, busy, expanded })'
),
};
};
37 changes: 25 additions & 12 deletions src/queries/a11yValue.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { ReactTestInstance } from 'react-test-renderer';
import { accessiblityValueKeys } from '../helpers/accessiblity';
import { deprecateAllQueries } from '../helpers/deprecation';
import { findAll } from '../helpers/findAll';
import {
AccessibilityValueMatcher,
Expand Down Expand Up @@ -109,18 +110,30 @@ export const bindByA11yValueQueries = (
const findAllByA11yValue = findAllBy(instance);

return {
getByA11yValue,
getAllByA11yValue,
queryByA11yValue,
queryAllByA11yValue,
findByA11yValue,
findAllByA11yValue,
...deprecateAllQueries(
{
getByA11yValue,
getAllByA11yValue,
queryByA11yValue,
queryAllByA11yValue,
findByA11yValue,
findAllByA11yValue,
},
'A11yValue',
'Role(role, { value: ... })'
),

getByAccessibilityValue: getByA11yValue,
getAllByAccessibilityValue: getAllByA11yValue,
queryByAccessibilityValue: queryByA11yValue,
queryAllByAccessibilityValue: queryAllByA11yValue,
findByAccessibilityValue: findByA11yValue,
findAllByAccessibilityValue: findAllByA11yValue,
...deprecateAllQueries(
{
getByAccessibilityValue: getByA11yValue,
getAllByAccessibilityValue: getAllByA11yValue,
queryByAccessibilityValue: queryByA11yValue,
queryAllByAccessibilityValue: queryAllByA11yValue,
findByAccessibilityValue: findByA11yValue,
findAllByAccessibilityValue: findAllByA11yValue,
},
'AccessibilityValue',
'Role(role, { value: ... })'
),
};
};