From 248a11219aa4731878380bd875450f15f9731c10 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 13:35:49 +0100 Subject: Update app with new build system --- src/react-app-env.d.ts | 67 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 6431bc5..981cd73 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1 +1,66 @@ -/// +/// +/// +/// + +declare namespace NodeJS { + interface ProcessEnv { + readonly NODE_ENV: 'development' | 'production' | 'test'; + readonly PUBLIC_URL: string; + } +} + +declare module '*.bmp' { + const src: string; + export default src; +} + +declare module '*.gif' { + const src: string; + export default src; +} + +declare module '*.jpg' { + const src: string; + export default src; +} + +declare module '*.jpeg' { + const src: string; + export default src; +} + +declare module '*.png' { + const src: string; + export default src; +} + +declare module '*.webp' { + const src: string; + export default src; +} + +declare module '*.svg' { + import * as React from 'react'; + + export const ReactComponent: React.FunctionComponent & { title?: string }>; + + const src: string; + export default src; +} + +declare module '*.module.css' { + const classes: { readonly [key: string]: string }; + export default classes; +} + +declare module '*.module.scss' { + const classes: { readonly [key: string]: string }; + export default classes; +} + +declare module '*.module.sass' { + const classes: { readonly [key: string]: string }; + export default classes; +} -- cgit v1.2.3 From 259b9bb0eb5e35f902413fe4c6c4175b46e50005 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 13:36:01 +0100 Subject: Lazy load components --- src/App.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index 19ba6a6..56aff08 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ /** @jsx jsx */ /** @global location */ +import React, { Suspense } from "react"; import { jsx, Global } from "@emotion/core"; import { @@ -8,14 +9,16 @@ import { Switch } from "react-router-dom"; -import { CSSTransition, TransitionGroup } from "react-transition-group"; +import { HashLoader } from "react-spinners"; -import LandingPage from "./pages/LandingPage"; -import FormPage from "./pages/FormPage"; -import CallbackPage from "./pages/CallbackPage"; +import { CSSTransition, TransitionGroup } from "react-transition-group"; import globalStyles from "./globalStyles"; +const LandingPage = React.lazy(() => import("./pages/LandingPage")); +const FormPage = React.lazy(() => import("./pages/FormPage")); +const CallbackPage = React.lazy(() => import("./pages/CallbackPage")); + const routes = [ { path: "/", Component: LandingPage }, { path: "/form/:id", Component: FormPage}, @@ -36,7 +39,11 @@ function App() { > {routes.map(({path, Component}) => ( - + + }> + + + ))} -- cgit v1.2.3 From 443b811dce5c4a3944466f1a1e81854443255e00 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 13:36:06 +0100 Subject: Remove pointless comment --- src/index.tsx | 3 --- 1 file changed, 3 deletions(-) (limited to 'src') diff --git a/src/index.tsx b/src/index.tsx index 783d34f..22f18cd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -45,7 +45,4 @@ ReactDOM.render( document.getElementById('root') ); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister(); -- cgit v1.2.3 From fc1495d478e3d8b6e30a6311d9665907e7dca3ea Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 13:36:12 +0100 Subject: Remove comments --- src/serviceWorker.ts | 12 ------------ 1 file changed, 12 deletions(-) (limited to 'src') diff --git a/src/serviceWorker.ts b/src/serviceWorker.ts index b09523f..2b4d2b5 100644 --- a/src/serviceWorker.ts +++ b/src/serviceWorker.ts @@ -1,15 +1,3 @@ -// This optional code is used to register a service worker. -// register() is not called by default. - -// This lets the app load faster on subsequent visits in production, and gives -// it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on subsequent visits to a page, after all the -// existing tabs open on the page have been closed, since previously cached -// resources are updated in the background. - -// To learn more about the benefits of this model and instructions on how to -// opt-in, read https://bit.ly/CRA-PWA - const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. -- cgit v1.2.3 From bb86d6120f8f1d80fd32ad25c2e705a72dc38bb4 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 13:58:35 +0100 Subject: Fix tests --- .github/workflows/test_and_lint.yml | 2 +- jest.config.js | 6 ++++ package.json | 56 ++---------------------------- src/components/HeaderBar/index.tsx | 9 +++-- src/index.tsx | 4 +++ src/tests/components/FormListing.test.tsx | 1 + src/tests/components/HeaderBar.test.tsx | 1 + src/tests/components/OAuth2Button.test.tsx | 1 + src/tests/components/Tag.test.tsx | 1 + webpack.config.js | 2 +- yarn.lock | 42 ++++++---------------- 11 files changed, 32 insertions(+), 93 deletions(-) create mode 100644 jest.config.js (limited to 'src') diff --git a/.github/workflows/test_and_lint.yml b/.github/workflows/test_and_lint.yml index 86ac818..c8d9949 100644 --- a/.github/workflows/test_and_lint.yml +++ b/.github/workflows/test_and_lint.yml @@ -30,7 +30,7 @@ jobs: - name: Install dependencies run: yarn install - - name: Install dependencies + - name: Run tests run: yarn test diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..165e711 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,6 @@ +module.exports = { + transform: { + '^.+\\.(t|j)sx?$': ['@swc/jest'], + '^.+\\.svg$': ['jest-svg-transformer'] + }, +} diff --git a/package.json b/package.json index ec9be1c..e13c96a 100644 --- a/package.json +++ b/package.json @@ -42,8 +42,10 @@ "html-webpack-plugin": "^4.5.0", "identity-obj-proxy": "3.0.0", "jest": "^26.5.3", + "jest-dom": "^4.0.0", "jest-environment-jsdom-fourteen": "1.0.1", "jest-resolve": "24.9.0", + "jest-svg-transformer": "^1.0.0", "jest-watch-typeahead": "0.4.2", "mini-css-extract-plugin": "0.9.0", "postcss-flexbugs-fixes": "4.1.0", @@ -55,7 +57,6 @@ "react-app-polyfill": "^1.0.6", "react-dev-utils": "^10.2.1", "react-dom": "^16.13.1", - "react-inlinesvg": "^2.1.0", "react-router-dom": "^5.2.0", "react-spinners": "^0.9.0", "react-transition-group": "^4.4.1", @@ -64,7 +65,6 @@ "sass-loader": "8.0.2", "semver": "6.3.0", "style-loader": "0.23.1", - "svg-inline-loader": "^0.8.2", "swc-loader": "^0.1.12", "terser-webpack-plugin": "2.3.8", "ts-pnp": "1.1.6", @@ -95,58 +95,6 @@ "last 1 safari version" ] }, - "jest": { - "roots": [ - "/src" - ], - "collectCoverageFrom": [ - "src/**/*.{js,jsx,ts,tsx}", - "!src/**/*.d.ts" - ], - "setupFiles": [ - "react-app-polyfill/jsdom" - ], - "setupFilesAfterEnv": [ - "/src/setupTests.ts" - ], - "testMatch": [ - "/src/**/__tests__/**/*.{js,jsx,ts,tsx}", - "/src/**/*.{spec,test}.{js,jsx,ts,tsx}" - ], - "testEnvironment": "jest-environment-jsdom-fourteen", - "transform": { - "^.+\\.(js|jsx|ts|tsx)$": [ - "@swc/jest" - ], - "^.+\\.css$": "/config/jest/cssTransform.js", - "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "/config/jest/fileTransform.js" - }, - "transformIgnorePatterns": [ - "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$", - "^.+\\.module\\.(css|sass|scss)$" - ], - "modulePaths": [], - "moduleNameMapper": { - "^react-native$": "react-native-web", - "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy" - }, - "moduleFileExtensions": [ - "web.js", - "js", - "web.ts", - "ts", - "web.tsx", - "tsx", - "json", - "web.jsx", - "jsx", - "node" - ], - "watchPlugins": [ - "jest-watch-typeahead/filename", - "jest-watch-typeahead/testname" - ] - }, "devDependencies": { "webpack-cli": "^4.0.0" } diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index c3d46fc..a38e97b 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -1,9 +1,8 @@ /** @jsx jsx */ import { css, jsx } from "@emotion/core"; -import SVG from "react-inlinesvg"; -import header1 from "./header_1.svg"; -import header2 from "./header_2.svg"; +import Header1 from "./header_1.svg"; +import Header2 from "./header_2.svg"; interface HeaderBarProps { title?: string @@ -28,8 +27,8 @@ function HeaderBar({ title }: HeaderBarProps) { return
- - + +

{ + if(process.env.NODE_ENV === "development") + console.log(err) + }} > diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx index 82d1380..5062a95 100644 --- a/src/tests/components/FormListing.test.tsx +++ b/src/tests/components/FormListing.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; import FormListing from "../../components/FormListing"; import { BrowserRouter as Router } from 'react-router-dom'; diff --git a/src/tests/components/HeaderBar.test.tsx b/src/tests/components/HeaderBar.test.tsx index 2e1f868..6963859 100644 --- a/src/tests/components/HeaderBar.test.tsx +++ b/src/tests/components/HeaderBar.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect' import HeaderBar from "../../components/HeaderBar"; test('renders header bar with title', () => { diff --git a/src/tests/components/OAuth2Button.test.tsx b/src/tests/components/OAuth2Button.test.tsx index 53875dc..49c0f8a 100644 --- a/src/tests/components/OAuth2Button.test.tsx +++ b/src/tests/components/OAuth2Button.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; import OAuth2Button from "../../components/OAuth2Button"; test('renders oauth2 sign in button text', () => { diff --git a/src/tests/components/Tag.test.tsx b/src/tests/components/Tag.test.tsx index 67f2a85..26c8afb 100644 --- a/src/tests/components/Tag.test.tsx +++ b/src/tests/components/Tag.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; import Tag from "../../components/Tag"; test('renders tag with specified text', () => { diff --git a/webpack.config.js b/webpack.config.js index 1a98131..2809c73 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -60,7 +60,7 @@ module.exports = (env) => { }, { test: /\.svg$/, - loader: 'svg-inline-loader' + loader: '@svgr/webpack' } ] }, diff --git a/yarn.lock b/yarn.lock index bc3fb93..fd0bc14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5112,11 +5112,6 @@ execa@^4.0.0: signal-exit "^3.0.2" strip-final-newline "^2.0.0" -exenv@^1.2.2: - version "1.2.2" - resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" - integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= - exit@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -6908,6 +6903,11 @@ jest-docblock@^26.0.0: dependencies: detect-newline "^3.0.0" +jest-dom@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/jest-dom/-/jest-dom-4.0.0.tgz#94eba3cbc6576e7bd6821867c92d176de28920eb" + integrity sha512-gBxYZlZB1Jgvf2gP2pRfjjUWF8woGBHj/g5rAQgFPB/0K2atGuhVcPO+BItyjWeKg9zM+dokgcMOH01vrWVMFA== + jest-each@^26.5.2: version "26.5.2" resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.5.2.tgz#35e68d6906a7f826d3ca5803cfe91d17a5a34c31" @@ -7243,6 +7243,11 @@ jest-snapshot@^26.5.3: pretty-format "^26.5.2" semver "^7.3.2" +jest-svg-transformer@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/jest-svg-transformer/-/jest-svg-transformer-1.0.0.tgz#e38884ca4cd8b2295cdfa2a0b24667920c3a8a6d" + integrity sha1-44iEykzYsilc36KgskZnkgw6im0= + jest-util@^24.0.0, jest-util@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162" @@ -9743,19 +9748,6 @@ react-error-overlay@^6.0.7: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108" integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA== -react-from-dom@^0.4.2: - version "0.4.2" - resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.4.2.tgz#bef41428172ca570b492b5e12ae7b592587437e0" - integrity sha512-cVa4/w0xAyd/bbTu+xu2KKrGc+KDKvR8sSQKodd5pPrN03bN1V3JOLPW+PIzh698LzQ4aL1dfWXpsKx3ZkpT+A== - -react-inlinesvg@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-2.1.0.tgz#0603ab93fa904c2f764a3fe0d6efc0c1b7af99a4" - integrity sha512-4kuLrAmzW57INv5nXU/Jy3oET+fxRUOuSZYeB/co6uT4aVUVYxFO/R6vEhodNXyMIar9ldTtgcnRkVLfjNmt/A== - dependencies: - exenv "^1.2.2" - react-from-dom "^0.4.2" - react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -10626,11 +10618,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA== -simple-html-tokenizer@^0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe" - integrity sha1-BcLuxXn//+FFoDCsJs/qYbmA+r4= - sisteransi@^1.0.4: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" @@ -11155,15 +11142,6 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" -svg-inline-loader@^0.8.2: - version "0.8.2" - resolved "https://registry.yarnpkg.com/svg-inline-loader/-/svg-inline-loader-0.8.2.tgz#9872414f9e4141601e04eb80cda748c9a50dae71" - integrity sha512-kbrcEh5n5JkypaSC152eGfGcnT4lkR0eSfvefaUJkLqgGjRQJyKDvvEE/CCv5aTSdfXuc+N98w16iAojhShI3g== - dependencies: - loader-utils "^1.1.0" - object-assign "^4.0.1" - simple-html-tokenizer "^0.1.1" - svg-parser@^2.0.0: version "2.0.4" resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5" -- cgit v1.2.3 From d8d4a2b296ae62d4f309903d4533263222619874 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 14:05:10 +0100 Subject: Fix the SVG scaling with new SVG loader --- src/components/HeaderBar/header_1.svg | 2 +- src/components/HeaderBar/header_2.svg | 2 +- src/components/HeaderBar/index.tsx | 4 ---- 3 files changed, 2 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/components/HeaderBar/header_1.svg b/src/components/HeaderBar/header_1.svg index e7db64c..c9349e5 100644 --- a/src/components/HeaderBar/header_1.svg +++ b/src/components/HeaderBar/header_1.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/HeaderBar/header_2.svg b/src/components/HeaderBar/header_2.svg index e17b3e6..6e82067 100644 --- a/src/components/HeaderBar/header_2.svg +++ b/src/components/HeaderBar/header_2.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index a38e97b..8928a08 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -14,10 +14,6 @@ top: 0; position: absolute; width: 100%; transition: height 1s; - -@media (max-width: 770px) { - height: 140px; -} `; function HeaderBar({ title }: HeaderBarProps) { -- cgit v1.2.3