Skip to content

Commit 0e7b555

Browse files
JessicaSachslmiller1990tgriesser
authored
feat: swap the #__cy_root id selector to become data-cy-root for component mounting (#20951)
* Change #__cy_root selector for CT mounting point to be a data-cy-root selector * moving all of the gets for the container element into the mount-utils * Force HTMLElement instead of Element * unskip vue2 tests Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> Co-authored-by: Tim Griesser <tgriesser10@gmail.com>
1 parent 17905a7 commit 0e7b555

File tree

137 files changed

+6697
-106770
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

137 files changed

+6697
-106770
lines changed

‎npm/angular/cypress/support/component-index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
12-
</html>
12+
</html>

‎npm/design-system/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/mount-utils/src/index.ts

+12-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,17 @@ export interface StyleOptions {
3737
cssFile: string | string[]
3838
}
3939

40-
export const ROOT_ID = '__cy_root'
40+
export const ROOT_SELECTOR = '[data-cy-root]'
41+
42+
export const getContainerEl = (): HTMLElement => {
43+
const el = document.querySelector<HTMLElement>(ROOT_SELECTOR)
44+
45+
if (el) {
46+
return el
47+
}
48+
49+
throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`)
50+
}
4151

4252
/**
4353
* Remove any style or extra link elements from the iframe placeholder
@@ -131,7 +141,7 @@ export const injectStylesBeforeElement = (
131141
options: Partial<StyleOptions & { log: boolean }>,
132142
document: Document,
133143
el: HTMLElement | null,
134-
) => {
144+
): HTMLElement => {
135145
if (!el) return
136146

137147
// first insert all stylesheets as Link elements

‎npm/react/cypress/component/advanced/react-book-example/src/Todos.cy.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ it('Todo - should create snapshot', () => {
2323
// expect(tree).toMatchSnapshot();
2424

2525
// entire test area
26-
cy.get('#__cy_root')
26+
cy.get('[data-cy-root]')
2727
.invoke('html')
2828
.then(pretty)
2929
.should(

‎npm/react/cypress/component/advanced/renderless/mouse.cy.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ describe('Renderless component', () => {
1616
const onMoved = cy.stub()
1717

1818
mount(<MouseMovement onMoved={onMoved} />)
19-
cy.get('#__cy_root').should('be.empty')
19+
cy.get('[data-cy-root]').should('be.empty')
2020
cy.document()
2121
.trigger('mousemove')
2222
.then(() => {

‎npm/react/cypress/component/basic/react-tutorial/pretty-snapshots.cy.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import pretty from 'pretty'
77
it('says hello world', () => {
88
mount(<Hello name="world" />)
99
cy.contains('Hello, world!').should('be.visible')
10-
cy.get('#__cy_root')
10+
cy.get('[data-cy-root]')
1111
.invoke('html')
1212
.then(pretty)
1313
.should('equal', '<h1>Hello, world!</h1>')

‎npm/react/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/craco/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/find-webpack/cypress.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default defineConfig({
3131
},
3232
'env': {
3333
'cypress-react-selector': {
34-
'root': '#__cy_root',
34+
'root': '[data-cy-root]',
3535
},
3636
},
3737
})

‎npm/react/examples/find-webpack/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/nextjs-webpack-5/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
<div id="__next_css__DO_NOT_USE__"></div>
99
</head>
1010
<body>
11-
<div id="__cy_root"></div>
11+
<div data-cy-root></div>
1212
</body>
1313
</html>

‎npm/react/examples/nextjs/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
<div id="__next_css__DO_NOT_USE__"></div>
99
</head>
1010
<body>
11-
<div id="__cy_root"></div>
11+
<div data-cy-root></div>
1212
</body>
1313
</html>

‎npm/react/examples/react-scripts-folder/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/react-scripts-typescript/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/react-scripts/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/sass-and-ts/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/snapshots/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/using-babel-typescript/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/using-babel/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/visual-sudoku/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/visual-testing-with-applitools/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/visual-testing-with-happo/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/visual-testing-with-percy/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/webpack-file/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/examples/webpack-options/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/react/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"watch": "yarn build --watch --watch.exclude ./dist/**/*"
2222
},
2323
"dependencies": {
24-
"@cypress/mount-utils": "*",
24+
"@cypress/mount-utils": "file:../mount-utils",
2525
"debug": "^4.3.2",
2626
"find-webpack": "2.2.1",
2727
"find-yarn-workspace-root": "2.0.0"

‎npm/react/src/mount.ts

+8-9
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,17 @@ import getDisplayName from './getDisplayName'
44
import {
55
injectStylesBeforeElement,
66
StyleOptions,
7-
ROOT_ID,
7+
getContainerEl,
8+
ROOT_SELECTOR,
89
setupHooks,
910
} from '@cypress/mount-utils'
1011

1112
/**
1213
* Inject custom style text or CSS file or 3rd party style resources
1314
*/
1415
const injectStyles = (options: MountOptions) => {
15-
return () => {
16-
const el = document.getElementById(ROOT_ID)
16+
return (): HTMLElement => {
17+
const el = getContainerEl()
1718

1819
return injectStylesBeforeElement(options, document, el)
1920
}
@@ -66,12 +67,12 @@ const _mount = (type: 'mount' | 'rerender', jsx: React.ReactNode, options: Mount
6667

6768
lastMountedReactDom = reactDomToUse
6869

69-
const el = document.getElementById(ROOT_ID)
70+
const el = getContainerEl()
7071

7172
if (!el) {
7273
throw new Error(
7374
[
74-
'[@cypress/react] 🔥 Hmm, cannot find root element to mount the component.',
75+
`[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
7576
].join(' '),
7677
)
7778
}
@@ -156,9 +157,7 @@ export const unmount = (options = { log: true }): globalThis.Cypress.Chainable<J
156157

157158
const _unmount = (options: { boundComponentMessage?: string, log: boolean }) => {
158159
return cy.then(() => {
159-
const selector = `#${ROOT_ID}`
160-
161-
return cy.get(selector, { log: false }).then(($el) => {
160+
return cy.get(ROOT_SELECTOR, { log: false }).then(($el) => {
162161
if (lastMountedReactDom) {
163162
const wasUnmounted = lastMountedReactDom.unmountComponentAtNode($el[0])
164163

@@ -185,7 +184,7 @@ const _unmount = (options: { boundComponentMessage?: string, log: boolean }) =>
185184
// NOTE: we cannot use unmount here because
186185
// we are not in the context of a test
187186
const preMountCleanup = () => {
188-
const el = document.getElementById(ROOT_ID)
187+
const el = getContainerEl()
189188

190189
if (el && lastMountedReactDom) {
191190
lastMountedReactDom.unmountComponentAtNode(el)

‎npm/vite-dev-server/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ Install `@cypress/vue` or `@cypress/react` to get this package working properly
4141
- Responds to every query with the prefix `__cypress/src/` (base path should be this prefix).
4242
- Responds to `__cypress/src/index.html` with an html page.
4343
This page
44-
- will contain an element `<div id="__cy_root"></div>`. Tis will be used by mount function to mount the app containing the components we want.
44+
- will contain an element `<div data-cy-root></div>`. Tis will be used by mount function to mount the app containing the components we want.
4545
- will load support files
4646
- will load the current spec from the url
4747
- will start the test when both files are done loading

‎npm/vite-dev-server/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/vite-dev-server/src/plugins/cypress.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const Cypress = (
5555

5656
// insert the script in the end of the body
5757
return `${indexHtmlContent.substring(0, endOfBody)
58-
}<script>
58+
}<script type="module">
5959
${loader}
6060
</script>${
6161
indexHtmlContent.substring(endOfBody)

‎npm/vue/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/vue/examples/code-coverage/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/vue/examples/vue-cli/cypress/support/component-index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
<title>Components App</title>
88
</head>
99
<body>
10-
<div id="__cy_root"></div>
10+
<div data-cy-root></div>
1111
</body>
1212
</html>

‎npm/vue/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"test:ci:ct": "node ../../scripts/run-ct-examples.js --examplesList=./examples.env"
1717
},
1818
"dependencies": {
19-
"@cypress/mount-utils": "*",
19+
"@cypress/mount-utils": "file:../mount-utils",
2020
"@vue/test-utils": "2.0.0-rc.19"
2121
},
2222
"devDependencies": {

0 commit comments

Comments
 (0)