Stopwatch: Adds tests for TimerDisplay.jsx

src/components/app/App.test.js

@@ -1,8 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test('should render as expected', () => {
+  const component = render(<App />);
+
+  expect(component.container).toMatchSnapshot();
 });

src/components/app/__snapshots__/App.test.js.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render as expected 1`] = `
+<div>
+  <div
+    class="App"
+  >
+    <h1
+      class="timer"
+      id="stopwatch-elapsed"
+    >
+      0:00:00.00
+    </h1>
+    <button
+      class="button"
+      id="stopwatch-start-stop"
+    >
+      Start
+    </button>
+    <button
+      class="button"
+      id="stopwatch-reset"
+    >
+      Reset
+    </button>
+  </div>
+</div>
+`;

src/components/timerDisplay/TimerDisplay.test.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import { render } from '@testing-library/react';
+import TimerDisplay from './TimerDisplay';
+import {TIMER_TICK_DURATION_IN_MS} from "../../constants";
+
+const stubSetElapsedTime = jest.fn();
+const stubSetIsRunning = jest.fn();
+const stubUseContext = jest.fn();
+
+const defaultContext = {
+    elapsedTime: 0,
+    isRunning: false,
+    setElapsedTime: stubSetElapsedTime,
+    setIsRunning: stubSetIsRunning
+}
+
+const renderWithContext = (context = defaultContext) => {
+    React.useContext = stubUseContext.mockReturnValue(context)
+    return render(<TimerDisplay/>)
+};
+
+beforeEach(() => {
+    jest.useFakeTimers();
+})
+
+afterEach(() => {
+    jest.useRealTimers();
+});
+
+test('should render as expected', () => {
+const component = renderWithContext();
+
+    expect(component.container).toMatchSnapshot();
+});
+
+test('should not call setElapsedTime if isRunning is false', () => {
+    const givenContext = {
+        ...defaultContext,
+        isRunning: false,
+    };
+
+    renderWithContext(givenContext);
+
+    jest.runAllTimers();
+
+    expect(stubSetElapsedTime).not.toHaveBeenCalled();
+})
+
+test('should call setElapsedTime with expected parameters if isRunning is true', () => {
+    const givenContext = {
+        ...defaultContext,
+        isRunning: true,
+    };
+
+    renderWithContext(givenContext);
+
+    jest.runAllTimers();
+
+    expect(stubSetElapsedTime).toHaveBeenCalledWith(TIMER_TICK_DURATION_IN_MS);
+})
+

src/components/timerDisplay/__snapshots__/TimerDisplay.test.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render as expected 1`] = `
+<div>
+  <h1
+    class="timer"
+    id="stopwatch-elapsed"
+  >
+    0:00:00.00
+  </h1>
+</div>
+`;