From 84f7c0d19b4314b5f8a749cd55ac009c2080a53f Mon Sep 17 00:00:00 2001 From: Chris Breiding Date: Fri, 9 Dec 2022 10:17:15 -0500 Subject: [PATCH 1/4] chore: add eslint config to system-test project fixtures [run ci] --- system-tests/project-fixtures/.eslintrc.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 system-tests/project-fixtures/.eslintrc.json diff --git a/system-tests/project-fixtures/.eslintrc.json b/system-tests/project-fixtures/.eslintrc.json new file mode 100644 index 000000000000..03c9a6df3e71 --- /dev/null +++ b/system-tests/project-fixtures/.eslintrc.json @@ -0,0 +1,11 @@ +{ + "plugins": [ + "cypress" + ], + "env": { + "cypress/globals": true + }, + "rules": { + "mocha/no-global-tests": "off" + } +} From e641b32b82e06749dd29b2c3571a20d117e69621 Mon Sep 17 00:00:00 2001 From: Chris Breiding Date: Fri, 9 Dec 2022 10:21:33 -0500 Subject: [PATCH 2/4] lint-fix system-tests project fixtures [run ci] --- system-tests/project-fixtures/cra/src/App.js | 10 +- .../project-fixtures/cra/src/index.js | 12 +- .../project-fixtures/next/cypress.config.js | 14 +- .../project-fixtures/next/pages/_app.js | 2 +- .../project-fixtures/next/pages/api/hello.js | 2 +- .../project-fixtures/next/pages/index.cy.js | 4 +- .../project-fixtures/next/pages/index.js | 2 +- .../project-fixtures/next/pages/styles.cy.js | 4 +- .../nuxtjs2/components/Tutorial.cy.js | 2 +- .../react/cypress/support/component.js | 2 +- .../project-fixtures/react/vite.config.js | 6 +- .../project-fixtures/react/webpack.config.js | 4 +- .../svelte/cypress/support/component.js | 6 +- .../project-fixtures/svelte/src/App.cy.js | 2 +- .../project-fixtures/svelte/src/errors.cy.js | 3 +- .../project-fixtures/svelte/src/main.js | 10 +- .../project-fixtures/svelte/src/mount.cy.js | 137 +++++++++--------- .../project-fixtures/svelte/src/store.js | 4 +- .../vue-cli/src/components/Errors.cy.js | 7 +- .../project-fixtures/vue/cypress.config.js | 6 +- .../vue/cypress/support/component.js | 2 +- system-tests/project-fixtures/vue/src/main.js | 6 +- .../project-fixtures/vue/src/mount.cy.js | 38 ++--- .../vue2-cli/cypress.config.js | 6 +- .../vue2-cli/src/components/HelloWorld.cy.js | 4 +- 25 files changed, 147 insertions(+), 148 deletions(-) diff --git a/system-tests/project-fixtures/cra/src/App.js b/system-tests/project-fixtures/cra/src/App.js index 37845757234c..8c308860b286 100644 --- a/system-tests/project-fixtures/cra/src/App.js +++ b/system-tests/project-fixtures/cra/src/App.js @@ -1,7 +1,7 @@ -import logo from './logo.svg'; -import './App.css'; +import logo from './logo.svg' +import './App.css' -function App() { +function App () { return (
@@ -19,7 +19,7 @@ function App() {
- ); + ) } -export default App; +export default App diff --git a/system-tests/project-fixtures/cra/src/index.js b/system-tests/project-fixtures/cra/src/index.js index 6832e7832bb9..3992ef9741fa 100644 --- a/system-tests/project-fixtures/cra/src/index.js +++ b/system-tests/project-fixtures/cra/src/index.js @@ -1,11 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; +import React from 'react' +import ReactDOM from 'react-dom' +import './index.css' +import App from './App' ReactDOM.render( , - document.getElementById('root') -); + document.getElementById('root'), +) diff --git a/system-tests/project-fixtures/next/cypress.config.js b/system-tests/project-fixtures/next/cypress.config.js index a014136565d7..12789d595ea5 100644 --- a/system-tests/project-fixtures/next/cypress.config.js +++ b/system-tests/project-fixtures/next/cypress.config.js @@ -1,4 +1,4 @@ -const path = require('path'); +const path = require('path') module.exports = { component: { @@ -10,12 +10,12 @@ module.exports = { resolve: { alias: { 'react': path.resolve(__dirname, './node_modules/react'), - } - } - } - } + }, + }, + }, + }, }, // These tests should run quickly / fail quickly, // since we intentionally causing error states for testing - defaultCommandTimeout: 1000 -} \ No newline at end of file + defaultCommandTimeout: 1000, +} diff --git a/system-tests/project-fixtures/next/pages/_app.js b/system-tests/project-fixtures/next/pages/_app.js index 1e1cec92425c..70177469016e 100644 --- a/system-tests/project-fixtures/next/pages/_app.js +++ b/system-tests/project-fixtures/next/pages/_app.js @@ -1,6 +1,6 @@ import '../styles/globals.css' -function MyApp({ Component, pageProps }) { +function MyApp ({ Component, pageProps }) { return } diff --git a/system-tests/project-fixtures/next/pages/api/hello.js b/system-tests/project-fixtures/next/pages/api/hello.js index df63de88fa67..7c146eb9d1dd 100644 --- a/system-tests/project-fixtures/next/pages/api/hello.js +++ b/system-tests/project-fixtures/next/pages/api/hello.js @@ -1,5 +1,5 @@ // Next.js API route support: https://nextjs.org/docs/api-routes/introduction -export default function handler(req, res) { +export default function handler (req, res) { res.status(200).json({ name: 'John Doe' }) } diff --git a/system-tests/project-fixtures/next/pages/index.cy.js b/system-tests/project-fixtures/next/pages/index.cy.js index a25939792f57..06baccbdb20a 100644 --- a/system-tests/project-fixtures/next/pages/index.cy.js +++ b/system-tests/project-fixtures/next/pages/index.cy.js @@ -1,5 +1,5 @@ -import { mount } from "cypress/react" -import Index from "./index.js" +import { mount } from 'cypress/react' +import Index from './index.js' describe('', () => { it('renders', () => { diff --git a/system-tests/project-fixtures/next/pages/index.js b/system-tests/project-fixtures/next/pages/index.js index 08145bba9a57..8bb426e44435 100644 --- a/system-tests/project-fixtures/next/pages/index.js +++ b/system-tests/project-fixtures/next/pages/index.js @@ -2,7 +2,7 @@ import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Home.module.css' -export default function Home() { +export default function Home () { return (
diff --git a/system-tests/project-fixtures/next/pages/styles.cy.js b/system-tests/project-fixtures/next/pages/styles.cy.js index 5f271282f60f..9cc1614575e7 100644 --- a/system-tests/project-fixtures/next/pages/styles.cy.js +++ b/system-tests/project-fixtures/next/pages/styles.cy.js @@ -1,5 +1,5 @@ -import { mount } from "cypress/react" -import Index from "./index.js" +import { mount } from 'cypress/react' +import Index from './index.js' describe('', () => { it('renders', () => { diff --git a/system-tests/project-fixtures/nuxtjs2/components/Tutorial.cy.js b/system-tests/project-fixtures/nuxtjs2/components/Tutorial.cy.js index a4165cf9ba5a..cd167f958fff 100644 --- a/system-tests/project-fixtures/nuxtjs2/components/Tutorial.cy.js +++ b/system-tests/project-fixtures/nuxtjs2/components/Tutorial.cy.js @@ -4,4 +4,4 @@ import Tutorial from './Tutorial.vue' it('works', () => { mount(Tutorial) cy.contains('Nuxt') -}) \ No newline at end of file +}) diff --git a/system-tests/project-fixtures/react/cypress/support/component.js b/system-tests/project-fixtures/react/cypress/support/component.js index 9ee2088c168f..fd025808277a 100644 --- a/system-tests/project-fixtures/react/cypress/support/component.js +++ b/system-tests/project-fixtures/react/cypress/support/component.js @@ -2,4 +2,4 @@ import { mount } from 'cypress/react' import './backgroundColor.css' -Cypress.Commands.add('mount', mount) \ No newline at end of file +Cypress.Commands.add('mount', mount) diff --git a/system-tests/project-fixtures/react/vite.config.js b/system-tests/project-fixtures/react/vite.config.js index c02c21ec919f..821584d5cef7 100644 --- a/system-tests/project-fixtures/react/vite.config.js +++ b/system-tests/project-fixtures/react/vite.config.js @@ -1,4 +1,4 @@ -const {defineConfig} = require('vite') +const { defineConfig } = require('vite') module.exports = defineConfig({ resolve: { @@ -7,5 +7,5 @@ module.exports = defineConfig({ 'react-dom': require.resolve('react-dom'), }, }, - logLevel: 'silent' -}) \ No newline at end of file + logLevel: 'silent', +}) diff --git a/system-tests/project-fixtures/react/webpack.config.js b/system-tests/project-fixtures/react/webpack.config.js index 98abeb94798f..33cc1047a3c0 100644 --- a/system-tests/project-fixtures/react/webpack.config.js +++ b/system-tests/project-fixtures/react/webpack.config.js @@ -1,4 +1,5 @@ const path = require('path') + /** * @type {import('webpack').Configuration} */ @@ -24,6 +25,5 @@ module.exports = { use: ['style-loader', 'css-loader'], }, ], - } + }, } - diff --git a/system-tests/project-fixtures/svelte/cypress/support/component.js b/system-tests/project-fixtures/svelte/cypress/support/component.js index e545642795cf..90c8c1ce0a01 100644 --- a/system-tests/project-fixtures/svelte/cypress/support/component.js +++ b/system-tests/project-fixtures/svelte/cypress/support/component.js @@ -1,4 +1,4 @@ -import { mount } from "cypress/svelte"; -import "../../src/styles.css" +import { mount } from 'cypress/svelte' +import '../../src/styles.css' -Cypress.Commands.add("mount", mount); +Cypress.Commands.add('mount', mount) diff --git a/system-tests/project-fixtures/svelte/src/App.cy.js b/system-tests/project-fixtures/svelte/src/App.cy.js index eb0a1ca14db7..ca7442db15f9 100644 --- a/system-tests/project-fixtures/svelte/src/App.cy.js +++ b/system-tests/project-fixtures/svelte/src/App.cy.js @@ -7,4 +7,4 @@ it('should render with style', () => { cy.get('.very-red').should('have.css', 'color', 'rgb(255, 0, 0)') // Verify local styles cy.get('.very-blue').should('have.css', 'color', 'rgb(0, 0, 255)') -}) \ No newline at end of file +}) diff --git a/system-tests/project-fixtures/svelte/src/errors.cy.js b/system-tests/project-fixtures/svelte/src/errors.cy.js index daa69b572be6..5680661bf468 100644 --- a/system-tests/project-fixtures/svelte/src/errors.cy.js +++ b/system-tests/project-fixtures/svelte/src/errors.cy.js @@ -1,7 +1,6 @@ import Errors from './Errors.svelte' describe('Errors', () => { - it('error on mount', () => { cy.mount(Errors, { props: { throwError: true } }) }) @@ -20,4 +19,4 @@ describe('Errors', () => { cy.mount(Errors) cy.get('element-that-does-not-exist') }) -}) \ No newline at end of file +}) diff --git a/system-tests/project-fixtures/svelte/src/main.js b/system-tests/project-fixtures/svelte/src/main.js index 1e9065b459ac..45a655eaa71d 100644 --- a/system-tests/project-fixtures/svelte/src/main.js +++ b/system-tests/project-fixtures/svelte/src/main.js @@ -1,8 +1,8 @@ -import App from "./App.svelte"; -import "./styles.css"; +import App from './App.svelte' +import './styles.css' const app = new App({ - target: document.getElementById("app"), -}); + target: document.getElementById('app'), +}) -export default app; +export default app diff --git a/system-tests/project-fixtures/svelte/src/mount.cy.js b/system-tests/project-fixtures/svelte/src/mount.cy.js index 9e1db9b1b1c0..6aa6564c6823 100644 --- a/system-tests/project-fixtures/svelte/src/mount.cy.js +++ b/system-tests/project-fixtures/svelte/src/mount.cy.js @@ -1,98 +1,99 @@ -import Counter from './Counter.svelte'; -import Context from './Context.svelte'; -import Store from './Store.svelte'; -import { messageStore } from './store'; +import Counter from './Counter.svelte' +import Context from './Context.svelte' +import Store from './Store.svelte' +import { messageStore } from './store' describe('Svelte mount', () => { it('mounts', () => { cy.mount(Counter) - cy.contains('h1', 'Count is 0'); - }); + cy.contains('h1', 'Count is 0') + }) it('reacts to state changes', () => { - cy.mount(Counter); - cy.contains('h1', 'Count is 0'); - cy.get('button').click(); - cy.contains('h1', 'Count is 1'); - }); + cy.mount(Counter) + cy.contains('h1', 'Count is 0') + cy.get('button').click() + cy.contains('h1', 'Count is 1') + }) it('accepts props', () => { - cy.mount(Counter, { props: { count: 42 } }); - cy.contains('h1', 'Count is 42'); - }); + cy.mount(Counter, { props: { count: 42 } }) + cy.contains('h1', 'Count is 42') + }) it('accepts context', () => { - const payload = { msg: 'This value came from context!' }; - const context = new Map(); - context.set('myKey', payload); + const payload = { msg: 'This value came from context!' } + const context = new Map() - cy.mount(Context, { context }); - cy.contains('h1', payload.msg); - }); + context.set('myKey', payload) + + cy.mount(Context, { context }) + cy.contains('h1', payload.msg) + }) it('spies on outputs', () => { cy.mount(Counter).then(({ component }) => { - component.$on('change', cy.spy().as('changeSpy')); - cy.get('button').click(); - cy.get('@changeSpy').should('have.been.called'); - }); - }); + component.$on('change', cy.spy().as('changeSpy')) + cy.get('button').click() + cy.get('@changeSpy').should('have.been.called') + }) + }) it('anchors mounted component', () => { - cy.mount(Counter, { anchor: document.getElementById('anchor') }); - cy.get('[data-cy-root]').children().last().should('have.id', 'anchor'); - }); + cy.mount(Counter, { anchor: document.getElementById('anchor') }) + cy.get('[data-cy-root]').children().last().should('have.id', 'anchor') + }) it('reactive to writables', () => { - cy.mount(Store); - cy.contains('h1', 'Hello World!'); + cy.mount(Store) + cy.contains('h1', 'Hello World!') - cy.get('input').clear().type('New Message'); - cy.contains('h1', 'New Message'); + cy.get('input').clear().type('New Message') + cy.contains('h1', 'New Message') - cy.then(() => messageStore.set('Written from spec')); - cy.contains('h1', 'Written from spec'); - }); + cy.then(() => messageStore.set('Written from spec')) + cy.contains('h1', 'Written from spec') + }) context('log', () => { it('displays component name in mount log', () => { - cy.mount(Counter); - - cy.wrap(Cypress.$(window.top.document.body)).within(() => - cy - .contains('displays component name in mount log') - .closest('.collapsible') - .click() - .within(() => - cy - .get('.command-name-mount') - .should('contain', 'mount') - ) - ); - }); + cy.mount(Counter) + + cy.wrap(Cypress.$(window.top.document.body)).within(() => { + return cy + .contains('displays component name in mount log') + .closest('.collapsible') + .click() + .within(() => { + return cy + .get('.command-name-mount') + .should('contain', 'mount') + }) + }) + }) it('does not display mount log', () => { - cy.mount(Counter, { log: false }); - - cy.wrap(Cypress.$(window.top.document.body)).within(() => - cy - .contains('does not display mount log') - .closest('.collapsible') - .click() - .within(() => cy.get('.command-name-mount').should('not.exist')) - ); - }); - }); - + cy.mount(Counter, { log: false }) + + cy.wrap(Cypress.$(window.top.document.body)).within(() => { + return cy + .contains('does not display mount log') + .closest('.collapsible') + .click() + .within(() => cy.get('.command-name-mount').should('not.exist')) + }) + }) + }) it('throws error when receiving removed mounting option', () => { Cypress.on('fail', (e) => { expect(e.message).to.contain('The `styles` mounting option is no longer supported.') + return false }) - cy.mount(Counter, { - styles: `body { background: red; }` + cy.mount(Counter, { + styles: `body { background: red; }`, }) }) @@ -103,17 +104,17 @@ describe('Svelte mount', () => { }) it('should mount', () => { - cy.mount(Counter); - }); + cy.mount(Counter) + }) it('should remove previous mounted component', () => { - cy.mount(Counter); + cy.mount(Counter) cy.contains('h1', 'Count is 0') - cy.mount(Counter, {props: { count: 42 }}) + cy.mount(Counter, { props: { count: 42 } }) cy.contains('h1', 'Count is 42') cy.contains('h1', 'Count is 0').should('not.exist') cy.get('[data-cy-root]').children().should('have.length', 2) }) }) -}); +}) diff --git a/system-tests/project-fixtures/svelte/src/store.js b/system-tests/project-fixtures/svelte/src/store.js index 3553aaeef4c6..5e7ae6f9d043 100644 --- a/system-tests/project-fixtures/svelte/src/store.js +++ b/system-tests/project-fixtures/svelte/src/store.js @@ -1,3 +1,3 @@ -import { writable } from "svelte/store"; +import { writable } from 'svelte/store' -export const messageStore = writable("Hello World!"); +export const messageStore = writable('Hello World!') diff --git a/system-tests/project-fixtures/vue-cli/src/components/Errors.cy.js b/system-tests/project-fixtures/vue-cli/src/components/Errors.cy.js index 8a2afd467637..72cda3701355 100644 --- a/system-tests/project-fixtures/vue-cli/src/components/Errors.cy.js +++ b/system-tests/project-fixtures/vue-cli/src/components/Errors.cy.js @@ -2,12 +2,11 @@ import Errors from './Errors.vue' import { mount } from 'cypress/vue' describe('Errors', () => { - it('error on mount', () => { mount(Errors, { propsData: { - throwError: true - } + throwError: true, + }, }) }) @@ -25,4 +24,4 @@ describe('Errors', () => { mount(Errors) cy.get('element-that-does-not-exist') }) -}) \ No newline at end of file +}) diff --git a/system-tests/project-fixtures/vue/cypress.config.js b/system-tests/project-fixtures/vue/cypress.config.js index 00667cbf4ba5..6aad897723a8 100644 --- a/system-tests/project-fixtures/vue/cypress.config.js +++ b/system-tests/project-fixtures/vue/cypress.config.js @@ -4,7 +4,7 @@ export default defineConfig({ component: { devServer: { framework: 'vue', - bundler: 'vite' - } + bundler: 'vite', + }, }, -}) \ No newline at end of file +}) diff --git a/system-tests/project-fixtures/vue/cypress/support/component.js b/system-tests/project-fixtures/vue/cypress/support/component.js index 02df2616980b..3d00bec0dfc8 100644 --- a/system-tests/project-fixtures/vue/cypress/support/component.js +++ b/system-tests/project-fixtures/vue/cypress/support/component.js @@ -1,3 +1,3 @@ import { mount } from 'cypress/vue' -Cypress.Commands.add('mount', mount) \ No newline at end of file +Cypress.Commands.add('mount', mount) diff --git a/system-tests/project-fixtures/vue/src/main.js b/system-tests/project-fixtures/vue/src/main.js index b670de8b8da5..01433bca2ac7 100644 --- a/system-tests/project-fixtures/vue/src/main.js +++ b/system-tests/project-fixtures/vue/src/main.js @@ -1,4 +1,4 @@ -import { createApp } from "vue"; -import App from "./App.vue"; +import { createApp } from 'vue' +import App from './App.vue' -createApp(App).mount("#app"); +createApp(App).mount('#app') diff --git a/system-tests/project-fixtures/vue/src/mount.cy.js b/system-tests/project-fixtures/vue/src/mount.cy.js index 8f206ded0e05..2b7986caa47a 100644 --- a/system-tests/project-fixtures/vue/src/mount.cy.js +++ b/system-tests/project-fixtures/vue/src/mount.cy.js @@ -1,26 +1,26 @@ -import HelloWorld from "./components/HelloWorld.vue"; +import HelloWorld from './components/HelloWorld.vue' -describe("mount", () => { - context("teardown", () => { +describe('mount', () => { + context('teardown', () => { beforeEach(() => { - cy.get("[data-cy-root]").children().should("have.length", 0); - }); + cy.get('[data-cy-root]').children().should('have.length', 0) + }) - it("should mount", () => { - cy.mount(HelloWorld); - }); + it('should mount', () => { + cy.mount(HelloWorld) + }) - it("should remove previous mounted component", () => { + it('should remove previous mounted component', () => { // hack for vue2 vs vue mount - const props = (props) => ({props, propsData: props}) + const props = (props) => ({ props, propsData: props }) - cy.mount(HelloWorld, props({ msg: "Render 1" })); - cy.contains("h1", "Render 1"); - cy.mount(HelloWorld, props({ msg: "Render 2" })); - cy.contains("h1", "Render 2"); + cy.mount(HelloWorld, props({ msg: 'Render 1' })) + cy.contains('h1', 'Render 1') + cy.mount(HelloWorld, props({ msg: 'Render 2' })) + cy.contains('h1', 'Render 2') - cy.contains("h1", "Render 1").should("not.exist"); - cy.get("[data-cy-root]").children().should("have.length", 1); - }); - }); -}); + cy.contains('h1', 'Render 1').should('not.exist') + cy.get('[data-cy-root]').children().should('have.length', 1) + }) + }) +}) diff --git a/system-tests/project-fixtures/vue2-cli/cypress.config.js b/system-tests/project-fixtures/vue2-cli/cypress.config.js index 39d4613c7072..149ec7983b0e 100644 --- a/system-tests/project-fixtures/vue2-cli/cypress.config.js +++ b/system-tests/project-fixtures/vue2-cli/cypress.config.js @@ -2,10 +2,10 @@ module.exports = { component: { devServer: { framework: 'vue-cli', - bundler: 'webpack' - } + bundler: 'webpack', + }, }, // These tests should run quickly / fail quickly, // since we intentionally causing error states for testing - defaultCommandTimeout: 1000 + defaultCommandTimeout: 1000, } diff --git a/system-tests/project-fixtures/vue2-cli/src/components/HelloWorld.cy.js b/system-tests/project-fixtures/vue2-cli/src/components/HelloWorld.cy.js index c705937e5ea9..3d60f47b2e99 100644 --- a/system-tests/project-fixtures/vue2-cli/src/components/HelloWorld.cy.js +++ b/system-tests/project-fixtures/vue2-cli/src/components/HelloWorld.cy.js @@ -11,9 +11,9 @@ describe('', () => { }, data () { return { - foo: 'bar' + foo: 'bar', } - } + }, }) .then(({ wrapper, component }) => { expect(wrapper.find('.hello').text()).to.contain(slotContent) From 184b77dbd566e5b96a0221273394db630480fa40 Mon Sep 17 00:00:00 2001 From: Chris Breiding Date: Fri, 9 Dec 2022 11:26:10 -0500 Subject: [PATCH 3/4] fix test --- packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts b/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts index a41c697ca0a3..5c3ee15c4c99 100644 --- a/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts +++ b/packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts @@ -265,8 +265,8 @@ describe('Vue', { 'Timed out retrying', 'element-that-does-not-exist', ], - codeFrameRegex: /Errors\.cy\.js:26/, - stackRegex: /Errors\.cy\.js:26/, + codeFrameRegex: /Errors\.cy\.js:25/, + stackRegex: /Errors\.cy\.js:25/, }) }) }) From c862d66cae912c1519e5f8fbb945067b64e575a3 Mon Sep 17 00:00:00 2001 From: Chris Breiding Date: Fri, 9 Dec 2022 14:23:19 -0500 Subject: [PATCH 4/4] re-run