refactor: add deprecation messages to *ByA11yState and *ByA11yValue

Author: mdjastrzebski

src/helpers/deprecation.ts

@@ -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;
+}

src/queries/__tests__/a11yState.test.tsx

@@ -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) => {
@@ -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."`
+  );
+});

src/queries/__tests__/a11yValue.test.tsx

@@ -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) => {
@@ -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."`
+  );
+});

src/queries/a11yState.ts

@@ -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';
@@ -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 })'
+    ),
   };
 };

src/queries/a11yValue.ts

@@ -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,
@@ -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: ... })'
+    ),
   };
 };