feat: toBeExpanded matcher

Author: siepra

src/helpers/accessiblity.ts

@@ -219,3 +219,10 @@ export function isElementSelected(
   const { accessibilityState, 'aria-selected': ariaSelected } = element.props;
   return ariaSelected ?? accessibilityState?.selected ?? false;
 }
+
+export function isElementExpanded(
+  element: ReactTestInstance
+): NonNullable<AccessibilityState['expanded']> {
+  const { accessibilityState, 'aria-expanded': ariaExpanded } = element.props;
+  return ariaExpanded ?? accessibilityState?.expanded ?? false;
+}

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

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

src/matchers/extend-expect.d.ts

@@ -10,6 +10,7 @@ export interface JestNativeMatchers<R> {
   toBeBusy(): R;
   toBeEmptyElement(): R;
   toBeEnabled(): R;
+  toBeExpanded(): R;
   toBePartiallyChecked(): R;
   toBeSelected(): R;
   toBeVisible(): R;

src/matchers/extend-expect.ts

@@ -5,6 +5,7 @@ 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 { toBeExpanded } from './to-be-expanded';
 import { toBePartiallyChecked } from './to-be-partially-checked';
 import { toBeSelected } from './to-be-selected';
 import { toBeVisible } from './to-be-visible';
@@ -21,6 +22,7 @@ expect.extend({
   toBeBusy,
   toBeEmptyElement,
   toBeEnabled,
+  toBeExpanded,
   toBePartiallyChecked,
   toBeSelected,
   toBeVisible,

src/matchers/index.tsx

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

src/matchers/to-be-expanded.tsx

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