Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 1, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54ba14e
refactor: lift indexHtmlFile up to component, add validation
ZachJW34 Mar 31, 2022
96696e1
add missing index.html files
ZachJW34 Mar 31, 2022
c8e737a
Merge branch '10.0-release' into zachw/component-index-html-lift
ZachJW34 Apr 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions cli/types/cypress.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2858,7 +2858,7 @@ declare namespace Cypress {
* Override default config options for E2E Testing runner.
* @default {}
*/
e2e: CoreConfigOptions
e2e: Omit<CoreConfigOptions, 'indexHtmlFile'>
Copy link
Member

@tgriesser tgriesser Mar 31, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason we want this on CoreConfigOptions rather than ComponentConfigOptions?

Copy link
Contributor Author

@ZachJW34 ZachJW34 Mar 31, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My understanding is that, once the config is resolved, you should access the properties as root level properties since testingType specific options are merged to be top-level. So inside of startServer.ts for webpack, you should be able to do config.indexHtmlFile rather than config.component.indexHtmlFile (the config passed into the devServer doesn't even have a component object so you can't do config.component.indexHtmlFile).

The options in ComponentConfigOptions aren't typed at the root level, so if I wanted to define them there we would have to refactor those types.

Copy link
Member

@tgriesser tgriesser Apr 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think for the devServer we're generally going to be accessing the properties off of the un-merged config anyway, because the merging happens in the parent process and we can't serialize/unserialize a user's webpackConfig over the wire (ran into that when refactoring the object API)

The options in ComponentConfigOptions aren't typed at the root level,

Might not be sure what you're referring to - I was just saying to add the type to this interface:

interface ComponentConfigOptions<ComponentDevServerOpts = any> extends Omit<CoreConfigOptions, 'baseUrl'> {
    devServer: DevServerFn<ComponentDevServerOpts>
    devServerConfig?: ComponentDevServerOpts
}

And then use it from that to pass into startServer directly


/**
* An array of objects defining the certificates
Expand All @@ -2869,6 +2869,8 @@ declare namespace Cypress {
* Handle Cypress plugins
*/
setupNodeEvents: (on: PluginEvents, config: PluginConfigOptions) => Promise<PluginConfigOptions> | PluginConfigOptions

indexHtmlFile: string
}

/**
Expand Down Expand Up @@ -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`,
Expand Down
1 change: 1 addition & 0 deletions cli/types/tests/cypress-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion npm/webpack-dev-server/index-template.html → ...ular/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@
<body>
<div id="__cy_root"></div>
</body>
</html>
</html>
6 changes: 3 additions & 3 deletions npm/vite-dev-server/index.html → ...stem/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/craco/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/find-webpack/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion npm/react/plugins/next/index-template.html → ...ck-5/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@
<body>
<div id="__cy_root"></div>
</body>
</html>
</html>
13 changes: 13 additions & 0 deletions npm/react/examples/nextjs/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/react-scripts-folder/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/react-scripts-typescript/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/react-scripts/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/sass-and-ts/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/snapshots/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/using-babel-typescript/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/using-babel/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/visual-sudoku/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/visual-testing-with-applitools/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/visual-testing-with-happo/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/visual-testing-with-percy/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/webpack-file/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions npm/react/examples/webpack-options/cypress/support/component-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 0 additions & 6 deletions npm/react/plugins/babel/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

/**
Expand Down
1 change: 0 additions & 1 deletion npm/react/plugins/babel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ function devServer (cypressDevServerConfig, devServerConfig = {}) {
return startDevServer({
options: cypressDevServerConfig,
webpackConfig: getBabelWebpackConfig(cypressDevServerConfig.config, devServerConfig),
indexHtmlFile: devServerConfig.indexHtmlFile,
})
}

Expand Down
6 changes: 0 additions & 6 deletions npm/react/plugins/craco/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

/**
Expand Down
7 changes: 3 additions & 4 deletions npm/react/plugins/craco/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})
}

Expand All @@ -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)
}
6 changes: 0 additions & 6 deletions npm/react/plugins/load-webpack/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}

/**
Expand Down
3 changes: 1 addition & 2 deletions npm/react/plugins/load-webpack/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -25,7 +25,6 @@ function devServer (cypressDevServerConfig, { webpackFilename, indexHtmlFile })
return startDevServer({
options: cypressDevServerConfig,
webpackConfig,
indexHtmlFile,
})
}

Expand Down
Loading