Update dependencies, fix GitHub Action workflows

.eslintrc.json

@@ -3,6 +3,7 @@
   "plugins": ["@typescript-eslint", "prettier", "sort-class-members"],
   "extends": [
     "airbnb-base",
+    "airbnb-typescript",
     "plugin:prettier/recommended",
     "plugin:compat/recommended",
     "plugin:@typescript-eslint/recommended"
@@ -61,7 +62,8 @@
       }
     ],
     "lines-between-class-members": "off",
-    "@typescript-eslint/no-namespace": "off"
+    "@typescript-eslint/no-namespace": "off",
+    "react/jsx-filename-extension": [0]
   },
   "overrides": [
     {
@@ -75,7 +77,16 @@
         "no-new": "off",
         "@typescript-eslint/no-empty-function": "off",
         "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-non-null-assertion": "off"
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-unused-expressions": "off",
+        "@typescript-eslint/naming-convention": [
+          "error",
+          {
+            "selector": "default",
+            "format": ["camelCase", "PascalCase", "UPPER_CASE"],
+            "leadingUnderscore": "allow"
+          }
+        ]
       }
     },
     {

.github/actions-scripts/puppeteer.js

@@ -11,8 +11,11 @@ const server = require('../../server');
 async function test() {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
+  const artifactsPath = 'screenshot';
+  const snapshotName = `puppeteer-${process.platform}.png`;
   let error;
   let pixelDifference;
+  let diff;
 
   if (!server.listening) await once(server, 'listening');
 
@@ -32,8 +35,6 @@ async function test() {
     await page.keyboard.press('ArrowDown');
     await page.keyboard.press('ArrowDown');
 
-    const snapshotName = `puppeteer-${process.platform}.png`;
-    const artifactsPath = 'screenshot';
     mkdirSync(artifactsPath, { recursive: true });
     const imageBuffer = await page.screenshot({
       path: path.join(artifactsPath, snapshotName),
@@ -46,7 +47,7 @@ async function test() {
       readFileSync(path.resolve(__dirname, `./__snapshots__/${snapshotName}`)),
     );
     const { width, height } = screenshot;
-    const diff = new PNG({ width, height });
+    diff = new PNG({ width, height });
     pixelDifference = pixelmatch(
       screenshot.data,
       snapshot.data,
@@ -57,11 +58,13 @@ async function test() {
         threshold: 0.6,
       },
     );
-    writeFileSync(path.join(artifactsPath, 'diff.png'), PNG.sync.write(diff));
   } catch (err) {
     console.error(err);
     error = err;
   } finally {
+    if (diff) {
+      writeFileSync(path.join(artifactsPath, 'diff-' + snapshotName), PNG.sync.write(diff));
+    }
     await Promise.all([
       browser.close(),
       new Promise(resolve => server.close(resolve)),

.github/workflows/browsers.yml

@@ -18,14 +18,12 @@ jobs:
       fail-fast: false
       matrix:
         os: [windows-latest, macos-latest]
-        browser: [ie, firefox, safari]
+        browser: [edge, firefox, safari, chrome]
         exclude:
-          # On Windows, run tests with only IE and Edge
           - os: windows-latest
             browser: safari
-          # On macOS, run tests with only on safari
           - os: macos-latest
-            browser: ie
+            browser: edge
           - os: macos-latest
             browser: chrome
           # Safari workaround is not working in Catalina
@@ -75,17 +73,17 @@ jobs:
         if: matrix.browser == 'safari'
 
       - run: |
-          brew cask install firefox
+          brew install --cask firefox
           brew install geckodriver
         if: matrix.browser == 'firefox' && matrix.os == 'macos-latest'
 
-      - run: echo "::add-path::$env:GeckoWebDriver"
+      - run: echo "$env:GeckoWebDriver" >> $GITHUB_PATH
         if: matrix.browser == 'firefox' && matrix.os == 'windows-latest'
 
-      - run: echo "::add-path::$env:IEWebDriver"
-        if: matrix.browser == 'ie' && matrix.os == 'windows-latest'
+      - run: echo "$env:EdgeWebDriver" >> $GITHUB_PATH
+        if: matrix.browser == 'edge' && matrix.os == 'windows-latest'
 
-      - run: echo "::add-path::$env:ChromeWebDriver"
+      - run: echo "$env:ChromeWebDriver" >> $GITHUB_PATH
         if: matrix.browser == 'chrome' && matrix.os == 'windows-latest'
 
       - run: npm i --no-optional --no-audit selenium-webdriver pixelmatch pngjs

.github/workflows/build-and-test.yml

@@ -14,7 +14,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
       - name: Build and run all tests
         run: |
           npm ci
@@ -32,15 +32,20 @@ jobs:
           BUNDLESIZE_GITHUB_TOKEN: ${{secrets.BUNDLESIZE_GITHUB_TOKEN}}
           FORCE_COLOR: 2
           HUSKY_SKIP_INSTALL: true
-      - name: Commit built files
-        run: |
-          git config --local user.email "[email protected]"
-          git config --local user.name "GitHub Action"
-          git commit -m "Update build files 🏗" -a || echo "No changes to commit" && exit 0
-      - name: Push changes
-        uses: ad-m/github-push-action@master
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
+      ## 
+      ## Disabling for now. There does not appear to be a secure way to do this
+      ## with protected branches. See discussion:
+      ## https://github.community/t/how-to-push-to-protected-branches-in-a-github-action/16101
+      ##
+      # - name: Commit built files
+      #   run: |
+      #     git config --local user.email "[email protected]"
+      #     git config --local user.name "GitHub Action"
+      #     git commit -m "Update build files 🏗" -a || echo "No changes to commit" && exit 0
+      # - name: Push changes
+      #   uses: ad-m/github-push-action@master
+      #   with:
+      #     github_token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload coverage to Codecov
         run: bash <(curl -s https://codecov.io/bash)

.github/workflows/bundlesize.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
 
       - name: Install dependencies and build
         run: |

.github/workflows/deployment.yml

@@ -13,7 +13,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
           registry-url: https://registry.npmjs.org/
       - run: npm ci
         env:
@@ -32,7 +32,7 @@ jobs:
           fetch-depth: 1
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
           registry-url: https://registry.npmjs.org/
       - name: Build
         run: |

.github/workflows/lint.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
 
       - name: Install dependencies
         run: npm install --no-optional --no-audit --ignore-scripts
@@ -32,7 +32,10 @@ jobs:
           echo $CHANGED_TS
           node node_modules/eslint/bin/eslint.js $CHANGED_TS
 
-      - name: Lint JS bundle
-        run: |
-          npm run js:build
-          npx eslint --no-ignore ./public/assets/scripts/*.js
+      ## Can't use same eslint config for TypeScript and JavaScript
+      ## TypeScript rules cause rule definition not found errors
+      ## Can be re-enabled if this is resolved: https://github.com/eslint/eslint/issues/14851
+      # - name: Lint JS bundle
+      #   run: |
+      #     npm run js:build
+      #     npx eslint --no-ignore ./public/assets/scripts/*.js

.github/workflows/unit-tests.yml

@@ -17,7 +17,7 @@ jobs:
 
       - uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
 
       - name: Install dependencies
         run: npm install --no-optional --no-audit --ignore-scripts