diff --git a/src/components/Exploration/ExplorationFinished.spec.tsx b/src/components/Exploration/ExplorationFinished.spec.tsx index 50c40cda1ad626c09baf5c2cabc6a8a1ace2c87a..132eae2437c7893488c4f6a1b81d4c0edda1322a 100644 --- a/src/components/Exploration/ExplorationFinished.spec.tsx +++ b/src/components/Exploration/ExplorationFinished.spec.tsx @@ -1,33 +1,32 @@ -import Button from '@material-ui/core/Button' -import StyledIcon from 'components/CommonKit/Icon/StyledIcon' -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 { userChallengeData } from 'tests/__mocks__/userChallengeData.mock' import ExplorationFinished from './ExplorationFinished' +const mockNavigate = jest.fn() +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: () => mockNavigate, +})) + describe('ExplorationFinished', () => { const store = createMockEcolyoStore() - it('should be rendered correctly', () => { - const wrapper = mount( - <Provider store={store}> - <ExplorationFinished userChallenge={userChallengeData[0]} /> - </Provider> - ) - expect(wrapper.find(StyledIcon).exists()).toBeTruthy() - expect(wrapper.find('.congratulation').exists()).toBeTruthy() - expect(wrapper.find('.exploration-earn').exists()).toBeTruthy() - expect(wrapper.find('.msg-success').text()).toEqual( - userChallengeData[0].exploration.message_success - ) - }) - it('should redirect to challenge on click on styledButton', () => { - const wrapper = mount( + it('should be rendered correctly and redirect on click', async () => { + const { container } = render( <Provider store={store}> <ExplorationFinished userChallenge={userChallengeData[0]} /> </Provider> ) - wrapper.find(Button).first().simulate('click') + expect(screen.getByRole('img')).toBeInTheDocument() + expect(container.getElementsByClassName('congratulation')[0]).toBeTruthy() + expect(container.getElementsByClassName('exploration-earn')[0]).toBeTruthy() + expect( + screen.getByText(userChallengeData[0].exploration.message_success) + ).toBeInTheDocument() + await userEvent.click(screen.getByRole('button')) + expect(mockNavigate).toHaveBeenCalledWith(-1) }) }) diff --git a/src/components/Exploration/ExplorationOngoing.spec.tsx b/src/components/Exploration/ExplorationOngoing.spec.tsx index 6bc91fcb67a7a666f5eb2b0e117a75d4c17e83c5..46b0ee5a1c47624cc038d3af25e6067e887d16c7 100644 --- a/src/components/Exploration/ExplorationOngoing.spec.tsx +++ b/src/components/Exploration/ExplorationOngoing.spec.tsx @@ -1,33 +1,33 @@ +import { render, screen } from '@testing-library/react' import ExplorationOngoing from 'components/Exploration/ExplorationOngoing' -import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' import { createMockEcolyoStore } from 'tests/__mocks__/store' import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock' -const mockUserChallengeUpdateFlag = jest.fn() -const mockIsChallengeDone = jest.fn() jest.mock('services/challenge.service', () => { return jest.fn(() => ({ - updateUserChallenge: mockUserChallengeUpdateFlag, - isChallengeDone: mockIsChallengeDone, + updateUserChallenge: jest.fn(), + isChallengeDone: jest.fn(), })) }) describe('ExplorationOngoing component', () => { it('should be rendered correctly', () => { const store = createMockEcolyoStore() - const wrapper = mount( + render( <Provider store={store}> <ExplorationOngoing userChallenge={userChallengeData[0]} /> </Provider> ) + expect( - wrapper.find('.exploration-explanation > div').first().text() - ).toEqual(userChallengeData[1].exploration.description) + screen.getByText(userChallengeData[1].exploration.description) + ).toBeInTheDocument() expect( - wrapper.find('.exploration-explanation > div').last().text() - ).toEqual(userChallengeData[1].exploration.complementary_description) - expect(wrapper.find('.btnSecondary').exists()).toBeTruthy() + screen.getByText( + userChallengeData[1].exploration.complementary_description + ) + ).toBeInTheDocument() }) }) diff --git a/src/components/Exploration/ExplorationView.spec.tsx b/src/components/Exploration/ExplorationView.spec.tsx index ee403e980aae1b5d781265dc8e19e539e68ac1f6..5c7fbbbd9795949aa63093dddd89fd908d9fe78d 100644 --- a/src/components/Exploration/ExplorationView.spec.tsx +++ b/src/components/Exploration/ExplorationView.spec.tsx @@ -1,13 +1,10 @@ +import { render } from '@testing-library/react' import { UserExplorationState } from 'enums' -import { mount } from 'enzyme' import React from 'react' import { Provider } from 'react-redux' import { challengeStateData } from 'tests/__mocks__/challengeStateData.mock' import { createMockEcolyoStore } from 'tests/__mocks__/store' import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock' -import ExplorationError from './ExplorationError' -import ExplorationFinished from './ExplorationFinished' -import ExplorationOngoing from './ExplorationOngoing' import ExplorationView from './ExplorationView' jest.mock('components/Header/CozyBar', () => 'mock-cozybar') @@ -28,12 +25,14 @@ describe('ExplorationView', () => { currentChallenge: updatedUserChallenge, } const store = createMockEcolyoStore({ challenge: updatedChallengeState }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <ExplorationView /> </Provider> ) - expect(wrapper.find(ExplorationError).exists()).toBeTruthy() + expect( + container.getElementsByClassName('exploration-error-container')[0] + ).toBeInTheDocument() }) it('should be rendered with ExplorationOngoing component when exploration state = unlocked', () => { @@ -49,12 +48,14 @@ describe('ExplorationView', () => { currentChallenge: updatedUserChallenge, } const store = createMockEcolyoStore({ challenge: updatedChallengeState }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <ExplorationView /> </Provider> ) - expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy() + expect( + container.getElementsByClassName('exploration-begin-container')[0] + ).toBeInTheDocument() }) it('should be rendered with ExplorationOngoing component when exploration state = ongoing', () => { @@ -70,12 +71,14 @@ describe('ExplorationView', () => { currentChallenge: updatedUserChallenge, } const store = createMockEcolyoStore({ challenge: updatedChallengeState }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <ExplorationView /> </Provider> ) - expect(wrapper.find(ExplorationOngoing).exists()).toBeTruthy() + expect( + container.getElementsByClassName('exploration-begin-container')[0] + ).toBeInTheDocument() }) it('should be rendered with ExplorationFinished component when exploration state = Done', () => { @@ -91,11 +94,13 @@ describe('ExplorationView', () => { currentChallenge: updatedUserChallenge, } const store = createMockEcolyoStore({ challenge: updatedChallengeState }) - const wrapper = mount( + const { container } = render( <Provider store={store}> <ExplorationView /> </Provider> ) - expect(wrapper.find(ExplorationFinished).exists()).toBeTruthy() + expect( + container.getElementsByClassName('exploration-finish')[0] + ).toBeInTheDocument() }) })