feat(launchpad): support for Vue CLI 5

.eslintignore

@@ -74,6 +74,9 @@ system-tests/projects/vueclivue2-configured/**/*
 system-tests/projects/vueclivue3-unconfigured/**/*
 system-tests/projects/vueclivue3-configured/**/*
 
+system-tests/projects/vuecli5vue3-unconfigured/**/*
+system-tests/projects/vuecli5vue3-configured/**/*
+
 system-tests/projects/vue3-vite-ts-unconfigured/**/*
 system-tests/projects/vue3-vite-ts-configured/**/*
 

packages/data-context/test/unit/sources/WizardDataSource.spec.ts

@@ -24,7 +24,7 @@ describe('packagesToInstall', () => {
     const ctx = createTestDataContext()
 
     ctx.coreData.currentProject = getCurrentProject('vueclivue2-unconfigured')
-    ctx.coreData.wizard.chosenFramework = 'vueclivue2'
+    ctx.coreData.wizard.chosenFramework = 'vuecli4vue2'
     ctx.coreData.wizard.chosenBundler = 'webpack4'
 
     const actual = await ctx.wizard.installDependenciesCommand()
@@ -36,14 +36,26 @@ describe('packagesToInstall', () => {
     const ctx = createTestDataContext()
 
     ctx.coreData.currentProject = getCurrentProject('vueclivue3-unconfigured')
-    ctx.coreData.wizard.chosenFramework = 'vueclivue3'
+    ctx.coreData.wizard.chosenFramework = 'vuecli4vue3'
     ctx.coreData.wizard.chosenBundler = 'webpack4'
 
     const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq(`npm install -D @cypress/vue@^3.0.0 webpack@^4.0.0 @cypress/webpack-dev-server@latest webpack-dev-server@^4.0.0 html-webpack-plugin@^4.0.0`)
   })
 
+  it('vuecli5vue3-unconfigured', async () => {
+    const ctx = createTestDataContext()
+
+    ctx.coreData.currentProject = getCurrentProject('vuecli5vue3-unconfigured')
+    ctx.coreData.wizard.chosenFramework = 'vuecli5vue3'
+    ctx.coreData.wizard.chosenBundler = 'webpack5'
+
+    const actual = await ctx.wizard.installDependenciesCommand()
+
+    expect(actual).to.eq(`npm install -D @cypress/vue@^3.0.0 webpack@^5.0.0 @cypress/webpack-dev-server@latest webpack-dev-server@^4.0.0 html-webpack-plugin@^5.0.0`)
+  })
+
   it('regular react project with vite', async () => {
     const ctx = createTestDataContext()
 

packages/frontend-shared/cypress/e2e/support/e2eProjectDirs.ts

@@ -48,6 +48,7 @@ export const e2eProjectDirs = [
   'migration-e2e-no-plugins-support-file',
   'migration-specs-already-migrated',
   'migration-typescript-project',
+  'module-api',
   'multiple-config-files-with-json',
   'multiple-support-files',
   'multiple-task-registrations',
@@ -131,6 +132,8 @@ export const e2eProjectDirs = [
   'vite-ct',
   'vue3-vite-ts-configured',
   'vue3-vite-ts-unconfigured',
+  'vuecli5vue3-configured',
+  'vuecli5vue3-unconfigured',
   'vueclivue2-configured',
   'vueclivue2-unconfigured',
   'vueclivue3-configured',

packages/graphql/schemas/schema.graphql

@@ -518,8 +518,10 @@ enum FrontendFrameworkEnum {
   react
   vue2
   vue3
-  vueclivue2
-  vueclivue3
+  vuecli4vue2
+  vuecli4vue3
+  vuecli5vue2
+  vuecli5vue3
 }
 
 """Error from generated spec"""

packages/launchpad/cypress/e2e/scaffold-component-testing.cy.ts

@@ -29,12 +29,12 @@ function fakeInstalledDeps () {
 }
 
 describe('scaffolding component testing', () => {
-  context('vueclivue2', () => {
-    it('scaffolds component testing for Vue CLI w/ Vue 2 project', () => {
+  context('vuecli4vue2', () => {
+    it('scaffolds component testing for Vue CLI 4 w/ Vue 2 project', () => {
       startSetupFor('vueclivue2-unconfigured')
 
       // should detect correctly
-      cy.get('button').should('be.visible').contains('Vue CLI (Vue 2)(detected)')
+      cy.get('button').should('be.visible').contains('Vue CLI 4 (Vue 2)(detected)')
       cy.get('button').contains('Next Step').click()
 
       fakeInstalledDeps()
@@ -44,12 +44,27 @@ describe('scaffolding component testing', () => {
     })
   })
 
-  context('vueclivue3', () => {
-    it('scaffolds component testing for Vue CLI w/ Vue 3 project', () => {
+  context('vuecli4vue3', () => {
+    it('scaffolds component testing for Vue CLI 4 w/ Vue 3 project', () => {
       startSetupFor('vueclivue3-unconfigured')
 
       // should detect correctly
-      cy.get('button').should('be.visible').contains('Vue CLI (Vue 3)(detected)')
+      cy.get('button').should('be.visible').contains('Vue CLI 4 (Vue 3)(detected)')
+      cy.get('button').contains('Next Step').click()
+
+      fakeInstalledDeps()
+
+      cy.findByRole('button', { name: 'Continue' }).click()
+      verifyConfigFile(`cypress.config.js`)
+    })
+  })
+
+  context('vuecli5vue3', () => {
+    it('scaffolds component testing for Vue CLI 5 w/ Vue 3 project', () => {
+      startSetupFor('vuecli5vue3-unconfigured')
+
+      // should detect correctly
+      cy.get('button').should('be.visible').contains('Vue CLI 5 (Vue 3)(detected)')
       cy.get('button').contains('Next Step').click()
 
       fakeInstalledDeps()
@@ -60,7 +75,7 @@ describe('scaffolding component testing', () => {
   })
 
   context('create-react-app', () => {
-    it('scaffolds component testing for Vue CLI w/ Vue 2 project', () => {
+    it('scaffolds component testing for Create React App v5 project', () => {
       startSetupFor('create-react-app-unconfigured')
 
       // should detect correctly

packages/launchpad/src/setup/SelectFwOrBundler.cy.tsx

@@ -63,7 +63,7 @@ describe('<SelectFwOrBundler />', () => {
             name: 'VueJs',
             id: 'vue',
             isSelected: false,
-            type: 'vueclivue3',
+            type: 'vuecli4vue3',
           },
         ]}
       />

packages/launchpad/src/utils/icons.ts

@@ -13,8 +13,10 @@ export const FrameworkBundlerLogos: Record<FrontendFrameworkEnum | SupportedBund
   vite: LogoVite,
   vue2: LogoVue,
   vue3: LogoVue,
-  vueclivue2: LogoVue,
-  vueclivue3: LogoVue,
+  vuecli4vue2: LogoVue,
+  vuecli4vue3: LogoVue,
+  vuecli5vue2: LogoVue,
+  vuecli5vue3: LogoVue,
   nextjs: LogoNext,
   nuxtjs: LogoNuxt,
   react: LogoReact,

packages/scaffold-config/README.md

@@ -16,6 +16,8 @@ We will also attempt to scaffold a configuration file for projects using React a
 | Vue | - | Vite | 2.x | Vue 3 | `@cypress/vue@^3.0.0` | [Link](../../system-tests/projects/vue3-vite-ts-configured)
 | Vue CLI | 4.x | Webpack | 4.x | Vue 2 | `@cypress/vue@2.0.4` | [Link](../../system-tests/projects/vueclivue2-configured)
 | Vue CLI | 4.x | Webpack | 4.x | Vue 3 | `@cypress/vue@latest` | [Link](../../system-tests/projects/vueclivue3-configured)
+| Vue CLI | 5.x | Webpack | 5.x | Vue 2 | `@cypress/vue@^2.0.0` | Covered by other Vue CLI test projects.
+| Vue CLI | 5.x | Webpack | 5.x | Vue 3 | `@cypress/vue@^3.0.0` | [Link](../../system-tests/projects/vuecli5vue3-configured)
 | Nuxt.js | 2.x | Webpack | 4.x, 5.x | Vue 2 | `@cypress/vue@2.0.4` | [Link](../../system-tests/projects/pristine-nuxtjs-vue2-configured)
 
 ### Adding More Projects
@@ -35,5 +37,4 @@ These should be supported but currently are not configured.
 
 | Name | Tool Version | Dev Server | Dev Server Version | Library Version (s) | Component Adaptor Version | Example Project
 | --- | ---- | ---- | --- | ---- | ---- | --- |
-| Next.js | 11.x, 12.x | Webpack | 4.x, 5.x | React 16, 17 | `@cypress/react@latest` | [Link](../../system-tests/projects/nextjs-configured)
-| Vue CLI | 5.x | Webpack | 5.x | Vue 3 | `@cypress/vue@^3.0.0` | [TODO]
+| Next.js | 11.x, 12.x | Webpack | 4.x, 5.x | React 16, 17 | `@cypress/react@latest` | [Link](../../system-tests/projects/nextjs-configured)

packages/scaffold-config/src/frameworks.ts

@@ -104,8 +104,8 @@ export const FRONTEND_FRAMEWORKS = [
     },
   },
   {
-    type: 'vueclivue2',
-    name: 'Vue CLI (Vue 2)',
+    type: 'vuecli4vue2',
+    name: 'Vue CLI 4 (Vue 2)',
     family: 'template',
     supportedBundlers: [BUNDLER_WEBPACK_4],
     packages: [
@@ -161,8 +161,8 @@ export const FRONTEND_FRAMEWORKS = [
     },
   },
   {
-    type: 'vueclivue3',
-    name: 'Vue CLI (Vue 3)',
+    type: 'vuecli4vue3',
+    name: 'Vue CLI 4 (Vue 3)',
     family: 'template',
     supportedBundlers: [BUNDLER_WEBPACK_4],
     packages: [
@@ -217,6 +217,120 @@ export const FRONTEND_FRAMEWORKS = [
       },
     },
   },
+  {
+    type: 'vuecli5vue2',
+    name: 'Vue CLI 5 (Vue 2)',
+    family: 'template',
+    supportedBundlers: [BUNDLER_WEBPACK_5],
+    packages: [
+      CYPRESS_VUE_2,
+      BUNDLER_WEBPACK_5,
+    ],
+    defaultPackagePath: null,
+    glob: '*.vue',
+    detectors: [
+      {
+        dependency: '@vue/cli-service',
+        version: '^5.0.0',
+      },
+      {
+        dependency: 'vue',
+        version: '^2.0.0',
+      },
+    ],
+    category: FRONTEND_FRAMEWORK_CATEGORIES[1],
+    codeGenFramework: CODE_GEN_FRAMEWORKS[1],
+    storybookDep: STORYBOOK_VUE,
+    config: {
+      js: (bundler: Bundler) => {
+        return dedent`
+      const { devServer } = require('@cypress/webpack-dev-server')
+      const webpackConfig = require('@vue/cli-service/webpack.config')
+
+      module.exports = {
+        component: {
+          devServer,
+          devServerConfig: {
+            webpackConfig
+          }
+        }
+      }
+      `
+      },
+      ts: () => {
+        return dedent`
+      import { defineConfig } from 'cypress'
+      import { devServer } from '@cypress/webpack-dev-server'
+      import webpackConfig from '@vue/cli-service/webpack.config'
+
+      export default defineConfig({
+        component: {
+          devServer,
+          devServerConfig: {
+            webpackConfig
+          }
+        }
+      })`
+      },
+    },
+  },
+  {
+    type: 'vuecli5vue3',
+    name: 'Vue CLI 5 (Vue 3)',
+    family: 'template',
+    supportedBundlers: [BUNDLER_WEBPACK_5],
+    packages: [
+      CYPRESS_VUE_3,
+      BUNDLER_WEBPACK_5,
+    ],
+    defaultPackagePath: null,
+    glob: '*.vue',
+    detectors: [
+      {
+        dependency: '@vue/cli-service',
+        version: '^5.0.0',
+      },
+      {
+        dependency: 'vue',
+        version: '^3.0.0',
+      },
+    ],
+    category: FRONTEND_FRAMEWORK_CATEGORIES[1],
+    codeGenFramework: CODE_GEN_FRAMEWORKS[1],
+    storybookDep: STORYBOOK_VUE,
+    config: {
+      js: (bundler: Bundler) => {
+        return dedent`
+      const { devServer } = require('@cypress/webpack-dev-server')
+      const webpackConfig = require('@vue/cli-service/webpack.config')
+
+      module.exports = {
+        component: {
+          devServer,
+          devServerConfig: {
+            webpackConfig
+          }
+        }
+      }
+      `
+      },
+      ts: () => {
+        return dedent`
+      import { defineConfig } from 'cypress'
+      import { devServer } from '@cypress/webpack-dev-server'
+      import webpackConfig from '@vue/cli-service/webpack.config'
+
+      export default defineConfig({
+        component: {
+          devServer,
+          devServerConfig: {
+            webpackConfig
+          }
+        }
+      })`
+      },
+    },
+  },
   {
     type: 'react',
     name: 'React.js',

packages/scaffold-config/test/unit/detect.spec.ts

@@ -36,18 +36,25 @@ describe('detect', () => {
     expect(actual.bundler).to.eq('webpack5')
   })
 
-  it(`Vue CLI w/ Vue 2`, async () => {
+  it(`Vue CLI 4 w/ Vue 2`, async () => {
     const pkg = await scaffoldMigrationProject('vueclivue2-unconfigured')
     const actual = detect(pkg)
 
-    expect(actual.framework.type).to.eq('vueclivue2')
+    expect(actual.framework.type).to.eq('vuecli4vue2')
   })
 
-  it(`Vue CLI w/ Vue 3`, async () => {
+  it(`Vue CLI 4 w/ Vue 3`, async () => {
     const pkg = await scaffoldMigrationProject('vueclivue3-unconfigured')
     const actual = detect(pkg)
 
-    expect(actual.framework.type).to.eq('vueclivue3')
+    expect(actual.framework.type).to.eq('vuecli4vue3')
+  })
+
+  it(`Vue CLI 5 w/ Vue 3`, async () => {
+    const pkg = await scaffoldMigrationProject('vuecli5vue3-unconfigured')
+    const actual = detect(pkg)
+
+    expect(actual.framework.type).to.eq('vuecli5vue3')
   })
 
   it(`React with Vite`, async () => {

system-tests/projects/vuecli5vue3-configured/cypress.config.js

@@ -0,0 +1,11 @@
+const { devServer } = require('@cypress/webpack-dev-server')
+const webpackConfig = require('@vue/cli-service/webpack.config')
+
+module.exports = {
+  component: {
+    devServer,
+    devServerConfig: {
+      webpackConfig
+    }
+  }
+}

system-tests/projects/vuecli5vue3-configured/cypress/component/index.html

@@ -0,0 +1,14 @@
+<!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 id="__cy_root"></div>
+  </body>
+</html>

system-tests/projects/vuecli5vue3-configured/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

system-tests/projects/vuecli5vue3-configured/cypress/support/component.js

@@ -0,0 +1 @@
+// TODO: source the example support file