Migrate cypress to cypress 10.0

2024-11-21 23:53:52 +00:00 · 2022-06-08 20:49:19 +02:00 · 2022-06-08 20:49:19 +02:00 · 146f68deaa
commit 146f68deaa
parent e38a86e735
16 changed files with 97 additions and 22 deletions
--- a/cypress.config.ts
+++ b/cypress.config.ts
@ -0,0 +1,22 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  video: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+    specPattern: 'cypress/e2e/**/*.spec.ts',
+    baseUrl: 'http://localhost:3000',
+  },
+  component: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite',
+    },
+    // setupNodeEvents(on, config) {},
+    specPattern: 'src/**/*.spec.ts',
+  },
+});
--- a/cypress.json
+++ b/cypress.json
@ -1,8 +0,0 @@
-{
-    "testFiles": "**/*.spec.ts",
-    "baseUrl": "http://localhost:3000",
-    "video": false,
-    "component": {
-        "componentFolder": "src"
-    }
-}
--- a/cypress/integration/backtesting.spec.ts
+++ b/cypress/integration/backtesting.spec.ts
--- a/cypress/integration/helpers.ts
+++ b/cypress/integration/helpers.ts
--- a/cypress/integration/login.spec.ts
+++ b/cypress/integration/login.spec.ts
--- a/cypress/integration/settings.spec.ts
+++ b/cypress/integration/settings.spec.ts
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@ -1,5 +1,6 @@
+/// <reference types="cypress" />
 // ***********************************************
-// This example commands.js shows you how to
+// This example commands.ts shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
@ -23,3 +24,14 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue2';
+
+// 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 mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(MyComponent)
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
--- a/cypress/tsconfig.json
+++ b/cypress/tsconfig.json
@ -6,7 +6,7 @@
    ],
  },
  "include": [
-    "integration/*.ts",
-    "integration/*.tsx"
+    "e2e/*.ts",
+    "e2e/*.tsx"
  ],
 }
--- a/package.json
+++ b/package.json
@ -13,7 +13,7 @@
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "cy:open-ct": "cypress open-ct",
-    "cy:run-ct": "cypress run-ct"
+    "cy:run-ct": "cypress run --component"
  },
  "dependencies": {
    "@vue/composition-api": "^1.6.2",
--- a/src/components/general/ProfitPill.spec.ts
+++ b/src/components/general/ProfitPill.spec.ts
@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue';
 import ProfitPill from './ProfitPill.vue';
 import { createLocalVue } from '@vue/test-utils';

@ -9,7 +8,7 @@ localVue.use(VueCompositionAPI);

 describe('ProfitPill.vue', () => {
  it('Shows a Green pill with positive profits', () => {
-    mount(ProfitPill, {
+    cy.mount(ProfitPill, {
      localVue,
      propsData: {
        profitRatio: 0.051,
@ -24,7 +23,7 @@ describe('ProfitPill.vue', () => {
    cy.get('span').should('have.attr', 'title', 'USDT');
  });
  it('Shows a Red pill with positive profits', () => {
-    mount(ProfitPill, {
+    cy.mount(ProfitPill, {
      localVue,
      propsData: {
        profitRatio: -0.1,
@ -41,7 +40,7 @@ describe('ProfitPill.vue', () => {
    cy.get('span').should('have.attr', 'title', 'USDT');
  });
  it('Shows a pill with 0.0 profits.', () => {
-    mount(ProfitPill, {
+    cy.mount(ProfitPill, {
      localVue,
      propsData: {
        profitRatio: 0.0,
@ -57,7 +56,7 @@ describe('ProfitPill.vue', () => {
    cy.get('span').should('have.attr', 'title', 'BTC');
  });
  it('Shows a pill without relative profits.', () => {
-    mount(ProfitPill, {
+    cy.mount(ProfitPill, {
      localVue,
      propsData: {
        profitRatio: undefined,
--- a/src/components/general/ProfitSymbol.spec.ts
+++ b/src/components/general/ProfitSymbol.spec.ts
@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue';
 import ProfitSymbol from '@/components/general/ProfitSymbol.vue';
 import { createLocalVue } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
@ -8,13 +7,13 @@ localVue.use(VueCompositionAPI);

 describe('ProfitSymbol.vue', () => {
  it('calculates isProfitable with negative profit', () => {
-    mount(ProfitSymbol, { localVue, propsData: { profit: -0.5 } });
+    cy.mount(ProfitSymbol, { localVue, 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', () => {
-    mount(ProfitSymbol, { localVue, propsData: { profit: 0.5 } });
+    cy.mount(ProfitSymbol, { localVue, propsData: { profit: 0.5 } });
    cy.get('div').should('have.class', 'triangle-up');
    cy.get('div').should('not.have.class', 'triangle-down');
  });
--- a/src/components/general/ValuePair.spec.ts
+++ b/src/components/general/ValuePair.spec.ts
@ -1,9 +1,8 @@
-import { mount } from '@cypress/vue';
 import ValuePair from './ValuePair.vue';

 it('renders a message', () => {
  const msg = 'Test description';
-  mount(ValuePair, {
+  cy.mount(ValuePair, {
    propsData: {
      description: msg,
    },
--- a/tsconfig.json
+++ b/tsconfig.json
@ -29,6 +29,7 @@
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
+    "cypress/support/*.ts",
  ],
  "exclude": [
      "node_modules",