From 4def3e1a76bc888113228ffc4a083827040a5b69 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 13:34:55 +0100 Subject: Change build system away from create-react-app --- webpack.config.js | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 webpack.config.js (limited to 'webpack.config.js') diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..1a98131 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,87 @@ +const path = require("path") +const HtmlWebpackPlugin = require("html-webpack-plugin"); +const webpack = require("webpack") + +module.exports = (env) => { + return { + entry: "./src/index.tsx", + mode: env, + output: { + path: path.resolve(__dirname, "../build/js"), + filename: "[name].bundle.js", + publicPath: "/", + devtoolModuleFilenameTemplate: "file:///" + path.resolve(__dirname, "[resource-path]?[loaders]") + }, + resolve: { + extensions: ['.js', '.jsx', '.ts', '.tsx'] + }, + module: { + rules: [ + { + test: /\.m?js$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: "swc-loader", + options: { + jsc: { + parser: { + syntax: "ecmascript", + jsx: true, + dynamicImport: true + }, + transform: { + react: { + pragma: "React.createElement", + pragmaFrag: "React.Fragment", + throwIfNamespace: true, + development: false, + useBuiltins: false + } + } + } + } + } + }, + { + test: /\.tsx?$/, + exclude: /(node_modules|bower_components)/, + use: { + loader: "swc-loader", + options: { + jsc: { + parser: { + syntax: "typescript", + tsx: true, + dynamicImport: true + } + } + } + } + }, + { + test: /\.svg$/, + loader: 'svg-inline-loader' + } + ] + }, + devServer: { + contentBase: path.join(__dirname, 'public'), + compress: true, + port: 3000, + historyApiFallback: true, + }, + plugins: [ + new HtmlWebpackPlugin({ + inject: true, + template: 'public/index.html' + }), + new webpack.EnvironmentPlugin({ + NODE_ENV: "production", + REACT_APP_SHA: "development", + REACT_APP_SENTRY_DSN: "development", + REACT_APP_BRANCH: "development", + REACT_APP_OAUTH2_CLIENT_ID: "0" + }) + ] + } +} -- 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 'webpack.config.js') 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 00e00bfb9eeee2c404c385c1e844d3b1246c9407 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 14:11:47 +0100 Subject: Update build path --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webpack.config.js') diff --git a/webpack.config.js b/webpack.config.js index 2809c73..62bc4c5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,7 +7,7 @@ module.exports = (env) => { entry: "./src/index.tsx", mode: env, output: { - path: path.resolve(__dirname, "../build/js"), + path: path.resolve(__dirname, "build/js"), filename: "[name].bundle.js", publicPath: "/", devtoolModuleFilenameTemplate: "file:///" + path.resolve(__dirname, "[resource-path]?[loaders]") -- cgit v1.2.3 From c49d11a6e2d21fffb97606686d237f9c0250380f Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 14:19:16 +0100 Subject: Correct build path and add hash to generated filenames --- webpack.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'webpack.config.js') diff --git a/webpack.config.js b/webpack.config.js index 62bc4c5..0fe45da 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,8 +7,8 @@ module.exports = (env) => { entry: "./src/index.tsx", mode: env, output: { - path: path.resolve(__dirname, "build/js"), - filename: "[name].bundle.js", + path: path.resolve(__dirname, "build"), + filename: "[name].[contenthash].bundle.js", publicPath: "/", devtoolModuleFilenameTemplate: "file:///" + path.resolve(__dirname, "[resource-path]?[loaders]") }, -- cgit v1.2.3 From ce25e0c4fe092dd29e132c21b20498758d2398bc Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 14:19:44 +0100 Subject: Add webpack plugin for copying static files --- package.json | 1 + webpack.config.js | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) (limited to 'webpack.config.js') diff --git a/package.json b/package.json index e688ea5..98fc57d 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@typescript-eslint/parser": "^2.10.0", "camelcase": "^5.3.1", "case-sensitive-paths-webpack-plugin": "2.3.0", + "copy-webpack-plugin": "^6.2.1", "css-loader": "3.4.2", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", diff --git a/webpack.config.js b/webpack.config.js index 0fe45da..60a77ba 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,6 @@ const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin"); +const CopyPlugin = require('copy-webpack-plugin'); const webpack = require("webpack") module.exports = (env) => { @@ -71,9 +72,10 @@ module.exports = (env) => { historyApiFallback: true, }, plugins: [ - new HtmlWebpackPlugin({ - inject: true, - template: 'public/index.html' + new CopyPlugin({ + patterns: [ + { from: 'public', to: 'build' }, + ], }), new webpack.EnvironmentPlugin({ NODE_ENV: "production", @@ -81,6 +83,10 @@ module.exports = (env) => { REACT_APP_SENTRY_DSN: "development", REACT_APP_BRANCH: "development", REACT_APP_OAUTH2_CLIENT_ID: "0" + }), + new HtmlWebpackPlugin({ + inject: true, + template: 'public/index.html' }) ] } -- cgit v1.2.3 From d13057aafc5ff7b78d06b642579e6f82a6fec718 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 14:23:58 +0100 Subject: Update build preferences to put assets in correct place --- webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webpack.config.js') diff --git a/webpack.config.js b/webpack.config.js index 60a77ba..49bcd76 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -74,7 +74,7 @@ module.exports = (env) => { plugins: [ new CopyPlugin({ patterns: [ - { from: 'public', to: 'build' }, + { from: 'public', to: '.' }, ], }), new webpack.EnvironmentPlugin({ -- cgit v1.2.3