refactor: lift indexHtmlFile up to component, add validation (#20870)

This commit is contained in:
Zachary Williams
2022-04-01 09:45:21 -05:00
committed by GitHub
parent 771f7654be
commit 2c8e97df24
86 changed files with 620 additions and 137 deletions

View File

@@ -2858,7 +2858,7 @@ declare namespace Cypress {
* Override default config options for E2E Testing runner.
* @default {}
*/
e2e: CoreConfigOptions
e2e: Omit<CoreConfigOptions, 'indexHtmlFile'>
/**
* An array of objects defining the certificates
@@ -2869,6 +2869,8 @@ declare namespace Cypress {
* Handle Cypress plugins
*/
setupNodeEvents: (on: PluginEvents, config: PluginConfigOptions) => Promise<PluginConfigOptions> | PluginConfigOptions
indexHtmlFile: string
}
/**
@@ -2971,7 +2973,7 @@ declare namespace Cypress {
/**
* Config options that can be assigned on cypress.config.{ts|js} file
*/
type UserConfigOptions<ComponentDevServerOpts = any> = Omit<ResolvedConfigOptions<ComponentDevServerOpts>, 'baseUrl' | 'excludeSpecPattern' | 'supportFile' | 'specPattern'>
type UserConfigOptions<ComponentDevServerOpts = any> = Omit<ResolvedConfigOptions<ComponentDevServerOpts>, 'baseUrl' | 'excludeSpecPattern' | 'supportFile' | 'specPattern' | 'indexHtmlFile'>
/**
* Takes ComponentDevServerOpts to track the signature of the devServerConfig for the provided `devServer`,

View File

@@ -37,6 +37,7 @@ namespace CypressConfigTests {
Cypress.config({ e2e: { baseUrl: null }}) // $ExpectType void
Cypress.config({ e2e: { baseUrl: '.', }}) // $ExpectType void
Cypress.config({ component: { baseUrl: '.', devServer: () => ({} as any) } }) // $ExpectError
Cypress.config({ e2e: { indexHtmlFile: 'index.html' } }) // $ExpectError
Cypress.config('taskTimeout') // $ExpectType number
Cypress.config('includeShadowDom') // $ExpectType boolean

View File

@@ -9,4 +9,4 @@
<body>
<div id="__cy_root"></div>
</body>
</html>
</html>

View File

@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<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>AUT Frame</title>
<title>Components App</title>
</head>
<body>
<div id="__cy_root"></div>
</body>
</html>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -10,4 +10,4 @@
<body>
<div id="__cy_root"></div>
</body>
</html>
</html>

View File

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

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -8,12 +8,6 @@ declare namespace CypressBabelDevServer {
* @returns modified final configuration
*/
setWebpackConfig?(config:Configuration): Configuration
/**
* Path to an index.html file that will serve as the template in
* which your components will be rendered.
*/
indexHtmlFile?: string
}
/**

View File

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

View File

@@ -4,12 +4,6 @@ declare namespace CypressCracoDevServer {
* The object exported of your craco.config.js file
*/
cracoConfig: any
/**
* Path to an index.html file that will serve as the template in
* which your components will be rendered.
*/
indexHtmlFile?: string
}
/**

View File

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

View File

@@ -4,12 +4,6 @@ declare namespace CypressWebpackDevServer {
* Location of the weppack.config Cypress should use
*/
webpackFilename?: string
/**
* Path to an index.html file that will serve as the template in
* which your components will be rendered.
*/
indexHtmlFile?: string
}
/**

View File

@@ -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, indexHtmlFile }) {
function devServer (cypressDevServerConfig, { webpackFilename }) {
const webpackConfig = tryLoadWebpackConfig(normalizeWebpackPath(cypressDevServerConfig.config, webpackFilename))
if (!webpackConfig) {
@@ -25,7 +25,6 @@ function devServer (cypressDevServerConfig, { webpackFilename, indexHtmlFile })
return startDevServer({
options: cypressDevServerConfig,
webpackConfig,
indexHtmlFile,
})
}

View File

@@ -1,11 +1,5 @@
declare namespace CypressNextDevServer {
interface CypressNextDevServerConfig {
/**
* Path to an index.html file that will serve as the template in
* which your components will be rendered.
*/
indexHtmlFile?: string
}
interface CypressNextDevServerConfig {}
/**
* Sets up a Cypress component testing environment for your NextJs application

View File

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

View File

@@ -4,12 +4,6 @@ declare namespace CypressCRADevServer {
* Location of the weppack.config Cypress should use
*/
webpackConfigPath?: string
/**
* Path to an index.html file that will serve as the template in
* which your components will be rendered.
*/
indexHtmlFile?: string
}
/**

View File

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

View File

@@ -5,7 +5,6 @@ export default defineConfig({
'video': false,
'fixturesFolder': false,
'component': {
'supportFile': './cypress/support.js',
specPattern: '**/smoke.cy.ts',
// startDevServer is the legacy distribution that was renamed
// to devServer to align with Cypress 10.0 configuration pitons.

View File

@@ -5,7 +5,6 @@ export default defineConfig({
'video': false,
'fixturesFolder': false,
'component': {
'supportFile': './cypress/support.js',
devServer,
},
})

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -31,7 +31,5 @@ export const startDevServer = async ({ options, viteConfig = {} }: StartDevServe
}
export function devServer (cypressDevServerConfig: Cypress.DevServerConfig, devServerConfig?: CypressViteDevServerConfig) {
const { indexHtmlFile, ...viteConfig } = devServerConfig ?? {}
return startDevServer({ options: cypressDevServerConfig, viteConfig, indexHtmlFile })
return startDevServer({ options: cypressDevServerConfig, viteConfig: devServerConfig })
}

View File

@@ -30,7 +30,7 @@ export const Cypress = (
const supportFilePath = options.config.supportFile
const devServerEvents = options.devServerEvents
const specs = options.specs
const indexHtmlFile = options.config.devServerConfig?.indexHtmlFile
const indexHtmlFile = options.config.indexHtmlFile
let specsPathsSet = getSpecsPathsSet(specs)
let loader
@@ -46,7 +46,7 @@ export const Cypress = (
base = config.base
},
async transformIndexHtml () {
const indexHtmlPath = indexHtmlFile ? resolve(projectRoot, indexHtmlFile) : resolve(__dirname, '..', '..', 'index.html')
const indexHtmlPath = resolve(projectRoot, indexHtmlFile)
debug('resolved the indexHtmlPath as', indexHtmlPath, 'from', indexHtmlFile)
const indexHtmlContent = await readFile(indexHtmlPath, { encoding: 'utf8' })

View File

@@ -1,20 +1,10 @@
import type { InlineConfig } from 'vite'
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 type CypressViteDevServerConfig = Omit<InlineConfig, 'base' | 'root'>
export interface StartDevServer {
/* this is the Cypress dev server configuration object */
options: Cypress.DevServerConfig
/* Base webpack config object used for loading component testing */
viteConfig?: CypressViteDevServerConfig
/* base html template to render in AUT */
template?: string
/* base html template to render in AUT */
indexHtmlFile?: string
}

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -61,16 +61,11 @@ export async function startDevServer (startDevServerArgs: StartDevServer, exitPr
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,
indexHtmlFile: devServerConfig?.indexHtmlFile || devServerConfig?.template,
})
}

View File

@@ -46,7 +46,7 @@ export interface UserWebpackDevServerOptions {
interface MakeWebpackConfigOptions extends CypressCTOptionsPluginOptionsWithEmitter, UserWebpackDevServerOptions {
devServerPublicPathRoute: string
isOpenMode: boolean
indexHtmlFile?: string
indexHtmlFile: string
}
const OsSeparatorRE = RegExp(`\\${path.sep}`, 'g')

View File

@@ -17,12 +17,12 @@ export interface WebpackConfigurationWithDevServer extends webpack.Configuration
const debug = Debug('cypress:webpack-dev-server:start')
export async function start ({ webpackConfig: userWebpackConfig, indexHtmlFile, options, ...userOptions }: StartDevServer, exitProcess = process.exit): Promise<WebpackDevServer> {
export async function start ({ webpackConfig: userWebpackConfig, options, ...userOptions }: StartDevServer, exitProcess = process.exit): Promise<WebpackDevServer> {
if (!userWebpackConfig) {
debug('User did not pass in any webpack configuration')
}
const { projectRoot, devServerPublicPathRoute, isTextTerminal } = options.config
const { projectRoot, devServerPublicPathRoute, isTextTerminal, indexHtmlFile } = options.config
const webpackConfig = await makeWebpackConfig(userWebpackConfig || {}, {
files: options.specs,
@@ -41,6 +41,7 @@ export async function start ({ webpackConfig: userWebpackConfig, indexHtmlFile,
// When compiling in run mode
// Stop the clock early, no need to run all the tests on a failed build
if (isTextTerminal) {
compiler.hooks.done.tap('cyCustomErrorBuild', function (stats) {
if (stats.hasErrors()) {

View File

@@ -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 (indexHtmlFile) {
module.exports = function makeDefaultConfig (template) {
return {
mode: 'development',
optimization: {
@@ -17,8 +17,6 @@ module.exports = function makeDefaultConfig (indexHtmlFile) {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [new HtmlWebpackPlugin({
template: indexHtmlFile || path.resolve(__dirname, '..', 'index-template.html'),
})],
plugins: [new HtmlWebpackPlugin({ template })],
}
}

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -56,6 +56,7 @@ const config = {
supportFile: '',
isTextTerminal: true,
devServerPublicPathRoute: root,
indexHtmlFile: path.join(__dirname, 'component-index.html'),
} as any as Cypress.ResolvedConfigOptions & Cypress.RuntimeConfigOptions
describe('#startDevServer', () => {

View File

@@ -16,6 +16,7 @@ describe('makeWebpackConfig', () => {
supportFile: '/support.js',
projectRoot: '.',
files: [],
indexHtmlFile: 'index.html',
})
// plugins contain circular deps which cannot be serialized in a snapshot.

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -23,7 +23,8 @@ exports['src/index .getDefaultValues returns list of public config keys 1'] = {
"chromeWebSecurity": true,
"clientCertificates": [],
"component": {
"specPattern": "**/*.cy.{js,jsx,ts,tsx}"
"specPattern": "**/*.cy.{js,jsx,ts,tsx}",
"indexHtmlFile": "cypress/support/component-index.html"
},
"defaultCommandTimeout": 4000,
"downloadsFolder": "cypress/downloads",

View File

@@ -8,7 +8,9 @@ export type BreakingOptionErrorKey =
| 'INTEGRATION_FOLDER_REMOVED'
| 'CONFIG_FILE_INVALID_ROOT_CONFIG'
| 'CONFIG_FILE_INVALID_ROOT_CONFIG_E2E'
| 'CONFIG_FILE_INVALID_ROOT_CONFIG_COMPONENT'
| 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT'
| 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E'
| 'EXPERIMENTAL_COMPONENT_TESTING_REMOVED'
| 'EXPERIMENTAL_SAMESITE_REMOVED'
| 'EXPERIMENTAL_NETWORK_STUBBING_REMOVED'
@@ -148,6 +150,7 @@ const resolvedOptions: Array<ResolvedConfigOption> = [
// runner-ct overrides
defaultValue: {
specPattern: defaultSpecPattern.component,
indexHtmlFile: 'cypress/support/component-index.html',
},
validation: isValidConfig,
canUpdateDuringTestTime: false,
@@ -641,10 +644,22 @@ export const breakingRootOptions: Array<BreakingOption> = [
isWarning: false,
testingTypes: ['component', 'e2e'],
},
{
name: 'indexHtmlFile',
errorKey: 'CONFIG_FILE_INVALID_ROOT_CONFIG_COMPONENT',
isWarning: false,
testingTypes: ['component'],
},
]
export const testingTypeBreakingOptions: { e2e: Array<BreakingOption>, component: Array<BreakingOption> } = {
e2e: [],
e2e: [
{
name: 'indexHtmlFile',
errorKey: 'CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E',
isWarning: false,
},
],
component: [
{
name: 'baseUrl',

View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
<style>
body {
font-family: "Courier Prime", Courier, monospace;
padding: 0 1em;
line-height: 1.4;
color: #eee;
background-color: #111;
}
pre {
padding: 0 0;
margin: 0 0;
font-family: "Courier Prime", Courier, monospace;
}
body {
margin: 5px;
padding: 0;
overflow: hidden;
}
pre {
white-space: pre-wrap;
word-break: break-word;
-webkit-font-smoothing: antialiased;
}
</style>
</head>
<body><pre><span style="color:#e05561">The <span style="color:#e5e510">indexHtmlFile<span style="color:#e05561"> configuration option is now invalid when set from the root of the config object in Cypress version 10.0.0.<span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561">It is now configured separately as a testing type property: <span style="color:#de73ff">component.indexHtmlFile<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff">{<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> component: {<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> indexHtmlFile: &#39;...&#39;,<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> }<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff">}<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561">https://on.cypress.io/migration-guide<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</pre></body></html>

View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
<style>
body {
font-family: "Courier Prime", Courier, monospace;
padding: 0 1em;
line-height: 1.4;
color: #eee;
background-color: #111;
}
pre {
padding: 0 0;
margin: 0 0;
font-family: "Courier Prime", Courier, monospace;
}
body {
margin: 5px;
padding: 0;
overflow: hidden;
}
pre {
white-space: pre-wrap;
word-break: break-word;
-webkit-font-smoothing: antialiased;
}
</style>
</head>
<body><pre><span style="color:#e05561">The <span style="color:#e5e510">e2e.indexHtmlFile<span style="color:#e05561"> configuration option is not valid for e2e testing.<span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561">Please remove this option or add this as a component testing type property: <span style="color:#de73ff">component.indexHtmlFile<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff">{<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> e2e: {<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> indexHtmlFile: &#39;...&#39;,<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff"> }<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#4ec4ff">}<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561"><span style="color:#e6e6e6">
<span style="color:#e05561">https://on.cypress.io/migration-guide<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</pre></body></html>

View File

@@ -1286,6 +1286,24 @@ export const AllCypressErrors = {
https://on.cypress.io/migration-guide`
},
CONFIG_FILE_INVALID_ROOT_CONFIG_COMPONENT: (errShape: BreakingErrResult) => {
const code = errPartial`
{
component: {
${fmt.off(errShape.name)}: '...',
}
}`
return errTemplate`\
The ${fmt.highlight(errShape.name)} configuration option is now invalid when set from the root of the config object in ${fmt.cypressVersion(`10.0.0`)}.
It is now configured separately as a testing type property: ${fmt.highlightSecondary(`component.${errShape.name}`)}
${fmt.code(code)}
https://on.cypress.io/migration-guide`
},
// TODO: add path to config file
CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT: (errShape: BreakingErrResult) => {
const code = errPartial`
@@ -1305,6 +1323,24 @@ export const AllCypressErrors = {
https://on.cypress.io/migration-guide`
},
CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E: (errShape: BreakingErrResult) => {
const code = errPartial`
{
e2e: {
${fmt.off(errShape.name)}: '...',
}
}`
return errTemplate`\
The ${fmt.highlight(`e2e.${errShape.name}`)} configuration option is not valid for e2e testing.
Please remove this option or add this as a component testing type property: ${fmt.highlightSecondary(`component.${errShape.name}`)}
${fmt.code(code)}
https://on.cypress.io/migration-guide`
},
CONFIG_FILE_DEV_SERVER_IS_NOT_A_FUNCTION: (configFilePath: string, setupNodeEvents: any) => {
const code = errPartial`
{

View File

@@ -1087,11 +1087,21 @@ describe('visual error templates', () => {
default: [{ name: 'baseUrl', configFile: '/path/to/cypress.config.js.ts' }],
}
},
CONFIG_FILE_INVALID_ROOT_CONFIG_COMPONENT: () => {
return {
default: [{ name: 'indexHtmlFile', configFile: '/path/to/cypress.config.js.ts' }],
}
},
CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT: () => {
return {
default: [{ name: 'baseUrl', configFile: '/path/to/cypress.config.js.ts' }],
}
},
CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E: () => {
return {
default: [{ name: 'indexHtmlFile', configFile: '/path/to/cypress.config.js.ts' }],
}
},
CONFIG_FILE_DEV_SERVER_IS_NOT_A_FUNCTION: () => {
return {
default: ['/path/to/config.ts', {}],

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -501,8 +501,10 @@ enum ErrorTypeEnum {
CONFIG_FILE_DEV_SERVER_IS_NOT_A_FUNCTION
CONFIG_FILE_INVALID_DEV_START_EVENT
CONFIG_FILE_INVALID_ROOT_CONFIG
CONFIG_FILE_INVALID_ROOT_CONFIG_COMPONENT
CONFIG_FILE_INVALID_ROOT_CONFIG_E2E
CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_COMPONENT
CONFIG_FILE_INVALID_TESTING_TYPE_CONFIG_E2E
CONFIG_FILE_MIGRATION_NEEDED
CONFIG_FILE_NOT_FOUND
CONFIG_FILE_REQUIRE_ERROR

View File

@@ -27,6 +27,7 @@ export default defineConfig({
],
},
},
indexHtmlFile: 'cypress/component/support/component-index.html',
},
'e2e': {
baseUrl: 'http://localhost:5555',

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -43,9 +43,6 @@ export const FRONTEND_FRAMEWORKS = [
module.exports = {
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}`
},
@@ -57,9 +54,6 @@ export const FRONTEND_FRAMEWORKS = [
export default defineConfig({
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
},
@@ -93,9 +87,6 @@ export const FRONTEND_FRAMEWORKS = [
module.exports = {
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}`
},
@@ -107,9 +98,6 @@ export const FRONTEND_FRAMEWORKS = [
export default defineConfig({
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
},
@@ -150,7 +138,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}
@@ -167,7 +154,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
@@ -209,7 +195,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}
@@ -226,7 +211,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
@@ -268,7 +252,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}
@@ -285,7 +268,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
@@ -327,7 +309,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}
@@ -344,7 +325,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
@@ -386,7 +366,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}`
@@ -400,7 +379,6 @@ export const FRONTEND_FRAMEWORKS = [
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
},
@@ -424,7 +402,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
@@ -439,7 +416,6 @@ export const FRONTEND_FRAMEWORKS = [
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
},
@@ -482,7 +458,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}`
@@ -496,7 +471,6 @@ export const FRONTEND_FRAMEWORKS = [
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
},
@@ -518,7 +492,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
@@ -533,7 +506,6 @@ export const FRONTEND_FRAMEWORKS = [
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
},
@@ -576,7 +548,6 @@ export const FRONTEND_FRAMEWORKS = [
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}`
@@ -590,7 +561,6 @@ export const FRONTEND_FRAMEWORKS = [
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
},
@@ -611,7 +581,6 @@ export const FRONTEND_FRAMEWORKS = [
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
webpackConfig,
},
},
@@ -627,7 +596,6 @@ export const FRONTEND_FRAMEWORKS = [
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
},
@@ -697,9 +665,6 @@ export const FRONTEND_FRAMEWORKS = [
return devServer(cypressDevServerConfig, { webpackConfig, ...devServerConfig })
},
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
},
@@ -716,9 +681,6 @@ export const FRONTEND_FRAMEWORKS = [
return devServer(cypressDevServerConfig, { webpackConfig, ...devServerConfig })
},
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
},
},
})`
},

View File

@@ -386,4 +386,34 @@ The componentFolder configuration option is now invalid when set on the config o
`
exports['e2e config throws an error if indexHtml is set on the root level 1'] = `
The indexHtmlFile configuration option is now invalid when set from the root of the config object in Cypress version 10.0.0.
It is now configured separately as a testing type property: component.indexHtmlFile
{
component: {
indexHtmlFile: '...',
}
}
https://on.cypress.io/migration-guide
`
exports['e2e config throws an error if indexHtml is set on the e2e level 1'] = `
The e2e.indexHtmlFile configuration option is not valid for e2e testing.
Please remove this option or add this as a component testing type property: component.indexHtmlFile
{
e2e: {
indexHtmlFile: '...',
}
}
https://on.cypress.io/migration-guide
`

View File

@@ -3,8 +3,5 @@ const { devServer } = require('@cypress/react/plugins/react-scripts')
module.exports = {
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}

View File

@@ -3,8 +3,6 @@ const { devServer } = require('@cypress/react/plugins/react-scripts')
module.exports = {
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
},
indexHtmlFile: 'cypress/support/custom-component-index.html',
},
}

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -0,0 +1,5 @@
module.exports = {
e2e: {
indexHtmlFile: 'cypress/support/component-index.html',
},
}

View File

@@ -0,0 +1,4 @@
module.exports = {
indexHtmlFile: 'cypress/support/component-index.html',
e2e: {},
}

View File

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

View File

@@ -9,8 +9,5 @@ module.exports = defineConfig({
return devServer(cypressDevServerConfig, { webpackConfig, ...devServerConfig })
},
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html'
},
},
})

View File

@@ -5,7 +5,6 @@ export default defineConfig({
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
},

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -7,5 +7,6 @@ module.exports = {
return startDevServer({ options: cypressDevServerConfig })
},
indexHtmlFile: 'cypress/component/support/component-index.html',
},
}

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -5,7 +5,6 @@ export default defineConfig({
component: {
devServer,
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
},

View File

@@ -4,9 +4,9 @@ import { devServer } from '@cypress/vite-dev-server'
export default defineConfig({
component: {
devServer,
// optionally provide your Vite config overrides.
devServerConfig: {
indexHtmlFile: 'cypress/support/component-index.html',
// optionally provide your Vite config overrides.
},
indexHtmlFile: 'cypress/support/custom-component-index.html'
},
})

View File

@@ -6,7 +6,6 @@ module.exports = {
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}

View File

@@ -6,7 +6,6 @@ module.exports = {
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}

View File

@@ -6,7 +6,6 @@ module.exports = {
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
},
}

View File

@@ -6,7 +6,7 @@ module.exports = {
devServer,
devServerConfig: {
webpackConfig,
indexHtmlFile: 'cypress/support/component-index.html',
},
indexHtmlFile: 'cypress/support/custom-component-index.html',
},
}

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 id="__cy_root"></div>
</body>
</html>

View File

@@ -170,6 +170,29 @@ describe('e2e config', () => {
})
})
it('throws an error if indexHtml is set on the root level', async function () {
await Fixtures.scaffoldProject('invalid-root-level-config')
return systemTests.exec(this, {
project: 'invalid-root-level-config',
configFile: 'invalid-indexHtmlFile-config.js',
expectedExitCode: 1,
snapshot: true,
})
})
it('throws an error if indexHtml is set on the e2e level', async function () {
await Fixtures.scaffoldProject('invalid-root-level-config')
return systemTests.exec(this, {
project: 'invalid-root-level-config',
configFile: 'invalid-e2e-indexHtmlFile-config.js',
testingType: 'e2e',
expectedExitCode: 1,
snapshot: true,
})
})
it('throws an error if testFiles is set on the config file', async function () {
await Fixtures.scaffoldProject('invalid-root-level-config')