diff --git a/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx b/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx index 8ad0f7374488588c3031ec8da08b872056d2044c..aa5330b3cc9dc91ec28ac0ec48172a87e6f9e898 100644 --- a/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx +++ b/src/components/Quiz/QuizBegin/QuizBegin.spec.tsx @@ -1,7 +1,6 @@ -import Button from '@material-ui/core/Button' -import StyledIcon from 'components/CommonKit/Icon/StyledIcon' +import { render, screen } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' import { UserChallengeUpdateFlag } from 'enums' -import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' @@ -16,15 +15,15 @@ jest.mock('services/challenge.service', () => { }) describe('QuizBegin component', () => { - it('should be rendered correctly', () => { + it('should be rendered correctly', async () => { const store = createMockEcolyoStore() - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizBegin userChallenge={userChallengeData[0]} /> </Provider> ) - expect(wrapper.find(StyledIcon).exists()).toBeTruthy() - wrapper.find('.button-start').find(Button).simulate('click') + expect(container.getElementsByClassName('quiz-icon')[0]).toBeInTheDocument() + await userEvent.click(screen.getByRole('button')) expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith( userChallengeData[0], UserChallengeUpdateFlag.QUIZ_START diff --git a/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx b/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx index 1329a7fd31bb63acf52a33fa598d40c021b4c2d8..8b2dc272d6852c08babfdb55b386e176f935185d 100644 --- a/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx +++ b/src/components/Quiz/QuizFinish/QuizFinish.spec.tsx @@ -1,11 +1,8 @@ -import Button from '@material-ui/core/Button' -import StyledIcon from 'components/CommonKit/Icon/StyledIcon' -import { UserChallengeUpdateFlag } from 'enums' -import { mount } from 'enzyme' +import { render, screen } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' -import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock' import QuizFinish from './QuizFinish' @@ -25,21 +22,14 @@ jest.mock('react-router-dom', () => ({ describe('QuizFinish', () => { it('should be rendered correctly', async () => { const store = createMockEcolyoStore() - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizFinish userChallenge={userChallengeData[0]} /> </Provider> ) - expect(wrapper.find(StyledIcon).exists()).toBeTruthy() - wrapper.find(Button).forEach(node => { - node.simulate('click') - }) - expect(mockUserChallengeUpdateFlag).toHaveBeenCalledWith( - userChallengeData[0], - UserChallengeUpdateFlag.QUIZ_RESET - ) - await waitForComponentToPaint(wrapper) - + expect(container.getElementsByClassName('quiz-icon')[0]).toBeInTheDocument() + await userEvent.click(screen.getAllByRole('button')[0]) + expect(mockUserChallengeUpdateFlag).toHaveBeenCalled() expect(mockedNavigate).toHaveBeenCalledWith('/challenges') }) }) diff --git a/src/components/Quiz/QuizFinish/QuizFinish.tsx b/src/components/Quiz/QuizFinish/QuizFinish.tsx index 187e552dbb0065f9ab9efeeb269c795208ffd210..3603c0710a1201c2f4fc0c160a384f8a74833198 100644 --- a/src/components/Quiz/QuizFinish/QuizFinish.tsx +++ b/src/components/Quiz/QuizFinish/QuizFinish.tsx @@ -23,21 +23,19 @@ const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => { ) const retryQuiz = useCallback(async () => { - const userChallengeUpdated: UserChallenge = - await challengeService.updateUserChallenge( - userChallenge, - UserChallengeUpdateFlag.QUIZ_RESET - ) + const userChallengeUpdated = await challengeService.updateUserChallenge( + userChallenge, + UserChallengeUpdateFlag.QUIZ_RESET + ) dispatch(updateUserChallengeList(userChallengeUpdated)) }, [dispatch, userChallenge, challengeService]) const goBack = async () => { - const userChallengeUpdated: UserChallenge = - await challengeService.updateUserChallenge( - userChallenge, - UserChallengeUpdateFlag.QUIZ_UPDATE, - userChallenge.quiz - ) + const userChallengeUpdated = await challengeService.updateUserChallenge( + userChallenge, + UserChallengeUpdateFlag.QUIZ_UPDATE, + userChallenge.quiz + ) dispatch(updateUserChallengeList(userChallengeUpdated)) navigate('/challenges') } diff --git a/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx index bd99fbd4cbbe0e111f9c822566ef651077bc0d69..6abd2f50f97ab01603e316fce1d83ff8ddf201d8 100644 --- a/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx +++ b/src/components/Quiz/QuizQuestion/QuizQuestion.spec.tsx @@ -1,17 +1,15 @@ +import { render, waitFor } from '@testing-library/react' import { UserQuestionState } from 'enums' -import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' -import { waitForComponentToPaint } from 'tests/__mocks__/testUtils' import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock' import QuizQuestion from './QuizQuestion' -const mockGetCustomQuestion = jest.fn() jest.mock('services/quiz.service', () => { return jest.fn(() => { return { - getCustomQuestion: mockGetCustomQuestion, + getCustomQuestion: jest.fn(), } }) }) @@ -27,19 +25,17 @@ jest.mock( describe('QuizQuestion component', () => { const store = createMockEcolyoStore() - beforeEach(() => { - store.clearActions() - }) it('should be rendered correctly with question', async () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizQuestion userChallenge={userChallengeData[0]} /> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(wrapper.find('mock-question').exists()).toBeTruthy() - expect(wrapper.find('mock-customQuestion').exists()).toBeFalsy() + expect(container.getElementsByTagName('mock-question').length).toBeTruthy() + expect( + container.getElementsByTagName('mock-customQuestion').length + ).toBeFalsy() }) it('should be rendered correctly with customQuestion', async () => { @@ -49,13 +45,15 @@ describe('QuizQuestion component', () => { updateUserChallengeData.quiz.questions.forEach( answer => (answer.result = UserQuestionState.CORRECT) ) - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizQuestion userChallenge={updateUserChallengeData} /> </Provider> ) - await waitForComponentToPaint(wrapper) - expect(wrapper.find('mock-question').exists()).toBeFalsy() - expect(wrapper.find('mock-customQuestion').exists()).toBeTruthy() + await waitFor(() => null, { container }) + expect(container.getElementsByTagName('mock-question').length).toBeFalsy() + expect( + container.getElementsByTagName('mock-customQuestion').length + ).toBeTruthy() }) }) diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx index e30abb302c4f9edb801e003c5dcabcebc7335f42..aa80b5f09caa65e5868dab46deb0908ccfcfb541 100644 --- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx +++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.spec.tsx @@ -1,4 +1,5 @@ -import { mount } from 'enzyme' +import { render, screen } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' @@ -11,24 +12,22 @@ jest.mock('react-router-dom', () => ({ useNavigate: () => mockedNavigate, })) -const mockUpdateUserQuiz = jest.fn() jest.mock('services/quiz.service', () => { return jest.fn(() => ({ - updateUserQuiz: mockUpdateUserQuiz, + updateUserQuiz: jest.fn(), })) }) -const mockUserChallengeUpdateFlag = jest.fn() jest.mock('services/challenge.service', () => { return jest.fn(() => ({ - updateUserChallenge: mockUserChallengeUpdateFlag, + updateUserChallenge: jest.fn(), })) }) describe('QuizQuestionContent component', () => { const store = createMockEcolyoStore() it('should be rendered correctly', () => { - const wrapper = mount( + render( <Provider store={store}> <QuizQuestionContent userChallenge={userChallengeData[0]} @@ -37,13 +36,13 @@ describe('QuizQuestionContent component', () => { /> </Provider> ) - expect(wrapper.find('.question').text()).toEqual( - userChallengeData[0].quiz.questions[0].questionLabel - ) - expect(wrapper.find('input')).toHaveLength(3) + expect( + screen.getByText(userChallengeData[0].quiz.questions[0].questionLabel) + ).toBeInTheDocument() + expect(screen.getAllByRole('radio').length).toBe(3) }) - it('should redirect to challenge on click on btn-back', () => { - const wrapper = mount( + it('should redirect to challenge on click on btn-back', async () => { + render( <Provider store={store}> <QuizQuestionContent userChallenge={userChallengeData[0]} @@ -52,8 +51,7 @@ describe('QuizQuestionContent component', () => { /> </Provider> ) - - wrapper.find('.btn-back').first().simulate('click') + await userEvent.click(screen.getAllByRole('button')[0]) expect(mockedNavigate).toHaveBeenCalledWith('/challenges') }) }) diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx index 2d54a414b07fac9b945b90bb49346704cd5b3657..62b571998ea0bbd8885641513bb09b8996ca701e 100644 --- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx +++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx @@ -1,12 +1,10 @@ -import Button from '@material-ui/core/Button' -import Loader from 'components/Loader/Loader' -import { mount } from 'enzyme' +import { render, screen } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' import React from 'react' import { Provider } from 'react-redux' import { questionEntity } from 'tests/__mocks__/quizData.mock' import { createMockEcolyoStore } from 'tests/__mocks__/store' import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock' -import QuizExplanationModal from '../QuizExplanationModal/QuizExplanationModal' import QuizQuestionContentCustom from './QuizQuestionContentCustom' const mockHistoryPush = jest.fn() @@ -18,25 +16,23 @@ jest.mock('react-router-dom', () => ({ })) const mockUpdateUserQuiz = jest.fn() -const mockGetCustomQuestion = jest.fn() jest.mock('services/quiz.service', () => { return jest.fn(() => ({ updateUserQuiz: mockUpdateUserQuiz, - getCustomQuestion: mockGetCustomQuestion, + getCustomQuestion: jest.fn(), })) }) -const mockUserChallengeUpdateFlag = jest.fn() jest.mock('services/challenge.service', () => { return jest.fn(() => ({ - updateUserChallenge: mockUserChallengeUpdateFlag, + updateUserChallenge: jest.fn(), })) }) describe('QuizCustomQuestionContent component', () => { const store = createMockEcolyoStore() - it('should be rendered correctly', () => { - const wrapper = mount( + it('should be rendered correctly', async () => { + const { container } = render( <Provider store={store}> <QuizQuestionContentCustom userChallenge={userChallengeData[0]} @@ -46,17 +42,13 @@ describe('QuizCustomQuestionContent component', () => { /> </Provider> ) - wrapper.find('.btn-back').forEach(node => { - node.simulate('click') - }) + await userEvent.click(screen.getAllByRole('button')[0]) expect(mockHistoryPush).toHaveBeenCalledWith('/challenges') - expect(wrapper.find('.question').text()).toEqual( - questionEntity.questionLabel - ) - expect(wrapper.find('input')).toHaveLength(3) + expect(screen.getByText(questionEntity.questionLabel)).toBeInTheDocument() + expect(screen.getAllByRole('radio').length).toBe(3) }) it('should be rendered correctly with loader', () => { - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizQuestionContentCustom userChallenge={userChallengeData[0]} @@ -66,10 +58,12 @@ describe('QuizCustomQuestionContent component', () => { /> </Provider> ) - expect(wrapper.find(Loader).exists()).toBeTruthy() + expect( + container.getElementsByClassName('question-loading')[0] + ).toBeInTheDocument() }) - it('should display QuizExplanationModal when click on Button', () => { - const wrapper = mount( + it('should display QuizExplanationModal when click on Button', async () => { + const { container } = render( <Provider store={store}> <QuizQuestionContentCustom userChallenge={userChallengeData[0]} @@ -79,21 +73,12 @@ describe('QuizCustomQuestionContent component', () => { /> </Provider> ) - const answer = questionEntity.answers[0].answerLabel - wrapper - .find({ type: 'radio' }) - .at(0) - .simulate('change', { target: { value: answer } }) - - expect(wrapper.find(Button).exists()).toBeTruthy() - wrapper.find('.btnSecondary').forEach(node => { - node.simulate('click') - }) + await userEvent.click(screen.getAllByRole('radio')[0]) + await userEvent.click(screen.getAllByRole('button')[1]) expect(mockUpdateUserQuiz).toHaveBeenCalledWith( userChallengeData[0].quiz, questionEntity.answers[0].isTrue ) - expect(wrapper.find(QuizExplanationModal).exists()).toBeTruthy() - expect(wrapper.find(QuizExplanationModal).prop('open')).toBeTruthy() + expect(screen.getByRole('dialog')).toBeInTheDocument() }) }) diff --git a/src/components/Quiz/QuizView.spec.tsx b/src/components/Quiz/QuizView.spec.tsx index 40f0962f05fc29a234711ced6b822ae0f5f04d95..369072fbc3426ca54c4b8ea65f9960be97f60d8c 100644 --- a/src/components/Quiz/QuizView.spec.tsx +++ b/src/components/Quiz/QuizView.spec.tsx @@ -1,15 +1,12 @@ +import { render } from '@testing-library/react' import QuizView from 'components/Quiz/QuizView' import { UserQuizState } from 'enums' -import { mount } from 'enzyme' import { ChallengeState } from 'models' import React from 'react' import { Provider } from 'react-redux' import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock' import { createMockEcolyoStore, mockGlobalState } from 'tests/__mocks__/store' import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock' -import QuizBegin from './QuizBegin/QuizBegin' -import QuizFinish from './QuizFinish/QuizFinish' -import QuizQuestion from './QuizQuestion/QuizQuestion' jest.mock('components/Header/CozyBar', () => 'mock-cozybar') jest.mock('components/Header/Header', () => 'mock-header') @@ -29,12 +26,14 @@ describe('QuizView component', () => { challenge: updatedChallengeState, global: mockGlobalState, }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizView /> </Provider> ) - expect(wrapper.find(QuizBegin).exists()).toBeTruthy() + expect( + container.getElementsByClassName('quiz-begin-container')[0] + ).toBeInTheDocument() }) it('should be rendered with QuizQuestion component when quiz state = ongoing', () => { @@ -50,12 +49,14 @@ describe('QuizView component', () => { challenge: updatedChallengeState, global: mockGlobalState, }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizView /> </Provider> ) - expect(wrapper.find(QuizQuestion).exists()).toBeTruthy() + expect( + container.getElementsByClassName('question-container')[0] + ).toBeInTheDocument() }) it('should be rendered with QuizFinish component when quiz state = done', () => { @@ -71,12 +72,14 @@ describe('QuizView component', () => { challenge: updatedChallengeState, global: mockGlobalState, }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizView /> </Provider> ) - expect(wrapper.find(QuizFinish).exists()).toBeTruthy() + expect( + container.getElementsByClassName('quiz-finish-container')[0] + ).toBeInTheDocument() }) it('should be rendered with QuizBegin component when quiz state = null', () => { @@ -91,11 +94,13 @@ describe('QuizView component', () => { challenge: updatedChallengeState, global: mockGlobalState, }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <QuizView /> </Provider> ) - expect(wrapper.find(QuizBegin).exists()).toBeTruthy() + expect( + container.getElementsByClassName('quiz-begin-container')[0] + ).toBeInTheDocument() }) })