feat: implement toBeSelected

Author: AntoineThibi

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { render, screen } from '../..';
+import '../extend-expect';
+
+test('.toBeSelected() basic case', () => {
+  render(
+    <View>
+      <View testID="selected" accessibilityState={{ selected: true }} />
+      <View testID="not-selected" accessibilityState={{ selected: false }} />
+      <View testID="no-accessibilityState" />
+    </View>
+  );
+
+  expect(screen.getByTestId('selected')).toBeSelected();
+  expect(screen.getByTestId('not-selected')).not.toBeSelected();
+  expect(screen.getByTestId('no-accessibilityState')).not.toBeSelected();
+});
+
+test('.toBeSelected() error messages', () => {
+  render(
+    <View>
+      <View testID="selected" accessibilityState={{ selected: true }} />
+      <View testID="not-selected" accessibilityState={{ selected: false }} />
+      <View testID="no-accessibilityState" />
+    </View>
+  );
+
+  expect(() => expect(screen.getByTestId('not-selected')).toBeSelected())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeSelected()
+
+    Expected the element to have accessibility state selected:
+
+    Received element is not selected:
+      <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
+        testID="not-selected"
+      />"
+  `);
+  expect(() => expect(screen.getByTestId('selected')).not.toBeSelected())
+    .toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).not.toBeSelected()
+
+    Expected the element not to have accessibility state selected:
+
+    Received element is selected:
+      <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
+        testID="selected"
+      />"
+  `);
+  expect(() =>
+    expect(screen.getByTestId('no-accessibilityState')).toBeSelected()
+  ).toThrowErrorMatchingInlineSnapshot(`
+    "expect(element).toBeSelected()
+
+    Expected the element to have accessibility state selected:
+
+    Received element is not selected:
+      <View
+        testID="no-accessibilityState"
+      />"
+  `);
+});

src/matchers/extend-expect.d.ts

@@ -11,6 +11,7 @@ export interface JestNativeMatchers<R> {
   toHaveDisplayValue(expectedValue: TextMatch, options?: TextMatchOptions): R;
   toHaveProp(name: string, expectedValue?: unknown): R;
   toHaveTextContent(expectedText: TextMatch, options?: TextMatchOptions): R;
+  toBeSelected(): R;
 }
 
 // Implicit Jest global `expect`.

src/matchers/extend-expect.ts

@@ -9,6 +9,7 @@ import { toBeVisible } from './to-be-visible';
 import { toHaveDisplayValue } from './to-have-display-value';
 import { toHaveProp } from './to-have-prop';
 import { toHaveTextContent } from './to-have-text-content';
+import { toBeSelected } from './to-be-selected';
 
 expect.extend({
   toBeOnTheScreen,
@@ -21,4 +22,5 @@ expect.extend({
   toHaveDisplayValue,
   toHaveProp,
   toHaveTextContent,
+  toBeSelected,
 });

src/matchers/index.tsx

@@ -7,3 +7,4 @@ export { toBeVisible } from './to-be-visible';
 export { toHaveDisplayValue } from './to-have-display-value';
 export { toHaveProp } from './to-have-prop';
 export { toHaveTextContent } from './to-have-text-content';
+export { toBeSelected } from './to-be-selected';

src/matchers/to-be-selected.ts

@@ -0,0 +1,32 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { matcherHint } from 'jest-matcher-utils';
+import { getAccessibilityState } from '../helpers/accessiblity';
+import { checkHostElement, formatElement, formatMessage } from './utils';
+
+export function toBeSelected(
+  this: jest.MatcherContext,
+  element: ReactTestInstance
+) {
+  checkHostElement(element, toBeSelected, this);
+
+  return {
+    pass: getAccessibilityState(element)?.selected === true,
+    message: () => {
+      const is = this.isNot ? 'is' : 'is not';
+      const matcher = matcherHint(
+        `${this.isNot ? '.not' : ''}.toBeSelected`,
+        'element',
+        ''
+      );
+      return formatMessage(
+        matcher,
+        `Expected the element ${
+          this.isNot ? 'not to' : 'to'
+        } have accessibility state selected`,
+        '',
+        `Received element ${is} selected`,
+        formatElement(element)
+      );
+    },
+  };
+}