mirror of
https://github.com/cypress-io/cypress.git
synced 2026-02-22 06:59:30 -06:00
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>
This commit is contained in:
Jess
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -37,7 +37,17 @@ export interface StyleOptions {
|
||||
cssFile: string | string[]
|
||||
}
|
||||
|
||||
export const ROOT_ID = '__cy_root'
|
||||
export const ROOT_SELECTOR = '[data-cy-root]'
|
||||
|
||||
export const getContainerEl = (): HTMLElement => {
|
||||
const el = document.querySelector<HTMLElement>(ROOT_SELECTOR)
|
||||
|
||||
if (el) {
|
||||
return el
|
||||
}
|
||||
|
||||
throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`)
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove any style or extra link elements from the iframe placeholder
|
||||
@@ -131,7 +141,7 @@ export const injectStylesBeforeElement = (
|
||||
options: Partial<StyleOptions & { log: boolean }>,
|
||||
document: Document,
|
||||
el: HTMLElement | null,
|
||||
) => {
|
||||
): HTMLElement => {
|
||||
if (!el) return
|
||||
|
||||
// first insert all stylesheets as Link elements
|
||||
|
||||
@@ -23,7 +23,7 @@ it('Todo - should create snapshot', () => {
|
||||
// expect(tree).toMatchSnapshot();
|
||||
|
||||
// entire test area
|
||||
cy.get('#__cy_root')
|
||||
cy.get('[data-cy-root]')
|
||||
.invoke('html')
|
||||
.then(pretty)
|
||||
.should(
|
||||
|
||||
@@ -16,7 +16,7 @@ describe('Renderless component', () => {
|
||||
const onMoved = cy.stub()
|
||||
|
||||
mount(<MouseMovement onMoved={onMoved} />)
|
||||
cy.get('#__cy_root').should('be.empty')
|
||||
cy.get('[data-cy-root]').should('be.empty')
|
||||
cy.document()
|
||||
.trigger('mousemove')
|
||||
.then(() => {
|
||||
|
||||
@@ -7,7 +7,7 @@ import pretty from 'pretty'
|
||||
it('says hello world', () => {
|
||||
mount(<Hello name="world" />)
|
||||
cy.contains('Hello, world!').should('be.visible')
|
||||
cy.get('#__cy_root')
|
||||
cy.get('[data-cy-root]')
|
||||
.invoke('html')
|
||||
.then(pretty)
|
||||
.should('equal', '<h1>Hello, world!</h1>')
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -31,7 +31,7 @@ export default defineConfig({
|
||||
},
|
||||
'env': {
|
||||
'cypress-react-selector': {
|
||||
'root': '#__cy_root',
|
||||
'root': '[data-cy-root]',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,6 +8,6 @@
|
||||
<div id="__next_css__DO_NOT_USE__"></div>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,6 +8,6 @@
|
||||
<div id="__next_css__DO_NOT_USE__"></div>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -21,7 +21,7 @@
|
||||
"watch": "yarn build --watch --watch.exclude ./dist/**/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cypress/mount-utils": "*",
|
||||
"@cypress/mount-utils": "file:../mount-utils",
|
||||
"debug": "^4.3.2",
|
||||
"find-webpack": "2.2.1",
|
||||
"find-yarn-workspace-root": "2.0.0"
|
||||
|
||||
@@ -4,7 +4,8 @@ import getDisplayName from './getDisplayName'
|
||||
import {
|
||||
injectStylesBeforeElement,
|
||||
StyleOptions,
|
||||
ROOT_ID,
|
||||
getContainerEl,
|
||||
ROOT_SELECTOR,
|
||||
setupHooks,
|
||||
} from '@cypress/mount-utils'
|
||||
|
||||
@@ -12,8 +13,8 @@ import {
|
||||
* Inject custom style text or CSS file or 3rd party style resources
|
||||
*/
|
||||
const injectStyles = (options: MountOptions) => {
|
||||
return () => {
|
||||
const el = document.getElementById(ROOT_ID)
|
||||
return (): HTMLElement => {
|
||||
const el = getContainerEl()
|
||||
|
||||
return injectStylesBeforeElement(options, document, el)
|
||||
}
|
||||
@@ -66,12 +67,12 @@ const _mount = (type: 'mount' | 'rerender', jsx: React.ReactNode, options: Mount
|
||||
|
||||
lastMountedReactDom = reactDomToUse
|
||||
|
||||
const el = document.getElementById(ROOT_ID)
|
||||
const el = getContainerEl()
|
||||
|
||||
if (!el) {
|
||||
throw new Error(
|
||||
[
|
||||
'[@cypress/react] 🔥 Hmm, cannot find root element to mount the component.',
|
||||
`[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
|
||||
].join(' '),
|
||||
)
|
||||
}
|
||||
@@ -156,9 +157,7 @@ export const unmount = (options = { log: true }): globalThis.Cypress.Chainable<J
|
||||
|
||||
const _unmount = (options: { boundComponentMessage?: string, log: boolean }) => {
|
||||
return cy.then(() => {
|
||||
const selector = `#${ROOT_ID}`
|
||||
|
||||
return cy.get(selector, { log: false }).then(($el) => {
|
||||
return cy.get(ROOT_SELECTOR, { log: false }).then(($el) => {
|
||||
if (lastMountedReactDom) {
|
||||
const wasUnmounted = lastMountedReactDom.unmountComponentAtNode($el[0])
|
||||
|
||||
@@ -185,7 +184,7 @@ const _unmount = (options: { boundComponentMessage?: string, log: boolean }) =>
|
||||
// NOTE: we cannot use unmount here because
|
||||
// we are not in the context of a test
|
||||
const preMountCleanup = () => {
|
||||
const el = document.getElementById(ROOT_ID)
|
||||
const el = getContainerEl()
|
||||
|
||||
if (el && lastMountedReactDom) {
|
||||
lastMountedReactDom.unmountComponentAtNode(el)
|
||||
|
||||
@@ -41,7 +41,7 @@ Install `@cypress/vue` or `@cypress/react` to get this package working properly
|
||||
- Responds to every query with the prefix `__cypress/src/` (base path should be this prefix).
|
||||
- Responds to `__cypress/src/index.html` with an html page.
|
||||
This page
|
||||
- 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.
|
||||
- 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.
|
||||
- will load support files
|
||||
- will load the current spec from the url
|
||||
- will start the test when both files are done loading
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -55,7 +55,7 @@ export const Cypress = (
|
||||
|
||||
// insert the script in the end of the body
|
||||
return `${indexHtmlContent.substring(0, endOfBody)
|
||||
}<script>
|
||||
}<script type="module">
|
||||
${loader}
|
||||
</script>${
|
||||
indexHtmlContent.substring(endOfBody)
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -16,7 +16,7 @@
|
||||
"test:ci:ct": "node ../../scripts/run-ct-examples.js --examplesList=./examples.env"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cypress/mount-utils": "*",
|
||||
"@cypress/mount-utils": "file:../mount-utils",
|
||||
"@vue/test-utils": "2.0.0-rc.19"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -8,7 +8,7 @@ import { MountingOptions, VueWrapper, mount as VTUmount } from '@vue/test-utils'
|
||||
import {
|
||||
injectStylesBeforeElement,
|
||||
StyleOptions,
|
||||
ROOT_ID,
|
||||
getContainerEl,
|
||||
setupHooks,
|
||||
} from '@cypress/mount-utils'
|
||||
|
||||
@@ -43,7 +43,7 @@ let initialInnerHtml = ''
|
||||
|
||||
Cypress.on('run:start', () => {
|
||||
// `mount` is designed to work with component testing only.
|
||||
// it assumes ROOT_ID exists, which is not the case in e2e.
|
||||
// it assumes ROOT_SELECTOR exists, which is not the case in e2e.
|
||||
// if the user registers a custom command that imports `cypress/vue`,
|
||||
// this event will be registered and cause an error when the user
|
||||
// launches e2e (since it's common to use Cypress for both CT and E2E.
|
||||
@@ -55,13 +55,7 @@ Cypress.on('run:start', () => {
|
||||
initialInnerHtml = document.head.innerHTML
|
||||
Cypress.on('test:before:run', () => {
|
||||
Cypress.vueWrapper?.unmount()
|
||||
// @ts-ignore
|
||||
const document: Document = cy.state('document')
|
||||
let el = document.getElementById(ROOT_ID)
|
||||
|
||||
if (!el) {
|
||||
throw Error(`no element found at query #${ROOT_ID}. Please use the mount utils to mount it properly`)
|
||||
}
|
||||
const el = getContainerEl()
|
||||
|
||||
el.innerHTML = ''
|
||||
document.head.innerHTML = initialInnerHtml
|
||||
@@ -238,11 +232,7 @@ export function mount (
|
||||
// @ts-ignore
|
||||
const document: Document = cy.state('document')
|
||||
|
||||
let el = document.getElementById(ROOT_ID)
|
||||
|
||||
if (!el) {
|
||||
throw Error(`no element found at query #${ROOT_ID}. Please use the mount utils to mount it properly`)
|
||||
}
|
||||
const el = getContainerEl()
|
||||
|
||||
injectStylesBeforeElement(options, document, el)
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
import {
|
||||
injectStylesBeforeElement,
|
||||
StyleOptions,
|
||||
ROOT_ID,
|
||||
getContainerEl,
|
||||
setupHooks,
|
||||
} from '@cypress/mount-utils'
|
||||
|
||||
@@ -287,9 +287,7 @@ function registerAutoDestroy ($destroy: () => void) {
|
||||
enableAutoDestroy(registerAutoDestroy)
|
||||
|
||||
const injectStyles = (options: StyleOptions) => {
|
||||
const el = document.getElementById(ROOT_ID)
|
||||
|
||||
return injectStylesBeforeElement(options, document, el)
|
||||
return injectStylesBeforeElement(options, document, getContainerEl())
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -356,7 +354,7 @@ export const mount = (
|
||||
// @ts-ignore
|
||||
const document: Document = cy.state('document')
|
||||
|
||||
let el = document.getElementById(ROOT_ID)
|
||||
let el = getContainerEl()
|
||||
|
||||
const componentNode = document.createElement('div')
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
|
||||
const PROJECTS: ProjectFixtureDir[] = ['vuecli4-vue2', 'vuecli4-vue3', 'vuecli5-vue3']
|
||||
|
||||
// Add to this list to focus on a particular permutation
|
||||
const ONLY_PROJECTS: ProjectFixtureDir[] = ['vuecli4-vue2']
|
||||
const ONLY_PROJECTS: ProjectFixtureDir[] = []
|
||||
|
||||
for (const project of PROJECTS) {
|
||||
if (ONLY_PROJECTS.length && !ONLY_PROJECTS.includes(project)) {
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
"dependencies": {
|
||||
"html-webpack-plugin-4": "npm:html-webpack-plugin@^4",
|
||||
"html-webpack-plugin-5": "npm:html-webpack-plugin@^5",
|
||||
"rimraf": "3.0.2",
|
||||
"speed-measure-webpack-plugin": "1.4.2",
|
||||
"tsutils": "^3.21.0",
|
||||
"webpack-dev-server": "^4.7.4",
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -37,7 +37,7 @@ module.exports = (on, config) => {
|
||||
- Responds to every query with the prefix `__cypress/src/` (base path should be this prefix).
|
||||
- Responds to `__cypress/src/index.html` with an html page.
|
||||
This page
|
||||
- will contain an element `<div id="__cy_root"></div>` to attach the mounted components to.
|
||||
- will contain an element `<div data-cy-root></div>` to attach the mounted components to.
|
||||
- will load support files
|
||||
- will load the current spec from the url
|
||||
- will start the test when both files are done loading
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -12,7 +12,8 @@
|
||||
"binary-release": "node ./scripts/binary.js release",
|
||||
"binary-upload": "node ./scripts/binary.js upload",
|
||||
"binary-zip": "node ./scripts/binary.js zip",
|
||||
"build": "lerna run build --scope cypress && lerna run build --stream --no-bail --ignore create-cypress-tests --ignore \"'@packages/{runner}'\" && node ./cli/scripts/post-build.js && lerna run build --stream --scope create-cypress-tests",
|
||||
"build": "yarn build-npm-modules && lerna run build --stream --no-bail --ignore create-cypress-tests --ignore cypress --ignore \"'@packages/{runner}'\" --ignore \"'@cypress/{react,vue,vue2,mount-utils}'\" && node ./cli/scripts/post-build.js && lerna run build --stream --scope create-cypress-tests",
|
||||
"build-npm-modules": "lerna run build --scope cypress --scope @cypress/mount-utils && lerna run build --scope \"'@cypress/{react,vue,vue2}'\"",
|
||||
"build-prod": "lerna run build-prod-ui --stream && lerna run build-prod --stream --ignore create-cypress-tests && node ./cli/scripts/post-build.js && lerna run build-prod --stream --scope create-cypress-tests",
|
||||
"check-node-version": "node scripts/check-node-version.js",
|
||||
"check-terminal": "node scripts/check-terminal.js",
|
||||
|
||||
@@ -36,7 +36,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
|
||||
cy.get('body').click()
|
||||
|
||||
cy.findByTestId('playground-activator').click()
|
||||
cy.findByTestId('playground-selector').clear().type('#__cy_root')
|
||||
cy.findByTestId('playground-selector').clear().type('[data-cy-root]')
|
||||
|
||||
snapshotAUTPanel('cy.get selector')
|
||||
|
||||
@@ -44,7 +44,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
|
||||
|
||||
cy.window().then((win) => cy.spy(win.console, 'log'))
|
||||
cy.findByTestId('playground-print').click().window().then((win) => {
|
||||
expect(win.console.log).to.have.been.calledWith('%cCommand: ', 'font-weight: bold', 'cy.get(\'#__cy_root\')')
|
||||
expect(win.console.log).to.have.been.calledWith('%cCommand: ', 'font-weight: bold', 'cy.get(\'[data-cy-root]\')')
|
||||
})
|
||||
|
||||
cy.findByLabelText('Selector Methods').click()
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,11 +1,9 @@
|
||||
import { initial, initialCT, session, sessionLifecycle, visitFailure } from './Blank'
|
||||
import { ROOT_ID } from '@cypress/mount-utils'
|
||||
import { getContainerEl } from '@cypress/mount-utils'
|
||||
|
||||
describe('initial - e2e', () => {
|
||||
beforeEach(() => {
|
||||
const root = document.getElementById(ROOT_ID)!
|
||||
|
||||
root.innerHTML = initial()
|
||||
getContainerEl()!.innerHTML = initial()
|
||||
})
|
||||
|
||||
it('works', () => {
|
||||
@@ -19,26 +17,20 @@ describe('initial - e2e', () => {
|
||||
|
||||
describe('initial - ct', () => {
|
||||
it('works', () => {
|
||||
const root = document.getElementById(ROOT_ID)!
|
||||
|
||||
root.innerHTML = initialCT()
|
||||
getContainerEl()!.innerHTML = initialCT()
|
||||
|
||||
cy.percySnapshot()
|
||||
})
|
||||
|
||||
it('links to docs', () => {
|
||||
const root = document.getElementById(ROOT_ID)!
|
||||
|
||||
root.innerHTML = initialCT()
|
||||
getContainerEl()!.innerHTML = initialCT()
|
||||
|
||||
cy.contains('mount').should('have.attr', 'href', 'https://on.cypress.io/mount')
|
||||
})
|
||||
|
||||
it('works with small viewport', () => {
|
||||
cy.viewport(200, 1000)
|
||||
const root = document.getElementById(ROOT_ID)!
|
||||
|
||||
root.innerHTML = initial()
|
||||
getContainerEl()!.innerHTML = initial()
|
||||
|
||||
cy.percySnapshot()
|
||||
})
|
||||
@@ -46,9 +38,7 @@ describe('initial - ct', () => {
|
||||
|
||||
describe('session', () => {
|
||||
it('works', () => {
|
||||
const root = document.getElementById(ROOT_ID)!
|
||||
|
||||
root.innerHTML = session()
|
||||
getContainerEl()!.innerHTML = session()
|
||||
|
||||
cy.percySnapshot()
|
||||
})
|
||||
@@ -56,9 +46,7 @@ describe('session', () => {
|
||||
|
||||
describe('sessionLifecycle', () => {
|
||||
it('works', () => {
|
||||
const root = document.getElementById(ROOT_ID)!
|
||||
|
||||
root.innerHTML = sessionLifecycle()
|
||||
getContainerEl()!.innerHTML = sessionLifecycle()
|
||||
|
||||
cy.get('.warn').contains('experimentalSessionSupport')
|
||||
|
||||
@@ -68,17 +56,13 @@ describe('sessionLifecycle', () => {
|
||||
|
||||
describe('visitFailure', () => {
|
||||
it('works', () => {
|
||||
const root = document.getElementById(ROOT_ID)!
|
||||
|
||||
root.innerHTML = visitFailure({ url: 'http://foo.cypress.io' })
|
||||
getContainerEl()!.innerHTML = visitFailure({ url: 'http://foo.cypress.io' })
|
||||
|
||||
cy.percySnapshot()
|
||||
})
|
||||
|
||||
it('works with details', () => {
|
||||
const root = document.getElementById(ROOT_ID)!
|
||||
|
||||
root.innerHTML = visitFailure({ url: 'http://foo.cypress.io', status: 404, statusText: 'Not Found', contentType: 'text/html' })
|
||||
getContainerEl()!.innerHTML = visitFailure({ url: 'http://foo.cypress.io', status: 404, statusText: 'Not Found', contentType: 'text/html' })
|
||||
|
||||
cy.percySnapshot()
|
||||
})
|
||||
|
||||
@@ -338,7 +338,7 @@ export class WizardActions {
|
||||
</head>
|
||||
<body>
|
||||
${opts.bodyModifier}
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>`
|
||||
}
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -128,7 +128,8 @@ describe('scaffolding component testing', () => {
|
||||
fakeInstalledDeps()
|
||||
|
||||
cy.findByRole('button', { name: 'Continue' }).click()
|
||||
verifyConfigFile(`cypress.config.js`)
|
||||
// Don't verify this config file b/c we've had to modify it to get vue2 resolving
|
||||
// verifyConfigFile(`cypress.config.js`)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -214,6 +214,8 @@ export async function scaffoldProjectNodeModules (project: string, updateLockFil
|
||||
// 4. Fix relative paths in temp dir's lockfile.
|
||||
const lockFilePath = path.join(projectDir, lockFilename)
|
||||
|
||||
console.log(lockFilePath)
|
||||
|
||||
log(`Writing ${lockFilename} with fixed relative paths to temp dir`)
|
||||
await restoreLockFileRelativePaths({ projectDir, lockFilePath, relativePathToMonorepoRoot })
|
||||
|
||||
|
||||
@@ -7,6 +7,8 @@
|
||||
"browser": "lib/fixtureDirs.ts",
|
||||
"scripts": {
|
||||
"type-check": "tsc --project .",
|
||||
"clean-deps": "find . -depth -name node_modules -type d -exec rimraf {} \\;",
|
||||
"preprojects:yarn:install": "yarn clean-deps",
|
||||
"projects:yarn:install": "node ./scripts/projects-yarn-install.js",
|
||||
"test": "node ./scripts/run.js --glob-in-dir='{test,test-binary}'",
|
||||
"test:ci": "node ./scripts/run.js"
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,7 +8,7 @@ export default defineConfig({
|
||||
// to make everything fast, that Vite does
|
||||
// not seem to like.
|
||||
// https://vitejs.dev/config/#server-fs-allow
|
||||
allow: ['/root/.cache/', '/tmp/', '/Users/', '/private/'],
|
||||
allow: ['/root/cypress/', '/root/.cache/', '/tmp/', '/Users/', '/private/'],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -9,8 +9,7 @@
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cypress/react": "^5.0.0",
|
||||
"@cypress/webpack-dev-server": "^1.8.1",
|
||||
"@cypress/webpack-dev-server": "file:../../../npm/webpack-dev-server",
|
||||
"@testing-library/jest-dom": "^5.14.1",
|
||||
"@testing-library/react": "^12.0.0",
|
||||
"@testing-library/user-event": "^13.2.1",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { mount } from '@cypress/react'
|
||||
import React from 'react'
|
||||
import { mount } from 'cypress/react'
|
||||
import App from './App'
|
||||
|
||||
it('works', () => {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import React from 'react'
|
||||
import logo from './logo.svg'
|
||||
import './App.css'
|
||||
|
||||
|
||||
@@ -1120,10 +1120,8 @@
|
||||
find-webpack "2.2.1"
|
||||
find-yarn-workspace-root "2.0.0"
|
||||
|
||||
"@cypress/webpack-dev-server@^1.8.1":
|
||||
version "1.8.1"
|
||||
resolved "https://registry.yarnpkg.com/@cypress/webpack-dev-server/-/webpack-dev-server-1.8.1.tgz#5e37e15082b84a1e681198acd4a8473c10c95d9f"
|
||||
integrity sha512-gE+VIcRH/vmIQdzSRAz/xCkzcOxZKL4hK2IMWGqRG34Vm51HROXm4mgOkXdCmXacEoO16cWJawZTqSVVsSTH3w==
|
||||
"@cypress/webpack-dev-server@file:../../../npm/webpack-dev-server":
|
||||
version "0.0.0-development"
|
||||
dependencies:
|
||||
debug "^4.3.2"
|
||||
semver "^7.3.4"
|
||||
|
||||
@@ -12,6 +12,6 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
import { mount } from '@cypress/react'
|
||||
import { mount } from 'cypress/react'
|
||||
import React from 'react'
|
||||
import App from './App'
|
||||
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { mount } from '@cypress/react'
|
||||
import { mount } from 'cypress/react'
|
||||
import { Button } from './button'
|
||||
|
||||
it('works', () => {
|
||||
|
||||
@@ -8,6 +8,6 @@
|
||||
<div id="__next_css__DO_NOT_USE__"></div>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -15,7 +15,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cypress/react": "^5.0.0",
|
||||
"@cypress/webpack-dev-server": "^1.0.0",
|
||||
"@cypress/webpack-dev-server": "file:../../../npm/webpack-dev-server",
|
||||
"eslint": "8.9.0",
|
||||
"eslint-config-next": "12.1.0",
|
||||
"html-webpack-plugin": "^4.0.0",
|
||||
|
||||
@@ -80,10 +80,8 @@
|
||||
find-webpack "2.2.1"
|
||||
find-yarn-workspace-root "2.0.0"
|
||||
|
||||
"@cypress/webpack-dev-server@^1.0.0":
|
||||
version "1.8.1"
|
||||
resolved "https://registry.yarnpkg.com/@cypress/webpack-dev-server/-/webpack-dev-server-1.8.1.tgz#5e37e15082b84a1e681198acd4a8473c10c95d9f"
|
||||
integrity sha512-gE+VIcRH/vmIQdzSRAz/xCkzcOxZKL4hK2IMWGqRG34Vm51HROXm4mgOkXdCmXacEoO16cWJawZTqSVVsSTH3w==
|
||||
"@cypress/webpack-dev-server@file:../../../npm/webpack-dev-server":
|
||||
version "0.0.0-development"
|
||||
dependencies:
|
||||
debug "^4.3.2"
|
||||
semver "^7.3.4"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { mount } from '@cypress/react'
|
||||
import { mount } from 'cypress/react'
|
||||
import { Button } from './button'
|
||||
|
||||
it('works', () => {
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cypress/react": "^5.0.0",
|
||||
"@cypress/webpack-dev-server": "^1.0.0",
|
||||
"@cypress/webpack-dev-server": "file:../../../npm/webpack-dev-server",
|
||||
"eslint": "8.9.0",
|
||||
"eslint-config-next": "12.1.0",
|
||||
"html-webpack-plugin": "^4.0.0",
|
||||
|
||||
5054
system-tests/projects/nextjs-unconfigured/yarn.lock
Normal file
5054
system-tests/projects/nextjs-unconfigured/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
import { mount } from '@cypress/vue'
|
||||
import { mount } from 'cypress/vue2'
|
||||
import Tutorial from './Tutorial.vue'
|
||||
|
||||
it('works', () => {
|
||||
mount(Tutorial)
|
||||
cy.contains('Nuxt')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -7,7 +7,19 @@ module.exports = defineConfig({
|
||||
async devServer(cypressDevServerConfig, devServerConfig) {
|
||||
const webpackConfig = await getWebpackConfig()
|
||||
|
||||
// Whenever we need to test Vue 2, make sure to add this to the
|
||||
// Webpack configuration options
|
||||
// Because of #UNIFY-1565 we clash with Cypress's own
|
||||
// Vue 3 installation.
|
||||
webpackConfig.resolve = {
|
||||
...webpackConfig.resolve,
|
||||
alias: {
|
||||
...(webpackConfig.resolve?.alias ?? {}),
|
||||
'vue': require.resolve('vue')
|
||||
}
|
||||
}
|
||||
|
||||
return devServer(cypressDevServerConfig, { webpackConfig, ...devServerConfig })
|
||||
},
|
||||
},
|
||||
})
|
||||
})
|
||||
|
||||
@@ -7,6 +7,6 @@
|
||||
<title>Components App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@@ -37,5 +37,5 @@ export default {
|
||||
|
||||
// Build Configuration: https://go.nuxtjs.dev/config-build
|
||||
build: {
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -9,16 +9,16 @@
|
||||
"generate": "nuxt generate"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.19.3",
|
||||
"nuxt": "^2.15.8",
|
||||
"vue": "^2.6.14",
|
||||
"vue": "^2.6.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cypress/webpack-dev-server": "file:../../../npm/webpack-dev-server",
|
||||
"vue-server-renderer": "^2.6.14",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-dev-server": "4.7.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cypress/vue": "2.2.4",
|
||||
"@cypress/webpack-dev-server": "1.8.1"
|
||||
"webpack-dev-server": "4.7.4",
|
||||
"core-js": "^3.19.3",
|
||||
"nuxt": "^2.15.8",
|
||||
"cypress": "file:../../../cli"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -9,6 +9,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -9,6 +9,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="__cy_root"></div>
|
||||
<div data-cy-root></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,25 +0,0 @@
|
||||
# example: a11y
|
||||
|
||||
> Testing component accessibility
|
||||
|
||||
## Example
|
||||
|
||||
Testing components following the [React accessibility guide](https://reactjs.org/docs/accessibility.html) using [cypress-axe](https://github.com/avanslaars/cypress-axe) plugin.
|
||||
|
||||
See the spec file [src/failing.cy.jsx](src/failing.cy.jsx). For example, an `<input>` without a label is caught:
|
||||
|
||||
```js
|
||||
mount(<input type="text" value="John Smith" name="name" />)
|
||||
cy.checkA11y('input', {
|
||||
runOnly: {
|
||||
type: 'tag',
|
||||
values: ['wcag2a'],
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
You can click on the error to see more details in the DevTools console
|
||||
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
const { devServer } = require('@cypress/react/plugins/react-scripts')
|
||||
const { defineConfig } = require('cypress')
|
||||
|
||||
module.exports = defineConfig({
|
||||
component: {
|
||||
devServer,
|
||||
},
|
||||
})
|
||||
@@ -1 +0,0 @@
|
||||
import 'cypress-axe'
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 372 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 286 KiB |
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"name": "react-a11y",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@cypress/react": "^5.0.0",
|
||||
"@cypress/webpack-dev-server": "^1.8.1",
|
||||
"axe-core": "4.4.1",
|
||||
"cypress-axe": "0.14.0",
|
||||
"html-webpack-plugin": "^4.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.0",
|
||||
"webpack": "^4.0.0",
|
||||
"webpack-dev-server": "^4.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
/// <reference types="cypress" />
|
||||
import React from 'react'
|
||||
import { mount } from '@cypress/react'
|
||||
|
||||
describe('Accessibility', () => {
|
||||
before(() => {
|
||||
// https://github.com/avanslaars/cypress-axe
|
||||
cy.injectAxe()
|
||||
})
|
||||
|
||||
// https://www.w3.org/WAI/standards-guidelines/aria/
|
||||
context('aria', () => {
|
||||
it('catches missing aria-* label', () => {
|
||||
mount(<input type="text" value="John Smith" name="name" />)
|
||||
cy.checkA11y('input', {
|
||||
runOnly: {
|
||||
type: 'tag',
|
||||
values: ['wcag2a'],
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,32 +0,0 @@
|
||||
/// <reference types="cypress" />
|
||||
import React from 'react'
|
||||
import { mount } from '@cypress/react'
|
||||
|
||||
describe('Accessibility', () => {
|
||||
before(() => {
|
||||
// https://github.com/avanslaars/cypress-axe
|
||||
cy.injectAxe()
|
||||
})
|
||||
|
||||
// https://www.w3.org/WAI/standards-guidelines/aria/
|
||||
context('aria', () => {
|
||||
it('passes', () => {
|
||||
mount(
|
||||
<input
|
||||
type="text"
|
||||
aria-label="label text"
|
||||
aria-required="true"
|
||||
value="John Smith"
|
||||
name="name"
|
||||
/>,
|
||||
)
|
||||
|
||||
cy.checkA11y('input', {
|
||||
runOnly: {
|
||||
type: 'tag',
|
||||
values: ['wcag2a'],
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
import { mount } from "@cypress/react";
|
||||
import { mount } from "cypress/react";
|
||||
import App from "./App";
|
||||
|
||||
describe("App", () => {
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
# React Tailwind
|
||||
|
||||
> Component testing when using [Tailwind CSS](https://tailwindcss.com/), example created following the blog post [Using Tailwind CSS With React](https://medium.com/codingthesmartway-com-blog/using-tailwind-css-with-react-ced163d0e9e9) and Tailwind's own documentation.
|
||||
|
||||
## Run tests
|
||||
|
||||
You can execute `npm run build:css` to let Tailwind generate `src/styles/main.generated.css` or run Cypress, since this step is set as a pre-test step inside [package.json](package.json).
|
||||
|
||||
```shell
|
||||
npm run cy:open
|
||||
# or just run headless tests
|
||||
npm test
|
||||
```
|
||||
|
||||
## Tests
|
||||
|
||||
- [src/App.cy.js](src/App.cy.js) tests component [src/App.js](src/App.js) that uses Tailwind style bundle `src/styles/main.generated.css`
|
||||
|
||||
|
||||
|
||||
- [src/playground.cy.js](src/playground.cy.js) imports the CSS directly and shows off different available classes, allowing you to experiment with them from the test
|
||||
|
||||
|
||||
|
||||
Note: each test uses [cy.screenshot](https://on.cypress.io/screenshot) at the end to save an image to `cypress/screenshots` folder.
|
||||
|
||||
## See also
|
||||
|
||||
When working with styles, we recommend [visual testing](https://on.cypress.io/visual-testing) using one of 3rd party [visual plugins](https://on.cypress.io/plugins#visual-testing). See a few visual testing examples in this repository.
|
||||
@@ -1,9 +0,0 @@
|
||||
const { devServer } = require('@cypress/react/plugins/react-scripts')
|
||||
const { defineConfig } = require('cypress')
|
||||
|
||||
module.exports = defineConfig({
|
||||
component: {
|
||||
devServer,
|
||||
supportFile: false,
|
||||
},
|
||||
})
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 448 KiB |
@@ -1,23 +0,0 @@
|
||||
{
|
||||
"name": "react-tailwind",
|
||||
"version": "0.1.0",
|
||||
"description": "Component testing with Tailwind CSS in React",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"postinstall": "npm run build:css",
|
||||
"build:css": "tailwindcss build src/styles/tailwind.css -o src/styles/main.generated.css"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cypress/react": "^5.0.0",
|
||||
"@cypress/webpack-dev-server": "^1.8.1",
|
||||
"axe-core": "4.4.1",
|
||||
"cypress-axe": "0.14.0",
|
||||
"html-webpack-plugin": "^4.0.0",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-scripts": "4.0.0",
|
||||
"tailwindcss": "1.4.6",
|
||||
"webpack": "^4.0.0",
|
||||
"webpack-dev-server": "^4.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
/// <reference types="cypress" />
|
||||
import React from 'react'
|
||||
import { mount } from '@cypress/react'
|
||||
import App from './App'
|
||||
|
||||
describe('Tailwind App', () => {
|
||||
it('is stylish', () => {
|
||||
mount(<App />)
|
||||
// it has expected colors and styles
|
||||
cy.get('h1.font-bold').should('have.css', 'font-weight', '700')
|
||||
cy.get('button.text-white')
|
||||
.should('have.css', 'color', 'rgb(255, 255, 255)')
|
||||
.and('have.class', 'rounded')
|
||||
|
||||
cy.log('confirm rounded corners')
|
||||
cy.get('button.rounded').should(($el) => {
|
||||
expect($el.css('border-radius')).to.match(/^\d+px$/)
|
||||
})
|
||||
})
|
||||
})
|
||||
19
system-tests/projects/react-tailwind/src/App.js
vendored
19
system-tests/projects/react-tailwind/src/App.js
vendored
@@ -1,19 +0,0 @@
|
||||
import React from 'react'
|
||||
import './styles/main.generated.css'
|
||||
|
||||
function App () {
|
||||
return (
|
||||
<div className="h-64">
|
||||
<div className="p-4 m-4 bg-green-600">
|
||||
<h1 className="text-2xl font-bold text-white">Tailwind CSS Demo</h1>
|
||||
</div>
|
||||
<div className="p-4 m-4 bg-green-300 h-full">
|
||||
<h2 className="text-green-900">Have much fun using Tailwind CSS</h2>
|
||||
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
||||
My Tailwind Button
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default App
|
||||
@@ -1,27 +0,0 @@
|
||||
// you can import CSS directly to experiment with component styles
|
||||
import './styles/main.generated.css'
|
||||
import React from 'react'
|
||||
import { mount } from '@cypress/react'
|
||||
|
||||
describe('Different styles', () => {
|
||||
it('shows button styles', () => {
|
||||
mount(
|
||||
<div className="h-full bg-green-300 m-4 p-4">
|
||||
<h2 className="text-green-900">We got buttons</h2>
|
||||
<button className="rounded font-bold bg-blue-500 m-2 text-white py-2 px-4 hover:bg-blue-700">
|
||||
Big blue bold button
|
||||
</button>
|
||||
|
||||
<button className="rounded font-bold bg-blue-500 m-2 py-2 px-4 text-red-700 hover:bg-blue-700">
|
||||
Big blue bold button with red text
|
||||
</button>
|
||||
|
||||
<button className="rounded bg-yellow-500 m-2 text-black py-0 px-0">
|
||||
Small yellow button
|
||||
</button>
|
||||
</div>,
|
||||
)
|
||||
|
||||
cy.get('button').should('have.length', 3)
|
||||
})
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user