feat: toBeCollapsed matcher

Author: siepra

src/helpers/accessiblity.ts

@@ -226,3 +226,14 @@ export function isElementExpanded(
   const { accessibilityState, 'aria-expanded': ariaExpanded } = element.props;
   return ariaExpanded ?? accessibilityState?.expanded ?? false;
 }
+
+export function isElementCollapsed(
+  element: ReactTestInstance
+): NonNullable<AccessibilityState['expanded']> {
+  const { accessibilityState, 'aria-expanded': ariaExpanded } = element.props;
+  return ariaExpanded !== undefined
+    ? !ariaExpanded
+    : accessibilityState !== undefined
+    ? !accessibilityState.expanded
+    : false;
+}

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

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { render, screen } from '../..';
+import '../extend-expect';
+
+test('toBeCollapsed() 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')).not.toBeCollapsed();
+  expect(screen.getByTestId('expanded-aria')).not.toBeCollapsed();
+  expect(screen.getByTestId('not-expanded')).toBeCollapsed();
+  expect(screen.getByTestId('not-expanded-aria')).toBeCollapsed();
+  expect(screen.getByTestId('default')).not.toBeCollapsed();
+});
+
+test('toBeCollapsed() 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')).toBeCollapsed())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeCollapsed()
+
+    Received element is not collapsed:
+      <View
+        accessibilityState={
+          {
+            "expanded": true,
+          }
+        }
+        testID="expanded"
+      />"
+  `);
+
+  expect(() => expect(screen.getByTestId('expanded-aria')).toBeCollapsed())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeCollapsed()
+
+    Received element is not collapsed:
+      <View
+        aria-expanded={true}
+        testID="expanded-aria"
+      />"
+  `);
+
+  expect(() => expect(screen.getByTestId('not-expanded')).not.toBeCollapsed())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toBeCollapsed()
+
+    Received element is collapsed:
+      <View
+        accessibilityState={
+          {
+            "expanded": false,
+          }
+        }
+        testID="not-expanded"
+      />"
+  `);
+
+  expect(() =>
+    expect(screen.getByTestId('not-expanded-aria')).not.toBeCollapsed()
+  ).toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toBeCollapsed()
+
+    Received element is collapsed:
+      <View
+        aria-expanded={false}
+        testID="not-expanded-aria"
+      />"
+  `);
+
+  expect(() => expect(screen.getByTestId('default')).toBeCollapsed())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeCollapsed()
+
+    Received element is not collapsed:
+      <View
+        testID="default"
+      />"
+  `);
+});

src/matchers/extend-expect.d.ts

@@ -6,6 +6,7 @@ import type { Style } from './to-have-style';
 export interface JestNativeMatchers<R> {
   toBeOnTheScreen(): R;
   toBeChecked(): R;
+  toBeCollapsed(): R;
   toBeDisabled(): R;
   toBeBusy(): R;
   toBeEmptyElement(): R;

src/matchers/extend-expect.ts

@@ -2,6 +2,7 @@
 
 import { toBeOnTheScreen } from './to-be-on-the-screen';
 import { toBeChecked } from './to-be-checked';
+import { toBeCollapsed } from './to-be-collapsed';
 import { toBeDisabled, toBeEnabled } from './to-be-disabled';
 import { toBeBusy } from './to-be-busy';
 import { toBeEmptyElement } from './to-be-empty-element';
@@ -18,6 +19,7 @@ import { toHaveTextContent } from './to-have-text-content';
 expect.extend({
   toBeOnTheScreen,
   toBeChecked,
+  toBeCollapsed,
   toBeDisabled,
   toBeBusy,
   toBeEmptyElement,

src/matchers/index.tsx

@@ -1,5 +1,6 @@
 export { toBeBusy } from './to-be-busy';
 export { toBeChecked } from './to-be-checked';
+export { toBeCollapsed } from './to-be-collapsed';
 export { toBeDisabled, toBeEnabled } from './to-be-disabled';
 export { toBeEmptyElement } from './to-be-empty-element';
 export { toBeExpanded } from './to-be-expanded';

src/matchers/to-be-collapsed.tsx

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