Connect to interval timer completely

Pascal Wegner · Pascal Wegner · commit 58c2472b9bf9 · 2022-02-06T11:27:23.000+01:00
diff --git a/packages/pwa/jest.config.js b/packages/pwa/jest.config.js
@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   displayName: {
     name: 'PWA',
@@ -12,6 +14,12 @@ module.exports = {
       statements: 100,
     },
   },
+  transform: {
+    '.+\\.(js|jsx|ts|tsx)$': [
+      'babel-jest',
+      { configFile: path.resolve(__dirname, './.babelrc') },
+    ],
+  },
   setupFilesAfterEnv: ['<rootDir>/setup-tests.js'],
   testEnvironment: 'jsdom',
 };
diff --git a/packages/pwa/public/intervalWorker.js b/packages/pwa/public/intervalWorker.js
@@ -0,0 +1,11 @@
+let interval = null;
+self.addEventListener('message', (e) => {
+  if (e.data === 'START') {
+    interval = setInterval(() => {
+      self.postMessage('TICK');
+    }, 5);
+  }
+  if (e.data === 'STOP') {
+    clearInterval(interval);
+  }
+});
diff --git a/packages/pwa/src/__mocks__/Worker.js b/packages/pwa/src/__mocks__/Worker.js
@@ -0,0 +1,18 @@
+export class MockWorker {
+  interval = null;
+  callback = () => {};
+  addEventListener = (_event, callback) => {
+    this.callback = callback;
+  };
+
+  postMessage = (e) => {
+    if (e === 'START') {
+      this.interval = setInterval(() => {
+        this.callback({ data: 'TICK' });
+      }, 1000);
+    }
+    if (e === 'STOP') {
+      clearInterval(this.interval);
+    }
+  };
+}
diff --git a/packages/pwa/src/__tests__/index.test.tsx b/packages/pwa/src/__tests__/index.test.tsx
@@ -1,9 +1,183 @@
-import { render, screen } from '@testing-library/react';
-import Home from '../pages';
+import { fireEvent, screen } from '@testing-library/react';
+import { MockWorker } from '../__mocks__/Worker';
+import { expectCountDownFrom } from '../test-utils/expectCountDownFrom';
+import { makeAdvanceDateNowBy } from '../test-utils/makeAdvanceDateNowBy';
+import { renderApp } from '../test-utils/renderApp';
+
+const startDate = 1587574443099;
 
 describe('Home', () => {
+  beforeEach(() => {
+    window.Worker = MockWorker as any;
+    jest.useFakeTimers('modern');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    window.Worker = undefined;
+  });
+
   it('should work', () => {
-    render(<Home />);
-    expect(screen.getByRole('button', { name: /start/i }));
+    const {
+      breakIntervalMinuteInput,
+      breakIntervalSecondInput,
+      prepTime,
+      roundInput,
+      startButton,
+      workIntervalMinuteInput,
+      workIntervalSecondInput,
+    } = renderApp();
+
+    expect(workIntervalMinuteInput).toBeTruthy();
+    expect(workIntervalSecondInput).toBeTruthy();
+    expect(breakIntervalMinuteInput).toBeTruthy();
+
+    const workMinutesValue = '1';
+    const workSecondsValue = '1';
+    const workMinutes = Number(workMinutesValue);
+    const workSeconds = Number(workSecondsValue);
+
+    const breakMinutesValue = '1';
+    const breakSecondsValue = '1';
+    const breakMinutes = Number(breakMinutesValue);
+    const breakSeconds = Number(breakSecondsValue);
+
+    const roundsValue = '2';
+
+    fireEvent.change(roundInput, { target: { value: roundsValue } });
+    fireEvent.blur(roundInput);
+
+    fireEvent.change(workIntervalMinuteInput, {
+      target: { value: workMinutesValue },
+    });
+    fireEvent.change(workIntervalSecondInput, {
+      target: { value: workSecondsValue },
+    });
+
+    fireEvent.change(breakIntervalMinuteInput, {
+      target: { value: breakMinutesValue },
+    });
+    fireEvent.change(breakIntervalSecondInput, {
+      target: { value: breakSecondsValue },
+    });
+
+    const advanceDateNowBy = makeAdvanceDateNowBy(startDate);
+
+    fireEvent.click(startButton);
+
+    const timeLeftMinutes = screen.getByTestId(
+      'time-left-minutes'
+    ) as HTMLInputElement;
+
+    const timeLeftSeconds = screen.getByTestId(
+      'time-left-seconds'
+    ) as HTMLInputElement;
+
+    const round = screen.getByTestId('round');
+
+    expect(round.textContent).toBe('0/2');
+
+    expectCountDownFrom({
+      minutes: 0,
+      seconds: prepTime,
+      advanceDateNowBy,
+      timeLeftMinutes,
+      timeLeftSeconds,
+    });
+
+    expect(round.textContent).toBe('1/2');
+
+    expectCountDownFrom({
+      minutes: workMinutes,
+      seconds: workSeconds,
+      advanceDateNowBy,
+      timeLeftMinutes,
+      timeLeftSeconds,
+    });
+
+    expectCountDownFrom({
+      minutes: breakMinutes,
+      seconds: breakSeconds,
+      advanceDateNowBy,
+      timeLeftMinutes,
+      timeLeftSeconds,
+    });
+
+    expect(round.textContent).toBe('2/2');
+
+    expectCountDownFrom({
+      minutes: workMinutes,
+      seconds: workSeconds,
+      advanceDateNowBy,
+      timeLeftMinutes,
+      timeLeftSeconds,
+    });
+  });
+
+  it('should stop timer when clicking button again', () => {
+    const {
+      breakIntervalMinuteInput,
+      breakIntervalSecondInput,
+      prepTime,
+      roundInput,
+      startButton,
+      workIntervalMinuteInput,
+      workIntervalSecondInput,
+    } = renderApp();
+
+    expect(roundInput).toBeTruthy();
+    expect(workIntervalMinuteInput).toBeTruthy();
+    expect(workIntervalSecondInput).toBeTruthy();
+    expect(breakIntervalMinuteInput).toBeTruthy();
+    expect(breakIntervalSecondInput).toBeTruthy();
+    expect(startButton).toBeTruthy();
+
+    const workMinutesValue = '1';
+    const workSecondsValue = '1';
+
+    const breakMinutesValue = '1';
+    const breakSecondsValue = '1';
+
+    const roundsValue = '2';
+
+    fireEvent.change(roundInput, { target: { value: roundsValue } });
+    fireEvent.blur(roundInput);
+
+    fireEvent.change(workIntervalMinuteInput, {
+      target: { value: workMinutesValue },
+    });
+    fireEvent.change(workIntervalSecondInput, {
+      target: { value: workSecondsValue },
+    });
+
+    fireEvent.change(breakIntervalMinuteInput, {
+      target: { value: breakMinutesValue },
+    });
+    fireEvent.change(breakIntervalSecondInput, {
+      target: { value: breakSecondsValue },
+    });
+
+    const advanceDateNowBy = makeAdvanceDateNowBy(startDate);
+
+    fireEvent.click(startButton);
+
+    const timeLeftSeconds = screen.getByTestId(
+      'time-left-seconds'
+    ) as HTMLInputElement;
+    const round = screen.getByTestId('round');
+
+    expect(round.textContent).toBe('0/2');
+
+    // count down from 00:05 and stop after two seconds
+    expectCountDownFrom({
+      minutes: 0,
+      seconds: prepTime,
+      toSeconds: 3,
+      advanceDateNowBy,
+      timeLeftMinutes: { value: '00' } as HTMLInputElement,
+      timeLeftSeconds,
+    });
+
+    fireEvent.click(startButton);
   });
 });
diff --git a/packages/pwa/src/components/DurationInput/DurationInput.tsx b/packages/pwa/src/components/DurationInput/DurationInput.tsx
@@ -8,7 +8,7 @@ type DurationInputProps = {
   value: Date;
   label?: string;
   readOnly?: boolean;
-  onChange: (value: Date) => void;
+  onChange?: (value: Date) => void;
   dataTestId?: string;
 };
 
@@ -44,13 +44,13 @@ export function DurationInput({
           formattedMinutes,
           targetValue
         );
-        onChange(setMinutes(new Date(value.valueOf()), formattedTargetValue));
+        onChange?.(setMinutes(new Date(value.valueOf()), formattedTargetValue));
       } else {
         const formattedTargetValue = addNumberAtEndShifting(
           formattedSeconds,
           targetValue
         );
-        onChange(setSeconds(new Date(value.valueOf()), formattedTargetValue));
+        onChange?.(setSeconds(new Date(value.valueOf()), formattedTargetValue));
       }
     }
   };
@@ -79,7 +79,7 @@ export function DurationInput({
   return (
     <div className="flex flex-col items-center">
       {label ? (
-        <label className="text-blue-600 text-lg font-bold ">{label}</label>
+        <label className="text-blue-600 text-lg font-bold">{label}</label>
       ) : null}
       <div className="flex flex-row justify-center items-center text-black text-6xl box-content w-full">
         <input
diff --git a/packages/pwa/src/pages/index.tsx b/packages/pwa/src/pages/index.tsx
@@ -1,9 +1,33 @@
 import { FormFields } from '../components/FormFields/FormFields';
-import { timerMachine } from '@interval-timer/core';
+import { timerMachine, timerStates, TTimerStates } from '@interval-timer/core';
 import { useMachine } from '@xstate/react';
+import * as React from 'react';
+import { Counter } from '../components/Counter/Counter';
 
 export default function Home() {
-  const [state, send] = useMachine(timerMachine);
+  const [state, send, service] = useMachine(timerMachine);
+
+  React.useEffect(() => {
+    const intervalWorker = new Worker('/intervalWorker.js');
+
+    intervalWorker.addEventListener('message', () => {
+      service.send({ type: 'TICK' });
+    });
+
+    service.subscribe((_state, event) => {
+      if (event && (event.type === 'START' || event.type === 'STOP')) {
+        intervalWorker.postMessage(event.type);
+      }
+    });
+  }, [service]);
+
+  const toggleTimer = () => {
+    if (state.value === timerStates.STOPPED) {
+      send('START');
+    } else {
+      send('STOP');
+    }
+  };
 
   const setRounds = (rounds: number) => {
     send({ type: 'SET_ROUNDS', rounds: Number(rounds) });
@@ -23,26 +47,38 @@ export default function Home() {
     });
   };
 
-  const { breakInterval, rounds, workInterval } = state.context;
+  const { breakInterval, rounds, workInterval, timeLeft, roundsLeft } =
+    state.context;
 
   return (
     <>
       <header />
       <main className="flex-1">
         <div className="h-full flex flex-col items-stretch bg-blue-600">
           <div className="flex flex-col justify-center flex-1 bg-white rounded-b-3xl">
-            <FormFields
-              rounds={rounds}
-              onRoundsChange={setRounds}
-              breakInterval={breakInterval}
-              onBreakIntervalChange={setBreakInterval}
-              workInterval={workInterval}
-              onWorkIntervalChange={setWorkInterval}
-            ></FormFields>
+            {state.value === timerStates.STOPPED ? (
+              <FormFields
+                rounds={rounds}
+                onRoundsChange={setRounds}
+                breakInterval={breakInterval}
+                onBreakIntervalChange={setBreakInterval}
+                workInterval={workInterval}
+                onWorkIntervalChange={setWorkInterval}
+              ></FormFields>
+            ) : (
+              <Counter
+                timeLeft={timeLeft}
+                roundsLeft={roundsLeft}
+                rounds={rounds}
+              />
+            )}
           </div>
           <div className="flex flex-col items-center flex-[0.25] pt-8 ">
-            <button className="text-blue-600 bg-white text-xl px-8 h-14 rounded-full font-semibold">
-              Start
+            <button
+              className="text-blue-600 bg-white text-xl px-8 h-14 rounded-full font-semibold"
+              onClick={toggleTimer}
+            >
+              {state.matches(timerStates.STOPPED) ? 'Start' : 'Stop'}
             </button>
           </div>
         </div>
diff --git a/packages/pwa/src/test-utils/expectCountDownFrom.ts b/packages/pwa/src/test-utils/expectCountDownFrom.ts
diff --git a/packages/pwa/src/test-utils/makeAdvanceDateNowBy.ts b/packages/pwa/src/test-utils/makeAdvanceDateNowBy.ts
diff --git a/packages/pwa/src/test-utils/renderApp.tsx b/packages/pwa/src/test-utils/renderApp.tsx
