diff --git a/src/useTimer.test.tsx b/src/useTimer.test.tsx index e226d06..b7eedde 100644 --- a/src/useTimer.test.tsx +++ b/src/useTimer.test.tsx @@ -6,473 +6,483 @@ import { act } from 'react-dom/test-utils'; jest.useFakeTimers(); -it('should start timer', () => { - // Given - const Component = () => { - const { time, start } = useTimer(); - - return ( -
- -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const button = wrapper.find('button'); - const time = wrapper.find('p'); - - // When - button.simulate('click'); - - act(() => { - jest.advanceTimersByTime(5000); - }); - - // Then - expect(time.text()).toBe('5'); -}); - -it('should start timer with an initial time of 10', () => { - // Given - const Component = () => { - const { time, start } = useTimer({ - initialTime: 10, +describe('Start', () => { + it('should start timer', () => { + // Given + const Component = () => { + const { time, start } = useTimer(); + + return ( +
+ +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const button = wrapper.find('button'); + const time = wrapper.find('p'); + + // When + button.simulate('click'); + + act(() => { + jest.advanceTimersByTime(5000); }); - return ( -
- -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const button = wrapper.find('button'); - const time = wrapper.find('p'); + // Then + expect(time.text()).toBe('5'); + }); - // When - button.simulate('click'); + it('should start timer with an initial time of 10', () => { + // Given + const Component = () => { + const { time, start } = useTimer({ + initialTime: 10, + }); + + return ( +
+ +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const button = wrapper.find('button'); + const time = wrapper.find('p'); + + // When + button.simulate('click'); + + act(() => { + jest.advanceTimersByTime(5000); + }); - act(() => { - jest.advanceTimersByTime(5000); + // Then + expect(time.text()).toBe('15'); }); - // Then - expect(time.text()).toBe('15'); -}); - -it('should start decremental timer with an initial time of 100', () => { - // Given - const Component = () => { - const { time, start } = useTimer({ - initialTime: 100, - timerType: 'DECREMENTAL', + it('should start decremental timer with an initial time of 100', () => { + // Given + const Component = () => { + const { time, start } = useTimer({ + initialTime: 100, + timerType: 'DECREMENTAL', + }); + + return ( +
+ +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const button = wrapper.find('button'); + const time = wrapper.find('p'); + + // When + button.simulate('click'); + + act(() => { + jest.advanceTimersByTime(20000); }); - return ( -
- -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const button = wrapper.find('button'); - const time = wrapper.find('p'); + // Then + expect(time.text()).toBe('80'); + }); - // When - button.simulate('click'); + it('should update time with an interval of 2000 milliseconds', () => { + // Given + const Component = () => { + const { time, start } = useTimer({ + interval: 2000, + }); + + return ( +
+ +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const button = wrapper.find('button'); + const time = wrapper.find('p'); + + // When + button.simulate('click'); + + act(() => { + jest.advanceTimersByTime(10000); + }); - act(() => { - jest.advanceTimersByTime(20000); + // Then + expect(time.text()).toBe('5'); }); - - // Then - expect(time.text()).toBe('80'); }); -it('should stop incremental timer when end time is reached', () => { - // Given - const Component = () => { - const { time, start } = useTimer({ - endTime: 25, - initialTime: 5, +describe('Stop', () => { + it('should stop incremental timer when time is over', () => { + // Given + const Component = () => { + const { time, start } = useTimer({ + endTime: 25, + initialTime: 5, + }); + + return ( +
+ +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const button = wrapper.find('button'); + const time = wrapper.find('p'); + + // When + button.simulate('click'); + + act(() => { + jest.advanceTimersByTime(40000); }); - return ( -
- -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const button = wrapper.find('button'); - const time = wrapper.find('p'); + // Then + expect(time.text()).toBe('25'); + }); - // When - button.simulate('click'); + it('should stop decremental timer when time is over', () => { + // Given + const Component = () => { + const { time, start } = useTimer({ + endTime: 10, + initialTime: 30, + timerType: 'DECREMENTAL', + }); + + return ( +
+ +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const button = wrapper.find('button'); + const time = wrapper.find('p'); + + // When + button.simulate('click'); + + act(() => { + jest.advanceTimersByTime(30000); + }); - act(() => { - jest.advanceTimersByTime(40000); + // Then + expect(time.text()).toBe('10'); }); - - // Then - expect(time.text()).toBe('25'); }); -it('should stop decremental timer when end time is reached', () => { - // Given - const Component = () => { - const { time, start } = useTimer({ - endTime: 10, - initialTime: 30, - timerType: 'DECREMENTAL', +describe('Pause', () => { + it('should pause timer', () => { + // Given + const Component = () => { + const { time, start, pause } = useTimer(); + + return ( +
+ + +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const startButton = wrapper.find('#start'); + const pauseButton = wrapper.find('#pause'); + const time = wrapper.find('p'); + + // When + startButton.simulate('click'); + + act(() => { + jest.advanceTimersByTime(5000); }); - return ( -
- -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const button = wrapper.find('button'); - const time = wrapper.find('p'); + pauseButton.simulate('click'); - // When - button.simulate('click'); + act(() => { + jest.advanceTimersByTime(5000); + }); - act(() => { - jest.advanceTimersByTime(30000); + // Then + expect(time.text()).toBe('5'); }); - // Then - expect(time.text()).toBe('10'); -}); - -it('should update time with an interval of 2000 milliseconds', () => { - // Given - const Component = () => { - const { time, start } = useTimer({ - interval: 2000, + it('should pause timer with an end time', () => { + // Given + const Component = () => { + const { time, start, pause } = useTimer({ + endTime: 5, + }); + + return ( +
+ + +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const startButton = wrapper.find('#start'); + const pauseButton = wrapper.find('#pause'); + const time = wrapper.find('p'); + + // When + startButton.simulate('click'); + + act(() => { + jest.advanceTimersByTime(3000); }); - return ( -
- -

{time}

-
- ); - }; + pauseButton.simulate('click'); - const wrapper = Enzyme.mount(); - const button = wrapper.find('button'); - const time = wrapper.find('p'); - - // When - button.simulate('click'); + act(() => { + jest.advanceTimersByTime(5000); + }); - act(() => { - jest.advanceTimersByTime(10000); - }); + startButton.simulate('click'); - // Then - expect(time.text()).toBe('5'); -}); + // Then + expect(time.text()).toBe('3'); -it('should pause timer', () => { - // Given - const Component = () => { - const { time, start, pause } = useTimer(); - - return ( -
- - -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const startButton = wrapper.find('#start'); - const pauseButton = wrapper.find('#pause'); - const time = wrapper.find('p'); - - // When - startButton.simulate('click'); - - act(() => { - jest.advanceTimersByTime(5000); - }); - - pauseButton.simulate('click'); + act(() => { + jest.advanceTimersByTime(3000); + }); - act(() => { - jest.advanceTimersByTime(5000); + expect(time.text()).toBe('5'); }); - - // Then - expect(time.text()).toBe('5'); }); -it('should pause timer with an end time', () => { - // Given - const Component = () => { - const { time, start, pause } = useTimer({ - endTime: 5, +describe('Reset', () => { + it('should reset timer to default initial time', () => { + // Given + const Component = () => { + const { time, start, reset } = useTimer(); + + return ( +
+ + +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const startButton = wrapper.find('#start'); + const resetButton = wrapper.find('#reset'); + const time = wrapper.find('p'); + + // When + startButton.simulate('click'); + + act(() => { + jest.advanceTimersByTime(5000); }); - return ( -
- - -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const startButton = wrapper.find('#start'); - const pauseButton = wrapper.find('#pause'); - const time = wrapper.find('p'); - - // When - startButton.simulate('click'); - - act(() => { - jest.advanceTimersByTime(3000); - }); - - pauseButton.simulate('click'); + resetButton.simulate('click'); - act(() => { - jest.advanceTimersByTime(5000); + // Then + expect(time.text()).toBe('0'); }); - startButton.simulate('click'); - - // Then - expect(time.text()).toBe('3'); + it('should reset timer to default initial time after restart', () => { + // Given + const Component = () => { + const { time, start } = useTimer({ + endTime: 10, + }); + + return ( +
+ +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const startButton = wrapper.find('#start'); + const time = wrapper.find('p'); + + // When + startButton.simulate('click'); + + act(() => { + jest.advanceTimersByTime(10000); + }); - act(() => { - jest.advanceTimersByTime(3000); - }); + startButton.simulate('click'); - expect(time.text()).toBe('5'); -}); + act(() => { + jest.advanceTimersByTime(5000); + }); -it('should reset timer to default initial time', () => { - // Given - const Component = () => { - const { time, start, reset } = useTimer(); - - return ( -
- - -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const startButton = wrapper.find('#start'); - const resetButton = wrapper.find('#reset'); - const time = wrapper.find('p'); - - // When - startButton.simulate('click'); - - act(() => { - jest.advanceTimersByTime(5000); + // Then + expect(time.text()).toBe('5'); }); - resetButton.simulate('click'); - - // Then - expect(time.text()).toBe('0'); -}); - -it('should reset timer to default initial time after restart', () => { - // Given - const Component = () => { - const { time, start } = useTimer({ - endTime: 10, + it('should reset timer to initial time of 20', () => { + // Given + const Component = () => { + const { time, start, reset } = useTimer({ + initialTime: 20, + }); + + return ( +
+ + +

{time}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const startButton = wrapper.find('#start'); + const resetButton = wrapper.find('#reset'); + const time = wrapper.find('p'); + + // When + startButton.simulate('click'); + + act(() => { + jest.advanceTimersByTime(5000); }); - return ( -
- -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const startButton = wrapper.find('#start'); - const time = wrapper.find('p'); - - // When - startButton.simulate('click'); - - act(() => { - jest.advanceTimersByTime(10000); - }); - - startButton.simulate('click'); + resetButton.simulate('click'); - act(() => { - jest.advanceTimersByTime(5000); + // Then + expect(time.text()).toBe('20'); }); - - // Then - expect(time.text()).toBe('5'); }); -it('should reset timer to initial time of 20', () => { - // Given - const Component = () => { - const { time, start, reset } = useTimer({ - initialTime: 20, - }); - - return ( -
- - -

{time}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const startButton = wrapper.find('#start'); - const resetButton = wrapper.find('#reset'); - const time = wrapper.find('p'); - - // When - startButton.simulate('click'); - - act(() => { - jest.advanceTimersByTime(5000); +describe('State and callbacks', () => { + it('should display "Running" text when timer is running', () => { + // Given + const Component = () => { + const { isRunning, start, pause, reset } = useTimer({ + initialTime: 20, + }); + + return ( +
+ + + +

{isRunning ? 'Running' : 'Not running'}

+
+ ); + }; + + const wrapper = Enzyme.mount(); + const startButton = wrapper.find('#start'); + const pauseButton = wrapper.find('#pause'); + const resetButton = wrapper.find('#reset'); + const statusBlock = wrapper.find('p'); + + // When + startButton.simulate('click'); + + // Then + expect(statusBlock.text()).toBe('Running'); + + // When + pauseButton.simulate('click'); + + // Expect + expect(statusBlock.text()).toBe('Not running'); + + // When + startButton.simulate('click'); + + // Expect + expect(statusBlock.text()).toBe('Running'); + + // When + resetButton.simulate('click'); + + // Expect + expect(statusBlock.text()).toBe('Not running'); }); - resetButton.simulate('click'); - - // Then - expect(time.text()).toBe('20'); -}); - -it('should display "Running" text when timer is running', () => { - // Given - const Component = () => { - const { isRunning, start, pause, reset } = useTimer({ - initialTime: 20, + it('should call callback function when time is over', () => { + // Given + const onTimeOver = jest.fn(); + const Component = () => { + const { start } = useTimer({ + endTime: 30, + initialTime: 0, + onTimeOver, + }); + + return ( +
+ +
+ ); + }; + + const wrapper = Enzyme.mount(); + const startButton = wrapper.find('#start'); + + // When + startButton.simulate('click'); + + act(() => { + jest.advanceTimersByTime(30000); }); - return ( -
- - - -

{isRunning ? 'Running' : 'Not running'}

-
- ); - }; - - const wrapper = Enzyme.mount(); - const startButton = wrapper.find('#start'); - const pauseButton = wrapper.find('#pause'); - const resetButton = wrapper.find('#reset'); - const statusBlock = wrapper.find('p'); - - // When - startButton.simulate('click'); - - // Then - expect(statusBlock.text()).toBe('Running'); - - // When - pauseButton.simulate('click'); - - // Expect - expect(statusBlock.text()).toBe('Not running'); - - // When - startButton.simulate('click'); - - // Expect - expect(statusBlock.text()).toBe('Running'); - - // When - resetButton.simulate('click'); - - // Expect - expect(statusBlock.text()).toBe('Not running'); -}); - -it('should call callback function when time is over', () => { - // Given - const onTimeOver = jest.fn(); - const Component = () => { - const { start } = useTimer({ - endTime: 30, - initialTime: 0, - onTimeOver, - }); - - return ( -
- -
- ); - }; - - const wrapper = Enzyme.mount(); - const startButton = wrapper.find('#start'); - - // When - startButton.simulate('click'); - - act(() => { - jest.advanceTimersByTime(30000); + // Then + expect(onTimeOver).toHaveBeenCalled(); }); - - // Then - expect(onTimeOver).toHaveBeenCalled(); });