Maintenance: Update Test related packages (major)

.cypress/cypress.config.ts → .cypress/cypress.config.mjs

@@ -1,11 +1,14 @@
 import { defineConfig } from 'cypress'
 import { rm } from 'node:fs/promises'
-import { resolve } from 'node:path'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { initPlugin as initVisualRegressionPlugin } from '@frsource/cypress-plugin-visual-regression-diff/plugins'
-import pkg from '../package.json'
+import pkg from '../package.json' assert { type: 'json' }
+
+const dir = dirname(fileURLToPath(import.meta.url))
 
 const isCYCI = !process.env.CY_OPEN
-const root = resolve(__dirname, '..')
+const root = resolve(dir, '..')
 
 // we don't need to optimize graphql and apollo
 const skipDeps = ['graphql', 'apollo']
@@ -46,8 +49,8 @@ export default defineConfig({
       viteConfig: {
         mode: 'cypress',
         root,
-        configFile: resolve(__dirname, '..', 'vite.config.ts'),
-        cacheDir: resolve(__dirname, 'node_modules', '.vite'),
+        configFile: resolve(dir, '..', 'vite.config.mjs'),
+        cacheDir: resolve(dir, 'node_modules', '.vite'),
         server: {
           fs: {
             strict: false,

.cypress/package.json

@@ -1,9 +1,10 @@
 {
   "private": true,
+  "type": "module",
   "devDependencies": {
     "@frsource/cypress-plugin-visual-regression-diff": "^2.3.12",
-    "@testing-library/cypress": "^8.0.7",
-    "cypress": "^10.11.0",
+    "@testing-library/cypress": "^9.0.0",
+    "cypress": "^12.5.1",
     "cypress-real-events": "^1.7.6"
   }
 }

.cypress/yarn.lock

@@ -83,10 +83,10 @@
     pngjs "6.0.0"
     sharp "0.31.1"
 
-"@testing-library/cypress@^8.0.7":
-  version "8.0.7"
-  resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-8.0.7.tgz#18315eba3cf8852808afadf122e4858406384015"
-  integrity sha512-3HTV725rOS+YHve/gD9coZp/UcPK5xhr4H0GMnq/ni6USdtzVtSOG9WBFtd8rYnrXk8rrGD+0toRFYouJNIG0Q==
+"@testing-library/cypress@^9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/cypress/-/cypress-9.0.0.tgz#3facad49c4654a99bbd138f83f33b415d2d6f097"
+  integrity sha512-c1XiCGeHGGTWn0LAU12sFUfoX3qfId5gcSE2yHode+vsyHDWraxDPALjVnHd4/Fa3j4KBcc5k++Ccy6A9qnkMA==
   dependencies:
     "@babel/runtime" "^7.14.6"
     "@testing-library/dom" "^8.1.0"
@@ -447,10 +447,10 @@ cypress-real-events@^1.7.6:
   resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.6.tgz#6f17e0b2ceea1d6dc60f6737d8f84cc517bbbb4c"
   integrity sha512-yP6GnRrbm6HK5q4DH6Nnupz37nOfZu/xn1xFYqsE2o4G73giPWQOdu6375QYpwfU1cvHNCgyD2bQ2hPH9D7NMw==
 
-cypress@^10.11.0:
-  version "10.11.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.11.0.tgz#e9fbdd7638bae3d8fb7619fd75a6330d11ebb4e8"
-  integrity sha512-lsaE7dprw5DoXM00skni6W5ElVVLGAdRUUdZjX2dYsGjbY/QnpzWZ95Zom1mkGg0hAaO/QVTZoFVS7Jgr/GUPA==
+cypress@^12.5.1:
+  version "12.5.1"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.5.1.tgz#effdcccdd5a6187d61d497300903d4f3b5b21b6e"
+  integrity sha512-ZmCmJ3lsyeOpBfh410m5+AO2CO1AxAzFBt7k6/uVbNcrNZje1vdiwYTpj2ksPKg9mjr9lR6V8tmlDNMvr4H/YQ==
   dependencies:
     "@cypress/request" "^2.88.10"
     "@cypress/xvfb" "^1.2.4"

app/frontend/cypress/shared/components/Form/fields/FieldEditor/editor-mention-user.cy.ts

@@ -1,7 +1,7 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
 
-import { mountComponent, mockApolloClient } from '@cy/utils'
-import CommonNotifications from '@shared/components/CommonNotifications/CommonNotifications.vue'
+import { mockApolloClient } from '@cy/utils'
+import { useNotifications } from '@shared/components/CommonNotifications'
 import { MentionSuggestionsDocument } from '@shared/components/Form/fields/FieldEditor/graphql/queries/mention/mentionSuggestions.api'
 import { convertToGraphQLId } from '@shared/graphql/utils'
 
@@ -9,15 +9,17 @@ import { mountEditor } from './utils'
 
 describe('Testing "user mention" popup: "@@" command', { retries: 2 }, () => {
   it('shows notification when no group is provided', () => {
-    mountComponent(CommonNotifications as any)
+    const { notifications } = useNotifications()
     mountEditor()
 
-    cy.findByRole('textbox').type('@@t')
-
-    cy.get('#Notifications').should(
-      'have.text',
-      'Before you mention a user, please select a group.',
-    )
+    cy.findByRole('textbox')
+      .type('@@t')
+      .then(() => {
+        expect(notifications.value).to.have.length(1)
+        expect(notifications.value[0].message).to.equal(
+          'Before you mention a user, please select a group.',
+        )
+      })
   })
 
   it('inserts found text', () => {

package.json

@@ -11,8 +11,8 @@
     "lint:css": "stylelint **/*.{css,vue,scss}",
     "lint:css:fix": "stylelint **/*.{css,vue,scss} --fix",
     "test": "VTL_SKIP_AUTO_CLEANUP=true TZ=utc vitest",
-    "test:ct": "CY_OPEN=true yarn --cwd ./.cypress cypress open --component --project ../ --config-file .cypress/cypress.config.ts",
-    "test:ci:ct": "CI=true yarn --cwd ./.cypress cypress run --component --project ../ --config-file .cypress/cypress.config.ts --browser electron",
+    "test:ct": "CY_OPEN=true yarn --cwd ./.cypress cypress open --component --project ../ --config-file .cypress/cypress.config.mjs",
+    "test:ci:ct": "CI=true yarn --cwd ./.cypress cypress run --component --project ../ --config-file .cypress/cypress.config.mjs --browser electron",
     "cypress:snapshots": "sh .cypress/visual-regression/snapshots.sh",
     "cypress:install": "yarn --cwd ./.cypress install",
     "postinstall": "node script/fix-node-modules.mjs",
@@ -59,7 +59,7 @@
     "eslint-plugin-vue": "^9.9.0",
     "eslint-plugin-zammad": "file:.eslint-plugin-zammad",
     "histoire": "^0.13.0",
-    "jsdom": "^20.0.3",
+    "jsdom": "^21.1.0",
     "mock-apollo-client": "^1.2.1",
     "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",

vite.config.ts → vite.config.mjs

@@ -1,20 +1,19 @@
 // Copyright (C) 2012-2023 Zammad Foundation, https://zammad-foundation.org/
+/* eslint-disable security/detect-non-literal-fs-filename */
 
 import { createRequire } from 'module'
-import type { ServerOptions } from 'https'
-import { defineConfig, type ResolvedConfig } from 'vite'
+import { defineConfig } from 'vite'
 import VuePlugin from '@vitejs/plugin-vue'
-import {
-  createSvgIconsPlugin,
-  type ViteSvgIconsPlugin,
-} from 'vite-plugin-svg-icons'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import { VitePWA } from 'vite-plugin-pwa'
-import path from 'path'
-import fs from 'fs'
+import { resolve, dirname } from 'node:path'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import tsconfig from './tsconfig.base.json' assert { type: 'json' }
 
-import tsconfig from './tsconfig.base.json'
+const dir = dirname(fileURLToPath(import.meta.url))
 
-const SSL_PATH = path.resolve(__dirname, 'config', 'ssl')
+const SSL_PATH = resolve(dir, 'config', 'ssl')
 
 export default defineConfig(({ mode, command }) => {
   const isStory = Boolean(process.env.HISTOIRE)
@@ -26,10 +25,7 @@ export default defineConfig(({ mode, command }) => {
   const svgPlugin = createSvgIconsPlugin({
     // Specify the directory containing all icon assets assorted by sets.
     iconDirs: [
-      path.resolve(
-        __dirname,
-        'app/frontend/shared/components/CommonIcon/assets',
-      ),
+      resolve(dir, 'app/frontend/shared/components/CommonIcon/assets'),
     ],
 
     // Specify symbolId format to include directory as icon set and filename as icon name.
@@ -37,15 +33,13 @@ export default defineConfig(({ mode, command }) => {
 
     svgoOptions: {
       plugins: [{ name: 'preset-default' }],
-    } as ViteSvgIconsPlugin['svgoOptions'],
+    },
   })
 
   if (isStory) {
     // Patch svg plugin for stories, because it's not working with SSR.
-    const svgConfigResolved = svgPlugin.configResolved as (
-      cfg: ResolvedConfig,
-    ) => void
-    svgConfigResolved({ command: 'build' } as ResolvedConfig)
+    const svgConfigResolved = svgPlugin.configResolved
+    svgConfigResolved({ command: 'build' })
     delete svgPlugin.configResolved
     const { load } = svgPlugin
     svgPlugin.load = function fakeLoad(id) {
@@ -90,12 +84,12 @@ export default defineConfig(({ mode, command }) => {
     // plugins.push(ManualChunks())
   }
 
-  let https: ServerOptions | false = false
+  let https = false
 
   // vite-ruby controlls this variable, it's either "true" or "false"
   if (process.env.VITE_RUBY_HTTPS === 'true') {
-    const SSL_CERT = fs.readFileSync(path.resolve(SSL_PATH, 'localhost.crt'))
-    const SSL_KEY = fs.readFileSync(path.resolve(SSL_PATH, 'localhost.key'))
+    const SSL_CERT = readFileSync(resolve(SSL_PATH, 'localhost.crt'))
+    const SSL_KEY = readFileSync(resolve(SSL_PATH, 'localhost.key'))
 
     https = {
       cert: SSL_CERT,
@@ -109,12 +103,12 @@ export default defineConfig(({ mode, command }) => {
     },
     resolve: {
       alias: {
-        '@mobile': path.resolve(__dirname, 'app/frontend/apps/mobile'),
-        '@shared': path.resolve(__dirname, 'app/frontend/shared'),
-        '@tests': path.resolve(__dirname, 'app/frontend/tests'),
-        '@stories': path.resolve(__dirname, 'app/frontend/stories'),
-        '@cy': path.resolve(__dirname, '.cypress'),
-        '@': path.resolve(__dirname, 'app/frontend'),
+        '@mobile': resolve(dir, 'app/frontend/apps/mobile'),
+        '@shared': resolve(dir, 'app/frontend/shared'),
+        '@tests': resolve(dir, 'app/frontend/tests'),
+        '@stories': resolve(dir, 'app/frontend/stories'),
+        '@cy': resolve(dir, '.cypress'),
+        '@': resolve(dir, 'app/frontend'),
         '^vue-easy-lightbox$':
           'vue-easy-lightbox/dist/external-css/vue-easy-lightbox.esm.min.js',
       },

yarn.lock

@@ -6696,6 +6696,38 @@ jsdom@^20.0.3:
     ws "^8.11.0"
     xml-name-validator "^4.0.0"
 
+jsdom@^21.1.0:
+  version "21.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-21.1.0.tgz#d56ba4a84ed478260d83bd53dc181775f2d8e6ef"
+  integrity sha512-m0lzlP7qOtthD918nenK3hdItSd2I+V3W9IrBcB36sqDwG+KnUs66IF5GY7laGWUnlM9vTsD0W1QwSEBYWWcJg==
+  dependencies:
+    abab "^2.0.6"
+    acorn "^8.8.1"
+    acorn-globals "^7.0.0"
+    cssom "^0.5.0"
+    cssstyle "^2.3.0"
+    data-urls "^3.0.2"
+    decimal.js "^10.4.2"
+    domexception "^4.0.0"
+    escodegen "^2.0.0"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^3.0.0"
+    http-proxy-agent "^5.0.0"
+    https-proxy-agent "^5.0.1"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.2"
+    parse5 "^7.1.1"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.2"
+    w3c-xmlserializer "^4.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^2.0.0"
+    whatwg-mimetype "^3.0.0"
+    whatwg-url "^11.0.0"
+    ws "^8.11.0"
+    xml-name-validator "^4.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -9805,20 +9837,6 @@ vary@^1:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
-vite-node@0.28.1:
-  version "0.28.1"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.28.1.tgz#e2af53e112e57455a474e9f7a6478b1cdf79a6ab"
-  integrity sha512-Mmab+cIeElkVn4noScCRjy8nnQdh5LDIR4QCH/pVWtY15zv5Z1J7u6/471B9JZ2r8CEIs42vTbngaamOVkhPLA==
-  dependencies:
-    cac "^6.7.14"
-    debug "^4.3.4"
-    mlly "^1.1.0"
-    pathe "^1.1.0"
-    picocolors "^1.0.0"
-    source-map "^0.6.1"
-    source-map-support "^0.5.21"
-    vite "^3.0.0 || ^4.0.0"
-
 vite-node@0.28.4:
   version "0.28.4"
   resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.28.4.tgz#ce709cde2200d86a2a45457fed65f453234b0261"