Merge branch 'tgriesser/fix/UNIFY-1206-cloud' of github.com:cypress-i…

…o/cypress into tgriesser/fix/UNIFY-1206-cloud * 'tgriesser/fix/UNIFY-1206-cloud' of github.com:cypress-io/cypress: feat: swap the #__cy_root id selector to become data-cy-root for component mounting (#20951) fix: Doc changes around vue2 (#21066) feat: Add vue2 package from npm/vue/v2 branch (#21026) fix: add possible frameworks to object API config (#21056)
cypress-io · Apr 13, 2022 · fdac9d8 · fdac9d8
2 parents 222c465 + d823544
commit fdac9d8
Show file tree

Hide file tree

Showing 181 changed files with 8,592 additions and 107,030 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -41,6 +41,7 @@ cli/types
 # cli/react, cli/vue, and cli/mount-utils are all copied from dist'd builds
 cli/react
 cli/vue
+cli/vue2
 cli/mount-utils
 
 # packages/example is not linted (think about changing this)
@@ -69,6 +70,9 @@ npm/cypress-schematic/src/**/*.js
 /npm/create-cypress-tests/initial-template
 /npm/create-cypress-tests/**/*.template.*
 
+# The global eslint configuration is not set up to parse vue@2 files
+/npm/vue2/**/*.vue
+
 packages/data-context/test/unit/codegen/files
 
 # community templates we test against, no need to lint

diff --git a/.releaserc.base.js b/.releaserc.base.js
@@ -15,5 +15,6 @@ module.exports = {
   ],
   extends: 'semantic-release-monorepo',
   branches: [
+    'master',
   ],
 }
diff --git a/circle.yml b/circle.yml
@@ -956,7 +956,7 @@ commands:
           command: ls -la types
           working_directory: cli/build
       - run:
-          command: ls -la vue mount-utils react
+          command: ls -la vue vue2 mount-utils react
           working_directory: cli/build
       - unless:
           condition:

diff --git a/cli/.gitignore b/cli/.gitignore
@@ -16,5 +16,6 @@ build
 # ignore packages synced at build-time via
 # the sync-exported-npm-with-cli.js script
 vue
+vue2
 react
-mount-utils
+mount-utils
diff --git a/cli/package.json b/cli/package.json
@@ -106,7 +106,8 @@
     "types/net-stubbing.ts",
     "mount-utils",
     "vue",
-    "react"
+    "react",
+    "vue2"
   ],
   "bin": {
     "cypress": "bin/cypress"
@@ -124,6 +125,10 @@
       "import": "./vue/dist/cypress-vue.esm-bundler.js",
       "require": "./vue/dist/cypress-vue.cjs.js"
     },
+    "./vue2": {
+      "import": "./vue2/dist/cypress-vue2.esm-bundler.js",
+      "require": "./vue2/dist/cypress-vue2.cjs.js"
+    },
     "./package.json": {
       "import": "./package.json",
       "require": "./package.json"

diff --git a/cli/scripts/post-build.js b/cli/scripts/post-build.js
@@ -10,6 +10,7 @@ const npmModulesToCopy = [
   'mount-utils',
   'react',
   'vue',
+  'vue2',
 ]
 
 npmModulesToCopy.forEach((folder) => {

diff --git a/cli/scripts/post-install.js b/cli/scripts/post-install.js
@@ -23,7 +23,7 @@ shell.set('-e') // any error is fatal
 fs.ensureDirSync(join(__dirname, '..', 'types'))
 
 includeTypes.forEach((folder) => {
-  const source = resolvePkg(`@types/${folder}`, { cwd: join(__dirname, '..', '..') })
+  const source = resolvePkg(`@types/${folder}`, { cwd: __dirname })
 
   fs.copySync(source, join(__dirname, '..', 'types', folder))
 })

diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
@@ -2987,11 +2987,11 @@ declare namespace Cypress {
 
   type DevServerConfigObject = {
     bundler: 'webpack'
-    framework: 'react'
+    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app'
     webpackConfig?: PickConfigOpt<'webpackConfig'>
   } | {
     bundler: 'vite'
-    framework: 'react'
+    framework: 'react' | 'vue'
     viteConfig?: Omit<Exclude<PickConfigOpt<'viteConfig'>, undefined>, 'base' | 'root'>
   }
 

diff --git a/npm/angular/cypress/support/component-index.html b/npm/angular/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
-</html>
+</html>
diff --git a/npm/create-cypress-tests/src/component-testing/init-component-testing.test.ts b/npm/create-cypress-tests/src/component-testing/init-component-testing.test.ts
@@ -226,7 +226,7 @@ describe('init component tests script', () => {
     }) as any)
 
     await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
-    expect(execStub).to.be.calledWith('yarn add @cypress/vue@3 --dev')
+    expect(execStub).to.be.calledWith('yarn add @cypress/vue --dev')
   })
 
   it('suggest the right instruction based on user template choice', async () => {

diff --git a/npm/create-cypress-tests/src/component-testing/installFrameworkAdapter.ts b/npm/create-cypress-tests/src/component-testing/installFrameworkAdapter.ts
@@ -48,10 +48,16 @@ type InstallAdapterOptions = {
   useYarn: boolean
 }
 
+const frameworkDependencies = {
+  react: '@cypress/react',
+  'vue@2': '@cypress/vue2',
+  'vue@3': '@cypress/vue',
+}
+
 export async function installFrameworkAdapter (cwd: string, options: InstallAdapterOptions) {
   const framework = await guessOrAskForFramework(cwd)
 
-  await installDependency(`@cypress/${framework}`, options)
+  await installDependency(frameworkDependencies[framework], options)
 
   return framework
 }
diff --git a/npm/design-system/cypress/support/component-index.html b/npm/design-system/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/mount-utils/src/index.ts b/npm/mount-utils/src/index.ts
@@ -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

diff --git a/npm/react/cypress/component/advanced/react-book-example/src/Todos.cy.js b/npm/react/cypress/component/advanced/react-book-example/src/Todos.cy.js
@@ -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(

diff --git a/npm/react/cypress/component/advanced/renderless/mouse.cy.js b/npm/react/cypress/component/advanced/renderless/mouse.cy.js
@@ -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(() => {

diff --git a/npm/react/cypress/component/basic/react-tutorial/pretty-snapshots.cy.js b/npm/react/cypress/component/basic/react-tutorial/pretty-snapshots.cy.js
@@ -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>')

diff --git a/npm/react/cypress/support/component-index.html b/npm/react/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/craco/cypress/support/component-index.html b/npm/react/examples/craco/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/find-webpack/cypress.config.ts b/npm/react/examples/find-webpack/cypress.config.ts
@@ -31,7 +31,7 @@ export default defineConfig({
   },
   'env': {
     'cypress-react-selector': {
-      'root': '#__cy_root',
+      'root': '[data-cy-root]',
     },
   },
 })
diff --git a/npm/react/examples/find-webpack/cypress/support/component-index.html b/npm/react/examples/find-webpack/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/nextjs-webpack-5/cypress/support/component-index.html b/npm/react/examples/nextjs-webpack-5/cypress/support/component-index.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>
diff --git a/npm/react/examples/nextjs/cypress/support/component-index.html b/npm/react/examples/nextjs/cypress/support/component-index.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>
diff --git a/npm/react/examples/react-scripts-folder/cypress/support/component-index.html b/npm/react/examples/react-scripts-folder/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/react-scripts-typescript/cypress/support/component-index.html b/npm/react/examples/react-scripts-typescript/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/react-scripts/cypress/support/component-index.html b/npm/react/examples/react-scripts/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/sass-and-ts/cypress/support/component-index.html b/npm/react/examples/sass-and-ts/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/snapshots/cypress/support/component-index.html b/npm/react/examples/snapshots/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/using-babel-typescript/cypress/support/component-index.html b/npm/react/examples/using-babel-typescript/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/using-babel/cypress/support/component-index.html b/npm/react/examples/using-babel/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/visual-sudoku/cypress/support/component-index.html b/npm/react/examples/visual-sudoku/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/visual-testing-with-applitools/cypress/support/component-index.html b/npm/react/examples/visual-testing-with-applitools/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/visual-testing-with-happo/cypress/support/component-index.html b/npm/react/examples/visual-testing-with-happo/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/visual-testing-with-percy/cypress/support/component-index.html b/npm/react/examples/visual-testing-with-percy/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/webpack-file/cypress/support/component-index.html b/npm/react/examples/webpack-file/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/webpack-options/cypress/support/component-index.html b/npm/react/examples/webpack-options/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/package.json b/npm/react/package.json
@@ -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"