Migrate cypress to cypress 10.0

This commit is contained in:
Matthias 2022-06-08 20:49:19 +02:00
parent e38a86e735
commit 146f68deaa
16 changed files with 97 additions and 22 deletions

22
cypress.config.ts Normal file
View File

@ -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',
},
});

View File

@ -1,8 +0,0 @@
{
"testFiles": "**/*.spec.ts",
"baseUrl": "http://localhost:3000",
"video": false,
"component": {
"componentFolder": "src"
}
}

View File

@ -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>
// }
// }
// }

View File

@ -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>

View File

@ -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)

View File

@ -6,7 +6,7 @@
],
},
"include": [
"integration/*.ts",
"integration/*.tsx"
"e2e/*.ts",
"e2e/*.tsx"
],
}

View File

@ -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",

View File

@ -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,

View File

@ -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');
});

View File

@ -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,
},

View File

@ -29,6 +29,7 @@
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"cypress/support/*.ts",
],
"exclude": [
"node_modules",