From 57659c42468591265143aae2ff06bae4e440085f Mon Sep 17 00:00:00 2001 From: Lachlan Miller Date: Sat, 9 Apr 2022 00:37:18 +1000 Subject: [PATCH] feat: vue-cli and nuxt preset for CT object API architecture (#20956) --- .../cypress/components/vue/Card/Card.cy.js | 19 +- .../cypress/component/basic/slots/Card.cy.js | 15 +- .../basic/small-examples/AppInput.cy.js | 11 +- npm/vue/package.json | 2 +- .../cypress/e2e/nuxt.cy.ts | 31 + .../cypress/e2e/vue-cli.cy.ts | 29 + npm/webpack-dev-server-fresh/src/devServer.ts | 19 +- .../src/helpers/nuxtHandler.ts | 26 + .../helpers/sourceRelativeWebpackModules.ts | 15 +- .../src/helpers/vueCliHandler.ts | 24 + .../src/makeWebpackConfig.ts | 58 +- .../test/devServer-unit.spec.ts | 16 +- .../test/handlers/nuxtHandler.spec.ts | 23 + .../test/handlers/vueCliHandler.spec.ts | 38 + .../test/test-helpers/scaffoldProject.ts | 13 + .../cypress/e2e/support/e2eProjectDirs.ts | 181 + .../nuxtjs2/components/Tutorial.cy.js | 7 + .../nuxtjs2/components/Tutorial.vue | 11 + .../nuxtjs2/cypress.config.js | 8 + .../cypress/support/component-index.html | 12 + .../nuxtjs2/cypress/support/component.js | 0 .../project-fixtures/nuxtjs2/nuxt.config.js | 1 + .../project-fixtures/nuxtjs2/pages/index.vue | 9 + .../vue-cli/cypress.config.js | 8 + .../cypress/support/component-index.html | 12 + .../vue-cli/cypress/support/component.js | 0 .../vue-cli/public/index.html | 17 + .../vue-cli/src/components/HelloWorld.cy.js | 16 + .../vue-cli/src/components/HelloWorld.vue | 56 + system-tests/projects/nuxtjs2/package.json | 11 + system-tests/projects/nuxtjs2/yarn.lock | 7908 +++++++++++++++++ .../projects/vuecli4-vue2/package.json | 10 + system-tests/projects/vuecli4-vue2/yarn.lock | 6768 ++++++++++++++ .../projects/vuecli4-vue3/package.json | 10 + system-tests/projects/vuecli4-vue3/yarn.lock | 6897 ++++++++++++++ .../projects/vuecli5-vue3/package.json | 9 + system-tests/projects/vuecli5-vue3/yarn.lock | 4205 +++++++++ yarn.lock | 8 +- 38 files changed, 26450 insertions(+), 53 deletions(-) create mode 100644 npm/webpack-dev-server-fresh/cypress/e2e/nuxt.cy.ts create mode 100644 npm/webpack-dev-server-fresh/cypress/e2e/vue-cli.cy.ts create mode 100644 npm/webpack-dev-server-fresh/src/helpers/nuxtHandler.ts create mode 100644 npm/webpack-dev-server-fresh/src/helpers/vueCliHandler.ts create mode 100644 npm/webpack-dev-server-fresh/test/handlers/nuxtHandler.spec.ts create mode 100644 npm/webpack-dev-server-fresh/test/handlers/vueCliHandler.spec.ts create mode 100644 npm/webpack-dev-server-fresh/test/test-helpers/scaffoldProject.ts create mode 100644 packages/frontend-shared/cypress/e2e/support/e2eProjectDirs.ts create mode 100644 system-tests/project-fixtures/nuxtjs2/components/Tutorial.cy.js create mode 100644 system-tests/project-fixtures/nuxtjs2/components/Tutorial.vue create mode 100644 system-tests/project-fixtures/nuxtjs2/cypress.config.js create mode 100644 system-tests/project-fixtures/nuxtjs2/cypress/support/component-index.html create mode 100644 system-tests/project-fixtures/nuxtjs2/cypress/support/component.js create mode 100644 system-tests/project-fixtures/nuxtjs2/nuxt.config.js create mode 100644 system-tests/project-fixtures/nuxtjs2/pages/index.vue create mode 100644 system-tests/project-fixtures/vue-cli/cypress.config.js create mode 100644 system-tests/project-fixtures/vue-cli/cypress/support/component-index.html create mode 100644 system-tests/project-fixtures/vue-cli/cypress/support/component.js create mode 100644 system-tests/project-fixtures/vue-cli/public/index.html create mode 100644 system-tests/project-fixtures/vue-cli/src/components/HelloWorld.cy.js create mode 100644 system-tests/project-fixtures/vue-cli/src/components/HelloWorld.vue create mode 100644 system-tests/projects/nuxtjs2/package.json create mode 100644 system-tests/projects/nuxtjs2/yarn.lock create mode 100644 system-tests/projects/vuecli4-vue2/package.json create mode 100644 system-tests/projects/vuecli4-vue2/yarn.lock create mode 100644 system-tests/projects/vuecli4-vue3/package.json create mode 100644 system-tests/projects/vuecli4-vue3/yarn.lock create mode 100644 system-tests/projects/vuecli5-vue3/package.json create mode 100644 system-tests/projects/vuecli5-vue3/yarn.lock diff --git a/npm/vite-dev-server/cypress/components/vue/Card/Card.cy.js b/npm/vite-dev-server/cypress/components/vue/Card/Card.cy.js index 8e5368e709..b7d44306fc 100644 --- a/npm/vite-dev-server/cypress/components/vue/Card/Card.cy.js +++ b/npm/vite-dev-server/cypress/components/vue/Card/Card.cy.js @@ -4,9 +4,10 @@ // in the render options are directly passed through to the Utils mount(). /// -import { mount } from '@cypress/vue' +import { h } from 'vue' import Card from './Card.vue' +import { mount } from '@cypress/vue' describe('Card', () => { it('skipped slots', () => { @@ -15,10 +16,18 @@ describe('Card', () => { }) it('renders slots', () => { + // TODO: use HTML syntax (not render function with `h`) + // when it's working. + // Blocked by upstream bug in Test Utils: https://github.com/vuejs/test-utils/issues/1166 + // mount(Card, { + // slots: { + // header: `

HEADER

` + // }, + // }) mount(Card, { slots: { - header: '

HEADER

', - footer: '
FOOTER
', + header: () => h('h1', 'HEADER'), + footer: () => h('div', 'FOOTER'), }, }) @@ -29,9 +38,7 @@ describe('Card', () => { it('renders scopedSlots', () => { mount(Card, { slots: { - default: ``, + default: ({ content }) => h('div', {}, h('p', `Yay! ${content}`)), }, }) diff --git a/npm/vue/cypress/component/basic/slots/Card.cy.js b/npm/vue/cypress/component/basic/slots/Card.cy.js index 4b52823332..b7d44306fc 100644 --- a/npm/vue/cypress/component/basic/slots/Card.cy.js +++ b/npm/vue/cypress/component/basic/slots/Card.cy.js @@ -5,6 +5,7 @@ /// +import { h } from 'vue' import Card from './Card.vue' import { mount } from '@cypress/vue' @@ -15,10 +16,18 @@ describe('Card', () => { }) it('renders slots', () => { + // TODO: use HTML syntax (not render function with `h`) + // when it's working. + // Blocked by upstream bug in Test Utils: https://github.com/vuejs/test-utils/issues/1166 + // mount(Card, { + // slots: { + // header: `

HEADER

` + // }, + // }) mount(Card, { slots: { - header: '

HEADER

', - footer: '
FOOTER
', + header: () => h('h1', 'HEADER'), + footer: () => h('div', 'FOOTER'), }, }) @@ -29,7 +38,7 @@ describe('Card', () => { it('renders scopedSlots', () => { mount(Card, { slots: { - default: '', + default: ({ content }) => h('div', {}, h('p', `Yay! ${content}`)), }, }) diff --git a/npm/vue/cypress/component/basic/small-examples/AppInput.cy.js b/npm/vue/cypress/component/basic/small-examples/AppInput.cy.js index 6616f0409f..1e77838686 100644 --- a/npm/vue/cypress/component/basic/small-examples/AppInput.cy.js +++ b/npm/vue/cypress/component/basic/small-examples/AppInput.cy.js @@ -1,5 +1,6 @@ /// +import { h } from 'vue' import AppInput from './AppInput.vue' import { mount } from '@cypress/vue' @@ -11,7 +12,15 @@ it('renders label', () => { }, // passing slots to the component #364 slots: { - label: ``, + // TODO: use HTML syntax (not render function with `h`) + // when it's working. + // Blocked by upstream bug in Test Utils: https://github.com/vuejs/test-utils/issues/1166 + // mount(AppInput, { + // slots: { + // label: `