Merge branch 'develop' of github.com:cypress-io/cypress into feature/…

…create-from-react-component
cypress-io · Dec 16, 2022 · 7f14a32 · 7f14a32 · cypress-bot · Dec 16, 2022
2 parents ca6be7a + 331c1dc
commit 7f14a32
Show file tree

Hide file tree

Showing 42 changed files with 5,966 additions and 44 deletions.
diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
@@ -1589,19 +1589,19 @@ declare namespace Cypress {
      *
      * @see https://on.cypress.io/nextuntil
      */
-    nextUntil<K extends keyof HTMLElementTagNameMap>(selector: K, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<HTMLElementTagNameMap[K]>>
+    nextUntil<K extends keyof HTMLElementTagNameMap>(selector: K, filter?: string, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<HTMLElementTagNameMap[K]>>
     /**
      * Get all following siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.
      *
      * @see https://on.cypress.io/nextuntil
      */
-    nextUntil<E extends HTMLElement = HTMLElement>(options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<E>>
+    nextUntil<E extends Node = HTMLElement>(selector: string, filter?: string, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<E>>
     /**
      * Get all following siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.
      *
      * @see https://on.cypress.io/nextuntil
      */
-    nextUntil<E extends HTMLElement = HTMLElement>(selector: string, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<E>>
+    nextUntil<E extends Node = HTMLElement>(element: E | JQuery<E>, filter?: string, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<E>>
 
     /**
      * Filter DOM element(s) from a set of DOM elements. Opposite of `.filter()`
@@ -1774,21 +1774,21 @@ declare namespace Cypress {
      * Get all previous siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.
      * > The querying behavior of this command matches exactly how [.prevUntil()](http://api.jquery.com/prevUntil) works in jQuery.
      *
-     * @see https://on.cypress.io/prevall
+     * @see https://on.cypress.io/prevuntil
      */
     prevUntil<K extends keyof HTMLElementTagNameMap>(selector: K, filter?: string, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<HTMLElementTagNameMap[K]>>
     /**
      * Get all previous siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.
      * > The querying behavior of this command matches exactly how [.prevUntil()](http://api.jquery.com/prevUntil) works in jQuery.
      *
-     * @see https://on.cypress.io/prevall
+     * @see https://on.cypress.io/prevuntil
      */
     prevUntil<E extends Node = HTMLElement>(selector: string, filter?: string, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<E>>
     /**
      * Get all previous siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.
      * > The querying behavior of this command matches exactly how [.prevUntil()](http://api.jquery.com/prevUntil) works in jQuery.
      *
-     * @see https://on.cypress.io/prevall
+     * @see https://on.cypress.io/prevuntil
      */
     prevUntil<E extends Node = HTMLElement>(element: E | JQuery<E>, filter?: string, options?: Partial<Loggable & Timeoutable>): Chainable<JQuery<E>>
 

diff --git a/cli/types/tests/cypress-tests.ts b/cli/types/tests/cypress-tests.ts
@@ -1136,3 +1136,29 @@ namespace CypressLocalStorageTests {
   cy.clearAllSessionStorage({ log: false })
   cy.clearAllSessionStorage({ log: 'true' }) // $ExpectError
 }
+
+namespace CypressTraversalTests {
+  cy.wrap({}).prevUntil('a') // $ExpectType Chainable<JQuery<HTMLAnchorElement>>
+  cy.wrap({}).prevUntil('#myItem') // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).prevUntil('span', 'a') // $ExpectType Chainable<JQuery<HTMLSpanElement>>
+  cy.wrap({}).prevUntil('#myItem', 'a') // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).prevUntil('div', 'a', { log: false, timeout: 100 }) // $ExpectType Chainable<JQuery<HTMLDivElement>>
+  cy.wrap({}).prevUntil('#myItem', 'a', { log: false, timeout: 100 }) // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).prevUntil('#myItem', 'a', { log: 'true' }) // $ExpectError
+
+  cy.wrap({}).nextUntil('a') // $ExpectType Chainable<JQuery<HTMLAnchorElement>>
+  cy.wrap({}).nextUntil('#myItem') // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).nextUntil('span', 'a') // $ExpectType Chainable<JQuery<HTMLSpanElement>>
+  cy.wrap({}).nextUntil('#myItem', 'a') // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).nextUntil('div', 'a', { log: false, timeout: 100 }) // $ExpectType Chainable<JQuery<HTMLDivElement>>
+  cy.wrap({}).nextUntil('#myItem', 'a', { log: false, timeout: 100 }) // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).nextUntil('#myItem', 'a', { log: 'true' }) // $ExpectError
+
+  cy.wrap({}).parentsUntil('a') // $ExpectType Chainable<JQuery<HTMLAnchorElement>>
+  cy.wrap({}).parentsUntil('#myItem') // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).parentsUntil('span', 'a') // $ExpectType Chainable<JQuery<HTMLSpanElement>>
+  cy.wrap({}).parentsUntil('#myItem', 'a') // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).parentsUntil('div', 'a', { log: false, timeout: 100 }) // $ExpectType Chainable<JQuery<HTMLDivElement>>
+  cy.wrap({}).parentsUntil('#myItem', 'a', { log: false, timeout: 100 }) // $ExpectType Chainable<JQuery<HTMLElement>>
+  cy.wrap({}).parentsUntil('#myItem', 'a', { log: 'true' }) // $ExpectError
+}
diff --git a/npm/webpack-dev-server/CHANGELOG.md b/npm/webpack-dev-server/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [@cypress/webpack-dev-server-v3.1.2](https://github.com/cypress-io/cypress/compare/@cypress/webpack-dev-server-v3.1.1...@cypress/webpack-dev-server-v3.1.2) (2022-12-16)
+
+
+### Bug Fixes
+
+* use srcRoot for angular build context ([#25090](https://github.com/cypress-io/cypress/issues/25090)) ([7c36118](https://github.com/cypress-io/cypress/commit/7c361187e31c3681f415da8a9073221d807987f6))
+
 # [@cypress/webpack-dev-server-v3.1.1](https://github.com/cypress-io/cypress/compare/@cypress/webpack-dev-server-v3.1.0...@cypress/webpack-dev-server-v3.1.1) (2022-12-08)
 
 

diff --git a/npm/webpack-dev-server/src/helpers/angularHandler.ts b/npm/webpack-dev-server/src/helpers/angularHandler.ts
@@ -1,10 +1,13 @@
 import * as fs from 'fs-extra'
 import { tmpdir } from 'os'
 import * as path from 'path'
-import type { Configuration } from 'webpack'
+import type { Configuration, RuleSetRule } from 'webpack'
 import type { PresetHandlerResult, WebpackDevServerConfig } from '../devServer'
 import { dynamicAbsoluteImport, dynamicImport } from '../dynamic-import'
 import { sourceDefaultWebpackDependencies } from './sourceRelativeWebpackModules'
+import debugLib from 'debug'
+
+const debug = debugLib('cypress:webpack-dev-server:angularHandler')
 
 export type BuildOptions = Record<string, any>
 
@@ -217,7 +220,7 @@ function createFakeContext (projectRoot: string, defaultProjectConfig: Cypress.A
     getProjectMetadata: () => {
       return {
         root: defaultProjectConfig.root,
-        sourceRoot: defaultProjectConfig.root,
+        sourceRoot: defaultProjectConfig.sourceRoot,
         projectType: 'application',
       }
     },
@@ -250,7 +253,33 @@ async function getAngularCliWebpackConfig (devServerConfig: AngularWebpackDevSer
   const { config } = await generateBrowserWebpackConfigFromContext(
     buildOptions,
     context,
-    (wco: any) => [getCommonConfig(wco), getStylesConfig(wco)],
+    (wco: any) => {
+      const stylesConfig = getStylesConfig(wco)
+
+      // We modify resolve-url-loader and set `root` to be `projectRoot` + `sourceRoot` to ensure
+      // imports in scss, sass, etc are correctly resolved.
+      // https://github.com/cypress-io/cypress/issues/24272
+      stylesConfig.module.rules.forEach((rule: RuleSetRule) => {
+        rule.rules?.forEach((ruleSet) => {
+          if (!Array.isArray(ruleSet.use)) {
+            return
+          }
+
+          ruleSet.use.map((loader) => {
+            if (typeof loader !== 'object' || typeof loader.options !== 'object' || !loader.loader?.includes('resolve-url-loader')) {
+              return
+            }
+
+            const root = path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
+
+            debug('Adding root %s to resolve-url-loader options', root)
+            loader.options.root = path.join(devServerConfig.cypressConfig.projectRoot, projectConfig.sourceRoot)
+          })
+        })
+      })
+
+      return [getCommonConfig(wco), stylesConfig]
+    },
   )
 
   delete config.entry.main

diff --git a/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts b/packages/app/cypress/e2e/runner/support/snapshot-reporter.ts
@@ -13,6 +13,14 @@ export const snapshotReporter = () => {
       '[data-cy=reporter-panel]': ($el) => {
         $el.attr('style', 'width: 450px !important')
       },
+      '[data-cy=reporter-running-icon]': ($el) => {
+        // remove 'fa-spin' class so that the icon is not animated
+        $el.attr('class', '')
+      },
+      '.command-progress': ($el) => {
+        // don't display command progress bar in snapshot
+        $el.attr('style', 'display: none !important')
+      },
     },
   })
 }
diff --git a/packages/data-context/src/actions/MigrationActions.ts b/packages/data-context/src/actions/MigrationActions.ts
@@ -189,8 +189,17 @@ export class MigrationActions {
         return this.ctx.onError(getError('MIGRATION_CYPRESS_NOT_FOUND'))
       }
 
-      if (!semver.satisfies(version, '^10.0.0')) {
-        return this.ctx.onError(getError('MIGRATION_MISMATCHED_CYPRESS_VERSIONS', version))
+      const currentVersion = (await this.ctx.versions.versionData()).current.version
+
+      // Validate that the project being migrated has a version of Cypress compatible with the version being executed.
+      // This handles situations where Cypress is launched in global mode to migrate a project with an older version of
+      // Cypress as a dependency which could break the project when launched directly.
+      // For example:
+      //    Local: 9.6.0     Global: 10.0.0     FAIL
+      //    Local: 10.0.1    Global: 10.0.0     PASS
+      //    Local: 12.0.0    Global: 12.0.1     FAIL
+      if (!semver.satisfies(version, `^${currentVersion}`)) {
+        return this.ctx.onError(getError('MIGRATION_MISMATCHED_CYPRESS_VERSIONS', version, currentVersion))
       }
     }
 

diff --git a/packages/data-context/test/unit/actions/MigrationActions.spec.ts b/packages/data-context/test/unit/actions/MigrationActions.spec.ts
@@ -67,7 +67,7 @@ describe('MigrationActions', () => {
       fs.writeJsonSync(path.join(mockCypressDir, 'package.json'), mockPkgJson)
     }
 
-    it('errors when local cypress version is <10', () => {
+    it('errors when local cypress version is <10', async () => {
       mockLocallyInstalledCypress(currentProject, '9.5.0')
       const ctx = createTestDataContext()
 
@@ -77,9 +77,11 @@ describe('MigrationActions', () => {
         coreData.app.isGlobalMode = true
       })
 
+      const currentVersion = (await ctx.versions.versionData()).current.version
+
       return (
         expect(ctx.actions.migration.initialize({})).to.eventually.be.rejectedWith(
-          'You are running Cypress version 10 in global mode, but you are attempting to migrate a project where Cypress version 9.5.0 is installed',
+          `You are running Cypress version ${currentVersion} in global mode, but you are attempting to migrate a project where Cypress version 9.5.0 is installed`,
         )
       )
     })

diff --git a/packages/driver/cypress/e2e/commands/querying/querying.cy.js b/packages/driver/cypress/e2e/commands/querying/querying.cy.js
@@ -82,6 +82,12 @@ describe('src/cy/commands/querying', () => {
       cy.get('doesNotExist')
     })
 
+    it('respects null withinSubject', () => {
+      cy.get('#list').within(() => {
+        cy.get('#upper', { withinSubject: null })
+      })
+    })
+
     describe('custom elements', () => {
       // <foobarbazquux>custom element</foobarbazquux>
 

diff --git a/packages/driver/src/cy/commands/querying/querying.ts b/packages/driver/src/cy/commands/querying/querying.ts
@@ -172,7 +172,7 @@ export default (Commands, Cypress, cy, state) => {
       let $el
 
       try {
-        let scope = userOptions.withinSubject || cy.getSubjectFromChain(withinSubject)
+        let scope = userOptions.withinSubject !== undefined ? userOptions.withinSubject : cy.getSubjectFromChain(withinSubject)
 
         if (includeShadowDom) {
           const root = scope?.get(0) || cy.state('document')

diff --git a/packages/errors/__snapshot-html__/MIGRATION_MISMATCHED_CYPRESS_VERSIONS.html b/packages/errors/__snapshot-html__/MIGRATION_MISMATCHED_CYPRESS_VERSIONS.html
diff --git a/packages/errors/src/errors.ts b/packages/errors/src/errors.ts
@@ -1616,11 +1616,11 @@ export const AllCypressErrors = {
       `
   },
 
-  MIGRATION_MISMATCHED_CYPRESS_VERSIONS: (version: string) => {
+  MIGRATION_MISMATCHED_CYPRESS_VERSIONS: (version: string, currentVersion: string) => {
     return errTemplate`
-      You are running Cypress version 10 in global mode, but you are attempting to migrate a project where ${fmt.cypressVersion(version)} is installed. 
+      You are running ${fmt.cypressVersion(currentVersion)} in global mode, but you are attempting to migrate a project where ${fmt.cypressVersion(version)} is installed. 
 
-      Ensure the project you are migrating has Cypress version 10 installed.
+      Ensure the project you are migrating has Cypress version ${fmt.cypressVersion(currentVersion)} installed.
 
       https://on.cypress.io/migration-guide
     `

diff --git a/packages/errors/test/unit/visualSnapshotErrors_spec.ts b/packages/errors/test/unit/visualSnapshotErrors_spec.ts
@@ -1198,7 +1198,7 @@ describe('visual error templates', () => {
     },
     MIGRATION_MISMATCHED_CYPRESS_VERSIONS: () => {
       return {
-        default: ['9.6.0'],
+        default: ['9.6.0', '10.0.0'],
       }
     },
     MIGRATION_CYPRESS_NOT_FOUND: () => {

diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
@@ -706,7 +706,7 @@
       "line4": "In the next screen, you'll be able to reconfigure component testing in a new guided configuration wizard."
     },
     "wizard": {
-      "title": "Migrating to Cypress 11",
+      "title": "Migrating to Cypress {version}",
       "description": "Your project requires updates to work with this version.",
       "typicalMigrationLabel": "Typical migration:",
       "typicalMigrationTime": "5-10 minutes",

diff --git a/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts b/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts
@@ -1,4 +1,5 @@
 import defaultMessages from '@packages/frontend-shared/src/locales/en-US.json'
+import pkg from '../../../../package.json'
 
 const expectStackToBe = (mode: 'open' | 'closed') => {
   cy.get(`[data-cy="stack-open-${mode === 'open' ? 'true' : 'false'}"]`)
@@ -45,7 +46,7 @@ describe('Config files error handling', () => {
     cy.visitLaunchpad()
     cy.skipWelcome()
 
-    cy.get('body').should('contain.text', defaultMessages.migration.wizard.title)
+    cy.get('body').should('contain.text', defaultMessages.migration.wizard.title.replace('{version}', pkg.version.split('.')[0]))
     cy.get('body').should('contain.text', defaultMessages.migration.wizard.description)
   })
 

diff --git a/packages/launchpad/cypress/e2e/migration.cy.ts b/packages/launchpad/cypress/e2e/migration.cy.ts
@@ -86,8 +86,8 @@ describe('global mode', () => {
     cy.addProject('migration-e2e-custom-integration-with-projectId')
     cy.visitLaunchpad()
 
-    cy.withCtx((ctx, o) => {
-      o.sinon.stub(ctx.actions.migration, 'locallyInstalledCypressVersion').resolves('10.0.0')
+    cy.withCtx(async (ctx, o) => {
+      o.sinon.stub(ctx.actions.migration, 'locallyInstalledCypressVersion').resolves((await ctx.versions.versionData()).current.version)
     })
 
     cy.contains('button', cy.i18n.majorVersionWelcome.actionContinue).click()
@@ -168,7 +168,10 @@ describe('Opening unmigrated project', () => {
 
     cy.contains('button', cy.i18n.majorVersionWelcome.actionContinue).click()
     cy.contains(cy.i18n.majorVersionWelcome.title).should('not.exist')
-    cy.contains('h1', 'Migrating to Cypress 11').should('be.visible')
+    cy.contains('h1', `Migrating to Cypress ${Cypress.version.split('.')[0]}`).should('be.visible')
+
+    // Wait for migration prompt to load before taking a snapshot
+    cy.get('.spinner').should('not.exist')
 
     cy.percySnapshot()
   })

diff --git a/packages/launchpad/src/migration/MigrationWizard.vue b/packages/launchpad/src/migration/MigrationWizard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="pb-8px">
     <h1 class="font-medium text-center pt-20px text-32px text-body-gray-900">
-      {{ t('migration.wizard.title') }}
+      {{ t('migration.wizard.title', { version: cypressMajorVersion }) }}
     </h1>
     <p
       class="mx-42px mt-12px text-center text-body-gray-600 text-18px"
@@ -183,6 +183,12 @@ fragment MigrationBaseError on Query {
 
 gql`
 fragment MigrationWizardData on Query {
+  versions {
+    current {
+      id
+      version
+    }
+  }
   migration {
     filteredSteps {
       id
@@ -404,4 +410,6 @@ const buttonTitle = computed(() => {
 
   return t('migration.wizard.step1.button')
 })
+
+const cypressMajorVersion = computed(() => query.data.value?.versions?.current.version.split('.')[0] ?? '')
 </script>
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
@@ -79,7 +79,7 @@ const shouldShowCount = (aliasesWithDuplicates: Array<Alias> | null, aliasName:
 const NavColumns = observer(({ model, isPinned, toggleColumnPin }) => (
   <>
     <div className='command-number-column' onClick={toggleColumnPin}>
-      {model._isPending() && <RunningIcon className='fa-spin' />}
+      {model._isPending() && <RunningIcon data-cy="reporter-running-icon" className='fa-spin' />}
       {(!model._isPending() && isPinned) && <PinIcon className='command-pin' />}
       {(!model._isPending() && !isPinned) && model.number}
     </div>

diff --git a/packages/server/lib/browsers/cdp_automation.ts b/packages/server/lib/browsers/cdp_automation.ts
@@ -158,7 +158,7 @@ export class CdpAutomation {
     onFn('Network.responseReceived', this.onResponseReceived)
   }
 
-  async startVideoRecording (writeVideoFrame: WriteVideoFrame, screencastOpts?) {
+  async startVideoRecording (writeVideoFrame: WriteVideoFrame, screencastOpts) {
     this.onFn('Page.screencastFrame', async (e) => {
       writeVideoFrame(Buffer.from(e.data, 'base64'))
       await this.sendDebuggerCommandFn('Page.screencastFrameAck', { sessionId: e.sessionId })

diff --git a/packages/server/lib/browsers/electron.ts b/packages/server/lib/browsers/electron.ts
@@ -112,7 +112,7 @@ function _installExtensions (win: BrowserWindow, extensionPaths: string[], optio
 async function recordVideo (cdpAutomation: CdpAutomation, videoApi: RunModeVideoApi) {
   const { writeVideoFrame } = await videoApi.useFfmpegVideoController()
 
-  await cdpAutomation.startVideoRecording(writeVideoFrame)
+  await cdpAutomation.startVideoRecording(writeVideoFrame, screencastOpts())
 }
 
 export = {

diff --git a/system-tests/project-fixtures/angular/src/app/app.component.cy.ts b/system-tests/project-fixtures/angular/src/app/app.component.cy.ts
@@ -1,3 +1,4 @@
+// Keep this test very simple as "@cypress/schematic" relies on it to run smoke tests
 import { AppComponent } from './app.component'
 
 it('should', () => {

diff --git a/system-tests/project-fixtures/angular/src/app/app.component.html b/system-tests/project-fixtures/angular/src/app/app.component.html
@@ -1 +1 @@
-<h1>Hello World your app is running!</h1>
+<h1>Hello World your app is running!</h1>
diff --git a/system-tests/project-fixtures/angular/src/app/app.component.scss b/system-tests/project-fixtures/angular/src/app/app.component.scss
@@ -1,3 +1,3 @@
 h1 {
   color: red
-}
+}
diff --git a/system-tests/project-fixtures/angular/src/app/components/url-image.component.scss b/system-tests/project-fixtures/angular/src/app/components/url-image.component.scss
@@ -0,0 +1,6 @@
+.test-img {
+  background-image: url("/assets/test.png");
+  background-size: contain;
+  height: 100px;
+  width: 100px;
+}
diff --git a/system-tests/project-fixtures/angular/src/app/components/url-image.component.ts b/system-tests/project-fixtures/angular/src/app/components/url-image.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-url-image',
+  template: `<div class="test-img"></div>`,
+  styleUrls: ['./url-image.component.scss'],
+})
+export class UrlImageComponent {}