feat: toBeBusy() matcher (#1493)

* feat: create always passing toBeBusy() matcher

* test: prepare toBeBusy() tests

* feat: implement toBeBusy() passing condition

* feat: implement error message

* test: update error message snapshots to correct format

* refactor: use screen variable

* refactor: tweaks

* refactor: cleanup

* refactor:  clean up

* refactor: finishing touches

---------

Co-authored-by: Maciej Jastrzębski <[email protected]>

Author: Hugo Duprat

src/helpers/accessiblity.ts

@@ -176,13 +176,6 @@ export function getAccessibilityCheckedState(
   return ariaChecked ?? accessibilityState?.checked;
 }
 
-export function getAccessibilitySelectedState(
-  element: ReactTestInstance
-): NonNullable<AccessibilityState['selected']> {
-  const { accessibilityState, 'aria-selected': ariaSelected } = element.props;
-  return ariaSelected ?? accessibilityState?.selected ?? false;
-}
-
 export function getAccessibilityValue(
   element: ReactTestInstance
 ): AccessibilityValue | undefined {
@@ -212,3 +205,17 @@ export function getAccessibilityValue(
     text: ariaValueText ?? accessibilityValue?.text,
   };
 }
+
+export function isElementBusy(
+  element: ReactTestInstance
+): NonNullable<AccessibilityState['busy']> {
+  const { accessibilityState, 'aria-busy': ariaBusy } = element.props;
+  return ariaBusy ?? accessibilityState?.busy ?? false;
+}
+
+export function isElementSelected(
+  element: ReactTestInstance
+): NonNullable<AccessibilityState['selected']> {
+  const { accessibilityState, 'aria-selected': ariaSelected } = element.props;
+  return ariaSelected ?? accessibilityState?.selected ?? false;
+}

src/matchers/__tests__/to-be-busy.test.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { render, screen } from '../..';
+import '../extend-expect';
+
+test('toBeBusy() basic case', () => {
+  render(
+    <>
+      <View testID="busy" accessibilityState={{ busy: true }} />
+      <View testID="busy-aria" aria-busy />
+      <View testID="not-busy" accessibilityState={{ busy: false }} />
+      <View testID="not-busy-aria" aria-busy={false} />
+      <View testID="default" />
+    </>
+  );
+
+  expect(screen.getByTestId('busy')).toBeBusy();
+  expect(screen.getByTestId('busy-aria')).toBeBusy();
+  expect(screen.getByTestId('not-busy')).not.toBeBusy();
+  expect(screen.getByTestId('not-busy-aria')).not.toBeBusy();
+  expect(screen.getByTestId('default')).not.toBeBusy();
+});
+
+test('toBeBusy() error messages', () => {
+  render(
+    <>
+      <View testID="busy" accessibilityState={{ busy: true }} />
+      <View testID="busy-aria" aria-busy />
+      <View testID="not-busy" accessibilityState={{ busy: false }} />
+      <View testID="not-busy-aria" aria-busy={false} />
+      <View testID="default" />
+    </>
+  );
+
+  expect(() => expect(screen.getByTestId('busy')).not.toBeBusy())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toBeBusy()
+
+    Received element is busy:
+      <View
+        accessibilityState={
+          {
+            "busy": true,
+          }
+        }
+        testID="busy"
+      />"
+  `);
+
+  expect(() => expect(screen.getByTestId('busy-aria')).not.toBeBusy())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toBeBusy()
+
+    Received element is busy:
+      <View
+        aria-busy={true}
+        testID="busy-aria"
+      />"
+  `);
+
+  expect(() => expect(screen.getByTestId('not-busy')).toBeBusy())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeBusy()
+
+    Received element is not busy:
+      <View
+        accessibilityState={
+          {
+            "busy": false,
+          }
+        }
+        testID="not-busy"
+      />"
+  `);
+
+  expect(() => expect(screen.getByTestId('not-busy-aria')).toBeBusy())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeBusy()
+
+    Received element is not busy:
+      <View
+        aria-busy={false}
+        testID="not-busy-aria"
+      />"
+  `);
+
+  expect(() => expect(screen.getByTestId('default')).toBeBusy())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeBusy()
+
+    Received element is not busy:
+      <View
+        testID="default"
+      />"
+  `);
+});

src/matchers/__tests__/to-be-selected.test.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { render, screen } from '../..';
 import '../extend-expect';
 
-test('.toBeSelected() basic case', () => {
+test('toBeSelected() basic case', () => {
   render(
     <>
       <View testID="selected" accessibilityState={{ selected: true }} />
@@ -21,7 +21,7 @@ test('.toBeSelected() basic case', () => {
   expect(screen.getByTestId('default')).not.toBeSelected();
 });
 
-test('.toBeSelected() error messages', () => {
+test('toBeSelected() error messages', () => {
   render(
     <>
       <View testID="selected" accessibilityState={{ selected: true }} />

src/matchers/extend-expect.d.ts

@@ -4,6 +4,7 @@ export interface JestNativeMatchers<R> {
   toBeOnTheScreen(): R;
   toBeChecked(): R;
   toBeDisabled(): R;
+  toBeBusy(): R;
   toBeEmptyElement(): R;
   toBeEnabled(): R;
   toBePartiallyChecked(): R;

src/matchers/extend-expect.ts

@@ -3,6 +3,7 @@
 import { toBeOnTheScreen } from './to-be-on-the-screen';
 import { toBeChecked } from './to-be-checked';
 import { toBeDisabled, toBeEnabled } from './to-be-disabled';
+import { toBeBusy } from './to-be-busy';
 import { toBeEmptyElement } from './to-be-empty-element';
 import { toBePartiallyChecked } from './to-be-partially-checked';
 import { toBeSelected } from './to-be-selected';
@@ -15,6 +16,7 @@ expect.extend({
   toBeOnTheScreen,
   toBeChecked,
   toBeDisabled,
+  toBeBusy,
   toBeEmptyElement,
   toBeEnabled,
   toBePartiallyChecked,

src/matchers/index.tsx

@@ -1,6 +1,7 @@
 export { toBeOnTheScreen } from './to-be-on-the-screen';
 export { toBeChecked } from './to-be-checked';
 export { toBeDisabled, toBeEnabled } from './to-be-disabled';
+export { toBeBusy } from './to-be-busy';
 export { toBeEmptyElement } from './to-be-empty-element';
 export { toBePartiallyChecked } from './to-be-partially-checked';
 export { toBeVisible } from './to-be-visible';

src/matchers/to-be-busy.tsx

@@ -0,0 +1,28 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { matcherHint } from 'jest-matcher-utils';
+import { isElementBusy } from '../helpers/accessiblity';
+import { checkHostElement, formatElement } from './utils';
+
+export function toBeBusy(
+  this: jest.MatcherContext,
+  element: ReactTestInstance
+) {
+  checkHostElement(element, toBeBusy, this);
+
+  return {
+    pass: isElementBusy(element),
+    message: () => {
+      const matcher = matcherHint(
+        `${this.isNot ? '.not' : ''}.toBeBusy`,
+        'element',
+        ''
+      );
+      return [
+        matcher,
+        '',
+        `Received element is ${this.isNot ? '' : 'not '}busy:`,
+        formatElement(element),
+      ].join('\n');
+    },
+  };
+}

src/matchers/to-be-selected.ts

@@ -1,6 +1,6 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { getAccessibilitySelectedState } from '../helpers/accessiblity';
+import { isElementSelected } from '../helpers/accessiblity';
 import { checkHostElement, formatElement } from './utils';
 
 export function toBeSelected(
@@ -10,7 +10,7 @@ export function toBeSelected(
   checkHostElement(element, toBeSelected, this);
 
   return {
-    pass: getAccessibilitySelectedState(element),
+    pass: isElementSelected(element),
     message: () => {
       const is = this.isNot ? 'is' : 'is not';
       return [