diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..214235a --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,3 @@ + + +## Todo diff --git a/.vscode/settings.json b/.vscode/settings.json index 3824794..fe00747 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,8 +1,6 @@ { "editor.formatOnSave": true, "editor.formatOnPaste": true, - "cSpell.ignoreWords": [ - "ecotricity", - "sunmills" - ] -} \ No newline at end of file + "editor.defaultFormatter": "esbenp.prettier-vscode", + "cSpell.ignoreWords": ["ecotricity", "sunmills"] +} diff --git a/jest-preprocess.js b/jest-preprocess.js new file mode 100644 index 0000000..8bb4543 --- /dev/null +++ b/jest-preprocess.js @@ -0,0 +1,4 @@ +const babelOptions = { + presets: ["babel-preset-gatsby"], +} +module.exports = require("babel-jest").createTransformer(babelOptions) \ No newline at end of file diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..52c2c9c --- /dev/null +++ b/jest.config.js @@ -0,0 +1,19 @@ +/** + * See https://gatsby.dev/unit-testing for more info on writing tests. + */ + +module.exports = { + transform: { + "^.+\\.jsx?$": `/jest-preprocess.js`, + }, + moduleNameMapper: { + ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`, + ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `/__mocks__/file-mock.js`, + }, + testPathIgnorePatterns: [`node_modules`, `\\.cache`, `.*/public`], + transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`], + globals: { + __PATH_PREFIX__: ``, + }, + testURL: `http://localhost`, +} \ No newline at end of file diff --git a/package.json b/package.json index 86add5a..bdc366b 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "format": "prettier --write \"**/*.{js,jsx,json,md}\"", "lint": "eslint src", "start": "npm run develop", - "serve": "gatsby serve" + "serve": "gatsby serve", + "test": "jest" }, "dependencies": { "bootstrap": "^4.4.1", @@ -44,10 +45,14 @@ "title-case": "^3.0.2" }, "devDependencies": { + "babel-jest": "^26.6.1", + "babel-preset-gatsby": "^0.5.14", "eslint-config-prettier": "^6.9.0", "eslint-config-react-app": "^5.1.0", "eslint-plugin-prettier": "^3.1.2", - "prettier": "^2.0.5" + "jest": "^26.6.1", + "prettier": "^2.0.5", + "react-test-renderer": "^17.0.1" }, "repository": { "type": "git", diff --git a/src/components/CountrySelection.jsx b/src/components/CountrySelection.jsx new file mode 100644 index 0000000..b22a943 --- /dev/null +++ b/src/components/CountrySelection.jsx @@ -0,0 +1,38 @@ +import React, { useState } from 'react'; +import Button from 'react-bootstrap/Button'; + +import Countries from '../countries'; + +/** + * Renders a button to select a new country, and the currently + * selected country if one's been set in session storage. + * + * If the user has a country preference in session storage, we + * update the button text to "Change country". + */ +const CountrySelection = ({}) => { + // Get the country code. e.g., "BG" for "Bulgaria" + const [country] = useState(sessionStorage.getItem('country_pref')); + + // Default to Great Britain + const countryName = Countries.fromAlpha2Code(country || 'GB').name; + const countryEmoji = Countries.fromAlpha2Code(country || 'GB').emoji; + + return ( +
+ {countryName && countryEmoji ? ( + <> + + {countryName} {countryEmoji} + {' '} + + ) : null} + + +
+ ); +}; + +export default CountrySelection; diff --git a/src/components/CountrySelection.test.js b/src/components/CountrySelection.test.js new file mode 100644 index 0000000..2ced3fa --- /dev/null +++ b/src/components/CountrySelection.test.js @@ -0,0 +1,13 @@ +import React from "react"; +import renderer from "react-test-renderer"; + +import CountrySelection from "./CountrySelection"; + +describe("CountrySelection", () => { + it("renders correctly", () => { + const tree = renderer + .create() + .toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index fc843dc..d22ac70 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -3,13 +3,11 @@ import React from 'react'; import Button from 'react-bootstrap/Button'; import Container from 'react-bootstrap/Container'; import Col from 'react-bootstrap/Col'; -// import Dropdown from 'react-bootstrap/Dropdown'; import Row from 'react-bootstrap/Row'; -import { useCountry } from '../context/country-context'; -import Countries from '../countries'; + +import CountrySelection from './CountrySelection'; const Footer = () => { - const { country } = useCountry(); return (