DependencyTrack · stohrendorf · Feb 15, 2025 · Feb 15, 2025 · Feb 15, 2025 · Feb 15, 2025
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.github/workflows/_meta-build.yaml b/.github/workflows/_meta-build.yaml
@@ -35,13 +35,27 @@ jobs:
           node-version: '20'
           cache: 'npm'
 
-      - name: Run Npm Build
+      - name: Install Dependencies
         env:
           CI: true
         run: |-
           npm ci
+
+      - name: Run Npm Build
+        env:
+          CI: true
+        run: |-
           npm run build --if-present
 
+      - name: Run Cypress Tests
+        uses: cypress-io/github-action@v6
+        env:
+          CI: true
+        timeout-minutes: 15
+        with:
+          component: true
+          command: npm run cy:run:coverage --if-present
+
       - name: Upload Artifacts
         uses: actions/[email protected]
         with:

diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,6 @@
 .DS_Store
 node_modules
 /dist
-/coverage
 
 /tests/e2e/reports/
 selenium-debug.log
@@ -29,3 +28,11 @@ src/version.json
 # IntelliJ
 .idea/*
 !.idea/icon.svg
+
+# Test files
+/coverage
+/cypress/screenshots
+/cypress/videos
+/cypress/downloads
+/.nyc_output
+.output.txt
diff --git a/.nycrc b/.nycrc
@@ -0,0 +1,24 @@
+{
+  "all": true,
+  "include": [
+    "src/**/*.js",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "**/*.spec.js",
+    "**/*.cy.js",
+    "cypress/**/*.*",
+    "node_modules/**/*.*"
+  ],
+  "reporter": [
+    "lcov",
+    "text",
+    "html"
+  ],
+  "report-dir": "coverage",
+  "extension": [
+    ".js",
+    ".vue"
+  ],
+  "check-coverage": false
+}
diff --git a/.postcssrc.js b/.postcssrc.js
diff --git a/babel.config.js b/babel.config.js
@@ -1,12 +1,8 @@
 module.exports = {
-  presets: [
-    ['@vue/babel-preset-jsx'],
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: 'entry',
-        corejs: '3.33',
-      },
-    ],
-  ],
+  presets: [['@vue/babel-preset-jsx']],
+  env: {
+    test: {
+      plugins: process.env.VITE_COVERAGE === 'true' ? ['istanbul'] : [],
+    },
+  },
 };
diff --git a/cypress.config.js b/cypress.config.js
@@ -0,0 +1,34 @@
+const { defineConfig } = require('cypress');
+const path = require('path');
+
+module.exports = defineConfig({
+  video: true,
+  videoCompression: 32,
+  trashAssetsBeforeRuns: false,
+  component: {
+    devServer: {
+      framework: 'vue2',
+      bundler: 'vite',
+      // TODO this is just a workaround, making the tests _more_ deterministic, but they are still non-deterministic
+      warmup: {
+        clientFiles: ['cypress/support/component.js', 'src/**/*.cy.js'],
+      },
+      viteConfig: (viteConfig) => {
+        let configFile;
+        if (process.env.VITE_COVERAGE === 'true') {
+          configFile = path.resolve(__dirname, 'vite.coverage.config.js');
+        } else {
+          configFile = path.resolve(__dirname, 'vite.config.js');
+        }
+
+        return { configFile };
+      },
+    },
+    setupNodeEvents(on, config) {
+      if (process.env.VITE_COVERAGE === 'true') {
+        require('@cypress/code-coverage/task')(on, config);
+      }
+      return config;
+    },
+  },
+});
diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Cypress Component Test</title>
+</head>
+<body>
+<div data-cy-root></div>
+</body>
+</html>
diff --git a/cypress/support/component.js b/cypress/support/component.js
@@ -0,0 +1,99 @@
+import '@cypress/code-coverage/support';
+import { mount } from '@cypress/vue2';
+import Vue from 'vue';
+
+import api from '@/shared/api.json';
+import oidc from '@/shared/oidc.json';
+import version from '@/version';
+import '@/validation';
+import { installBootstrap } from '@/plugins/bootstrap';
+import installPermissionDirective from '@/directives/VuePermission';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import '@/assets/scss/style.scss';
+
+Vue.prototype.$api = api;
+Vue.prototype.$oidc = oidc;
+Vue.prototype.$version = version;
+
+Vue.prototype.$dtrack = Vue.prototype.dtrack = {
+  application: 'Dependency-Track',
+  version: '4.8.0',
+  uuid: '12345-67890-abcdef',
+  timestamp: Date.now(),
+  framework: {
+    name: 'Alpine',
+    version: '3.16',
+  },
+  database: {
+    productName: 'PostgreSQL',
+    productVersion: '14.5',
+  },
+  systemUuid: '98765-43210-fedcba',
+  systemInitialDate: new Date().toISOString(),
+};
+
+installBootstrap(Vue);
+
+/**
+ * Enhanced mount command with common mocks
+ *
+ * @param {Object} component - The Vue component to mount
+ * @param {Object} options - Mount options
+ * @param {Object} options.mocks - Custom mocks to override defaults
+ */
+Cypress.Commands.add('mount', (component, options = {}) => {
+  const defaultPrototypeMocks = {
+    $i18n: Vue.observable({
+      locale: 'en',
+      availableLocales: ['en', 'es', 'fr', 'de', 'zh', 'ja', 'hi'],
+      t: (key) => key,
+    }),
+    $t: (key) => key,
+    $router: {
+      afterEach: cy.stub(),
+    },
+  };
+
+  const prototypeMocks = {
+    ...defaultPrototypeMocks,
+    ...(options.prototypeMocks || {}),
+  };
+
+  const localVue = Vue.extend();
+  // TODO installBootstrapPageTitlePlugin(localVue, prototypeMocks.$router);
+  installPermissionDirective(localVue);
+  Object.keys(prototypeMocks).forEach((key) => {
+    Object.defineProperty(localVue.prototype, key, {
+      value: prototypeMocks[key],
+      writable: true,
+      configurable: true,
+      enumerable: true,
+    });
+  });
+
+  return mount(component, {
+    ...options,
+    localVue,
+  }).then(({ wrapper }) => {
+    return cy.wrap(wrapper).as('vue');
+  });
+});
+
+Cypress.Commands.add('setToken', (permissions = []) => {
+  const tokenPayload = {
+    permissions: permissions.join(','),
+  };
+
+  // Encode the payload to Base64URL
+  const base64Url = Cypress.Buffer.from(JSON.stringify(tokenPayload))
+    .toString('base64')
+    .replace(/\+/g, '-')
+    .replace(/\//g, '_')
+    .replace(/=+$/, '');
+
+  const fakeToken = `fake-header.${base64Url}.fake-signature`;
+
+  cy.window().then((win) => {
+    win.sessionStorage.setItem('token', fakeToken);
+  });
+});
diff --git a/cypress/support/utils.js b/cypress/support/utils.js
@@ -0,0 +1,31 @@
+export function genAxiosResponse(responses) {
+  return (url) => {
+    if (responses[url] === undefined) {
+      console.warn('axios stub for URL not available: ' + url);
+      return Promise.resolve({
+        data: null,
+        statusCode: 500,
+      });
+    }
+
+    console.log('axios stub for URL: ' + url);
+    return Promise.resolve({
+      data: responses[url],
+    });
+  };
+}
+
+export function shouldShowModal(id) {
+  cy.get('@vue').then((wrapper) => {
+    const $root = wrapper.vm.$root;
+    const bvModal = $root.$bvModal;
+    if (bvModal) {
+      bvModal.show(id);
+    } else {
+      $root.$emit('bv::show::modal', id);
+    }
+  });
+
+  cy.get(`#${id}`).should('exist');
+  cy.get(`#${id}`).should('be.visible');
+}
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,42 @@
+import pluginVue from 'eslint-plugin-vue';
+import recommendedConfig from 'eslint-plugin-prettier/recommended';
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['src/**/*.{js,jsx,vue,md,yaml}'],
+  },
+
+  {
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+  },
+
+  recommendedConfig,
+  ...pluginVue.configs['flat/vue2-essential'],
+  {
+    rules: {
+      'no-var': 'error',
+      'prefer-const': 'warn',
+      'vue/component-tags-order': 'warn',
+      'vue/order-in-components': 'warn',
+      'vue/attribute-hyphenation': 'warn',
+      'vue/one-component-per-file': 'warn',
+      'vue/v-bind-style': 'warn',
+      'vue/v-on-style': 'warn',
+      'vue/v-slot-style': 'warn',
+      'vue/no-unused-components': 'warn',
+      'vue/no-side-effects-in-computed-properties': 'off', // FIXME enable this later (P1)
+      'vue/no-mutating-props': 'off', // FIXME enable this later (P1)
+      'vue/no-undef-components': 'warn',
+      'vue/multi-word-component-names': 'off', // TODO enable this later (P3)
+    },
+  },
+];
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -15,6 +15,7 @@
       >
     </noscript>
     <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
     <script type="text/javascript">
       (function () {
         if (!sessionStorage.length) {