chore: improve tests

changes include:
* update dependencies
* add eslint and vue-tsc check (adopted from Kong/kong-admin#3033)
* unified jwk fixture (adopted from Kong/kong-admin#3035)
* error log improvements (adopted from Kong/kong-admin#2965)
* change `$` from prototype to static class member to fix ts error 2855

.github/workflows/.reusable_build.yml

@@ -33,7 +33,7 @@ jobs:
 
       - name: Run lint
         timeout-minutes: 10
-        run: yarn lint && yarn stylelint
+        run: yarn lint
 
   build-assets:
     name: Build assets

package.json

@@ -10,8 +10,12 @@
     "test:e2e": "yarn --cwd tests/playwright run test",
     "playwright": "yarn --cwd tests/playwright run playwright",
     "preview": "vite build && vite preview",
-    "lint": "eslint --ext .js,.vue,.ts src",
-    "stylelint": "stylelint --allow-empty-input 'src/**/*.{css,scss,sass,less,styl,vue}'",
+    "lint": "yarn lint:eslint && yarn lint:vue && yarn lint:playwright && yarn lint:style",
+    "lint:eslint": "eslint --ext .js,.vue,.ts src tests/playwright",
+    "lint:eslint:fix": "eslint --fix --ext .js,.vue,.ts src tests/playwright",
+    "lint:playwright": "tsc --noEmit --project tests/playwright/tsconfig.json --baseUrl tests/playwright",
+    "lint:style": "stylelint --allow-empty-input 'src/**/*.{css,scss,sass,less,styl,vue}'",
+    "lint:vue": "vue-tsc --noEmit",
     "postinstall": "husky install"
   },
   "lint-staged": {
@@ -47,22 +51,25 @@
   },
   "devDependencies": {
     "@kong/design-tokens": "^1.11.9",
-    "@types/lodash-es": "^4.17.8",
+    "@playwright/test": "^1.40.0",
+    "@types/lodash-es": "^4.17.12",
     "@types/marked": "^5.0.1",
     "@types/node": "^20.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.0",
+    "@typescript-eslint/parser": "^6.13.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
-    "eslint": "^8.43.0",
+    "bmp-js": "^0.1.0",
+    "dotenv": "^16.0.1",
+    "eslint": "^8.54.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-n": "^16.0.0",
-    "eslint-plugin-playwright": "^0.15.3",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-n": "^16.3.1",
+    "eslint-plugin-playwright": "^0.18.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-vue": "^9.15.0",
-    "eslint-plugin-vuejs-accessibility": "^2.1.0",
+    "eslint-plugin-vue": "^9.18.1",
+    "eslint-plugin-vuejs-accessibility": "^2.2.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "lodash-es": "^4.17.21",
@@ -73,8 +80,10 @@
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended-scss": "^12.0.0",
     "stylelint-config-recommended-vue": "^1.5.0",
-    "typescript": "^5.1.3",
+    "typescript": "^5.3.2",
     "vite": "^4.3.9",
-    "vite-plugin-html": "^3.2.0"
+    "vite-plugin-html": "^3.2.0",
+    "vue-eslint-parser": "^9.3.2",
+    "vue-tsc": "^1.8.22"
   }
 }

src/pages/plugins/Detail.vue

@@ -52,9 +52,15 @@ const entityType = computed(() => {
     return undefined
   }
 
-  return `${(route.query?.entity_type as string).split('_')[0]}s`
+  return `${(route.query.entity_type as string).split('_')[0]}s`
+})
+const entityId = computed(() => {
+  if (!route.query?.entity_id) {
+    return undefined
+  }
+
+  return route.query.entity_id as string
 })
-const entityId = computed(() => route.query?.entity_id)
 
 const pluginDetailConfig = reactive({
   ...useDetailGeneralConfig(),

tests/playwright/commands/autocompleteDeleteModal.ts

@@ -1,13 +1,19 @@
+import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
 export const autocompleteDeleteModal = async (page: Page) => {
-  const name = await page
-    .locator('.kong-ui-entity-delete-modal .k-prompt-confirm-text span')
-    .textContent()
-
-  await page
-    .locator('.kong-ui-entity-delete-modal')
-    .locator('[data-testid="confirmation-input"]')
-    .type(name ?? '')
+  await expect(page.locator('.kong-ui-entity-delete-modal .k-modal-dialog')).toBeVisible()
+
+  if (await page.locator('.kong-ui-entity-delete-modal .k-prompt-confirm-text span').isVisible()) {
+    const name = await page
+      .locator('.kong-ui-entity-delete-modal .k-prompt-confirm-text span')
+      .textContent()
+
+    await page
+      .locator('.kong-ui-entity-delete-modal')
+      .locator('[data-testid="confirmation-input"]')
+      .type(name ?? '')
+  }
+
   await page.locator('.kong-ui-entity-delete-modal .k-prompt-proceed').click()
 }

tests/playwright/commands/clearKongResources.ts

@@ -31,13 +31,12 @@ export const clearKongResources = async (endpoint: string, clearOptions: ClearKo
     headers: {},
   }
   const tasks: (() => AxiosPromise)[] = []
-  const deleteResponses: AxiosResponse[] = []
 
   try {
     const items: ItemProps[] = []
     let next = kongUrl + endpoint
 
-    for (;;) {
+    while (true) {
       const res: AxiosResponse<ResponseProps> = await axios({ ...options, url: next })
 
       if (Array.isArray(res.data.data)) {
@@ -74,19 +73,20 @@ export const clearKongResources = async (endpoint: string, clearOptions: ClearKo
     })
   } catch (err) {
     if (ignoreNotFound && axios.isAxiosError(err) && err.response?.status === 404) return
-    handleRequestError('clearKongResources', err as AxiosError<object>, options, throwOnError)
+    handleRequestError('clearKongResources', err as AxiosError<object>, throwOnError)
   }
 
+  let deletedCount = 0
+
   try {
     await Promise.all(
       Array.from({ length: WORKER_COUNT }).map(async () => {
         let task: (() => AxiosPromise)|undefined
 
         while ((task = tasks.shift())) {
           try {
-            const resp = await task()
-
-            deleteResponses.push(resp)
+            await task()
+            deletedCount++
           } catch (e) {
             if (ignoreNotFound && axios.isAxiosError(e) && e.response?.status === 404) {
               continue
@@ -97,8 +97,8 @@ export const clearKongResources = async (endpoint: string, clearOptions: ClearKo
         }
       })
     )
-    console.log(`${deleteResponses.length} ${endpoint} have been deleted`)
+    console.log(`${deletedCount} resources on ${endpoint} have been deleted`)
   } catch (err) {
-    handleRequestError('clearKongResources', err as AxiosError<object>, options, throwOnError)
+    handleRequestError('clearKongResources', err as AxiosError<object>, throwOnError)
   }
 }

tests/playwright/commands/createKongResource.ts

@@ -18,6 +18,6 @@ export const createKongResource = async (endpoint: string, payload: PayloadType)
   try {
     return await axios(options)
   } catch (err) {
-    handleRequestError('createKongResource', err as AxiosError<object>, options)
+    handleRequestError('createKongResource', err as AxiosError<object>)
   }
 }

tests/playwright/commands/deleteKongResource.ts

@@ -5,18 +5,23 @@ import { handleRequestError } from '@pw/helpers/misc'
 export const deleteKongResource = async (endpoint: string, id = '', throwOnError = false) => {
   const kongUrl = process.env.KM_TEST_API_URL
 
+  const idPath = id ? `/${id}` : ''
   const options: AxiosRequestConfig = {
     method: 'DELETE' as Method,
-    url: `${kongUrl}${endpoint}/${id}`,
+    url: `${kongUrl}${endpoint}${idPath}`,
     headers: {
       'Content-Type': 'application/json',
       'Connection': 'close',
     },
   }
 
   try {
-    return await axios(options)
+    const res = await axios(options)
+
+    console.log(`${endpoint}${idPath} deleted`)
+
+    return res
   } catch (err) {
-    handleRequestError('deleteKongResource', err as AxiosError<object>, options, throwOnError)
+    handleRequestError('deleteKongResource', err as AxiosError<object>, throwOnError)
   }
 }

tests/playwright/fixtures/jwk.ts

@@ -0,0 +1,8 @@
+const mockJwkContent = '{"kty":"EC", "crv":"P-256", "x":"f83OJ3D2xF1Bg8vub9tLe1gHMzV76e8Tus9uPHvRVEU", "y":"x_FEzRu9m36HLN_tue659LNpXW6pCyStikYjKIWI5a0", "kid":"jwk" }'
+
+export const mockJwk = {
+  kid: 'jwk',
+  jwk: mockJwkContent,
+}
+
+export const mockJwkWithKid = (kid: string) => JSON.stringify({ ...JSON.parse(mockJwkContent), kid })

tests/playwright/helpers/misc.ts

@@ -1,5 +1,5 @@
 import config from '@pw-config'
-import type { AxiosError, AxiosRequestConfig } from 'axios'
+import type { AxiosError } from 'axios'
 import bmp from 'bmp-js'
 import fs from 'fs'
 import path from 'path'
@@ -19,8 +19,8 @@ export const getMessageFromError = function (error: AxiosError<{ message?: strin
   return error.message || 'There was an error'
 }
 
-export const handleRequestError = (from: string, err: AxiosError<{ message?: string }>, options: AxiosRequestConfig, expose = true) => {
-  console.error(`${from}:\t`, options.method, options.url, getMessageFromError(err))
+export const handleRequestError = (from: string, err: AxiosError<{ message?: string }>, expose = true) => {
+  console.error(`[error] ${from}:`, err.config.method, err.config.url, getMessageFromError(err))
   if (expose) {
     throw err
   }

tests/playwright/pages/ca-certificates.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class CACertificateListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/certificates.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class CertificateListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/consumers.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class ConsumerListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/index.ts

@@ -2,16 +2,14 @@ import type { Page } from '@playwright/test'
 
 // Page Object Model
 export class POM {
-  public $
+  public static $ = {
+    success: '.k-alert.success',
+    submitButton: '[data-testid="form-footer-actions"] .k-button.primary',
+  }
 
   constructor (public readonly page: Page, public readonly url: string) { }
 
   async goto () {
     return this.page.goto(this.url)
   }
 }
-
-POM.prototype.$ = {
-  success: '.k-alert.success',
-  submitButton: '[data-testid="form-footer-actions"] .k-button.primary',
-}

tests/playwright/pages/key-sets.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class KeySetListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/keys.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class KeyListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/plugins.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class PluginListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/routes.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class RouteListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/services.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class ServiceListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/snis.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class SniListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/upstreams.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class UpstreamListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/pages/vaults.ts

@@ -3,7 +3,7 @@ import { POM } from '.'
 
 export class VaultListPage extends POM {
   public $ = {
-    ...super.$,
+    ...POM.$,
   }
 
   constructor (page: Page) {

tests/playwright/specs/key-sets/02-Keys.spec.ts

@@ -8,11 +8,10 @@ import { switchDetailTab } from '@pw/commands/switchDetailTab'
 import { waitAndDismissToasts } from '@pw/commands/waitAndDismissToast'
 import { withNavigation } from '@pw/commands/withNavigation'
 import { KeySetListPage } from '@pw/pages/key-sets'
+import { mockJwk } from '@pw/fixtures/jwk'
 
 const mockName = 'ks12'
 const mockJwName = 'jwk-key'
-const mockJwKid = 'jwk'
-const mockJwk = '{"kty":"EC", "crv":"P-256", "x":"f83OJ3D2xF1Bg8vub9tLe1gHMzV76e8Tus9uPHvRVEU", "y":"x_FEzRu9m36HLN_tue659LNpXW6pCyStikYjKIWI5a0", "kid":"jwk" }'
 
 const test = baseTest()
 
@@ -43,9 +42,9 @@ test.describe('key-set keys tab', () => {
       page,
       formData: {
         'key-form-name': mockJwName,
-        'key-form-id': mockJwKid,
+        'key-form-id': mockJwk.kid,
         'key-format-container': 'jwk',
-        'key-form-jwk': mockJwk,
+        'key-form-jwk': mockJwk.jwk,
       },
       method: 'fill',
       withAction: 'submit',