From 90b2038ccf99b9f286c18446cbfc82e1dc3dfe16 Mon Sep 17 00:00:00 2001 From: tarunrajput Date: Mon, 11 Sep 2023 23:26:38 +0530 Subject: [PATCH 1/4] feat: add toHaveAccessibilityValue matcher --- .../__tests__/to-have-accessibility-value.tsx | 149 ++++++++++++++++++ src/matchers/extend-expect.d.ts | 2 + src/matchers/extend-expect.ts | 2 + src/matchers/index.tsx | 1 + src/matchers/to-have-accessibility-value.tsx | 38 +++++ 5 files changed, 192 insertions(+) create mode 100644 src/matchers/__tests__/to-have-accessibility-value.tsx create mode 100644 src/matchers/to-have-accessibility-value.tsx diff --git a/src/matchers/__tests__/to-have-accessibility-value.tsx b/src/matchers/__tests__/to-have-accessibility-value.tsx new file mode 100644 index 000000000..1f1b356db --- /dev/null +++ b/src/matchers/__tests__/to-have-accessibility-value.tsx @@ -0,0 +1,149 @@ +import * as React from 'react'; +import { View } from 'react-native'; +import { render, screen } from '../..'; +import '../extend-expect'; + +function renderViewsWithAccessibilityValue() { + return render( + <> + + + + + + + + + ); +} + +test('toHaveAccessibilityValue() on matching accessibility value', () => { + renderViewsWithAccessibilityValue(); + + const min = screen.getByTestId('min'); + const max = screen.getByTestId('max'); + const now = screen.getByTestId('now'); + const text = screen.getByTestId('text'); + const minMax = screen.getByTestId('min-max'); + const minMaxNow = screen.getByTestId('min-max-now'); + const minMaxNowText = screen.getByTestId('min-max-now-text'); + + expect(min).toHaveAccessibilityValue({ min: 0 }); + expect(max).toHaveAccessibilityValue({ max: 100 }); + expect(now).toHaveAccessibilityValue({ now: 65 }); + expect(minMax).toHaveAccessibilityValue({ min: 0, max: 100 }); + expect(minMaxNowText).toHaveAccessibilityValue({ + min: 0, + max: 100, + now: 65, + text: 'test', + }); + expect(minMaxNow).toHaveAccessibilityValue({ min: 0, max: 100, now: 65 }); + expect(text).toHaveAccessibilityValue({ text: 'accessibility value' }); + expect(text).toHaveAccessibilityValue({ text: /accessibility/i }); + + expect(() => expect(min).not.toHaveAccessibilityValue({ min: 0 })) + .toThrowErrorMatchingInlineSnapshot(` + "expect(element).not.toHaveAccessibilityValue({"min": 0}) + + Expected the element not to have accessibility value: + {"min": 0} + Received element with accessibility value: + {"max": undefined, "min": 0, "now": undefined, "text": undefined}" + `); + + expect(() => expect(text).toHaveAccessibilityValue({ text: 'value' })) + .toThrowErrorMatchingInlineSnapshot(` + "expect(element).toHaveAccessibilityValue({"text": "value"}) + + Expected the element to have accessibility value: + {"text": "value"} + Received element with accessibility value: + {"max": undefined, "min": undefined, "now": undefined, "text": "accessibility value"}" + `); + + expect(() => expect(text).toHaveAccessibilityValue({ text: /test/i })) + .toThrowErrorMatchingInlineSnapshot(` + "expect(element).toHaveAccessibilityValue({"text": /test/i}) + + Expected the element to have accessibility value: + {"text": /test/i} + Received element with accessibility value: + {"max": undefined, "min": undefined, "now": undefined, "text": "accessibility value"}" + `); +}); + +test('toHaveAccessibilityValue() on non-matching accessibility value', () => { + renderViewsWithAccessibilityValue(); + + const min = screen.getByTestId('min'); + const max = screen.getByTestId('max'); + const now = screen.getByTestId('now'); + const text = screen.getByTestId('text'); + const minMax = screen.getByTestId('min-max'); + const minMaxNow = screen.getByTestId('min-max-now'); + const minMaxNowText = screen.getByTestId('min-max-now-text'); + + expect(min).not.toHaveAccessibilityValue({ min: 100 }); + expect(max).not.toHaveAccessibilityValue({ max: 0 }); + expect(now).not.toHaveAccessibilityValue({ now: 0 }); + expect(text).not.toHaveAccessibilityValue({ text: 'accessibility' }); + expect(minMax).not.toHaveAccessibilityValue({ min: 100, max: 0 }); + expect(minMaxNow).not.toHaveAccessibilityValue({ min: 100, max: 0, now: 0 }); + expect(minMaxNowText).not.toHaveAccessibilityValue({ + min: 100, + max: 0, + now: 0, + text: 'accessibility', + }); + + expect(() => expect(min).toHaveAccessibilityValue({ min: 100 })) + .toThrowErrorMatchingInlineSnapshot(` + "expect(element).toHaveAccessibilityValue({"min": 100}) + + Expected the element to have accessibility value: + {"min": 100} + Received element with accessibility value: + {"max": undefined, "min": 0, "now": undefined, "text": undefined}" + `); +}); + +test('toHaveAccessibilityValue() when no accessibilityValue prop is provided', () => { + render(); + + const view = screen.getByTestId('view'); + + expect(() => expect(view).toHaveAccessibilityValue({ min: 0 })) + .toThrowErrorMatchingInlineSnapshot(` + "expect(element).toHaveAccessibilityValue({"min": 0}) + + Expected the element to have accessibility value: + {"min": 0} + Received element with accessibility value: + undefined" + `); +}); + +test('toHaveAccessibilityValue() on partially matching accessibility value', () => { + renderViewsWithAccessibilityValue(); + + const minMax = screen.getByTestId('min-max'); + const minMaxNow = screen.getByTestId('min-max-now'); + const minMaxNowText = screen.getByTestId('min-max-now-text'); + + expect(minMax).toHaveAccessibilityValue({ min: 0 }); + expect(minMax).toHaveAccessibilityValue({ max: 100 }); + expect(minMaxNow).toHaveAccessibilityValue({ now: 65 }); + expect(minMaxNow).toHaveAccessibilityValue({ min: 0, max: 100 }); + expect(minMaxNowText).toHaveAccessibilityValue({ text: 'test' }); + expect(minMaxNowText).toHaveAccessibilityValue({ text: /te/i }); +}); diff --git a/src/matchers/extend-expect.d.ts b/src/matchers/extend-expect.d.ts index dd8bfa173..2cee509c3 100644 --- a/src/matchers/extend-expect.d.ts +++ b/src/matchers/extend-expect.d.ts @@ -1,6 +1,7 @@ import type { StyleProp } from 'react-native'; import type { ReactTestInstance } from 'react-test-renderer'; import type { TextMatch, TextMatchOptions } from '../matches'; +import type { AccessibilityValueMatcher } from '../helpers/matchers/accessibilityValue'; import type { Style } from './to-have-style'; export interface JestNativeMatchers { @@ -20,6 +21,7 @@ export interface JestNativeMatchers { toHaveProp(name: string, expectedValue?: unknown): R; toHaveStyle(style: StyleProp