[election-ui-js] Use Prettier to autoformat code

election-ui-javascript/.prettierignore

@@ -0,0 +1,2 @@
+.*
+

election-ui-javascript/README.md

@@ -8,9 +8,10 @@ Before your election we would like you to get a 'local' environment set up to ru
 
 ## Setup
 
-Requires: 
-* node (18) - available from https://nodejs.org/en/download/
-* npm (9.x) - will be installed with node 18, or see https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
+Requires:
+
+- node (18) - available from https://nodejs.org/en/download/
+- npm (9.x) - will be installed with node 18, or see https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
 
 ```sh
 # Install dependencies
@@ -22,28 +23,27 @@ npm start
 ```
 
 Notes:
-1) You will see some console warnings when running the 'build' and 'start' step. Assuming the application starts up correctly these can be ignored.
-2) The fakeAPI directory contains a mock of an external API, for the purposes of the assessment. Inside the fakeAPI directory you will find a README that describes the interface and outputs of the API, but you should not need to change the mock API itself.
 
-At this point we don't ask you to do any more until your booked assessment time. 
+1. You will see some console warnings when running the 'build' and 'start' step. Assuming the application starts up correctly these can be ignored.
+2. The fakeAPI directory contains a mock of an external API, for the purposes of the assessment. Inside the fakeAPI directory you will find a README that describes the interface and outputs of the API, but you should not need to change the mock API itself.
+
+At this point we don't ask you to do any more until your booked assessment time.
 
 You're ready for your assessment as long as the following are true:
+
 - You can open this folder in your preferred code editor
 - You can run all the tests (with `npm test`) and 1 fails and 9 pass
 - You can run `npm start` and see a styled "Elections 2021" webpage in your browser at http://localhost:3000/
 
-:warning:  If you make any changes to the code, please ensure you return it to it's initial (HEAD) state before your assessment.
+:warning: If you make any changes to the code, please ensure you return it to it's initial (HEAD) state before your assessment.
 
 ## Assessment Time
 
 In the assessment we will ask you to screenshare your working environment and talk through the following with us:
 
-1) What does this system do? What are its key features?
-2) New Feature requests! - The election product team have some feature requests that we would like you to take a look at. They can be found in `tasks.md`.
+1. What does this system do? What are its key features?
+2. New Feature requests! - The election product team have some feature requests that we would like you to take a look at. They can be found in `tasks.md`.
 
 If you have any problems with any of this, please get in touch via your recruitment contact.
 
-Thanks :) 
-
-
-
+Thanks :)

election-ui-javascript/package.json

@@ -14,6 +14,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "pretest": "prettier --loglevel=error --write '*'",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^2.8.4"
   }
 }

election-ui-javascript/src/components/PartyLinks/PartyLinks.test.js

@@ -1,24 +1,26 @@
-import { render } from '@testing-library/react';
-import PartyLinks from '.';
+import { render } from "@testing-library/react";
+import PartyLinks from ".";
 
-test('renders party links as a list', async () => {
-  const { container } = render(<PartyLinks/>);
+test("renders party links as a list", async () => {
+  const { container } = render(<PartyLinks />);
 
-  const partyLinks = container.querySelector('.Party-links')
-  expect(partyLinks.nodeName).toBe('UL');
+  const partyLinks = container.querySelector(".Party-links");
+  expect(partyLinks.nodeName).toBe("UL");
 });
 
-test('renders all the party links', async () => {
-  const { container } = render(<PartyLinks/>);
+test("renders all the party links", async () => {
+  const { container } = render(<PartyLinks />);
 
-  const partyLink = container.querySelectorAll('li.Party-link')
+  const partyLink = container.querySelectorAll("li.Party-link");
   expect(partyLink.length).toBe(6);
 });
 
-test('renders a party link with the correct text and href', async () => {
-  const { container } = render(<PartyLinks/>);
+test("renders a party link with the correct text and href", async () => {
+  const { container } = render(<PartyLinks />);
 
-  const partyLinksAnchorTag = container.querySelector('.Party-link a')
-  expect(partyLinksAnchorTag.textContent).toBe('Hippo Party');
-  expect(partyLinksAnchorTag.href).toBe('https://en.wikipedia.org/wiki/Hippopotamus');
+  const partyLinksAnchorTag = container.querySelector(".Party-link a");
+  expect(partyLinksAnchorTag.textContent).toBe("Hippo Party");
+  expect(partyLinksAnchorTag.href).toBe(
+    "https://en.wikipedia.org/wiki/Hippopotamus"
+  );
 });

election-ui-javascript/src/components/PartyLinks/index.js

@@ -1,22 +1,22 @@
-import './PartyLinks.css';
+import "./PartyLinks.css";
 
 const PARTIES = [
-  { name: 'Hippo Party', url: 'https://en.wikipedia.org/wiki/Hippopotamus'},
-  { name: 'Giraffe Party', url: 'https://en.wikipedia.org/wiki/Giraffe'},
-  { name: 'Tiger Party', url: 'https://en.wikipedia.org/wiki/Tiger'},
-  { name: 'Zebra Party', url: 'https://en.wikipedia.org/wiki/Zebra'},
-  { name: 'Meerkat Party', url: 'https://en.wikipedia.org/wiki/Meerkat'},
-  { name: 'Pelican Party', url: 'https://en.wikipedia.org/wiki/Pelican'},
-]
+  { name: "Hippo Party", url: "https://en.wikipedia.org/wiki/Hippopotamus" },
+  { name: "Giraffe Party", url: "https://en.wikipedia.org/wiki/Giraffe" },
+  { name: "Tiger Party", url: "https://en.wikipedia.org/wiki/Tiger" },
+  { name: "Zebra Party", url: "https://en.wikipedia.org/wiki/Zebra" },
+  { name: "Meerkat Party", url: "https://en.wikipedia.org/wiki/Meerkat" },
+  { name: "Pelican Party", url: "https://en.wikipedia.org/wiki/Pelican" },
+];
 
 function PartyLinks() {
   return (
     <ul className="Party-links">
-      {PARTIES.map((party) =>
-        (<li className="Party-link" key={party.name}>
+      {PARTIES.map((party) => (
+        <li className="Party-link" key={party.name}>
           <a href={party.url}>{party.name}</a>
-        </li>)
-      )}
+        </li>
+      ))}
     </ul>
   );
 }

election-ui-javascript/src/components/Scoreboard.js

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
-import Logo from './logo/logo';
-import fetchData from '../dataFetcher';
-import Scorecard from './Scorecard';
-import './Scoreboard.css';
+import React, { useState, useEffect } from "react";
+import Logo from "./logo/logo";
+import fetchData from "../dataFetcher";
+import Scorecard from "./Scorecard";
+import "./Scoreboard.css";
 import PartyLinks from "./PartyLinks";
 
 function Scoreboard() {
@@ -32,17 +32,19 @@ function Scoreboard() {
         <Logo language="en" />
       </header>
       <main>
-        {
-          loading ? <h2>Loading...</h2> :
-          error ? <h1>Error</h1> :
+        {loading ? (
+          <h2>Loading...</h2>
+        ) : error ? (
+          <h1>Error</h1>
+        ) : (
           <>
             <h1>Results</h1>
             <Scorecard results={results} />
             <a className="Scoreboard-refresh">Refresh</a>
             <h1>Learn more about the parties...</h1>
             <PartyLinks />
           </>
-        }
+        )}
       </main>
     </div>
   );

election-ui-javascript/src/components/Scoreboard.test.js

@@ -1,32 +1,40 @@
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
-import Scoreboard from './Scoreboard';
-import dataFetcher from '../dataFetcher';
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import Scoreboard from "./Scoreboard";
+import dataFetcher from "../dataFetcher";
 
-jest.mock('../dataFetcher');
+jest.mock("../dataFetcher");
 
-test('renders Results', async () => {
+test("renders Results", async () => {
   dataFetcher.mockImplementationOnce(() => {
     return Promise.resolve({
       isComplete: false,
       results: [
         {
-          'party': 'Giraffe Party',
-          'candidateId': 2,
-          'votes': '9900'
-        }
-      ]
-    })
+          party: "Giraffe Party",
+          candidateId: 2,
+          votes: "9900",
+        },
+      ],
+    });
   });
 
   render(<Scoreboard />);
 
   await waitFor(() => {
-    const resultParty = within(screen.getByRole('table')).getByText(/Giraffe Party/i);
+    const resultParty = within(screen.getByRole("table")).getByText(
+      /Giraffe Party/i
+    );
     expect(resultParty).toBeInTheDocument();
   });
 });
 
-test('renders error state', async () => {
+test("renders error state", async () => {
   dataFetcher.mockImplementationOnce(() => {
     throw new Error();
   });
@@ -39,31 +47,31 @@ test('renders error state', async () => {
   });
 });
 
-test('fetches results again when refresh button clicked', async () => {
+test("fetches results again when refresh button clicked", async () => {
   dataFetcher.mockImplementationOnce(() => {
     return Promise.resolve({
       isComplete: false,
       results: [
         {
-          'party': 'Giraffe Party',
-          'candidateId': 2,
-          'votes': '9900'
-        }
-      ]
-    })
+          party: "Giraffe Party",
+          candidateId: 2,
+          votes: "9900",
+        },
+      ],
+    });
   });
 
   dataFetcher.mockImplementationOnce(() => {
     return Promise.resolve({
       isComplete: false,
       results: [
         {
-          'party': 'Giraffe Party',
-          'candidateId': 2,
-          'votes': '12345'
-        }
-      ]
-    })
+          party: "Giraffe Party",
+          candidateId: 2,
+          votes: "12345",
+        },
+      ],
+    });
   });
 
   render(<Scoreboard />);

election-ui-javascript/src/components/Scorecard/Scorecard.css

@@ -18,4 +18,4 @@
 
 .Scorecard-table tbody tr:nth-of-type(2n + 1) {
   background-color: white;
-}
+}

election-ui-javascript/src/components/Scorecard/Scorecard.test.js

@@ -1,15 +1,15 @@
-import { render, screen } from '@testing-library/react';
-import Scorecard from '.';
+import { render, screen } from "@testing-library/react";
+import Scorecard from ".";
 
 const results = [
   {
-    'party': 'Green',
-    'candidateId': 2,
-    'votes': '1056'
-  }
+    party: "Green",
+    candidateId: 2,
+    votes: "1056",
+  },
 ];
 
-test('renders results', async () => {
+test("renders results", async () => {
   render(<Scorecard results={results} />);
 
   const partyHeading = screen.getByText(/Party/i);
@@ -27,7 +27,7 @@ test('renders results', async () => {
   expect(votes).toBeInTheDocument();
 });
 
-test('renders No Results if there are no results', async () => {
+test("renders No Results if there are no results", async () => {
   render(<Scorecard />);
   const noResultsMessage = screen.getByText(/No results/i);
   expect(noResultsMessage).toBeInTheDocument();