Merge branch 'develop' into marktnoonan/16098

cypress-io · Aug 5, 2022 · a28d6f8 · a28d6f8 · cypress-bot · Aug 5, 2022
2 parents 2eb2f82 + 05479bf
commit a28d6f8
Show file tree

Hide file tree

Showing 93 changed files with 779 additions and 718 deletions.
diff --git a/.github/ISSUE_TEMPLATE/4-flaky-test.yml b/.github/ISSUE_TEMPLATE/4-flaky-test.yml
@@ -0,0 +1,44 @@
+name: "❄️ Flaky test in `cypress-io/cypress` repository"
+title: "Flaky test: "
+labels: ["topic: flake ❄️", "stage: fire watch"]
+description: Report a flaky test in the Cypress open-source repository.
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Have a question? 👉 [Start a new discussion](https://github.com/cypress-io/cypress/discussions) or [ask in chat](https://on.cypress.io/discord).
+  - type: textarea
+    id: dashboard
+    attributes:
+      label: Link to dashboard or CircleCI failure
+      description: Please include a link to the failure in the Cypress Dashboard or in CircleCI.
+    validations:
+      required: true
+  - type: textarea
+    id: github-link
+    attributes:
+      label: Link to failing test in GitHub
+      description: Provide the GitHub link to the failing test with the line number.
+    validations:
+      required: true
+  - type: textarea
+    id: analysis
+    attributes:
+      label: Analysis
+      description: If you can, provide a quick analysis of why this test is flaky. 
+      placeholder: ex. The test appears to be flaky because...
+    validations:
+      required: true
+  - type: input
+    id: version
+    attributes:
+      label: Cypress Version
+      description: Provide the version of Cypress where the flake is occurring.
+      placeholder: ex. 10.4.0
+    validations:
+      required: true
+  - type: textarea
+    id: other
+    attributes:
+      label: Other
+      placeholder: Any other details?
diff --git a/browser-versions.json b/browser-versions.json
@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "104.0.5112.65",
-  "chrome:stable": "103.0.5060.134"
+  "chrome:beta": "104.0.5112.79",
+  "chrome:stable": "104.0.5112.79"
 }
diff --git a/circle.yml b/circle.yml
@@ -36,16 +36,13 @@ macWorkflowFilters: &darwin-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'marktnoonan/16098', << pipeline.git.branch >> ]
     - matches:
-          pattern: "-release$"
-          value: << pipeline.git.branch >>
-
+        pattern: "-release$"
+        value: << pipeline.git.branch >>
 linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'marktnoonan/16098', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -883,7 +880,7 @@ commands:
               fi
 
               curl -L https://raw.githubusercontent.com/cypress-io/cypress/$branch/scripts/ensure-node.sh --output ci-ensure-node.sh
-            else
+            else 
               # if no .node-version file exists, we no-op the node script and use the global yarn
               echo '' > ci-ensure-node.sh
             fi
@@ -2062,9 +2059,12 @@ jobs:
             CYPRESS_INSTALL_BINARY: /root/cypress/cypress.zip
           # let's install Cypress, Jest and any other package that might conflict
           # https://github.com/cypress-io/cypress/issues/6690
+
+          # Todo: Add `jest` back into the list once https://github.com/yargs/yargs-parser/issues/452
+          # is resolved.
           command: |
             npm install /root/cypress/cypress.tgz \
-              typescript jest @types/jest enzyme @types/enzyme
+              typescript @types/jest enzyme @types/enzyme
       - run:
           name: Test types clash ⚔️
           working_directory: <<parameters.wd>>

diff --git a/cli/package.json b/cli/package.json
@@ -107,7 +107,8 @@
     "vue",
     "react",
     "vue2",
-    "react18"
+    "react18",
+    "angular"
   ],
   "bin": {
     "cypress": "bin/cypress"
@@ -149,6 +150,11 @@
     "./mount-utils": {
       "require": "./mount-utils/dist/index.js",
       "types": "./mount-utils/dist/index.d.ts"
+    },
+    "./angular": {
+      "import": "./angular/dist/index.js",
+      "require": "./angular/dist/index.js",
+      "types": "./angular/dist/index.d.ts"
     }
   },
   "workspaces": {

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

diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
@@ -3044,7 +3044,7 @@ declare namespace Cypress {
 
   type DevServerConfigOptions = {
     bundler: 'webpack'
-    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next'
+    framework: 'react' | 'vue' | 'vue-cli' | 'nuxt' | 'create-react-app' | 'next' | 'angular'
     webpackConfig?: PickConfigOpt<'webpackConfig'>
   } | {
     bundler: 'vite'

diff --git a/npm/angular/package.json b/npm/angular/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "tsc || echo 'built, with type errors'",
+    "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
     "build-prod": "yarn build",
     "check-ts": "tsc --noEmit"
   },

diff --git a/npm/vite-dev-server/src/plugins/cypress.ts b/npm/vite-dev-server/src/plugins/cypress.ts
@@ -76,7 +76,7 @@ export const Cypress = (
       indexHtmlContent = indexHtmlContent.replace(
         '<head>',
         `<head>
-        ${scriptTagsToInject.map((script) => script.toString())}
+        ${scriptTagsToInject.join('')}
       `,
       )
 

diff --git a/npm/vite-dev-server/src/resolveConfig.ts b/npm/vite-dev-server/src/resolveConfig.ts
@@ -82,6 +82,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
           cypressConfig.cypressBinaryRoot,
         ],
       },
+      host: '127.0.0.1',
     },
     plugins: [
       Cypress(config, vite),

diff --git a/npm/webpack-dev-server/cypress/e2e/angular.cy.ts b/npm/webpack-dev-server/cypress/e2e/angular.cy.ts
@@ -12,8 +12,7 @@ for (const project of WEBPACK_REACT) {
     continue
   }
 
-  // TODO: revert once Angular is slated for release
-  describe.skip(`Working with ${project}`, () => {
+  describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
       cy.openProject(project)

diff --git a/npm/webpack-dev-server/src/devServer.ts b/npm/webpack-dev-server/src/devServer.ts
@@ -12,6 +12,7 @@ import { nuxtHandler } from './helpers/nuxtHandler'
 import { createReactAppHandler } from './helpers/createReactAppHandler'
 import { nextHandler } from './helpers/nextHandler'
 import { sourceDefaultWebpackDependencies, SourceRelativeWebpackResult } from './helpers/sourceRelativeWebpackModules'
+import { angularHandler } from './helpers/angularHandler'
 
 const debug = debugLib('cypress:webpack-dev-server:devServer')
 
@@ -25,7 +26,7 @@ export type WebpackDevServerConfig = {
   webpackConfig?: unknown // Derived from the user's webpack
 }
 
-export const ALL_FRAMEWORKS = ['create-react-app', 'nuxt', 'react', 'vue-cli', 'next', 'vue'] as const
+export const ALL_FRAMEWORKS = ['create-react-app', 'nuxt', 'react', 'vue-cli', 'next', 'vue', 'angular'] as const
 
 /**
  * @internal
@@ -115,9 +116,8 @@ async function getPreset (devServerConfig: WebpackDevServerConfig): Promise<Opti
     case 'next':
       return await nextHandler(devServerConfig)
 
-      // TODO: revert once Angular is slated for release
-      // case 'angular':
-      //   return await angularHandler(devServerConfig)
+    case 'angular':
+      return await angularHandler(devServerConfig)
 
     case 'react':
     case 'vue':

diff --git a/npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts b/npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts
@@ -65,8 +65,7 @@ const frameworkWebpackMapper: FrameworkWebpackMapper = {
   react: undefined,
   vue: undefined,
   next: 'next',
-  // TODO: revert once Angular is slated for release
-  // 'angular': '@angular-devkit/build-angular',
+  'angular': '@angular-devkit/build-angular',
 }
 
 // Source the users framework from the provided projectRoot. The framework, if available, will serve

diff --git a/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts b/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts
@@ -38,9 +38,8 @@ export function makeDefaultWebpackConfig (
     plugins: [
       new HtmlWebpackPlugin({
         template: indexHtmlFile,
-        // TODO: revert once Angular is slated for release
         // Angular generates all of it's scripts with <script type="module">. Live-reloading breaks without this option.
-        // ...(config.devServerConfig.framework === 'angular' ? { scriptLoading: 'module' } : {}),
+        ...(config.devServerConfig.framework === 'angular' ? { scriptLoading: 'module' } : {}),
       }),
     ],
   } as any

diff --git a/npm/webpack-dev-server/test/handlers/angularHandler.spec.ts b/npm/webpack-dev-server/test/handlers/angularHandler.spec.ts
@@ -40,8 +40,7 @@ const projectConfig: AngularJsonProjectConfig = {
   },
 }
 
-// TODO: revert once Angular is slated for release
-describe.skip('angularHandler', function () {
+describe('angularHandler', function () {
   this.timeout(1000 * 60)
 
   it('sources the config from angular-13', async () => {
@@ -54,7 +53,7 @@ describe.skip('angularHandler', function () {
         projectRoot,
         specPattern: 'src/**/*.cy.ts',
       } as Cypress.PluginConfigOptions,
-      // framework: 'angular',
+      framework: 'angular',
     } as WebpackDevServerConfig
 
     const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)
@@ -79,7 +78,7 @@ describe.skip('angularHandler', function () {
         projectRoot,
         specPattern: 'src/**/*.cy.ts',
       } as Cypress.PluginConfigOptions,
-      // framework: 'angular',
+      framework: 'angular',
     } as WebpackDevServerConfig
 
     const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await angularHandler(devServerConfig)

diff --git a/packages/app/cypress/component/support/index.ts b/packages/app/cypress/component/support/index.ts
@@ -24,6 +24,7 @@ import { createPinia } from '../../../src/store'
 import { setActivePinia } from 'pinia'
 import type { Pinia } from 'pinia'
 import 'cypress-real-events/support'
+
 import { installCustomPercyCommand } from '@packages/ui-components/cypress/support/customPercyCommand'
 
 let pinia: Pinia

diff --git a/packages/app/cypress/e2e/specs.cy.ts b/packages/app/cypress/e2e/specs.cy.ts
@@ -711,8 +711,8 @@ describe('App: Specs', () => {
         })
 
         // Timeout is increased here to allow ample time for the config change to be processed
-        cy.contains('No Specs Found', { timeout: 10000 }).should('be.visible')
-        cy.findByRole('button', { name: 'New Spec' }).click()
+        cy.contains('No Specs Found', { timeout: 12000 }).should('be.visible')
+        cy.findByRole('button', { name: 'New Spec' }).click({ timeout: 12000 })
 
         cy.findByRole('dialog', {
           name: 'Enter the path for your new spec',

diff --git a/packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts b/packages/app/cypress/e2e/subscriptions/specChange-subscription.cy.ts
@@ -230,9 +230,10 @@ e2e: {
 
     it('handles removing the last file', () => {
       cy.contains('dom-content.spec').click()
+      cy.get('button[aria-controls="reporter-inline-specs-list"]').click({ force: true })
+      cy.get('[data-cy=specs-list-panel]').should('be.visible')
       cy.waitForSpecToFinish()
       cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
-
       cy.withCtx(async (ctx, o) => {
         await Promise.all(o.paths.map((path) => ctx.actions.file.removeFileInProject(path)))
       }, {

diff --git a/packages/app/src/components/FileMatchButton.cy.tsx b/packages/app/src/components/FileMatchButton.cy.tsx
@@ -6,6 +6,8 @@ import faker from 'faker'
 import { ref } from 'vue'
 const fileMatchButtonSelector = '[data-cy=file-match-button]'
 
+faker.seed(1)
+
 describe('<FileMatchButton />', () => {
   it('renders a small extension', () => {
     cy.mount(() => (<div class="p-12">

diff --git a/packages/app/src/components/FileMatchIndicator.cy.tsx b/packages/app/src/components/FileMatchIndicator.cy.tsx
@@ -1,6 +1,8 @@
 import FileMatchIndicator from './FileMatchIndicator.vue'
 import faker from 'faker'
 
+faker.seed(1)
+
 describe('<FileMatchIndicator />', () => {
   it('renders a reasonable length text', () => {
     cy.mount(() => (<div class="p-12">

diff --git a/packages/data-context/src/actions/ProjectActions.ts b/packages/data-context/src/actions/ProjectActions.ts
@@ -444,7 +444,7 @@ export class ProjectActions {
   async reconfigureProject () {
     await this.ctx.actions.browser.closeBrowser()
     this.ctx.actions.wizard.resetWizard()
-    this.ctx.actions.wizard.initialize()
+    await this.ctx.actions.wizard.initialize()
     this.ctx.actions.electron.refreshBrowserWindow()
     this.ctx.actions.electron.showBrowserWindow()
   }

diff --git a/packages/data-context/src/actions/WizardActions.ts b/packages/data-context/src/actions/WizardActions.ts
@@ -80,14 +80,14 @@ export class WizardActions {
     return this.ctx.coreData.wizard
   }
 
-  initialize () {
+  async initialize () {
     if (!this.ctx.currentProject) {
       return
     }
 
     this.resetWizard()
 
-    const detected = detectFramework(this.ctx.currentProject)
+    const detected = await detectFramework(this.ctx.currentProject)
 
     debug('detected %o', detected)
 

diff --git a/packages/data-context/src/data/ProjectConfigManager.ts b/packages/data-context/src/data/ProjectConfigManager.ts
@@ -11,7 +11,7 @@ import { CypressEnv } from './CypressEnv'
 import { autoBindDebug } from '../util/autoBindDebug'
 import type { EventRegistrar } from './EventRegistrar'
 import type { DataContext } from '../DataContext'
-import { DependencyToInstall, inPkgJson, WIZARD_BUNDLERS, WIZARD_DEPENDENCIES, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
+import { DependencyToInstall, isDependencyInstalled, WIZARD_BUNDLERS, WIZARD_DEPENDENCIES, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
 
 const debug = debugLib(`cypress:lifecycle:ProjectConfigManager`)
 
@@ -155,16 +155,16 @@ export class ProjectConfigManager {
       this.options.refreshLifecycle().catch(this.onLoadError)
     } else if (this._eventsIpc && !this._registeredEventsTarget && this._cachedLoadConfig) {
       this.setupNodeEvents(this._cachedLoadConfig)
-      .then(() => {
+      .then(async () => {
         if (this._testingType === 'component') {
-          this.checkDependenciesForComponentTesting()
+          await this.checkDependenciesForComponentTesting()
         }
       })
       .catch(this.onLoadError)
     }
   }
 
-  checkDependenciesForComponentTesting () {
+  async checkDependenciesForComponentTesting () {
     // if it's a function, for example, the user is created their own dev server,
     // and not using one of our presets. Assume they know what they are doing and
     // what dependencies they require.
@@ -184,15 +184,15 @@ export class ProjectConfigManager {
       return
     }
 
-    const result = inPkgJson(bundler, this.options.projectRoot)
+    const result = await isDependencyInstalled(bundler, this.options.projectRoot)
 
     if (!result.satisfied) {
       unsupportedDeps.set(result.dependency.type, result)
     }
 
-    const isFrameworkSatisfied = (bundler: typeof WIZARD_BUNDLERS[number], framework: typeof WIZARD_FRAMEWORKS[number]) => {
-      for (const dep of framework.dependencies(bundler.type, this.options.projectRoot)) {
-        const res = inPkgJson(dep.dependency, this.options.projectRoot)
+    const isFrameworkSatisfied = async (bundler: typeof WIZARD_BUNDLERS[number], framework: typeof WIZARD_FRAMEWORKS[number]) => {
+      for (const dep of await (framework.dependencies(bundler.type, this.options.projectRoot))) {
+        const res = await isDependencyInstalled(dep.dependency, this.options.projectRoot)
 
         if (!res.satisfied) {
           return false
@@ -209,11 +209,11 @@ export class ProjectConfigManager {
     let isSatisfied = false
 
     for (const framework of frameworks) {
-      if (isFrameworkSatisfied(bundler, framework)) {
+      if (await isFrameworkSatisfied(bundler, framework)) {
         isSatisfied = true
         break
       } else {
-        for (const dep of framework.dependencies(bundler.type, this.options.projectRoot)) {
+        for (const dep of await framework.dependencies(bundler.type, this.options.projectRoot)) {
           mismatchedFrameworkDeps.set(dep.dependency.type, dep)
         }
       }