From 799dd77cee4aa4807ecba313746cc4167e558ea3 Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Fri, 16 Jun 2023 14:18:49 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Test=20a=20UI=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TypeTacticsInfoList.test.tsx | 10 +-- package.json | 2 + .../moves/__tests__/MoveDetailScreen.test.tsx | 71 +++++++++++++++++++ yarn.lock | 21 +++++- 4 files changed, 98 insertions(+), 6 deletions(-) rename components/{ => __tests__}/TypeTacticsInfoList.test.tsx (75%) create mode 100644 screens/moves/__tests__/MoveDetailScreen.test.tsx diff --git a/components/TypeTacticsInfoList.test.tsx b/components/__tests__/TypeTacticsInfoList.test.tsx similarity index 75% rename from components/TypeTacticsInfoList.test.tsx rename to components/__tests__/TypeTacticsInfoList.test.tsx index eaeee19..a418d4c 100644 --- a/components/TypeTacticsInfoList.test.tsx +++ b/components/__tests__/TypeTacticsInfoList.test.tsx @@ -1,9 +1,9 @@ -// components/TypeTacticsInfoList.test.ts +// components/__tests__/TypeTacticsInfoList.test.ts import React from 'react'; import { render } from '@testing-library/react-native'; -import TypeTacticsInfoList from './TypeTacticsInfoList'; -import { TypeName } from "../entities/TypeName"; +import TypeTacticsInfoList from '../TypeTacticsInfoList'; +import { TypeName } from "../../entities/TypeName"; describe('TypeTacticsInfoList component', () => { it('renders types correctly', () => { @@ -17,12 +17,12 @@ describe('TypeTacticsInfoList component', () => { it('renders "Nothing" when types array is empty', () => { const { getByText } = render(); - expect(getByText('Nothing')).toBeTruthy(); + expect(getByText('NOTHING')).toBeTruthy(); }); it('renders "Nothing" when types is undefined', () => { // @ts-ignore const { getByText } = render(); - expect(getByText('Nothing')).toBeTruthy(); + expect(getByText('NOTHING')).toBeTruthy(); }); }); diff --git a/package.json b/package.json index 71c55b9..9cb46ab 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "react-native-web": "~0.18.11", "react-redux": "^8.0.7", "redux": "^4.2.1", + "redux-mock-store": "^1.5.4", "redux-thunk": "^2.4.2", "typescript": "^4.9.4" }, @@ -63,6 +64,7 @@ "@babel/core": "^7.20.0", "@types/jest": "^29.5.1", "@types/react-native": "~0.64.12", + "@types/redux-mock-store": "^1.0.3", "jest": "^29.2.1", "jest-expo": "^48.0.0" }, diff --git a/screens/moves/__tests__/MoveDetailScreen.test.tsx b/screens/moves/__tests__/MoveDetailScreen.test.tsx new file mode 100644 index 0000000..7da94c1 --- /dev/null +++ b/screens/moves/__tests__/MoveDetailScreen.test.tsx @@ -0,0 +1,71 @@ +// screens/moves/__tests__/MoveDetailScreen.test.tsx + +import React from 'react'; +import { render, fireEvent } from '@testing-library/react-native'; +import configureStore from 'redux-mock-store'; +import { Provider } from 'react-redux'; +import MoveDetailScreen from '../MoveDetailScreen'; +import { MOVE_FORM } from "../../../navigation/constants"; + +const mockStore = configureStore([]); + +describe('MoveDetailScreen', () => { + let store; + let component: JSX.Element; + // @ts-ignore + let navigation; + + beforeEach(() => { + const mockMove = { + id: '1', + name: 'Test Move', + category: 'PHYSICAL', + power: '100', + accuracy: '100', + type: { + name: 'NORMAL', + weakAgainst: [], + effectiveAgainst: [], + }, + }; + + store = mockStore({ + move: { + moves: [mockMove], + error: null, + }, + }); + + navigation = { navigate: jest.fn(), setOptions: jest.fn() }; + const route = { params: { move: mockMove } }; + + component = ( + + {/* @ts-ignore */} + + + ); + }); + + it('renders correctly', () => { + const { getByText } = render(component); + expect(getByText('Name: Test Move')).toBeTruthy(); + expect(getByText('Category: PHYSICAL')).toBeTruthy(); + expect(getByText('Power: 100')).toBeTruthy(); + expect(getByText('Accuracy: 100')).toBeTruthy(); + expect(getByText('Type: NORMAL')).toBeTruthy(); + }); + + it('navigates to the form screen when the edit button is pressed', () => { + const { getByText } = render(component); + fireEvent.press(getByText('Edit Move')); + // @ts-ignore + expect(navigation.navigate).toHaveBeenCalledWith(MOVE_FORM, { move: expect.any(Object) }); + }); + + it('sets the navigation options correctly', () => { + render(component); + // @ts-ignore + expect(navigation.setOptions).toHaveBeenCalledWith({ title: 'Test Move' }); + }); +}); diff --git a/yarn.lock b/yarn.lock index a09537a..8a0b36d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2478,6 +2478,13 @@ "@types/scheduler" "*" csstype "^3.0.2" +"@types/redux-mock-store@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.3.tgz#895de4a364bc4836661570aec82f2eef5989d1fb" + integrity sha512-Wqe3tJa6x9MxMN4DJnMfZoBRBRak1XTPklqj4qkVm5VBpZnC8PSADf4kLuFQ9NAdHaowfWoEeUMz7NWc2GMtnA== + dependencies: + redux "^4.0.5" + "@types/retry@0.12.0": version "0.12.0" resolved "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz" @@ -6752,6 +6759,11 @@ lodash.debounce@^4.0.8: resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz" integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow== +lodash.isplainobject@^4.0.6: + version "4.0.6" + resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb" + integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA== + lodash.memoize@^4.1.2: version "4.1.2" resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz" @@ -8648,12 +8660,19 @@ recast@^0.20.4: source-map "~0.6.1" tslib "^2.0.1" +redux-mock-store@^1.5.4: + version "1.5.4" + resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872" + integrity sha512-xmcA0O/tjCLXhh9Fuiq6pMrJCwFRaouA8436zcikdIpYWWCjU76CRk+i2bHx8EeiSiMGnB85/lZdU3wIJVXHTA== + dependencies: + lodash.isplainobject "^4.0.6" + redux-thunk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b" integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q== -redux@^4.2.1: +redux@^4.0.5, redux@^4.2.1: version "4.2.1" resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197" integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==