fix: wire up scaffolded indexHtml to dev servers (#20453)

* fix: wire up scaffolded indexHtml to dev servers

* fix vite tests

* update vuecli-5, fix system tests

* fix vite build error and launchpad test

* remove only

* address comments, remove gitignores

* remove only

Author: ZachJW34

.eslintignore

@@ -68,18 +68,21 @@ packages/data-context/test/unit/codegen/files
 # community templates we test against, no need to lint
 system-tests/projects/create-react-app-configured/**/*
 system-tests/projects/create-react-app-unconfigured/**/*
+system-tests/projects/create-react-app-custom-index-html
 
 system-tests/projects/vueclivue2-unconfigured/**/*
 system-tests/projects/vueclivue2-configured/**/*
 
 system-tests/projects/vueclivue3-unconfigured/**/*
 system-tests/projects/vueclivue3-configured/**/*
+system-tests/projects/vueclivue3-custom-index-html
 
 system-tests/projects/vuecli5vue3-unconfigured/**/*
 system-tests/projects/vuecli5vue3-configured/**/*
 
 system-tests/projects/vue3-vite-ts-unconfigured/**/*
 system-tests/projects/vue3-vite-ts-configured/**/*
+system-tests/projects/vue3-vite-ts-custom-index-html
 
 system-tests/projects/nextjs-unconfigured/**/*
 system-tests/projects/nextjs-configured/**/*

npm/react/package.json

@@ -20,7 +20,7 @@
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
   "dependencies": {
-    "@cypress/mount-utils": "0.0.0-development",
+    "@cypress/mount-utils": "*",
     "debug": "^4.3.2",
     "find-webpack": "2.2.1",
     "find-yarn-workspace-root": "2.0.0"

npm/react/plugins/babel/index.d.ts

@@ -13,7 +13,7 @@ declare namespace CypressBabelDevServer {
      * Path to an index.html file that will serve as the template in
      * which your components will be rendered.
      */
-    indexHtml?: string
+    indexHtmlFile?: string
   }
 
   /**

npm/react/plugins/babel/index.js

@@ -6,7 +6,7 @@ function devServer (cypressDevServerConfig, devServerConfig = {}) {
   return startDevServer({
     options: cypressDevServerConfig,
     webpackConfig: getBabelWebpackConfig(cypressDevServerConfig.config, devServerConfig),
-    indexHtml: devServerConfig.indexHtml,
+    indexHtmlFile: devServerConfig.indexHtmlFile,
   })
 }
 

npm/react/plugins/craco/index.d.ts

@@ -9,7 +9,7 @@ declare namespace CypressCracoDevServer {
      * Path to an index.html file that will serve as the template in
      * which your components will be rendered.
      */
-    indexHtml?: string
+    indexHtmlFile?: string
   }
 
   /**

npm/react/plugins/craco/index.js

@@ -2,13 +2,13 @@ const { startDevServer } = require('@cypress/webpack-dev-server')
 const { createWebpackDevConfig } = require('@craco/craco')
 const { getLegacyDevServer } = require('../utils/legacy-setup-dev-server')
 
-function devServer (cypressDevServerConfig, cracoConfig, indexHtml) {
+function devServer (cypressDevServerConfig, cracoConfig, indexHtmlFile) {
   process.env.FAST_REFRESH = 'false'
 
   return startDevServer({
     options: cypressDevServerConfig,
     webpackConfig: createWebpackDevConfig(cracoConfig),
-    indexHtml,
+    indexHtmlFile,
   })
 }
 
@@ -21,6 +21,6 @@ module.exports = getLegacyDevServer(devServer, (config) => {
 
 // New signature
 // - Note that this also includes a change to the second argument!
-module.exports.devServer = (cypressDevServerConfig, { cracoConfig, indexHtml }) => {
-  return devServer(cypressDevServerConfig, cracoConfig, indexHtml)
+module.exports.devServer = (cypressDevServerConfig, { cracoConfig, indexHtmlFile }) => {
+  return devServer(cypressDevServerConfig, cracoConfig, indexHtmlFile)
 }

npm/react/plugins/load-webpack/index.d.ts

@@ -9,7 +9,7 @@ declare namespace CypressWebpackDevServer {
      * Path to an index.html file that will serve as the template in
      * which your components will be rendered.
      */
-    indexHtml?: string
+    indexHtmlFile?: string
   }
 
   /**

npm/react/plugins/load-webpack/index.js

@@ -15,7 +15,7 @@ function normalizeWebpackPath (config, webpackConfigPath) {
  * **Important:** `webpackFilename` path is relative to the project root (cypress.config.{ts|js} location)
  * @type {(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions, options: { webpackFilename: string  }) => Cypress.PluginConfigOptions}
  */
-function devServer (cypressDevServerConfig, { webpackFilename, indexHtml }) {
+function devServer (cypressDevServerConfig, { webpackFilename, indexHtmlFile }) {
   const webpackConfig = tryLoadWebpackConfig(normalizeWebpackPath(cypressDevServerConfig.config, webpackFilename))
 
   if (!webpackConfig) {
@@ -25,7 +25,7 @@ function devServer (cypressDevServerConfig, { webpackFilename, indexHtml }) {
   return startDevServer({
     options: cypressDevServerConfig,
     webpackConfig,
-    indexHtml,
+    indexHtmlFile,
   })
 }
 

npm/react/plugins/next/index.d.ts

@@ -4,7 +4,7 @@ declare namespace CypressNextDevServer {
      * Path to an index.html file that will serve as the template in
      * which your components will be rendered.
      */
-    indexHtml?: string
+    indexHtmlFile?: string
   }
 
   /**

npm/react/plugins/next/index.js

@@ -2,7 +2,7 @@ const path = require('path')
 const findNextWebpackConfig = require('./findNextWebpackConfig')
 const { getLegacyDevServer } = require('../utils/legacy-setup-dev-server')
 
-async function devServer (cypressDevServerConfig, { indexHtml } = {}) {
+async function devServer (cypressDevServerConfig, { indexHtmlFile } = {}) {
   const webpackConfig = await findNextWebpackConfig(cypressDevServerConfig.config)
 
   // require('webpack') now points to nextjs bundled version
@@ -11,7 +11,7 @@ async function devServer (cypressDevServerConfig, { indexHtml } = {}) {
   return startDevServer({
     options: cypressDevServerConfig,
     webpackConfig,
-    indexHtml: indexHtml || path.resolve(__dirname, 'index-template.html'),
+    indexHtmlFile: indexHtmlFile || path.resolve(__dirname, 'index-template.html'),
   })
 }
 

npm/react/plugins/react-scripts/index.d.ts

@@ -9,7 +9,7 @@ declare namespace CypressCRADevServer {
      * Path to an index.html file that will serve as the template in
      * which your components will be rendered.
      */
-    indexHtml?: string
+    indexHtmlFile?: string
   }
 
   /**

npm/react/plugins/react-scripts/index.js

@@ -4,14 +4,14 @@ const { getLegacyDevServer } = require('../utils/legacy-setup-dev-server')
 
 function devServer (cypressDevServerConfig, {
   webpackConfigPath,
-  indexHtml,
+  indexHtmlFile,
 } = {}) {
   return startDevServer({
     options: cypressDevServerConfig,
     webpackConfig: findReactScriptsWebpackConfig(cypressDevServerConfig.config, {
       webpackConfigPath: webpackConfigPath || 'react-scripts/config/webpack.config',
     }),
-    indexHtml,
+    indexHtmlFile,
   })
 }
 

npm/vite-dev-server/src/index.ts

@@ -24,8 +24,16 @@ export async function startDevServer (startDevServerArgs: StartDevServerOptions)
   return { port, close: viteDevServer.close }
 }
 
-export type CypressViteDevServerConfig = Omit<InlineConfig, 'base' | 'root'>
+export type CypressViteDevServerConfig = Omit<InlineConfig, 'base' | 'root'> & {
+  /**
+   * Path to an index.html file that will serve as the template in
+   * which your components will be rendered.
+   */
+  indexHtmlFile?: string
+}
 
 export function devServer (cypressDevServerConfig: Cypress.DevServerConfig, devServerConfig?: CypressViteDevServerConfig) {
-  return startDevServer({ options: cypressDevServerConfig, viteConfig: devServerConfig })
+  const { indexHtmlFile, ...viteConfig } = devServerConfig ?? {}
+
+  return startDevServer({ options: cypressDevServerConfig, viteConfig, indexHtmlFile })
 }

npm/vite-dev-server/src/makeCypressPlugin.ts

@@ -35,7 +35,7 @@ export const makeCypressPlugin = (
   devServerEvents: NodeJS.EventEmitter,
   specs: Spec[],
   namespace: string,
-  indexHtml?: string,
+  indexHtmlFile?: string,
 ): Plugin => {
   let base = '/'
 
@@ -46,7 +46,7 @@ export const makeCypressPlugin = (
   })
 
   const posixSupportFilePath = supportFilePath ? convertPathToPosix(resolve(projectRoot, supportFilePath)) : undefined
-  const posixIndexHtml = indexHtml ? convertPathToPosix(resolve(projectRoot, indexHtml)) : undefined
+  const posixIndexHtml = indexHtmlFile ? convertPathToPosix(resolve(projectRoot, indexHtmlFile)) : undefined
 
   return {
     name: pluginName,
@@ -55,7 +55,7 @@ export const makeCypressPlugin = (
       base = config.base
     },
     async transformIndexHtml () {
-      const indexHtmlPath = indexHtml ? resolve(projectRoot, indexHtml) : resolve(__dirname, '..', 'index.html')
+      const indexHtmlPath = indexHtmlFile ? resolve(projectRoot, indexHtmlFile) : resolve(__dirname, '..', 'index.html')
       const indexHtmlContent = await readFile(indexHtmlPath, { encoding: 'utf8' })
       // find </body> last index
       const endOfBody = indexHtmlContent.lastIndexOf('</body>')

npm/vite-dev-server/src/resolveServerConfig.ts

@@ -22,10 +22,10 @@ export interface StartDevServerOptions {
    * Path to an index.html file that will serve as the template in
    * which your components will be rendered.
    */
-  indexHtml?: string
+  indexHtmlFile?: string
 }
 
-export const resolveServerConfig = async ({ viteConfig, options, indexHtml }: StartDevServerOptions): Promise<InlineConfig> => {
+export const resolveServerConfig = async ({ viteConfig, options, indexHtmlFile }: StartDevServerOptions): Promise<InlineConfig> => {
   const { projectRoot, supportFile, namespace } = options.config
 
   const requiredOptions: InlineConfig = {
@@ -35,7 +35,7 @@ export const resolveServerConfig = async ({ viteConfig, options, indexHtml }: St
 
   const finalConfig: InlineConfig = { ...viteConfig, ...requiredOptions }
 
-  finalConfig.plugins = [...(finalConfig.plugins || []), makeCypressPlugin(projectRoot, supportFile, options.devServerEvents, options.specs, options.config.namespace, indexHtml)]
+  finalConfig.plugins = [...(finalConfig.plugins || []), makeCypressPlugin(projectRoot, supportFile, options.devServerEvents, options.specs, options.config.namespace, indexHtmlFile)]
 
   // This alias is necessary to avoid a "prefixIdentifiers" issue from slots mounting
   // only cjs compiler-core accepts using prefixIdentifiers in slots which vue test utils use.

npm/vue/package.json

@@ -15,7 +15,7 @@
     "test:ci:ct": "node ../../scripts/run-ct-examples.js --examplesList=./examples.env"
   },
   "dependencies": {
-    "@cypress/mount-utils": "0.0.0-development",
+    "@cypress/mount-utils": "*",
     "@vue/test-utils": "^2.0.0-rc.10"
   },
   "devDependencies": {

npm/webpack-dev-server/src/index.ts

@@ -62,13 +62,15 @@ export interface CypressWebpackDevServerConfig{
   /* support passing a path to the user's webpack config */
   webpackConfig?: WebpackConfigurationWithDevServer
   /* base html template to render in AUT */
+  indexHtmlFile?: string
+  /** @deprecated base html template to render in AUT */
   template?: string
 }
 
 export function devServer (cypressDevServerConfig: Cypress.DevServerConfig, devServerConfig?: CypressWebpackDevServerConfig) {
   return startDevServer({
     options: cypressDevServerConfig,
     webpackConfig: devServerConfig?.webpackConfig,
-    template: devServerConfig?.template,
+    indexHtmlFile: devServerConfig?.indexHtmlFile || devServerConfig?.template,
   })
 }

npm/webpack-dev-server/src/loader.ts

@@ -25,7 +25,7 @@ const makeImport = (file: Cypress.Cypress['spec'], filename: string, chunkName:
 }
 
 /**
- * Creates a object maping a spec file to an object mapping
+ * Creates a object mapping a spec file to an object mapping
  * the spec name to the result of `makeImport`.
  *
  * @returns {Record<string, ReturnType<makeImport>}

npm/webpack-dev-server/src/makeWebpackConfig.ts

@@ -20,14 +20,14 @@ export interface UserWebpackDevServerOptions {
 interface MakeWebpackConfigOptions extends CypressCTOptionsPluginOptionsWithEmitter, UserWebpackDevServerOptions {
   devServerPublicPathRoute: string
   isOpenMode: boolean
-  indexHtml?: string
+  indexHtmlFile?: string
 }
 
 const OsSeparatorRE = RegExp(`\\${path.sep}`, 'g')
 const posixSeparator = '/'
 
 export async function makeWebpackConfig (userWebpackConfig: webpack.Configuration, options: MakeWebpackConfigOptions): Promise<webpack.Configuration> {
-  const { projectRoot, devServerPublicPathRoute, files, supportFile, devServerEvents, indexHtml } = options
+  const { projectRoot, devServerPublicPathRoute, files, supportFile, devServerEvents, indexHtmlFile } = options
 
   debug(`User passed in webpack config with values %o`, userWebpackConfig)
 
@@ -80,7 +80,7 @@ export async function makeWebpackConfig (userWebpackConfig: webpack.Configuratio
 
   const mergedConfig = merge<webpack.Configuration>(
     userWebpackConfig,
-    makeDefaultWebpackConfig(indexHtml),
+    makeDefaultWebpackConfig(indexHtmlFile),
     dynamicWebpackConfig,
   )
 

npm/webpack-dev-server/src/startServer.ts

@@ -3,17 +3,11 @@ import webpack from 'webpack'
 import WebpackDevServer from 'webpack-dev-server'
 import { makeWebpackConfig, UserWebpackDevServerOptions } from './makeWebpackConfig'
 import { webpackDevServerFacts } from './webpackDevServerFacts'
+import type { CypressWebpackDevServerConfig } from '.'
 
-export interface StartDevServer extends UserWebpackDevServerOptions {
+export interface StartDevServer extends UserWebpackDevServerOptions, CypressWebpackDevServerConfig {
   /* this is the Cypress dev server configuration object */
   options: Cypress.DevServerConfig
-  /* Base webpack config object used for loading component testing */
-  webpackConfig?: WebpackConfigurationWithDevServer
-  /* base html template to render in AUT */
-  template?: string
-  /* base html template to render in AUT */
-  indexHtml?: string
-
 }
 
 export interface WebpackConfigurationWithDevServer extends webpack.Configuration {
@@ -22,7 +16,7 @@ export interface WebpackConfigurationWithDevServer extends webpack.Configuration
 
 const debug = Debug('cypress:webpack-dev-server:start')
 
-export async function start ({ webpackConfig: userWebpackConfig, indexHtml, options, ...userOptions }: StartDevServer, exitProcess = process.exit): Promise<WebpackDevServer> {
+export async function start ({ webpackConfig: userWebpackConfig, indexHtmlFile, options, ...userOptions }: StartDevServer, exitProcess = process.exit): Promise<WebpackDevServer> {
   if (!userWebpackConfig) {
     debug('User did not pass in any webpack configuration')
   }
@@ -31,7 +25,7 @@ export async function start ({ webpackConfig: userWebpackConfig, indexHtml, opti
 
   const webpackConfig = await makeWebpackConfig(userWebpackConfig || {}, {
     files: options.specs,
-    indexHtml,
+    indexHtmlFile,
     projectRoot,
     devServerPublicPathRoute,
     devServerEvents: options.devServerEvents,

npm/webpack-dev-server/src/webpack.config.js

@@ -5,7 +5,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
  * @param {string} [template] - base template to use
  * @returns {import('webpack').Configuration}
  */
-module.exports = function makeDefaultConfig (indexHtml) {
+module.exports = function makeDefaultConfig (indexHtmlFile) {
   return {
     mode: 'development',
     optimization: {
@@ -18,7 +18,7 @@ module.exports = function makeDefaultConfig (indexHtml) {
       path: path.resolve(__dirname, 'dist'),
     },
     plugins: [new HtmlWebpackPlugin({
-      template: indexHtml || path.resolve(__dirname, '..', 'index-template.html'),
+      template: indexHtmlFile || path.resolve(__dirname, '..', 'index-template.html'),
     })],
   }
 }

packages/data-context/src/actions/ProjectActions.ts

@@ -302,20 +302,6 @@ export class ProjectActions {
     this.api.setPromptShown(slug)
   }
 
-  async createComponentIndexHtml (template: string) {
-    const project = this.ctx.currentProject
-
-    if (!project) {
-      throw Error(`Cannot create index.html without currentProject.`)
-    }
-
-    if (this.ctx.lifecycleManager.isTestingTypeConfigured('component')) {
-      const indexHtmlPath = path.resolve(project, 'cypress/component/support/index.html')
-
-      await this.ctx.fs.outputFile(indexHtmlPath, template)
-    }
-  }
-
   setSpecs (specs: FoundSpec[]) {
     this.ctx.project.setSpecs(specs)
   }

packages/data-context/src/actions/WizardActions.ts

@@ -313,8 +313,10 @@ export class WizardActions {
       bodyModifier,
     })
 
+    const componentIndexHtmlPath = path.join(this.projectRoot, 'cypress', 'support', 'component-index.html')
+
     return this.scaffoldFile(
-      path.join(this.projectRoot, 'cypress', 'component', 'index.html'),
+      componentIndexHtmlPath,
       template,
       'The HTML used as the wrapper for all component tests',
     )