Merge pull request #92 from shanedg/dev

dev: client improvements, new features, and fixes

.github/workflows/branch.yml

@@ -28,6 +28,12 @@ jobs:
     - build
     uses: ./.github/workflows/unit-test.yml
 
+  type-check:
+    needs:
+    - install
+    - build
+    uses: ./.github/workflows/type-check.yml
+
   e2e-test:
     needs:
     - install

.github/workflows/type-check.yml

@@ -0,0 +1,36 @@
+name: Type Check
+
+on:
+  workflow_call:
+
+jobs:
+  type-check:
+    runs-on: ubuntu-22.04
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Restore Build Cache
+      id: restore-build-cache
+      uses: actions/cache/restore@v4
+      with:
+        path: |
+          ~/.cache/Cypress
+          common/temp
+          */.rush/temp
+          */node_modules
+          */dist
+        key: ${{ runner.os }}-build-${{ hashFiles('common/config/rush/repo-state.json') }}
+        fail-on-cache-miss: true
+
+    - name: Configure Discord Secrets
+      run: (cd discord && ./client_config_ci.sh)
+      env:
+        # Any values will do, discord application does not run during this job
+        DISCORD_CLIENT_ID: fake_discord_client_id
+        DISCORD_CLIENT_SECRET: fake_discord_client_secret
+        DISCORD_GUILD_ID: fake_guild_id
+        DISCORD_SESSION_SECRET: fake_discord_session_secret
+        DISCORD_REDIRECT_URI: fake_discord_redirect_uri
+
+    - name: Type Check
+      run: node common/scripts/install-run-rush.js type-check

CONTRIBUTING.md

@@ -4,7 +4,10 @@ Notes specifically for repository maintainers
 
 ## TODOs
 
+* upload cypress screenshots, videos, and/or
+rush *.log artifacts to github build artifacts for debugging
 * auth fails when switching discord accounts at login
+* auth fails on first couple renders, refresh resolves
 * upgrade to eslint v9
 * docs: updating/upgrading node
 * lint js/md on precommit?
@@ -50,7 +53,7 @@ git commit -m 'build(deps): rush update --full'
 
 ### 2. Minor Updates
 
-Use a custom rush command (see [command-line.json]) that calls
+Use a custom rush command[^1] (see [command-line.json]) that calls
 [npm-check-updates] to bump all packages to the latest minor version.
 
 ```sh
@@ -62,7 +65,7 @@ git commit -m 'build(deps): rush update-minor'
 
 ### 3. Major Upgrades
 
-Use a custom rush command (see [command-line.json]) that calls
+Use a custom rush command[^1] (see [command-line.json]) that calls
 [npm-check-updates] to bump all packages to the latest major version.
 
 ```sh
@@ -79,6 +82,8 @@ corresponds with the expected major version of Node and this repository
 will continue to use Node 18 until Node 20 becomes the active Long Term
 Support (LTS) version
 * `eslint` is excluded because some plugins are not compatible with v9
+* `@testing-library/react` is excluded because of peer dependency conflcts
+* `eslint-plugin-ava` is excluded because it expects `eslint` >= 9
 
 ## Updating pnpm
 
@@ -109,6 +114,11 @@ git add rush.json common/scripts
 git commit -m 'build(deps): update rush from x to y'
 ```
 
+---
+
+[^1]: `update-minor` and `update-major` depend on [jq](https://stedolan.github.io/jq/)
+(with Homebrew: `brew install jq`)
+
 [--reject]: https://www.npmjs.com/package/npm-check-updates#reject
 [@trshcmpctr/scaffold]: ./scaffold
 [command-line.json]: ./common/config/rush/command-line.json

client/.eslintrc.cjs

@@ -87,6 +87,21 @@ module.exports = {
       extends: ['@trshcmpctr/eslint-config-jest'],
     },
 
+    // Typescript Tests
+    {
+      files: [
+        '*.test.ts',
+        '*.test.tsx',
+      ],
+      rules: {
+        // Add support for understanding when it's ok to pass an
+        // unbound method to jest expect calls:
+        // https://github.com/jest-community/eslint-plugin-jest/blob/c5819965e3e8c8dd8c938d2921b1e9629981bdb7/docs/rules/unbound-method.md
+        '@typescript-eslint/unbound-method': 'off',
+        'jest/unbound-method': 'error',
+      },
+    },
+
     // React tests using @testing-library/react.
     {
       files: [

client/.gitignore

@@ -1 +1,2 @@
+cypress/screenshots
 dist

client/README.md

@@ -47,7 +47,7 @@ npm run lint
 Run `Jest` tests.
 
 ```bash
-npm run test:jest
+npm run test
 ```
 
 ## Type Check

client/__snapshots__/webpack.config.test.js.snap

@@ -110,7 +110,7 @@ exports[`webpackConfig development mode matches snapshot 1`] = `
         "chunksSortMode": "auto",
         "compile": true,
         "excludeChunks": [],
-        "favicon": false,
+        "favicon": "<PROJECT_ROOT>/src/favicon.ico",
         "filename": "index.html",
         "hash": false,
         "inject": "head",
@@ -126,6 +126,7 @@ exports[`webpackConfig development mode matches snapshot 1`] = `
         "xhtml": false,
       },
       "userOptions": {
+        "favicon": "<PROJECT_ROOT>/src/favicon.ico",
         "template": "<PROJECT_ROOT>/src/index.html",
         "title": "trshcmpctr",
       },
@@ -253,7 +254,7 @@ exports[`webpackConfig production mode matches snapshot 1`] = `
         "chunksSortMode": "auto",
         "compile": true,
         "excludeChunks": [],
-        "favicon": false,
+        "favicon": "<PROJECT_ROOT>/src/favicon.ico",
         "filename": "index.html",
         "hash": false,
         "inject": "head",
@@ -269,6 +270,7 @@ exports[`webpackConfig production mode matches snapshot 1`] = `
         "xhtml": false,
       },
       "userOptions": {
+        "favicon": "<PROJECT_ROOT>/src/favicon.ico",
         "template": "<PROJECT_ROOT>/src/index.html",
         "title": "trshcmpctr",
       },

client/config/rush-project.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush-project.schema.json",
+  "operationSettings": [
+    {
+      "operationName": "build",
+      "outputFolderNames": ["dist"]
+    }
+  ]
+}

client/cypress/e2e/spec.cy.ts

@@ -1,7 +1,35 @@
-describe('client', () => {
-  it('renders', () => {
+describe('app', () => {
+  it('visits home', () => {
     cy.visit('/');
-    cy.get('#root > h1')
-      .should('have.text', 'trshcmpctr');
+
+    cy.get('#root h1').should('have.text', 'trshcmpctr');
+    cy.get('#root p').should('have.text',
+      'welcome to the trash compactor, <mocked_user_name>');
+  });
+
+  it('navigates to new', () => {
+    cy.visit('/');
+    cy.get('a[href="/new"]').click();
+
+    cy.get('h2').should('have.text', 'new');
+    cy.get('form').within(() => {
+      cy.get('select').should('have.text', '1.20.1');
+    });
+  });
+
+  it('navigates to worlds', () => {
+    cy.visit('/');
+    cy.get('a[href="/worlds"]').click();
+
+    cy.get('h2').should('have.text', 'worlds');
+    cy.get('thead > tr > td:first-child').should('have.text', 'name');
+  });
+
+  it('navigates to a world', () => {
+    cy.visit('/');
+    cy.get('a[href="/worlds"]').click();
+    cy.get('a[href="/worlds/1"]').click();
+
+    cy.get('h3').should('have.text', '1');
   });
 });

client/package.json

@@ -10,16 +10,19 @@
   "scripts": {
     "build": "webpack",
     "build:production": "webpack --env production",
+    "build:watch-webpack": "nodemon --exec 'webpack serve' --watch 'webpack.config.js'",
     "clean": "rm -rf dist",
     "cy:open": "cypress open --config-file=cypress/cypress.config.ts --e2e --browser=chrome",
     "cy:run": "cypress run --config-file=cypress/cypress.config.ts",
-    "lint": "eslint --report-unused-disable-directives --ext .js,.jsx,.ts,.tsx,.cjs --max-warnings=0 .",
+    "lint": "eslint --report-unused-disable-directives --ext .js,.jsx,.ts,.tsx,.cjs --max-warnings=0 --cache .",
     "lint:md": "markdownlint-cli2 --config node_modules/@trshcmpctr/markdownlint-config/.markdownlint-cli2.jsonc",
     "serve": "webpack serve",
     "start": "npm run serve -- --open",
-    "test": "npm run test:jest && npm run type-check",
+    "start:production": "npm run serve -- --open --env production",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=@trshcmpctr/jest-stdout-reporter --silent",
+    "test:debug": "NODE_OPTIONS=\"--experimental-vm-modules --inspect\" jest --runInBand --no-cache",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch",
     "test:cypress": "start-server-and-test serve http://localhost:8080 cy:run",
-    "test:jest": "NODE_OPTIONS=--experimental-vm-modules jest --no-cache --reporters=@trshcmpctr/jest-stdout-reporter --silent",
     "type-check": "tsc",
     "watch": "webpack --watch"
   },
@@ -54,35 +57,35 @@
     "@trshcmpctr/markdownlint-config": "workspace:*",
     "@types/jest": "~29.5.2",
     "@types/node": "~18.19.31",
-    "@types/react-dom": "~18.2.6",
-    "@types/react-router-dom": "~5.3.3",
-    "@types/react": "~18.2.14",
+    "@types/react-dom": "~18.3.0",
+    "@types/react": "~18.3.3",
     "@types/testing-library__jest-dom": "~5.14.5",
-    "@typescript-eslint/eslint-plugin": "~7.7.1",
-    "@typescript-eslint/parser": "~7.7.1",
+    "@typescript-eslint/eslint-plugin": "~7.12.0",
+    "@typescript-eslint/parser": "~7.12.0",
     "babel-jest": "~29.7.0",
     "babel-loader": "~9.1.0",
     "babel-plugin-syntax-dynamic-import": "~6.18.0",
     "css-loader": "~7.1.1",
-    "cypress": "13.8.0",
+    "cypress": "13.11.0",
     "discord-api-types": "~0.37.46",
     "eslint-import-resolver-typescript": "~3.6.1",
-    "eslint-plugin-cypress": "~3.0.0",
+    "eslint-plugin-cypress": "~3.3.0",
     "eslint-plugin-eslint-comments": "~3.2.0",
     "eslint-plugin-import": "~2.29.1",
-    "eslint-plugin-jest": "~28.2.0",
+    "eslint-plugin-jest": "~28.5.0",
     "eslint-plugin-jsx-a11y": "~6.8.0",
     "eslint-plugin-node": "~11.1.0",
     "eslint-plugin-react-hooks": "~4.6.0",
     "eslint-plugin-react": "~7.34.1",
     "eslint-plugin-testing-library": "~6.2.2",
-    "eslint-webpack-plugin": "~4.1.0",
+    "eslint-webpack-plugin": "~4.2.0",
     "eslint": "~8.57.0",
     "html-webpack-plugin": "~5.6.0",
     "jest-environment-jsdom": "~29.7.0",
     "jest-serializer-path": "~0.1.15",
     "jest": "~29.7.0",
     "markdownlint-cli2": "~0.13.0",
+    "nodemon": "~3.1.0",
     "start-server-and-test": "~2.0.0",
     "style-loader": "~4.0.0",
     "terser-webpack-plugin": "~5.3.1",
@@ -93,10 +96,10 @@
     "webpack": "~5.91.0"
   },
   "dependencies": {
-    "axios": "~1.6.8",
+    "axios": "~1.7.2",
     "core-js": "~3.37.0",
-    "react-dom": "~18.2.0",
-    "react-router-dom": "~6.22.3",
-    "react": "~18.2.0"
+    "react-dom": "~18.3.1",
+    "react-router-dom": "~6.23.1",
+    "react": "~18.3.1"
   }
 }

client/src/App/App.css

@@ -1,3 +1,16 @@
+a {
+  color: aqua;
+}
+
+a:visited {
+  color: blueviolet;
+}
+
 .navigation-list {
   list-style-type: none;
+  display: inline-flex;
+}
+
+.navigation-list li {
+  padding-right: 6px;
 }

client/src/App/App.test.tsx

@@ -1,14 +1,17 @@
 import {
   render,
   screen,
+  waitFor,
 } from '@testing-library/react';
 import React from 'react';
 
-import App from './App';
+import { App } from './App';
 
 describe('App', () => {
-  it('renders a heading', () => {
+  it('renders a heading', async () => {
     render(<App />);
-    expect(screen.getByRole('heading')).toHaveTextContent('trshcmpctr');
+    await waitFor(
+      () => expect(screen.getByRole('heading')).toHaveTextContent('trshcmpctr')
+    );
   });
 });