@anzusystems/common-admin 2.0.0-rc.1 → 2.0.0-rc.11

package/package.json

@@ -3,6 +3,7 @@
   "packageManager": "yarn@4.18.1",
   "files": [
     "dist",
+    "src/e2e/**",
     "src/eslint/**",
     "src/vite/**"
   ],
@@ -20,6 +21,10 @@
       "types": "./dist/common-admin.css.d.ts",
       "default": "./dist/common-admin.css"
     },
+    "./e2e": {
+      "types": "./src/e2e/index.d.mts",
+      "default": "./src/e2e/index.mjs"
+    },
     "./eslint": {
       "types": "./src/eslint/plugin.d.mts",
       "default": "./src/eslint/plugin.mjs"
@@ -35,7 +40,7 @@
     },
     "./package.json": "./package.json"
   },
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.11",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -53,7 +58,7 @@
     "lib:build": "run-s --print-name lint:tsc build",
     "ci": "run-p --aggregate-output --continue-on-error --print-label --silent lint:tsc format:check lint:oxlint lint:eslint lint:stylelint",
     "lint": "[ \"$*\" = \"--fix\" ] && yarn lint:fix || yarn ci",
-    "lint:fix": "run-s --print-name lint:tsc lint:oxlint:fix lint:eslint:fix lint:stylelint:fix format",
+    "lint:fix": "run-s --continue-on-error --print-name lint:tsc lint:oxlint:fix lint:eslint:fix lint:stylelint:fix format",
     "lint:tsc": "NODE_OPTIONS=--max-old-space-size=4096 vue-tsc --build",
     "lint:tsc:test": "NODE_OPTIONS=--max-old-space-size=4096 vue-tsc --build tsconfig.test.json",
     "lint:eslint": "eslint",
@@ -69,29 +74,30 @@
     "test:eslint": "vitest run --config vitest.config.node.mts",
     "test:run": "run-s --print-name test:browser test:eslint",
     "test:ui": "vitest --ui",
+    "deps:upgrade": "yarn upgrade-interactive && yarn dedupe",
     "release:start": "npx -y --allow-git=all github:anzusystems/release-tools#main start",
     "release:publish": "npx -y --allow-git=all github:anzusystems/release-tools#main publish",
     "release:cleanup": "npx -y --allow-git=all github:anzusystems/release-tools#main cleanup"
   },
   "devDependencies": {
-    "@anzusystems/common-admin": "2.0.0-rc.1",
-    "@intlify/unplugin-vue-i18n": "^11.2.7",
+    "@anzusystems/common-admin": "2.0.0-rc.11",
+    "@intlify/unplugin-vue-i18n": "^11.2.8",
     "@mdi/font": "^7.4.47",
-    "@sentry/vite-plugin": "11.8.0",
-    "@sentry/vue": "^11.8.0",
+    "@sentry/vite-plugin": "11.11.0",
+    "@sentry/vue": "^11.11.0",
     "@tsconfig/node22": "^22.0.6",
     "@types/node": "^24.19.2",
     "@types/rusha": "^0.8.3",
     "@types/sortablejs": "^1.15.9",
-    "@typescript-eslint/parser": "^8.72.0",
+    "@typescript-eslint/parser": "^8.72.1",
     "@vitejs/plugin-vue": "^6.0.10",
-    "@vitest/browser": "^5.0.5",
-    "@vitest/browser-playwright": "^5.0.5",
-    "@vitest/ui": "^5.0.5",
-    "@vue/compiler-dom": "3.5.44",
+    "@vitest/browser": "^5.1.0",
+    "@vitest/browser-playwright": "^5.1.0",
+    "@vitest/ui": "^5.1.0",
+    "@vue/compiler-dom": "3.5.45",
     "@vue/devtools-api": "^8.2.1",
     "@vue/eslint-config-typescript": "^14.9.0",
-    "@vue/language-server": "3.3.13",
+    "@vue/language-server": "3.3.14",
     "@vue/test-utils": "^2.5.1",
     "@vue/tsconfig": "0.9.1",
     "@vuelidate/core": "^2.0.3",
@@ -99,23 +105,23 @@
     "@vueuse/core": "15.0.0",
     "@vueuse/integrations": "15.0.0",
     "@vueuse/shared": "15.0.0",
-    "axios": "1.20.0",
-    "cropperjs2": "npm:cropperjs@2.2.0",
+    "axios": "1.21.0",
+    "cropperjs": "2.3.1",
     "dayjs": "1.11.23",
-    "eslint": "^10.13.0",
-    "eslint-plugin-oxlint": "1.89.0",
+    "eslint": "^10.14.0",
+    "eslint-plugin-oxlint": "1.92.0",
     "eslint-plugin-pinia": "^0.4.2",
-    "eslint-plugin-vue": "10.11.1",
+    "eslint-plugin-vue": "10.12.0",
     "eslint-plugin-vuetify": "^2.7.3",
-    "npm-run-all2": "^9.0.3",
-    "oxfmt": "^0.74.0",
-    "oxlint": "1.89.0",
+    "npm-run-all2": "^9.0.4",
+    "oxfmt": "^0.77.0",
+    "oxlint": "1.92.0",
     "pinia": "4.1.0",
-    "playwright": "^1.64.1",
-    "postcss": "^8.5.31",
+    "playwright": "^1.65.0",
+    "postcss": "^8.5.32",
     "postcss-html": "^2.0.0",
     "rusha": "^0.8.14",
-    "sass": "1.105.2",
+    "sass": "1.108.0",
     "socket.io-client": "4.8.4",
     "sortablejs": "^1.15.7",
     "stylelint": "17.16.0",
@@ -124,46 +130,47 @@
     "stylelint-config-recommended-vue": "^2.0.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "typescript": "~6.0.3",
-    "unplugin": "3.4.0",
+    "unplugin": "3.7.0",
     "unplugin-dts": "^1.1.2",
     "uuid": "^14.0.3",
-    "vite": "8.3.4",
+    "vite": "8.3.6",
     "vite-plugin-vuetify": "^2.1.3",
-    "vitest": "^5.0.5",
-    "vue": "3.5.44",
-    "vue-eslint-parser": "^10.4.1",
-    "vue-i18n": "11.4.16",
+    "vitest": "^5.1.0",
+    "vue": "3.5.45",
+    "vue-eslint-parser": "^10.4.2",
+    "vue-i18n": "11.4.18",
     "vue-router": "5.4.0",
-    "vue-tsc": "3.3.13",
-    "vuetify": "4.3.0"
+    "vue-tsc": "3.3.14",
+    "vuetify": "4.3.2"
   },
   "peerDependencies": {
     "@mdi/font": "^7.4.47",
-    "@sentry/vite-plugin": "^11.8.0",
-    "@sentry/vue": "^11.8.0",
+    "@sentry/vite-plugin": "^11.11.0",
+    "@sentry/vue": "^11.11.0",
     "@vue/eslint-config-typescript": "^14.9.0",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^15.0.0",
     "@vueuse/integrations": "^15.0.0",
     "@vueuse/shared": "^15.0.0",
-    "axios": "^1.20.0",
+    "axios": "^1.21.0",
     "dayjs": "^1.11.23",
-    "eslint": "^10.13.0",
-    "eslint-plugin-oxlint": "^1.89.0",
+    "eslint": "^10.14.0",
+    "eslint-plugin-oxlint": "^1.92.0",
     "eslint-plugin-pinia": "^0.4.2",
-    "eslint-plugin-vue": "^10.11.1",
+    "eslint-plugin-vue": "^10.12.0",
     "eslint-plugin-vuetify": "^2.7.3",
-    "oxlint": "^1.89.0",
+    "oxlint": "^1.92.0",
     "pinia": "^4.1.0",
+    "playwright": "^1.65.0",
     "socket.io-client": "^4.8.4",
     "sortablejs": "^1.15.7",
-    "vite": "^8.3.4",
-    "vitest": "^5.0.5",
-    "vue": "^3.5.44",
-    "vue-i18n": "^11.4.16",
+    "vite": "^8.3.6",
+    "vitest": "^5.1.0",
+    "vue": "^3.5.45",
+    "vue-i18n": "^11.4.18",
     "vue-router": "^5.4.0",
-    "vuetify": "^4.3.0"
+    "vuetify": "^4.3.2"
   },
   "peerDependenciesMeta": {
     "@sentry/vite-plugin": {
@@ -193,6 +200,9 @@
     "oxlint": {
       "optional": true
     },
+    "playwright": {
+      "optional": true
+    },
     "socket.io-client": {
       "optional": true
     },

package/src/e2e/conventions.d.mts

@@ -0,0 +1,4 @@
+export declare const CARD_LOADER_SELECTOR: string
+export declare const NOT_FOUND_SELECTOR: string
+export declare const ROW_SELECTOR: string
+export declare const NO_DATA_SELECTOR: string

package/src/e2e/conventions.mjs

@@ -0,0 +1,15 @@
+// What the route walk knows of common-admin's views. Apart from the walk, which is node code, so that a browser
+// test can hold them against the components (src/test/routeWalkConventions.test.ts).
+
+/** `ACard`'s loader, shown while the card loads. */
+export const CARD_LOADER_SELECTOR = '.a-card-loader'
+
+/** The back button of `ANotFoundView`. */
+export const NOT_FOUND_SELECTOR = '[data-cy="not-found-back"]'
+
+/** The rows of a listing: Vuetify's data table, without its "no data" and loading rows. */
+export const ROW_SELECTOR =
+  'main .v-data-table tbody tr:not(.v-data-table-rows-no-data):not(.v-data-table-rows-loading)'
+
+/** The row a listing without records shows. */
+export const NO_DATA_SELECTOR = 'main .v-data-table-rows-no-data'

package/src/e2e/env.d.mts

@@ -0,0 +1,46 @@
+/** The environments an admin's e2e suite runs against. */
+export type E2eEnv = 'local' | 'devel' | 'staging'
+
+export interface LoadE2eEnvOptions {
+  /** The e2e project's folder, holding `.env.<env>` (usually `__dirname` of `playwright.config.ts`). */
+  dir: string
+  /** The env when `E2E_ENV` is not set, e.g. `bin/test` without `-e`. */
+  defaultEnv: E2eEnv
+  /**
+   * A file read first, under `.env.<env>`, which overrides it, e.g. `.env.dist` when it holds the local stack's
+   * values. Without it, `.env.<env>` is the only file, and variables already set in the shell win.
+   */
+  base?: string
+}
+
+export type LoadE2eEnv = (options: LoadE2eEnvOptions) => E2eEnv
+export type E2eEnvOf = () => E2eEnv
+export type E2eEnvLabel = () => string
+export type IsLocalStack = () => boolean
+
+export declare const E2E_ENVS: readonly E2eEnv[]
+
+/**
+ * Sets `E2E_ENV` (to `defaultEnv` when unset) and loads `<dir>/.env.<env>` into `process.env`. Throws on an env
+ * other than `local`, `devel` and `staging`, and when the file of `devel` or `staging` is missing; for `local` a
+ * missing file is only a warning. Returns the env.
+ */
+export declare const loadE2eEnv: LoadE2eEnv
+
+/** The env `loadE2eEnv` set. Throws when it has not run. */
+export declare const e2eEnv: E2eEnvOf
+
+/** The env as the suites' titles show it: `LOCAL`, `DEV` or `STG`. */
+export declare const e2eEnvLabel: E2eEnvLabel
+
+/** Whether the suite runs against the local Docker stack. */
+export declare const isLocalStack: IsLocalStack
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      /** Set by `loadE2eEnv` in `playwright.config.ts`, so a comparison with another name fails the type check. */
+      E2E_ENV: E2eEnv
+    }
+  }
+}

package/src/e2e/env.mjs

@@ -0,0 +1,78 @@
+// @ts-check
+import fs from 'node:fs'
+import path from 'node:path'
+import { parseEnv } from 'node:util'
+
+/**
+ * Which environment an admin's e2e suite runs against: one variable, `E2E_ENV`, with the same three names in
+ * every admin. `bin/test -e <env>` sets it; left unset, the admin's `playwright.config.ts` picks its default.
+ * The env file is read with Node's own parser (`util.parseEnv`), so the package needs no dotenv.
+ *
+ * @typedef {import('./env.mjs').E2eEnv} E2eEnv
+ */
+
+/** @type {readonly E2eEnv[]} */
+export const E2E_ENVS = Object.freeze(['local', 'devel', 'staging'])
+
+/** @type {Readonly<Record<E2eEnv, string>>} */
+const LABELS = Object.freeze({ local: 'LOCAL', devel: 'DEV', staging: 'STG' })
+
+/**
+ * @param {unknown} value
+ * @returns {value is E2eEnv}
+ */
+const isE2eEnv = (value) => typeof value === 'string' && /** @type {readonly string[]} */ (E2E_ENVS).includes(value)
+
+/** @param {unknown} value @param {string} source */
+const invalid = (value, source) => new Error(`${source} must be one of ${E2E_ENVS.join(', ')}; got "${String(value)}".`)
+
+/**
+ * Sets what the file holds in `process.env`. Without `override`, a variable already set (by the shell or an
+ * earlier file) is kept, as dotenv does.
+ *
+ * @param {string} file
+ * @param {boolean} override
+ */
+const applyEnvFile = (file, override) => {
+  const values = parseEnv(fs.readFileSync(file, 'utf8'))
+  for (const [key, value] of Object.entries(values)) {
+    if (override || process.env[key] === undefined) process.env[key] = value
+  }
+}
+
+/** @type {import('./env.mjs').LoadE2eEnv} */
+export function loadE2eEnv({ dir, defaultEnv, base }) {
+  if (!isE2eEnv(defaultEnv)) throw invalid(defaultEnv, 'The default env')
+  const env = process.env.E2E_ENV || defaultEnv
+  if (!isE2eEnv(env)) throw invalid(env, 'E2E_ENV')
+
+  const envFile = path.resolve(dir, `.env.${env}`)
+  const exists = fs.existsSync(envFile)
+  // A deployed environment run with the wrong (or no) credentials and URLs would report another environment's
+  // results under its name. The local stack runs with the defaults of `.env.dist` or the app's own.
+  if (!exists && env !== 'local') {
+    throw new Error(`Environment file not found: ${envFile}. Copy .env.dist to .env.${env} and fill it in.`)
+  }
+  process.env.E2E_ENV = env
+  if (base) applyEnvFile(path.resolve(dir, base), false)
+  if (exists) applyEnvFile(envFile, Boolean(base))
+  else if (!base) console.warn(`Environment file not found: ${envFile}. Copy .env.dist to .env.${env} and fill it in.`)
+  return env
+}
+
+/** @type {import('./env.mjs').E2eEnvOf} */
+export function e2eEnv() {
+  const env = process.env.E2E_ENV
+  if (!isE2eEnv(env)) {
+    throw env
+      ? invalid(env, 'E2E_ENV')
+      : new Error('E2E_ENV is not set: playwright.config.ts loads it (loadE2eEnv) before any test file.')
+  }
+  return env
+}
+
+/** @type {import('./env.mjs').E2eEnvLabel} */
+export const e2eEnvLabel = () => LABELS[e2eEnv()]
+
+/** @type {import('./env.mjs').IsLocalStack} */
+export const isLocalStack = () => e2eEnv() === 'local'

package/src/e2e/index.d.mts

@@ -0,0 +1,11 @@
+export type { E2eEnv, LoadE2eEnvOptions } from './env.mjs'
+export { E2E_ENVS, e2eEnv, e2eEnvLabel, isLocalStack, loadE2eEnv } from './env.mjs'
+export type {
+  RouteWalkIgnore,
+  RouteWalkOptions,
+  RouteWalkPlaywright,
+  RouteWalkProblem,
+  RouteWalkTimings,
+} from './types.mjs'
+export { DEFAULT_TIMINGS, defineRouteWalk, defineRouteWalkBoot, readDeclaredRoutes } from './routeWalk.mjs'
+export { defineRouteWalkConfig } from './routeWalkConfig.mjs'

package/src/e2e/index.mjs

@@ -0,0 +1,3 @@
+export { E2E_ENVS, e2eEnv, e2eEnvLabel, isLocalStack, loadE2eEnv } from './env.mjs'
+export { DEFAULT_TIMINGS, defineRouteWalk, defineRouteWalkBoot, readDeclaredRoutes } from './routeWalk.mjs'
+export { defineRouteWalkConfig } from './routeWalkConfig.mjs'

package/src/e2e/routeWalk.d.mts

@@ -0,0 +1,44 @@
+import type {
+  DefineRouteWalk,
+  FirstRecordOf,
+  ReadDeclaredRoutes,
+  RouteWalkTimings,
+  VisitRoute,
+  WatchPage,
+} from './types.mjs'
+
+export type * from './types.mjs'
+
+export declare const DEFAULT_TIMINGS: Readonly<RouteWalkTimings>
+
+/** The declared paths, constraints unescaped. The catch-all is left out. */
+export declare const readDeclaredRoutes: ReadDeclaredRoutes
+
+/**
+ * Registers the boot check the walk depends on (a Playwright project dependency): the app logs in, starts and
+ * shows a page of its own. Without it, an app that never boots would hold every route for the full app timeout.
+ * It also empties the record cache of an earlier run.
+ */
+export declare const defineRouteWalkBoot: DefineRouteWalk
+
+/** Registers the walk: a guard that the declaration was read, then one test per route. */
+export declare const defineRouteWalk: DefineRouteWalk
+
+// What the walk is made of, for its tests.
+
+/** Watches a page for what it does wrong, for the whole session of a worker. */
+export declare const watchPage: WatchPage
+
+/**
+ * Opens the target on a fresh document, waits until it has loaded, and collects what it did wrong: problems the
+ * watcher saw, landing elsewhere than the target (or than `redirect` allows), the 404 view, an empty page and
+ * unresolved components. Throws when the app does not render or a card loader never finishes.
+ */
+export declare const visitRoute: VisitRoute
+
+/**
+ * The first record a listing shows: from a link to it, else by clicking the first row and reading where the
+ * app went. An answer the listing gives every time (a record, no record, not a page) is kept in a file in
+ * `outputDir`, so a record's detail and edit share one visit of the listing; one a failed or empty load gave is not.
+ */
+export declare const firstRecordOf: FirstRecordOf