Simple implementation of the berlin clock kata. It's made of
two main parts: the clock engine and the UI. Everything is completely
driven by tests, with Jest and @testing-library/react.
The file clockEngine.js contains the code responsible for translating the Date
into the format expected by the Berlin Clock. This was a good case for
leveraging parameterized tests (see clockEngine.test.js).
The function startClock is responsible for starting the timer, and expects a
Date. For this reason, in the tests startClock.test.js we used mocked date in
order to have full control of the expected output of the function unders test.
The UI is built using React. The components are tested with
@testing-library/react, using data-testid attributes on the elements. For
testing some more complicated scenarios, like when we have to determine which
divs should be enlighted or not, we use snapshots checking that the output is
what we expected.
The project is built with circleci, where we have two jobs, one for running
the tests and the other for deploy the application, only if the tests are
passing.
Leveraging the capability of circleci to run scripts, if all the jobs goes
well, we then launch the deploy.sh script, responsible for the creation of the
branch gh-pages and we shipped an optimized build of the app on github pages.
For more info about the kata, like rules etc., please check:
As the app was created with create-react-app, you have all the scripts that are shipped by default with cra, so:
- install packages:
yarn install - run tests:
yarn test - run local server:
yarn start - build for production:
yarn build