From edc332597001984b92e649c64beed52e39c6014b Mon Sep 17 00:00:00 2001 From: Tran Manh Date: Fri, 28 Jul 2023 10:53:27 +0700 Subject: [PATCH] [#14] Refactor some tests --- src/screens/Dashboard/index.tsx | 8 ++--- src/store/reducers/Surveys/actions.ts | 2 +- src/store/reducers/Surveys/index.test.ts | 46 ++++++++++-------------- src/store/reducers/Surveys/index.ts | 6 ++-- src/store/reducers/User/action.ts | 2 +- src/store/reducers/User/index.test.ts | 12 +++---- src/store/reducers/User/index.ts | 4 +-- 7 files changed, 36 insertions(+), 44 deletions(-) diff --git a/src/screens/Dashboard/index.tsx b/src/screens/Dashboard/index.tsx index 5548d9d..c4cd6b1 100644 --- a/src/screens/Dashboard/index.tsx +++ b/src/screens/Dashboard/index.tsx @@ -6,8 +6,8 @@ import DashboardEmpty from 'components/Dashboard/Empty'; import DashboardHeader from 'components/Dashboard/Header'; import { getDaysAgoFromISODate, getdddMMMDDDateFromISODate } from 'helpers/datetime'; import { useAppDispatch, useAppSelector } from 'hooks'; -import { getSurveysAsyncThunk, surveysAction } from 'store/reducers/Surveys'; -import { getUserAsyncThunk } from 'store/reducers/User'; +import { getSurveys, surveysAction } from 'store/reducers/Surveys'; +import { getUser } from 'store/reducers/User'; const DashBoardScreen = (): JSX.Element => { const { surveys, currentPosition, isInitialLoading } = useAppSelector((state) => state.surveys); @@ -29,8 +29,8 @@ const DashBoardScreen = (): JSX.Element => { }; useEffect(() => { - dispatch(getSurveysAsyncThunk()); - dispatch(getUserAsyncThunk()); + dispatch(getSurveys()); + dispatch(getUser()); }, [dispatch]); return ( diff --git a/src/store/reducers/Surveys/actions.ts b/src/store/reducers/Surveys/actions.ts index 238a3ec..ed09327 100644 --- a/src/store/reducers/Surveys/actions.ts +++ b/src/store/reducers/Surveys/actions.ts @@ -17,7 +17,7 @@ export const surveysReducers = { }, }; -export const getSurveysThunkCreator: AsyncThunkPayloadCreator = async () => { +export const getSurveysThunkCreator: AsyncThunkPayloadCreator = () => { return getSurveys().then((response: DeserializableListResponse) => { const surveys = deserializeList(response.data); diff --git a/src/store/reducers/Surveys/index.test.ts b/src/store/reducers/Surveys/index.test.ts index bb99274..026008b 100644 --- a/src/store/reducers/Surveys/index.test.ts +++ b/src/store/reducers/Surveys/index.test.ts @@ -1,9 +1,9 @@ /* eslint-disable @typescript-eslint/no-empty-function */ import { AxiosResponse } from 'axios'; -import { getSurveys } from 'adapters/Survey'; +import { getSurveys as getSurveysAdapter } from 'adapters/Survey'; -import { SurveysState, getSurveysAsyncThunk, surveysSlice } from '.'; +import { getSurveys, surveysSlice } from '.'; import { surveysReducers } from './actions'; jest.mock('adapters/Survey'); @@ -37,36 +37,34 @@ describe('surveys slice', () => { isInitialLoading: true, }; describe('nextSurvey', () => { - it('changes the current position to next position', () => { - const mockState: SurveysState = { ...mockInitialState }; + beforeEach(() => { + mockInitialState.currentPosition = 0; + }); - surveysReducers.nextSurvey(mockState); + it('changes the current position to next position', () => { + surveysReducers.nextSurvey(mockInitialState); - expect(mockState.currentPosition).toBe(1); + expect(mockInitialState.currentPosition).toBe(1); }); it("resets the current position when the next position is larger than the total surveys's indexes", () => { - const mockState: SurveysState = { ...mockInitialState }; + surveysReducers.nextSurvey(mockInitialState); + surveysReducers.nextSurvey(mockInitialState); + surveysReducers.nextSurvey(mockInitialState); - surveysReducers.nextSurvey(mockState); - surveysReducers.nextSurvey(mockState); - surveysReducers.nextSurvey(mockState); - - expect(mockState.currentPosition).toBe(0); + expect(mockInitialState.currentPosition).toBe(0); }); }); describe('selectSurvey', () => { it('changes the current position to the selected position', () => { - const mockState: SurveysState = { ...mockInitialState }; - - surveysReducers.selectSurvey(mockState, { type: 'selectSurvey', payload: 2 }); + surveysReducers.selectSurvey(mockInitialState, { type: 'selectSurvey', payload: 2 }); - expect(mockState.currentPosition).toBe(2); + expect(mockInitialState.currentPosition).toBe(2); }); }); - describe('getSurveysAsyncThunk', () => { + describe('getSurveys', () => { const successResponse = { data: [ { @@ -100,10 +98,10 @@ describe('surveys slice', () => { }; it('calls getSurveys API successfully', async () => { - (getSurveys as jest.Mock).mockResolvedValue(successResponse as AxiosResponse); + (getSurveysAdapter as jest.Mock).mockResolvedValue(successResponse as AxiosResponse); const dispatch = jest.fn(); - const getSurveysFunction = getSurveysAsyncThunk(); + const getSurveysFunction = getSurveys(); const getSurveysPayload = await getSurveysFunction(dispatch, () => {}, undefined); @@ -132,12 +130,6 @@ describe('surveys slice', () => { ]; expect(getSurveysPayload.payload).toEqual(expectedResult); - - expect(dispatch).toHaveBeenNthCalledWith(1, getSurveysAsyncThunk.pending(getSurveysPayload.meta.requestId)); - expect(dispatch).toHaveBeenNthCalledWith( - 2, - getSurveysAsyncThunk.fulfilled(expectedResult, getSurveysPayload.meta.requestId) - ); }); }); @@ -147,7 +139,7 @@ describe('surveys slice', () => { currentPosition: 0, isInitialLoading: true, }; - describe('getSurveysAsyncThunk.fulfilled', () => { + describe('getSurveys.fulfilled', () => { it('returns the surveys', async () => { const expectedResult = [ { @@ -182,7 +174,7 @@ describe('surveys slice', () => { }); }); - describe('getSurveysAsyncThunk.rejected', () => { + describe('getSurveys.rejected', () => { it('returns no surveys', async () => { const dispatchedState = surveysSlice.reducer(mockEmptyState, { type: 'surveys/getSurveys/rejected', diff --git a/src/store/reducers/Surveys/index.ts b/src/store/reducers/Surveys/index.ts index f9e79d2..b45941e 100644 --- a/src/store/reducers/Surveys/index.ts +++ b/src/store/reducers/Surveys/index.ts @@ -16,18 +16,18 @@ export const initialState: SurveysState = { isInitialLoading: true, }; -export const getSurveysAsyncThunk = createAsyncThunk('surveys/getSurveys', getSurveysThunkCreator); +export const getSurveys = createAsyncThunk('surveys/getSurveys', getSurveysThunkCreator); export const surveysSlice = createSlice({ name: 'surveys', initialState, reducers: surveysReducers, extraReducers: (builder) => { - builder.addCase(getSurveysAsyncThunk.fulfilled, (state, action) => { + builder.addCase(getSurveys.fulfilled, (state, action) => { state.isInitialLoading = false; state.surveys = action.payload; }); - builder.addCase(getSurveysAsyncThunk.rejected, (state) => { + builder.addCase(getSurveys.rejected, (state) => { state.isInitialLoading = false; }); }, diff --git a/src/store/reducers/User/action.ts b/src/store/reducers/User/action.ts index 733d5a1..6d839bd 100644 --- a/src/store/reducers/User/action.ts +++ b/src/store/reducers/User/action.ts @@ -5,7 +5,7 @@ import { DeserializableResponse, deserialize } from 'helpers/deserializer'; import { JSONObject } from 'helpers/json'; import { User } from 'types/user'; -export const getUserThunkCreator: AsyncThunkPayloadCreator = async () => { +export const getUserThunkCreator: AsyncThunkPayloadCreator = () => { return getUserInfo().then((response: DeserializableResponse) => { const user = deserialize(response.data); diff --git a/src/store/reducers/User/index.test.ts b/src/store/reducers/User/index.test.ts index c12382c..f5e6803 100644 --- a/src/store/reducers/User/index.test.ts +++ b/src/store/reducers/User/index.test.ts @@ -3,12 +3,12 @@ import { AxiosResponse } from 'axios'; import { getUserInfo } from 'adapters/User'; -import { getUserAsyncThunk, userSlice } from '.'; +import { getUser, userSlice } from '.'; jest.mock('adapters/User'); describe('user slice', () => { - describe('getUserAsyncThunk', () => { + describe('getUser', () => { const successResponse = { data: { id: '1', @@ -25,7 +25,7 @@ describe('user slice', () => { (getUserInfo as jest.Mock).mockResolvedValue(successResponse as AxiosResponse); const dispatch = jest.fn(); - const getUserFunction = getUserAsyncThunk(); + const getUserFunction = getUser(); const getUserPayload = await getUserFunction(dispatch, () => {}, undefined); @@ -39,14 +39,14 @@ describe('user slice', () => { expect(getUserPayload.payload).toEqual(expectedResult); - expect(dispatch).toHaveBeenNthCalledWith(1, getUserAsyncThunk.pending(getUserPayload.meta.requestId)); - expect(dispatch).toHaveBeenNthCalledWith(2, getUserAsyncThunk.fulfilled(expectedResult, getUserPayload.meta.requestId)); + expect(dispatch).toHaveBeenNthCalledWith(1, getUser.pending(getUserPayload.meta.requestId)); + expect(dispatch).toHaveBeenNthCalledWith(2, getUser.fulfilled(expectedResult, getUserPayload.meta.requestId)); }); }); describe('extraReducers', () => { const mockEmptyState = {}; - describe('getUserAsyncThunk.fulfilled', () => { + describe('getUser.fulfilled', () => { it('returns the user info', async () => { const expectedResult = { id: '1', diff --git a/src/store/reducers/User/index.ts b/src/store/reducers/User/index.ts index e8886b9..3a65585 100644 --- a/src/store/reducers/User/index.ts +++ b/src/store/reducers/User/index.ts @@ -10,14 +10,14 @@ export interface UserState { export const initialState: UserState = {}; -export const getUserAsyncThunk = createAsyncThunk('user/getUser', getUserThunkCreator); +export const getUser = createAsyncThunk('user/getUser', getUserThunkCreator); export const userSlice = createSlice({ name: 'user', initialState, reducers: {}, extraReducers: (builder) => { - builder.addCase(getUserAsyncThunk.fulfilled, (state, action) => { + builder.addCase(getUser.fulfilled, (state, action) => { state.user = action.payload; }); },