{time}
) } diff --git a/src/StopWatchButton.tsx b/src/StopWatchButton.tsx index d586eee0..7d238623 100644 --- a/src/StopWatchButton.tsx +++ b/src/StopWatchButton.tsx @@ -7,7 +7,7 @@ interface buttonProps { const StopWatchButton = ({label, handleButtonClick}:buttonProps) => { return( - + ) } From f76045efdb3256a6dcef7089a1505f4e34d7abf5 Mon Sep 17 00:00:00 2001 From: Jake Spodek <68516673+jakespodek@users.noreply.github.com> Date: Sun, 28 Jan 2024 18:28:02 -0500 Subject: [PATCH 13/33] Update App.tsx improved formatting/indentation --- src/App.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index e18b5013..8921debe 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -45,10 +45,22 @@ function App() {{time}
+{formatTime(time)}
) } From 9904786d0976e56a117c743e4bd07f6a7eec5323 Mon Sep 17 00:00:00 2001 From: Jake Spodek <68516673+jakespodek@users.noreply.github.com> Date: Sun, 28 Jan 2024 19:00:55 -0500 Subject: [PATCH 15/33] Refactor Revised file structure --- src/App.tsx | 4 ++-- src/StopWatch.tsx | 26 ------------------------ src/components/StopWatch.tsx | 14 +++++++++++++ src/{ => components}/StopWatchButton.tsx | 0 src/utils/formatTime.tsx | 14 +++++++++++++ 5 files changed, 30 insertions(+), 28 deletions(-) delete mode 100644 src/StopWatch.tsx create mode 100644 src/components/StopWatch.tsx rename src/{ => components}/StopWatchButton.tsx (100%) create mode 100644 src/utils/formatTime.tsx diff --git a/src/App.tsx b/src/App.tsx index 91e1f61c..29f3fef2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import './App.css'; import React, { useState, useRef } from 'react' -import StopWatch from './StopWatch' -import StopWatchButton from './StopWatchButton' +import StopWatch from './components/StopWatch' +import StopWatchButton from './components/StopWatchButton' function App() { const intervalRef = useRef{formatTime(time)}
- ) -} - -export default StopWatch; \ No newline at end of file diff --git a/src/components/StopWatch.tsx b/src/components/StopWatch.tsx new file mode 100644 index 00000000..a77b6d78 --- /dev/null +++ b/src/components/StopWatch.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import formatTime from '../utils/formatTime' + +interface stopWatchProps { + time: number +} + +const StopWatch = ({time} : stopWatchProps) => { + return( +{formatTime(time)}
+ ) +} + +export default StopWatch; \ No newline at end of file diff --git a/src/StopWatchButton.tsx b/src/components/StopWatchButton.tsx similarity index 100% rename from src/StopWatchButton.tsx rename to src/components/StopWatchButton.tsx diff --git a/src/utils/formatTime.tsx b/src/utils/formatTime.tsx new file mode 100644 index 00000000..8f0f1f92 --- /dev/null +++ b/src/utils/formatTime.tsx @@ -0,0 +1,14 @@ +const formatTime = (timeInMilliseconds: number): string => { + const minutes = Math.floor((timeInMilliseconds % 3600000) / 60000); + const seconds = Math.floor((timeInMilliseconds % 60000) / 1000); + const milliseconds = Math.floor((timeInMilliseconds % 1000) / 10); + + const doubleDigits = (input: number) => { + const output = input < 10 ? `0${input}` : input; + return output; + }; + + return `${doubleDigits(minutes)}:${doubleDigits(seconds)}.${doubleDigits(milliseconds)}`; +} + +export default formatTime; \ No newline at end of file From 3e119c13d095d9c9dcab3ca25c782580b8954445 Mon Sep 17 00:00:00 2001 From: Jake Spodek <68516673+jakespodek@users.noreply.github.com> Date: Sun, 28 Jan 2024 19:04:04 -0500 Subject: [PATCH 16/33] Formatting Added some semicolons --- src/App.tsx | 6 +++--- src/components/StopWatch.tsx | 6 +++--- src/components/StopWatchButton.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 29f3fef2..5fb6f88d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,7 @@ import './App.css'; -import React, { useState, useRef } from 'react' -import StopWatch from './components/StopWatch' -import StopWatchButton from './components/StopWatchButton' +import React, { useState, useRef } from 'react'; +import StopWatch from './components/StopWatch'; +import StopWatchButton from './components/StopWatchButton'; function App() { const intervalRef = useRef{formatTime(time)}
+{formatTime(time)}
) } diff --git a/src/components/StopWatchButton.tsx b/src/components/StopWatchButton.tsx index b74f0dc8..ba009916 100644 --- a/src/components/StopWatchButton.tsx +++ b/src/components/StopWatchButton.tsx @@ -18,11 +18,20 @@ const StopWatchButton = ({ name, stopwatchState, handleButtonClick }: buttonProp || (stopwatchState === 'stopped' && name === 'stop') ) { return ( - + ) // if the none of the above conditions are met, render a normal/non-disabled button } else return ( - + ) } diff --git a/src/tests/App.test.tsx b/src/tests/App.test.tsx new file mode 100644 index 00000000..cfc2301f --- /dev/null +++ b/src/tests/App.test.tsx @@ -0,0 +1,40 @@ +/** + * @jest-environment jsdom + */ + +import { render, screen, cleanup, fireEvent } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { act } from 'react-dom/test-utils'; +import React from 'react'; +import App from '../App'; + +// Arrange +// Act +// Assert + +beforeEach(() => { + // use fake timing functions to allow time manipulation for testing + jest.useFakeTimers(); +}); + +afterEach(() => { + // unmount elements rendered during tests + cleanup(); + // run all pending timers and switch back to real timers + jest.runOnlyPendingTimers() + jest.useRealTimers(); +}); + +test('stopwatch starts when user clicks start button', () => { + render(