Maintenance: Mobile - Improve test startup performance

.eslintrc.js

@@ -46,7 +46,7 @@ module.exports = {
       {
         devDependencies: [
           'tailwind.config.js',
-          'vite.config.ts',
+          'vite.config.*',
           'app/frontend/build/**',
           'app/frontend/**/*.spec.*',
           'app/frontend/**/__tests__/**/*',

app/frontend/build/manual-chunks.mjs → app/frontend/build/manualChunks.js

@@ -1,6 +1,6 @@
 // Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
 
-import { splitVendorChunk } from 'vite'
+const { splitVendorChunk } = require('vite')
 
 const graphqlChunk = ['graphql', '@apollo', '@vue/apollo']
 
@@ -10,7 +10,7 @@ const isGraphqlChunk = (id) =>
 /**
  * @returns {import("vite").Plugin}
  */
-function PluginManualChunks() {
+const PluginManualChunks = () => {
   const getChunk = splitVendorChunk()
 
   const graphqlIds = new Set()
@@ -63,4 +63,4 @@ function PluginManualChunks() {
   }
 }
 
-export default PluginManualChunks
+module.exports = PluginManualChunks

tsconfig.json

@@ -3,6 +3,10 @@
   "compilerOptions": {
     "types": ["vitest/globals", "vite/client", "vite-plugin-svg-icons/client"]
   },
-  "include": ["app/frontend/**/*", ".storybook/config/**/*.ts"],
+  "include": [
+    "app/frontend/**/*",
+    ".storybook/config/**/*.ts",
+    "./vite.config.*"
+  ],
   "exclude": ["app/frontend/cypress/**/*", "node_modules", "public", "vendor"]
 }

vite.config.ts

@@ -1,23 +1,79 @@
 // Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/
-/* eslint-disable no-restricted-imports */
-
-/// <reference types="vitest" />
 
+import { createRequire } from 'module'
 import { defineConfig } from 'vite'
-import RubyPlugin from 'vite-plugin-ruby'
 import VuePlugin from '@vitejs/plugin-vue'
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 import type { OptimizeOptions } from 'svgo'
-import * as path from 'path'
+import path from 'path'
 
 import tsconfig from './tsconfig.base.json'
-import TransformTestId from './app/frontend/build/transforms/transformTestId'
-import ManualChunks from './app/frontend/build/manual-chunks.mjs'
 
 export default defineConfig(({ mode, command }) => {
   const isTesting = ['test', 'storybook', 'cypress'].includes(mode)
   const isBuild = command === 'build'
 
+  const require = createRequire(import.meta.url)
+
+  const plugins = [
+    VuePlugin({
+      template: {
+        compilerOptions: {
+          nodeTransforms:
+            isTesting || !!process.env.VITE_TEST_MODE
+              ? []
+              : [require('./app/frontend/build/transforms/transformTestId')],
+        },
+      },
+    }),
+    createSvgIconsPlugin({
+      // Specify the icon folder to be cached
+      iconDirs: [
+        path.resolve(
+          process.cwd(),
+          `${
+            mode === 'storybook' ? '../public' : 'public'
+          }/assets/images/icons`,
+        ),
+      ],
+      // Specify symbolId format
+      symbolId: 'icon-[dir]-[name]',
+      svgoOptions: {
+        plugins: [
+          { name: 'preset-default' },
+          {
+            name: 'removeAttributesBySelector',
+            params: {
+              selectors: [
+                {
+                  selector: "[fill='#50E3C2']",
+                  attributes: 'fill',
+                },
+                // TODO: we need to add a own plugin or add some identifier to the svg files, to add the same functionality
+                // like we have in the old gulp script (fill='#50E3C2'] + parent fill='none' should be removed).
+              ],
+            },
+          },
+          {
+            name: 'convertColors',
+            params: {
+              currentColor: /(#BD0FE1|#BD10E0)/,
+            },
+          },
+        ],
+      } as OptimizeOptions,
+    }),
+  ]
+
+  // Ruby plugin is not needed inside of the vitest context and has some side effects.
+  if (!isTesting || isBuild) {
+    const { default: RubyPlugin } = require('vite-plugin-ruby')
+    const ManualChunks = require('./app/frontend/build/manualChunks')
+
+    plugins.push(RubyPlugin())
+    plugins.push(ManualChunks())
+  }
+
   return {
     esbuild: {
       target: tsconfig.compilerOptions.target,
@@ -32,64 +88,24 @@ export default defineConfig(({ mode, command }) => {
         '@': path.resolve(__dirname, 'app/frontend'),
       },
     },
+    server: {
+      watch: {
+        ignored: isTesting
+          ? []
+          : ['**/*.spec.*', '**/__tests__/**/*', 'app/frontend/tests/**/*'],
+      },
+    },
     define: {
       VITE_TEST_MODE: !!process.env.VITEST || !!process.env.VITE_TEST_MODE,
     },
     test: {
       globals: true,
+      // narrowing down test folder speeds up fast-glob in Vitest
+      dir: 'app/frontend',
       setupFiles: ['app/frontend/tests/vitest.setup.ts'],
       environment: 'jsdom',
+      css: false,
     },
-    plugins: [
-      // Ruby plugin is not needed inside of the vitest context and has some side effects.
-      isTesting && !isBuild ? [] : [...RubyPlugin(), ManualChunks()],
-      VuePlugin({
-        template: {
-          compilerOptions: {
-            nodeTransforms:
-              isTesting || !!process.env.VITE_TEST_MODE
-                ? []
-                : [TransformTestId],
-          },
-        },
-      }),
-      createSvgIconsPlugin({
-        // Specify the icon folder to be cached
-        iconDirs: [
-          path.resolve(
-            process.cwd(),
-            `${
-              mode === 'storybook' ? '../public' : 'public'
-            }/assets/images/icons`,
-          ),
-        ],
-        // Specify symbolId format
-        symbolId: 'icon-[dir]-[name]',
-        svgoOptions: {
-          plugins: [
-            { name: 'preset-default' },
-            {
-              name: 'removeAttributesBySelector',
-              params: {
-                selectors: [
-                  {
-                    selector: "[fill='#50E3C2']",
-                    attributes: 'fill',
-                  },
-                  // TODO: we need to add a own plugin or add some identifier to the svg files, to add the same functionality
-                  // like we have in the old gulp script (fill='#50E3C2'] + parent fill='none' should be removed).
-                ],
-              },
-            },
-            {
-              name: 'convertColors',
-              params: {
-                currentColor: /(#BD0FE1|#BD10E0)/,
-              },
-            },
-          ],
-        } as OptimizeOptions,
-      }),
-    ],
+    plugins,
   }
 })