From 4909cd598d072ccd2e02f466eac9f812daebbd6d Mon Sep 17 00:00:00 2001 From: Sid Ferreira <143615+sidferreira@users.noreply.github.com> Date: Mon, 20 Jan 2025 23:04:46 -0800 Subject: [PATCH 1/4] adds failing test --- .../Pressable/__tests__/Pressable.test.tsx | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 src/components/Pressable/__tests__/Pressable.test.tsx diff --git a/src/components/Pressable/__tests__/Pressable.test.tsx b/src/components/Pressable/__tests__/Pressable.test.tsx new file mode 100644 index 0000000000..a4e6144070 --- /dev/null +++ b/src/components/Pressable/__tests__/Pressable.test.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { Pressable as RNPressable, Text } from 'react-native'; +import { fireEvent, render, screen } from '@testing-library/react-native'; +import RNGHPressable from '../Pressable'; + +type MyComponentProps = { + onPress: () => void; + children: React.ReactNode; + disabled?: boolean; +}; + +const MyRNPressableComponent = ({ + children, + onPress, + disabled, +}: MyComponentProps) => ( + + {children} + +); + +const MyRNGHPressable = ({ children, onPress, disabled }: MyComponentProps) => ( + + {children} + +); + +describe('Pressable', () => { + describe('checking drop-in replacement', () => { + describe('onPress', () => { + it('enabled', () => { + const onPressRN = jest.fn(); + render( + + Pressable + + ); + + fireEvent(screen.getByText('Pressable'), 'press'); + expect(onPressRN).toHaveBeenCalled(); + + const onPressRNGN = jest.fn(); + render( + + Pressable + + ); + + fireEvent(screen.getByText('Pressable'), 'press'); + expect(onPressRNGN).toHaveBeenCalled(); + }); + + it('disabled', () => { + const onPressRN = jest.fn(); + render( + + Pressable + + ); + + fireEvent(screen.getByText('Pressable'), 'press'); + expect(onPressRN).not.toHaveBeenCalled(); + + const onPressRNGN = jest.fn(); + render( + + Pressable + + ); + + fireEvent(screen.getByText('Pressable'), 'press'); + expect(onPressRNGN).not.toHaveBeenCalled(); + }); + }); + }); +}); From 8189f545493f4adb777ec6439f3d1e5edb44dd83 Mon Sep 17 00:00:00 2001 From: Sid Ferreira <143615+sidferreira@users.noreply.github.com> Date: Mon, 20 Jan 2025 23:26:53 -0800 Subject: [PATCH 2/4] fixes disabled --- src/components/Pressable/Pressable.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Pressable/Pressable.tsx b/src/components/Pressable/Pressable.tsx index 9223a18cc1..1e2880082c 100644 --- a/src/components/Pressable/Pressable.tsx +++ b/src/components/Pressable/Pressable.tsx @@ -380,6 +380,13 @@ export default function Pressable(props: PressableProps) { ? children({ pressed: pressedState }) : children; + // BEGIN - RN Pressable Compatibility + const _onStartShouldSetResponder = remainingProps.onStartShouldSetResponder; + remainingProps.onStartShouldSetResponder = (params) => + _onStartShouldSetResponder?.(params) || isPressableEnabled; + + // END - RN Pressable Compatibility + return ( Date: Tue, 21 Jan 2025 00:31:14 -0800 Subject: [PATCH 3/4] testing library tweaks --- .eslintrc.json | 10 ++++++- jest.config.js | 1 + jestSetupAfterEnv.js | 4 +++ package.json | 2 ++ yarn.lock | 64 +++++++++++++++++++++++++++++++++++++++----- 5 files changed, 74 insertions(+), 7 deletions(-) create mode 100644 jestSetupAfterEnv.js diff --git a/.eslintrc.json b/.eslintrc.json index 946cf60611..a52769b0dd 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -66,5 +66,13 @@ ], "curly": "error", "spaced-comment": "error" - } + }, + "overrides": [ + { + // Test files only + "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"], + "extends": ["plugin:testing-library/react"], + "plugins": ["testing-library"] + } + ] } diff --git a/jest.config.js b/jest.config.js index f2973a3677..024b520972 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,7 @@ module.exports = { preset: 'react-native', setupFiles: ['./jestSetup.js'], + setupFilesAfterEnv: ['./jestSetupAfterEnv.js'], transformIgnorePatterns: [ "node_modules/?!(react-native-reanimated)", "node_modules/?!(react-native)" diff --git a/jestSetupAfterEnv.js b/jestSetupAfterEnv.js new file mode 100644 index 0000000000..9103e0b176 --- /dev/null +++ b/jestSetupAfterEnv.js @@ -0,0 +1,4 @@ + +import '@testing-library/react-native/extend-expect'; +import '@testing-library/jest-native/legacy-extend-expect'; + diff --git a/package.json b/package.json index 04f0a26d77..0f61ce99b8 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,7 @@ "@babel/preset-typescript": "^7.12.7", "@react-native/babel-preset": "0.77.0-rc.3", "@testing-library/react-native": "^12.5.1", + "@testing-library/jest-native": "^5.4.3", "@types/hoist-non-react-statics": "^3.3.1", "@types/invariant": "^2.2.37", "@types/jest": "^27.0.3", @@ -90,6 +91,7 @@ "eslint-import-resolver-babel-module": "^5.2.0", "eslint-plugin-jest": "^26.0.0", "eslint-plugin-prettier": "^5.2.1", + "eslint-plugin-testing-library": "^5.10.2", "expo": "^35.0.1", "husky": "^8.0.1", "jest": "^28.1.0", diff --git a/yarn.lock b/yarn.lock index f4d3e299ab..a8ff159557 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3338,6 +3338,13 @@ dependencies: "@types/hammerjs" "^2.0.36" +"@eslint-community/eslint-utils@^4.2.0": + version "4.4.1" + resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56" + integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA== + dependencies: + eslint-visitor-keys "^3.4.3" + "@eslint/eslintrc@^0.4.3": version "0.4.3" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c" @@ -4075,6 +4082,17 @@ dependencies: defer-to-connect "^2.0.0" +"@testing-library/jest-native@^5.4.3": + version "5.4.3" + resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-5.4.3.tgz#9334c68eaf45db9eb20d0876728cc5d7fc2c3ea2" + integrity sha512-/sSDGaOuE+PJ1Z9Kp4u7PQScSVVXGud59I/qsBFFJvIbcn4P6yYw6cBnBmbPF+X9aRIsTJRDl6gzw5ZkJNm66w== + dependencies: + chalk "^4.1.2" + jest-diff "^29.0.1" + jest-matcher-utils "^29.0.1" + pretty-format "^29.0.3" + redent "^3.0.0" + "@testing-library/react-native@^12.5.1": version "12.5.1" resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.5.1.tgz#8ff67e87589d7d3307fce8ec41131c898c9dbd98" @@ -4279,6 +4297,11 @@ resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== +"@types/semver@^7.3.12": + version "7.5.8" + resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e" + integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ== + "@types/stack-utils@^2.0.0": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" @@ -4364,6 +4387,14 @@ "@typescript-eslint/types" "5.10.1" "@typescript-eslint/visitor-keys" "5.10.1" +"@typescript-eslint/scope-manager@5.62.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c" + integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w== + dependencies: + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/visitor-keys" "5.62.0" + "@typescript-eslint/types@4.33.0": version "4.33.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72" @@ -4405,7 +4436,7 @@ semver "^7.3.5" tsutils "^3.21.0" -"@typescript-eslint/typescript-estree@^5.55.0": +"@typescript-eslint/typescript-estree@5.62.0", "@typescript-eslint/typescript-estree@^5.55.0": version "5.62.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b" integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA== @@ -4430,6 +4461,20 @@ eslint-scope "^5.1.1" eslint-utils "^3.0.0" +"@typescript-eslint/utils@^5.58.0": + version "5.62.0" + resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86" + integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ== + dependencies: + "@eslint-community/eslint-utils" "^4.2.0" + "@types/json-schema" "^7.0.9" + "@types/semver" "^7.3.12" + "@typescript-eslint/scope-manager" "5.62.0" + "@typescript-eslint/types" "5.62.0" + "@typescript-eslint/typescript-estree" "5.62.0" + eslint-scope "^5.1.1" + semver "^7.3.7" + "@typescript-eslint/visitor-keys@4.33.0": version "4.33.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd" @@ -5214,7 +5259,7 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.0.2, chalk@^4.1.1: +chalk@^4.0.2, chalk@^4.1.1, chalk@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -6361,6 +6406,13 @@ eslint-plugin-react@^7.23.0: semver "^6.3.0" string.prototype.matchall "^4.0.6" +eslint-plugin-testing-library@^5.10.2: + version "5.11.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz#5b46cdae96d4a78918711c0b4792f90088e62d20" + integrity sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw== + dependencies: + "@typescript-eslint/utils" "^5.58.0" + eslint-rule-composer@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9" @@ -6408,7 +6460,7 @@ eslint-visitor-keys@^3.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz#6fbb166a6798ee5991358bc2daa1ba76cc1254a1" integrity sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ== -eslint-visitor-keys@^3.3.0: +eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.3: version "3.4.3" resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800" integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag== @@ -8104,7 +8156,7 @@ jest-diff@^28.1.3: jest-get-type "^28.0.2" pretty-format "^28.1.3" -jest-diff@^29.7.0: +jest-diff@^29.0.1, jest-diff@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a" integrity sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw== @@ -8227,7 +8279,7 @@ jest-matcher-utils@^28.1.3: jest-get-type "^28.0.2" pretty-format "^28.1.3" -jest-matcher-utils@^29.7.0: +jest-matcher-utils@^29.0.1, jest-matcher-utils@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12" integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g== @@ -10061,7 +10113,7 @@ pretty-format@^28.1.3: ansi-styles "^5.0.0" react-is "^18.0.0" -pretty-format@^29.7.0: +pretty-format@^29.0.3, pretty-format@^29.7.0: version "29.7.0" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812" integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ== From 5bce2211d57eee81274cbcd80c4ce7ad5b561b84 Mon Sep 17 00:00:00 2001 From: Sid Ferreira <143615+sidferreira@users.noreply.github.com> Date: Tue, 21 Jan 2025 00:31:33 -0800 Subject: [PATCH 4/4] a11y state wip --- .../Pressable/__tests__/Pressable.test.tsx | 33 +++++++++++++++---- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/src/components/Pressable/__tests__/Pressable.test.tsx b/src/components/Pressable/__tests__/Pressable.test.tsx index a4e6144070..219b269acc 100644 --- a/src/components/Pressable/__tests__/Pressable.test.tsx +++ b/src/components/Pressable/__tests__/Pressable.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Pressable as RNPressable, Text } from 'react-native'; +import { Pressable as RNPressable, Text, View } from 'react-native'; import { fireEvent, render, screen } from '@testing-library/react-native'; import RNGHPressable from '../Pressable'; @@ -14,15 +14,25 @@ const MyRNPressableComponent = ({ onPress, disabled, }: MyComponentProps) => ( - - {children} - + + + {children} + + ); const MyRNGHPressable = ({ children, onPress, disabled }: MyComponentProps) => ( - - {children} - + + + {children} + + ); describe('Pressable', () => { @@ -60,6 +70,10 @@ describe('Pressable', () => { fireEvent(screen.getByText('Pressable'), 'press'); expect(onPressRN).not.toHaveBeenCalled(); + // expect(screen.getByRole('button')).toBeDisabled(); + // expect(screen.getByRole('button')).legacy_toHaveAccessibilityState({ + // disabled: true, + // }); const onPressRNGN = jest.fn(); render( @@ -70,6 +84,11 @@ describe('Pressable', () => { fireEvent(screen.getByText('Pressable'), 'press'); expect(onPressRNGN).not.toHaveBeenCalled(); + + // expect(screen.getByRole('button')).toBeDisabled(); + // expect(screen.getByRole('button')).legacy_toHaveAccessibilityState({ + // disabled: true, + // }); }); }); });