From 44de5a80b1a5cb54454b202f178ea82d77a555b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jirka=20Ba=C5=BEant?= Date: Fri, 10 Jan 2025 09:48:46 +0100 Subject: [PATCH] chore(suite-native): introduce component tests --- jest.config.native.js | 12 +----- suite-native/accounts/jest.config.js | 4 ++ suite-native/accounts/package.json | 5 ++- .../src/components/AccountLabelFieldHint.tsx | 2 +- .../AccountLabelFieldHint.comp.test.tsx | 17 +++++++++ suite-native/accounts/tsconfig.json | 3 +- suite-native/atoms/jest.config.js | 4 ++ suite-native/atoms/package.json | 6 ++- .../src/Card/__tests__/Card.comp.test.tsx | 29 +++++++++++++++ suite-native/atoms/tsconfig.json | 3 +- suite-native/test-utils/package.json | 5 +-- suite-native/test-utils/src/Provider.tsx | 6 +-- suite-native/test-utils/src/index.ts | 22 ----------- suite-native/test-utils/src/index.tsx | 37 +++++++++++++++++++ yarn.lock | 23 ++++++------ 15 files changed, 123 insertions(+), 55 deletions(-) create mode 100644 suite-native/accounts/jest.config.js create mode 100644 suite-native/accounts/src/components/__tests__/AccountLabelFieldHint.comp.test.tsx create mode 100644 suite-native/atoms/jest.config.js create mode 100644 suite-native/atoms/src/Card/__tests__/Card.comp.test.tsx delete mode 100644 suite-native/test-utils/src/index.ts create mode 100644 suite-native/test-utils/src/index.tsx diff --git a/jest.config.native.js b/jest.config.native.js index a62817379a5..a82ee2d6cb0 100644 --- a/jest.config.native.js +++ b/jest.config.native.js @@ -7,17 +7,7 @@ const { } = require('./jest.config.base'); const babelConfig = { - presets: [ - 'module:metro-react-native-babel-preset', - ['@babel/preset-env', { targets: { node: 'current' }, modules: 'commonjs' }], - '@babel/preset-typescript', - [ - '@babel/preset-react', - { - runtime: 'automatic', - }, - ], - ], + presets: ['babel-preset-expo'], }; module.exports = { diff --git a/suite-native/accounts/jest.config.js b/suite-native/accounts/jest.config.js new file mode 100644 index 00000000000..15a5f278513 --- /dev/null +++ b/suite-native/accounts/jest.config.js @@ -0,0 +1,4 @@ +const { ...baseConfig } = require('../../jest.config.native'); +module.exports = { + ...baseConfig, +}; diff --git a/suite-native/accounts/package.json b/suite-native/accounts/package.json index c4099b407c7..8ce99de8b0b 100644 --- a/suite-native/accounts/package.json +++ b/suite-native/accounts/package.json @@ -6,7 +6,7 @@ "sideEffects": false, "main": "src/index", "scripts": { - "test:unit": "yarn g:jest -c ../../jest.config.native.js", + "test:unit": "yarn g:jest", "depcheck": "yarn g:depcheck", "type-check": "yarn g:tsc --build" }, @@ -42,5 +42,8 @@ "react-native": "0.76.1", "react-native-reanimated": "3.16.1", "react-redux": "8.0.7" + }, + "devDependencies": { + "@suite-native/test-utils": "workspace:*" } } diff --git a/suite-native/accounts/src/components/AccountLabelFieldHint.tsx b/suite-native/accounts/src/components/AccountLabelFieldHint.tsx index d099986ea82..a335c7afc11 100644 --- a/suite-native/accounts/src/components/AccountLabelFieldHint.tsx +++ b/suite-native/accounts/src/components/AccountLabelFieldHint.tsx @@ -9,7 +9,7 @@ import { MAX_ACCOUNT_LABEL_LENGTH, } from '../hooks/useAccountLabelForm'; -type AccountLabelFieldHintProps = { +export type AccountLabelFieldHintProps = { formControl: Control; }; diff --git a/suite-native/accounts/src/components/__tests__/AccountLabelFieldHint.comp.test.tsx b/suite-native/accounts/src/components/__tests__/AccountLabelFieldHint.comp.test.tsx new file mode 100644 index 00000000000..1e7adff2eb5 --- /dev/null +++ b/suite-native/accounts/src/components/__tests__/AccountLabelFieldHint.comp.test.tsx @@ -0,0 +1,17 @@ +import { render, renderHook } from '@suite-native/test-utils'; + +import { AccountLabelFieldHint, AccountLabelFieldHintProps } from '../AccountLabelFieldHint'; +import { useAccountLabelForm } from '../../hooks/useAccountLabelForm'; + +describe('AccountLabelFieldHint', () => { + const renderComponent = (props: AccountLabelFieldHintProps) => + render(); + + test('should render', () => { + const { result } = renderHook(() => useAccountLabelForm('Account label')); + + const { getByText } = renderComponent({ formControl: result.current.control }); + + expect(getByText('13 / 30 letters')).toBeDefined(); + }); +}); diff --git a/suite-native/accounts/tsconfig.json b/suite-native/accounts/tsconfig.json index 0b5522c53b3..ee480078079 100644 --- a/suite-native/accounts/tsconfig.json +++ b/suite-native/accounts/tsconfig.json @@ -40,6 +40,7 @@ { "path": "../toasts" }, { "path": "../tokens" }, { "path": "../../packages/connect" }, - { "path": "../../packages/styles" } + { "path": "../../packages/styles" }, + { "path": "../test-utils" } ] } diff --git a/suite-native/atoms/jest.config.js b/suite-native/atoms/jest.config.js new file mode 100644 index 00000000000..15a5f278513 --- /dev/null +++ b/suite-native/atoms/jest.config.js @@ -0,0 +1,4 @@ +const { ...baseConfig } = require('../../jest.config.native'); +module.exports = { + ...baseConfig, +}; diff --git a/suite-native/atoms/package.json b/suite-native/atoms/package.json index d346e5a93cf..f06a4a04796 100644 --- a/suite-native/atoms/package.json +++ b/suite-native/atoms/package.json @@ -7,7 +7,8 @@ "main": "src/index", "scripts": { "depcheck": "yarn g:depcheck", - "type-check": "yarn g:tsc --build" + "type-check": "yarn g:tsc --build", + "test:unit": "yarn g:jest" }, "dependencies": { "@gorhom/bottom-sheet": "5.0.5", @@ -32,5 +33,8 @@ "react-native-reanimated": "3.16.1", "react-native-safe-area-context": "^4.14.0", "react-native-svg": "15.9.0" + }, + "devDependencies": { + "@suite-native/test-utils": "workspace:*" } } diff --git a/suite-native/atoms/src/Card/__tests__/Card.comp.test.tsx b/suite-native/atoms/src/Card/__tests__/Card.comp.test.tsx new file mode 100644 index 00000000000..1433d0dbda3 --- /dev/null +++ b/suite-native/atoms/src/Card/__tests__/Card.comp.test.tsx @@ -0,0 +1,29 @@ +import { Text } from 'react-native'; + +import { render } from '@suite-native/test-utils'; + +import { Card, CardProps } from '../Card'; + +describe('Card', () => { + const renderComponent = (props: Omit) => { + const cardProps = { + children: hello, + ...props, + } as CardProps; + + return render(); + }; + + it('should render children prop', () => { + const { getByText } = renderComponent({}); + + expect(getByText('hello')).toBeDefined(); + }); + + it('should render children and alert, when alert props are specified', () => { + const { getByText } = renderComponent({ alertTitle: 'alert', alertVariant: 'info' }); + + expect(getByText('hello')).toBeDefined(); + expect(getByText('alert')).toBeDefined(); + }); +}); diff --git a/suite-native/atoms/tsconfig.json b/suite-native/atoms/tsconfig.json index b14b23e31b5..17b17582f17 100644 --- a/suite-native/atoms/tsconfig.json +++ b/suite-native/atoms/tsconfig.json @@ -14,6 +14,7 @@ { "path": "../storage" }, { "path": "../../packages/env-utils" }, { "path": "../../packages/styles" }, - { "path": "../../packages/theme" } + { "path": "../../packages/theme" }, + { "path": "../test-utils" } ] } diff --git a/suite-native/test-utils/package.json b/suite-native/test-utils/package.json index c925cd92080..a0183593643 100644 --- a/suite-native/test-utils/package.json +++ b/suite-native/test-utils/package.json @@ -10,10 +10,9 @@ "type-check": "yarn g:tsc --build" }, "dependencies": { - "@testing-library/react-native": "^12.8.1", + "@testing-library/react-native": "13.0.0", "@trezor/styles": "workspace:*", "@trezor/theme": "workspace:*", - "react": "18.2.0", - "react-native-safe-area-context": "^4.14.0" + "react": "18.2.0" } } diff --git a/suite-native/test-utils/src/Provider.tsx b/suite-native/test-utils/src/Provider.tsx index 8fe47b6c2c7..ef86e3814f1 100644 --- a/suite-native/test-utils/src/Provider.tsx +++ b/suite-native/test-utils/src/Provider.tsx @@ -1,8 +1,8 @@ import { ReactNode } from 'react'; -import { SafeAreaProvider } from 'react-native-safe-area-context'; import { createRenderer, StylesProvider } from '@trezor/styles'; import { prepareNativeTheme } from '@trezor/theme'; +import { IntlProvider } from '@suite-native/intl'; type ProviderProps = { children: ReactNode; @@ -11,9 +11,9 @@ const renderer = createRenderer(); const theme = prepareNativeTheme({ colorVariant: 'standard' }); export const Provider = ({ children }: ProviderProps) => ( - + {children} - + ); diff --git a/suite-native/test-utils/src/index.ts b/suite-native/test-utils/src/index.ts deleted file mode 100644 index 5b9bc74a041..00000000000 --- a/suite-native/test-utils/src/index.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ReactElement } from 'react'; - -import { render } from '@testing-library/react-native'; - -import { Provider } from './Provider'; - -type Parameters = TParams extends (...args: infer TParamsInferred) => any - ? TParamsInferred - : never; -const nextRender = ( - element: ReactElement, - options?: Parameters[1], -): ReturnType => render(element, { wrapper: Provider, ...options }); - -export { - screen, - fireEvent, - cleanup, - waitFor, - waitForElementToBeRemoved, -} from '@testing-library/react-native'; -export { nextRender as render }; diff --git a/suite-native/test-utils/src/index.tsx b/suite-native/test-utils/src/index.tsx new file mode 100644 index 00000000000..7b7f3b7c15d --- /dev/null +++ b/suite-native/test-utils/src/index.tsx @@ -0,0 +1,37 @@ +import { ReactElement } from 'react'; + +import { render as origRender } from '@testing-library/react-native'; + +import { Provider } from './Provider'; + +type Parameters = TParams extends (...args: infer TParamsInferred) => any + ? TParamsInferred + : never; + +export const render = ( + element: ReactElement, + { wrapper: WrapperComponent, ...options }: Parameters[1] = {}, +): ReturnType => { + const wrapperWithProvider = WrapperComponent + ? ({ children }: { children: ReactElement }) => ( + + {children} + + ) + : Provider; + + return origRender(element, { + wrapper: wrapperWithProvider, + ...options, + }); +}; + +export { + act, + cleanup, + fireEvent, + renderHook, + screen, + waitFor, + waitForElementToBeRemoved, +} from '@testing-library/react-native'; diff --git a/yarn.lock b/yarn.lock index 53bfb93d7c3..92de9e019b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9883,6 +9883,7 @@ __metadata: "@suite-native/navigation": "workspace:*" "@suite-native/settings": "workspace:*" "@suite-native/staking": "workspace:*" + "@suite-native/test-utils": "workspace:*" "@suite-native/toasts": "workspace:*" "@suite-native/tokens": "workspace:*" "@trezor/connect": "workspace:*" @@ -10097,6 +10098,7 @@ __metadata: "@suite-native/icons": "workspace:*" "@suite-native/intl": "workspace:^" "@suite-native/storage": "workspace:*" + "@suite-native/test-utils": "workspace:*" "@trezor/env-utils": "workspace:*" "@trezor/styles": "workspace:*" "@trezor/theme": "workspace:*" @@ -11145,15 +11147,14 @@ __metadata: languageName: unknown linkType: soft -"@suite-native/test-utils@workspace:suite-native/test-utils": +"@suite-native/test-utils@workspace:*, @suite-native/test-utils@workspace:suite-native/test-utils": version: 0.0.0-use.local resolution: "@suite-native/test-utils@workspace:suite-native/test-utils" dependencies: - "@testing-library/react-native": "npm:^12.8.1" + "@testing-library/react-native": "npm:13.0.0" "@trezor/styles": "workspace:*" "@trezor/theme": "workspace:*" react: "npm:18.2.0" - react-native-safe-area-context: "npm:^4.14.0" languageName: unknown linkType: soft @@ -11472,22 +11473,22 @@ __metadata: languageName: node linkType: hard -"@testing-library/react-native@npm:^12.8.1": - version: 12.8.1 - resolution: "@testing-library/react-native@npm:12.8.1" +"@testing-library/react-native@npm:13.0.0": + version: 13.0.0 + resolution: "@testing-library/react-native@npm:13.0.0" dependencies: jest-matcher-utils: "npm:^29.7.0" pretty-format: "npm:^29.7.0" redent: "npm:^3.0.0" peerDependencies: - jest: ">=28.0.0" - react: ">=16.8.0" - react-native: ">=0.59" - react-test-renderer: ">=16.8.0" + jest: ">=29.0.0" + react: ">=18.2.0" + react-native: ">=0.71" + react-test-renderer: ">=18.2.0" peerDependenciesMeta: jest: optional: true - checksum: 10/eaa09cb560a469c686b8eb0ee8085bb54654a481e6bcf9eb5bc7b756c5303ca6b5c17ab2ef1479b8c245ac153ac69907d47c30ec9b496a29a6e459baa3d3f5d9 + checksum: 10/cc94539083dc6ee133a8d62a65c97871268177bff3f0e14305c633e4a052c051a4a4ce3538bd20df8cc2e240faebb44cc210197de4c1da5d61082bac590f5592 languageName: node linkType: hard