Fix component tests

Author: xmatthias

cypress/support/component.ts

@@ -19,23 +19,23 @@ import './commands';
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/vue2';
-// Vue2.7 Workaround to have proper types
-import { mount as mount3 } from 'cypress/vue';
+import { mount } from 'cypress/vue';
 
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount3;
+      mount: typeof mount;
     }
   }
 }
 
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+// import '../../src/assets/main.css';
+
 Cypress.Commands.add('mount', mount);
 
 // Example use:
-// cy.mount(MyComponent)
+// cy.mount(MyComponent);s

package.json

@@ -36,11 +36,11 @@
     "vue-material-design-icons": "^5.1.2",
     "vue-router": "^4.1.6",
     "vue-select": "^4.0.0-beta.5",
-    "vue3-drr-grid-layout": "^1.9.6"
+    "vue3-drr-grid-layout": "^1.9.7"
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "^4.0.1",
-    "@cypress/vue": "^2.2.3",
+    "@cypress/vue": "^5.0.2",
     "@types/echarts": "^4.9.16",
     "@types/jest": "^27.5.0",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
@@ -50,7 +50,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.1.0",
     "@vue/runtime-dom": "^3.2.45",
-    "@vue/test-utils": "^1.3.3",
+    "@vue/test-utils": "^2.2.4",
     "cypress": "^10.3.0",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.4.1",

src/components/general/ProfitPill.cy.ts

@@ -1,12 +1,8 @@
 import ProfitPill from './ProfitPill.vue';
-import { createLocalVue } from '@vue/test-utils';
-
-const localVue = createLocalVue();
 
 describe('ProfitPill.vue', () => {
   it('Shows a Green pill with positive profits', () => {
     cy.mount(ProfitPill, {
-      localVue,
       propsData: {
         profitRatio: 0.051,
         profitAbs: 0.1,
@@ -21,7 +17,6 @@ describe('ProfitPill.vue', () => {
   });
   it('Shows a Red pill with positive profits', () => {
     cy.mount(ProfitPill, {
-      localVue,
       propsData: {
         profitRatio: -0.1,
         profitAbs: -0.1,
@@ -38,7 +33,6 @@ describe('ProfitPill.vue', () => {
   });
   it('Shows a pill with 0.0 profits.', () => {
     cy.mount(ProfitPill, {
-      localVue,
       propsData: {
         profitRatio: 0.0,
         profitAbs: 0.0,
@@ -54,7 +48,6 @@ describe('ProfitPill.vue', () => {
   });
   it('Shows a pill without relative profits.', () => {
     cy.mount(ProfitPill, {
-      localVue,
       propsData: {
         profitRatio: undefined,
         profitAbs: 223,

src/components/general/ProfitSymbol.cy.ts

@@ -1,17 +1,14 @@
 import ProfitSymbol from '@/components/general/ProfitSymbol.vue';
-import { createLocalVue } from '@vue/test-utils';
-
-const localVue = createLocalVue();
 
 describe('ProfitSymbol.vue', () => {
   it('calculates isProfitable with negative profit', () => {
-    cy.mount(ProfitSymbol, { localVue, propsData: { profit: -0.5 } });
+    cy.mount(ProfitSymbol, { propsData: { profit: -0.5 } });
 
     cy.get('div').should('have.class', 'triangle-down');
     cy.get('div').should('not.have.class', 'triangle-up');
   });
   it('calculates isProfitable with positive profit', () => {
-    cy.mount(ProfitSymbol, { localVue, propsData: { profit: 0.5 } });
+    cy.mount(ProfitSymbol, { propsData: { profit: 0.5 } });
     cy.get('div').should('have.class', 'triangle-up');
     cy.get('div').should('not.have.class', 'triangle-down');
   });