chore(*): isolate test-only deps and housekeeping

.github/workflows/.reusable_e2e_tests.yml

@@ -64,8 +64,8 @@ jobs:
         timeout-minutes: 10
         run: |
           npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
-          yarn add -D @playwright/test
-          npx --yes playwright install chromium
+          yarn install:e2e
+          yarn playwright install chromium
 
       - name: Log in to GitHub Container Registry
         timeout-minutes: 1
@@ -90,17 +90,17 @@ jobs:
         env:
           KM_TEST_GUI_URL: ${{ inputs.base-url }}
         run: |
-          yarn playwright test \
+          yarn test:e2e \
             --pass-with-no-tests \
             --retries ${{ inputs.retries }} \
             --reporter=list \
-            specs/${{ matrix.suite }}
+            ${{ matrix.suite }}/
 
       - name: Upload results
         if: ${{ !cancelled() }}
         continue-on-error: true
         uses: actions/upload-artifact@v3
         with:
           name: results-${{ matrix.suite }}
-          path: test-results/
+          path: tests/playwright/test-results/
           retention-days: 1

DEVELOPMENT.md

@@ -0,0 +1,23 @@
+# Development
+
+> 🚧 This document is still a work in progress.
+
+## Testing
+
+### End-to-end testing
+
+End-to-end testing, also called E2E testing, guarantees that applications perform as expected and maintain seamless data flow for diverse user tasks and processes. This testing strategy begins from the perspective of end users and replicates real-life scenarios.
+
+Kong Manager uses Playwright to perform end-to-end tests. To install dependencies required for end-to-end testing, run the following command:
+
+```shell
+yarn install:e2e
+```
+
+Afterward, run all the test cases using the following command:
+
+```shell
+yarn test:e2e
+```
+
+You may find all the test cases for end-to-end testing under the `tests/playwright/specs` folder. Please feel free to make any necessary modifications and add new test cases as per your requirements. Happy testing!

package.json

@@ -6,11 +6,12 @@
   "scripts": {
     "serve": "vite",
     "build": "vite build",
-    "test:e2e": "playwright test specs/",
+    "install:e2e": "yarn --cwd tests/playwright install",
+    "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",
-    "postinstall": "husky install",
-    "playwright": "playwright"
+    "postinstall": "husky install"
   },
   "lint-staged": {
     "src/**/*.{ts,js,vue}": "eslint --fix"
@@ -36,14 +37,12 @@
     "@kong/kongponents": "^8.116.2",
     "@material-design-icons/font": "^0.14.9",
     "axios": "^1.4.0",
-    "bmp-js": "^0.1.0",
-    "lodash.clonedeep": "^4.5.0",
     "marked": "^5.1.0",
     "vue": "^3.2.47",
     "vue-router": "^4.2.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.36.2",
+    "@types/lodash-es": "^4.17.8",
     "@types/node": "^20.3.1",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
@@ -60,10 +59,10 @@
     "eslint-plugin-vuejs-accessibility": "^2.1.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
-    "lodash.debounce": "^4.0.8",
+    "lodash-es": "^4.17.21",
     "sass": "^1.63.4",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-html": "^3.2.0"
   }
-}
+}

src/pages/plugins/Form.vue

@@ -73,7 +73,7 @@
 <script>
 import axios from 'axios'
 import { marked } from 'marked'
-import cloneDeep from 'lodash.clonedeep'
+import * as _ from 'lodash-es'
 import { PluginScope } from '@kong-ui/entities-plugins'
 import EntityForm from '@/components/EntityForm/EntityForm.vue'
 import FormPageMixin from '@/components/EntityForm/mixins/FormPage'
@@ -638,7 +638,7 @@ export default {
           if (elements.type === 'string' && !elements.one_of) {
             const { help, label } = output[field]
 
-            output[field] = { ...cloneDeep(ArrayStringFieldSchema), help, label }
+            output[field] = { ..._.cloneDeep(ArrayStringFieldSchema), help, label }
           }
         }
 

src/schemas/Datadog.ts

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash.clonedeep'
+import * as _ from 'lodash-es'
 import { ArrayStringFieldSchema } from '@/components/EntityForm/fields'
 import MetricFields from './MetricFields'
 
@@ -51,7 +51,7 @@ export default {
         }, {
           model: 'tags',
           label: 'Tags',
-          ...cloneDeep(ArrayStringFieldSchema),
+          ..._.cloneDeep(ArrayStringFieldSchema),
         }],
       },
     },

tests/playwright/commands/withNavigation.ts

@@ -1,5 +1,5 @@
 import type { Page, Response } from '@playwright/test'
-import debounce from 'lodash.debounce'
+import * as _ from 'lodash-es'
 
 const consumeNavigationStack = async (
   page: Page,
@@ -12,7 +12,7 @@ const consumeNavigationStack = async (
 ): Promise<Array<Response | null>> => {
   let all_cleared = false
 
-  const resetTimer = debounce(() => {
+  const resetTimer = _.debounce(() => {
     all_cleared = true
   }, timeout, {
     leading: false,

tests/playwright/helpers/misc.ts

@@ -3,6 +3,9 @@ import type { AxiosError, AxiosRequestConfig } from 'axios'
 import bmp from 'bmp-js'
 import fs from 'fs'
 import path from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 export const getMessageFromError = function (error: AxiosError<{ message?: string }>) {
   if (error?.response?.data) {

tests/playwright/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "playwright-tests",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "module": "esnext",
+  "scripts": {
+    "test": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.35.1",
+    "axios": "^1.4.0",
+    "bmp-js": "^0.1.0",
+    "dotenv": "^16.0.1",
+    "lodash-es": "^4.17.21"
+  }
+}

playwright.config.ts → tests/playwright/playwright.config.ts

@@ -1,11 +1,11 @@
 import type { PlaywrightTestConfig } from '@playwright/test'
 import * as dotenv from 'dotenv'
 
-dotenv.config()
+dotenv.config({ path: '../../.env' })
 
 const config: PlaywrightTestConfig = {
   reporter: [['junit', { outputFile: './test-results/playwright.xml' }]],
-  testDir: './tests/playwright',
+  testDir: './specs',
   retries: 1,
   workers: 1,
   use: {

tests/playwright/tsconfig.json

@@ -1,22 +1,19 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.json",
   "compilerOptions": {
-    "target": "es2017",
+    "module": "esnext",
+    "target": "esnext",
     "allowSyntheticDefaultImports": true,
     "baseUrl": "./",
     "esModuleInterop": true,
     "paths": {
-      "@pw-config": ["../../playwright.config"],
+      "@pw-config": ["./playwright.config"],
       "@pw/*": ["./*"]
     },
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "allowJs": true,
     "noImplicitAny": false,
-    "types": [
-      "vite/client",
-      "node"
-    ]
+    "types": ["node"]
   },
-  "exclude": ["node_modules", "dist", "coverage"]
+  "exclude": ["node_modules"]
 }

tests/playwright/yarn.lock

@@ -0,0 +1,100 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@playwright/test@^1.35.1":
+  version "1.36.2"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.36.2.tgz#9edd68a02b0929c5d78d9479a654ceb981dfb592"
+  integrity sha512-2rVZeyPRjxfPH6J0oGJqE8YxiM1IBRyM8hyrXYK7eSiAqmbNhxwcLa7dZ7fy9Kj26V7FYia5fh9XJRq4Dqme+g==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.36.2"
+  optionalDependencies:
+    fsevents "2.3.2"
+
+"@types/node@*":
+  version "20.4.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.4.6.tgz#b66b66c9bb5d49b199f03399e341c9d6036e9e88"
+  integrity sha512-q0RkvNgMweWWIvSMDiXhflGUKMdIxBo2M2tYM/0kEGDueQByFzK4KZAgu5YHGFNxziTlppNpTIBcqHQAxlfHdA==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+  integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+bmp-js@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.1.0.tgz#e05a63f796a6c1ff25f4771ec7adadc148c07233"
+  integrity sha512-vHdS19CnY3hwiNdkaqk93DvjVLfbEcI8mys4UjuWrlX1haDmroo8o4xCzh4wD6DGV6HxRCyauwhHRqMTfERtjw==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+dotenv@^16.0.1:
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.3.1.tgz#369034de7d7e5b120972693352a3bf112172cc3e"
+  integrity sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==
+
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+[email protected]:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+[email protected]:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+[email protected]:
+  version "1.36.2"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.36.2.tgz#32382f2d96764c24c65a86ea336cf79721c2e50e"
+  integrity sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==