diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx index 39da0b310d1e26b7560cb800cd3641f2d58e963e..896eee1c8698f2898e3314f4b9ba822b9216035f 100644 --- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx +++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx @@ -1,8 +1,7 @@ -import { Button } from '@material-ui/core' import { render, screen } from '@testing-library/react' +import { userEvent } from '@testing-library/user-event' import TimeStepSelector from 'components/FluidChart/TimeStepSelector/TimeStepSelector' import { FluidType, TimeStep } from 'enums' -import { mount } from 'enzyme' import { DateTime } from 'luxon' import React from 'react' import { Provider } from 'react-redux' @@ -20,7 +19,7 @@ const setSelectedDateSpy = jest.spyOn(chartActions, 'setSelectedDate') describe('TimeStepSelector component', () => { beforeEach(() => { - setCurrentTimeStepSpy.mockClear() + jest.clearAllMocks() }) it('should render component properly with 4 timesteps', async () => { @@ -50,16 +49,15 @@ describe('TimeStepSelector component', () => { }), }, }) - const wrapper = mount( + render( <Provider store={store}> <TimeStepSelector fluidType={FluidType.ELECTRICITY} /> </Provider> ) - expect(wrapper.find('.circle').at(4).exists()).toBeTruthy() - expect(wrapper.find('.circle').at(5).exists()).toBeFalsy() + expect(screen.getAllByRole('listitem').length).toBe(10) }) - it('should define next TimeStep and dispatch it', () => { + it('should define next TimeStep and dispatch it', async () => { const store = createMockEcolyoStore({ chart: { currentTimeStep: TimeStep.YEAR, @@ -68,17 +66,17 @@ describe('TimeStepSelector component', () => { }), }, }) - const wrapper = mount( + render( <Provider store={store}> <TimeStepSelector fluidType={FluidType.WATER} /> </Provider> ) - wrapper.find('#day').first().simulate('click') + await userEvent.click(screen.getAllByRole('listitem')[2]) expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1) expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.DAY) expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1) }) - it('should go to todays day with timestep week', () => { + it('should go to todays day with timestep week', async () => { const store = createMockEcolyoStore({ chart: { currentTimeStep: TimeStep.YEAR, @@ -87,15 +85,15 @@ describe('TimeStepSelector component', () => { }), }, }) - const wrapper = mount( + render( <Provider store={store}> <TimeStepSelector fluidType={FluidType.WATER} /> </Provider> ) - wrapper.find(Button).first().simulate('click') + await userEvent.click(screen.getAllByRole('button')[0]) expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1) expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.WEEK) - expect(setCurrentIndexSpy).toHaveBeenCalledTimes(2) + expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1) expect(setSelectedDateSpy).toHaveBeenCalledTimes(1) }) })