chore: improves tooling with vitest and pnpm (#94)

fix(cli): created accounts have a trailing parenthesis in their id
fix(web): avatar image can be missing in authenticated page header
feat(cli): displays command specific help message on error
chore: replaces jest with vitest
chore: replaces npm with pnpm

.eslintignore

@@ -2,6 +2,7 @@ apps/games/assets/
 apps/games/descriptors/
 coverage/
 dist/
+dist-atelier/
 node_modules/
 scans/
 !.storybook/

.eslintrc.js

@@ -7,6 +7,9 @@ module.exports = {
     jest: true
   },
   plugins: ['svelte3'],
+  globals: {
+    vi: true
+  },
   overrides: [
     {
       files: ['*.svelte'],

.github/workflows/CD.yml

@@ -15,23 +15,25 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x]
-
     steps:
       - name: Check code out
         uses: actions/checkout@v3
         with:
           lfs: true
 
-      - name: Set Node.js ${{ matrix.node-version }} up
+      - name: Intall Pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 7
+
+      - name: Set Node.js up
         uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci --ignore-scripts
+        run: pnpm install --ignore-scripts
 
       - name: Build artifacts
         run: ./hosting/build.sh

.github/workflows/CI.yml

@@ -19,14 +19,22 @@ jobs:
       - name: Check code out
         uses: actions/checkout@v3
 
+      - name: Intall Pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 7
+
       - name: Set Node.js up
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --ignore-scripts
+
+      - name: Run linter
+        run: pnpm lint
 
   cli_tests:
     name: CLI tests
@@ -38,17 +46,24 @@ jobs:
       - name: Check code out
         uses: actions/checkout@v2
 
+      - name: Intall Pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 7
+
       - name: Set Node.js up
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --ignore-scripts
 
       - name: Run CLI test
-        run: npm run test:cli
+        run: pnpm test:cli
+        env:
+          TZ: CET
 
       - name: Send coverage to Codacy
         if: always()
@@ -68,17 +83,24 @@ jobs:
       - name: Check code out
         uses: actions/checkout@v2
 
+      - name: Intall Pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 7
+
       - name: Set Node.js up
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --ignore-scripts
 
       - name: Run server test
-        run: npm run test:server
+        run: pnpm test:server
+        env:
+          TZ: CET
 
       - name: Send coverage to Codacy
         if: always()
@@ -98,20 +120,29 @@ jobs:
       - name: Check code out
         uses: actions/checkout@v2
 
+      - name: Intall Pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 7
+
       - name: Set Node.js up
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --ignore-scripts
 
       - name: Run UI unit tests
-        run: npm run test:web
+        run: pnpm test:web
         env:
-          WEB_GAME_ASSETS_URL: https://localhost:3000/games
-          WEB_GRAPHQL_URL: https://localhost:3000/graphql
+          TZ: CET
+          WEB_USE_GITHUB_PROVIDER: true
+          WEB_USE_GOOGLE_PROVIDER: true
+          WEB_GRAPHQL_URL: http://localhost:3001/graphql
+          WEB_GAME_ASSETS_URL: http://localhost:3001/games
+          WEB_AUTH_URL: http://localhost:3001/auth
 
       - name: Send coverage to Codacy
         if: always()
@@ -131,21 +162,27 @@ jobs:
       - name: Check code out
         uses: actions/checkout@v2
 
+      - name: Intall Pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 7
+
       - name: Set Node.js up
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install --ignore-scripts
 
       - name: Install Playwright
-        run: npx playwright install --with-deps chromium
+        run: pnpm dlx playwright install --with-deps chromium
 
       - name: Run UI integration tests
-        run: npm run test:integration
+        run: pnpm test:integration
         env:
+          TZ: CET
           WEB_GAME_ASSETS_URL: http://localhost:3001/games
           WEB_GRAPHQL_URL: http://localhost:3001/graphql
           WEB_AUTH_URL: http://localhost:3001/auth

.npmrc

@@ -0,0 +1 @@
+strict-peer-dependencies=false

.nvmrc

@@ -1 +1 @@
-16
+16.17.1

README.md

@@ -13,7 +13,7 @@ Meet your friends online to play your favorite games!
 
 ## How to use
 
-You need Node.js 16+ and NPM.
+You need git, Node.js 16 and PNPM.
 
 1. Checkout the code:
 
@@ -25,7 +25,8 @@ You need Node.js 16+ and NPM.
 1. Fetch dependencies:
 
    ```shell
-   npm i
+   fnm
+   pnpm i
    ```
 
 1. Then, run in dev or production mode.
@@ -51,7 +52,7 @@ You need Node.js 16+ and NPM.
 1. Start in watch mode (both server and client):
 
    ```shell
-   npm start
+   pnpm start
    ```
 
 1. Your favorite browser should open and display a warning about self-signed SSL certificate. Bypass it, and start developping.

TODO.md

@@ -2,28 +2,16 @@
 
 Roadmap
 
-- web: missing avatar displays "avatar for" instead of initials
 - lawyer council
 - web: terms & condition
 - web: cookie policy
 - server + web: first log-in with T&C
 
 ## Brittle tests
 
-- `InputManager › given an initialized manager() › handles multiple pointers taps`
-
-  > `expect(received).toHaveLength(expected)` line 1319 (1 long received)
-
-- `Dropdown component › given textual options › closes menu on click`
-
-  > `expect(received).toBeNull()` line 115 (menu does exist)
-
-- `Typeahead component › given object options › closes menu with keyboard and opens on focus`
-
-  > `expect(received).toBeNull()` line 126 (menu does exist)
-
 ## Refactor
 
+- use node 18 when msw/interceptor will [handle it](https://github.com/mswjs/interceptors/pull/283)
 - better testing setup? [vitest](https://github.com/sveltejs/kit/discussions/5285), or even [manual](https://github.com/sveltejs/kit/issues/19#issuecomment-1041134457)
 - ts-check all the things!
 - removes nginx to directly use the node server?
@@ -308,4 +296,4 @@ Nice sources for 3D textures:
 - [3DTextures](https://3dtextures.me/) (free)
 - [Architextures](https://architextures.org/textures) (copyrighted)
 
-Run playwright in debug mode, on a given file: `PWDEBUG=1 npm -w apps/web run test:integration:run -- home.spec`
+Run playwright in debug mode, on a given file: `PWDEBUG=1 pnpm --filter web test:integration:run -- home.spec`

apps/cli/package.json

@@ -8,8 +8,8 @@
   },
   "main": "./src/index.mjs",
   "scripts": {
-    "test": "NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" jest --coverage --colors",
-    "test:dev": "NODE_OPTIONS=\"--experimental-vm-modules --no-warnings\" jest --watch"
+    "test": "vitest run --coverage",
+    "test:dev": "vitest dev"
   },
   "dependencies": {
     "@urql/core": "^3.0.3",
@@ -27,8 +27,8 @@
     "undici": "^5.10.0"
   },
   "devDependencies": {
-    "jest": "^29.0.3",
-    "jest-watch-typeahead": "^2.2.0",
-    "strip-ansi": "^7.0.1"
+    "@faker-js/faker": "^7.5.0",
+    "strip-ansi": "^7.0.1",
+    "vitest": "^0.23.4"
   }
 }

apps/cli/src/commands/add-player.js

@@ -65,7 +65,7 @@ export async function addPlayer({ username, password }) {
   const { addPlayer: player } = await getGraphQLClient().mutation(
     addPlayerMutation,
     {
-      id: `${kebabCase(username)}-${Math.floor(Math.random() * 10000)})`,
+      id: `${kebabCase(username)}-${Math.floor(Math.random() * 10000)}`,
       username,
       password
     },
@@ -89,3 +89,4 @@ function help() {
     --help/-h                 Display help for this command
 `
 }
+addPlayerCommand.help = help

apps/cli/src/commands/catalog.js

@@ -116,3 +116,4 @@ function help() {
     --help/-h                 Display help for this command
 `
 }
+catalogCommand.help = help

apps/cli/src/commands/grant.js

@@ -87,3 +87,4 @@ function help() {
     --help/-h                 Display help for this command
 `
 }
+grantCommand.htelp = help

apps/cli/src/commands/revoke.js

@@ -3,6 +3,7 @@ import { gql } from '@urql/core'
 import chalkTemplate from 'chalk-template'
 import {
   attachFormater,
+  cliName,
   commonArgSpec,
   findUser,
   getGraphQLClient,
@@ -20,21 +21,22 @@ const revokeAccessMutation = gql`
 /**
  * Triggers the revoke command.
  * @param {string[]} argv - array of parsed arguments (without executable and current file).
- * @returns {Promise<Boolean>} whether the operation succeeded.
+ * @returns {Promise<Boolean|string>} whether the operation succeeded.
  */
 export default async function revokeCommand(argv) {
-  const {
-    username,
-    command: [gameName]
-  } = parseArgv(argv, {
+  const args = parseArgv(argv, {
     ...commonArgSpec,
     '--username': RequiredString,
     '-u': '--username'
   })
+  const gameName = args.command?.[0]
   if (!gameName) {
     throw new Error('no game-name provided')
   }
-  return revoke({ username, gameName })
+  if (args.help) {
+    return help()
+  }
+  return revoke({ username: args.username, gameName })
 }
 
 /**
@@ -71,3 +73,17 @@ function formatRevokation({ revokeAccess }) {
     ? chalkTemplate`🚷 access {green revoked}\n`
     : chalkTemplate`🔶 {yellow no changes}\n`
 }
+
+function help() {
+  return chalkTemplate`
+  {bold ${cliName}} [options] revoke [game-name]
+  Revokes access to a copyrighted game
+  {dim Commands:}
+    [game-name]               Name of the revoked game
+  {dim Options:}
+    --username/-u             Username for which catalog is fetched
+    --production/-p           Loads configuration from .env.prod
+    --help/-h                 Display help for this command
+`
+}
+revokeCommand.help = help