Merge branch 'develop'

Author: chrisbreiding

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

CONTRIBUTING.md

@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "94.0.4606.54",
-  "chrome:stable": "94.0.4606.54"
+  "chrome:beta": "95.0.4638.40",
+  "chrome:stable": "94.0.4606.71"
 }

browser-versions.json

@@ -425,7 +425,20 @@ commands:
     steps:
       - restore_cached_workspace
       - run:
-          command: yarn workspace @packages/server test ./test/e2e/$(( $CIRCLE_NODE_INDEX ))_*spec* --browser <<parameters.browser>>
+          command: |
+            ALL_SPECS=`circleci tests glob "/root/cypress/packages/server/test/e2e/*spec*"`
+            SPECS=
+            for file in $ALL_SPECS; do
+              # filter out non_root tests, they have their own stage
+              if [[ "$file" == *"non_root"* ]]; then
+                echo "Skipping $file"
+                continue
+              fi
+              SPECS="$SPECS $file"
+            done
+            SPECS=`echo $SPECS | xargs -n 1 | circleci tests split --split-by=timings`
+            echo SPECS=$SPECS
+            yarn workspace @packages/server test $SPECS --browser <<parameters.browser>>
       - verify-mocha-results
       - store_test_results:
           path: /tmp/cypress

circle.yml

@@ -29,7 +29,7 @@ yarn test-watch --scope cypress
 yarn test-debug --scope cypress
 ```
 
-### Updating snaphots
+### Updating snapshots
 
 Prepend `SNAPSHOT_UPDATE=1` to any test command. See [`snap-shot-it` instructions](https://github.com/bahmutov/snap-shot-it#advanced-use) for more info.
 

cli/README.md

@@ -68,6 +68,23 @@ const cypressModuleApi = {
       return cli.parseRunCommand(args)
     },
   },
+
+  /**
+   * Provides automatic code completion for configuration in many popular code editors.
+   * While it's not strictly necessary for Cypress to parse your configuration, we
+   * recommend wrapping your config object with `defineConfig()`
+   * @example
+   * module.exports = defineConfig({
+   *   viewportWith: 400
+   * })
+   *
+   * @see ../types/cypress-npm-api.d.ts
+   * @param {Cypress.ConfigOptions} config
+   * @returns {Cypress.ConfigOptions} the configuration passed in parameter
+   */
+  defineConfig (config) {
+    return config
+  },
 }
 
 module.exports = cypressModuleApi

cli/lib/cypress.js

@@ -377,6 +377,21 @@ declare module 'cypress' {
      * Cypress does
      */
     cli: CypressCommandLine.CypressCliParser
+
+    /**
+     * Provides automatic code completion for configuration in many popular code editors.
+     * While it's not strictly necessary for Cypress to parse your configuration, we
+     * recommend wrapping your config object with `defineConfig()`
+     * @example
+     * module.exports = defineConfig({
+     *   viewportWith: 400
+     * })
+     *
+     * @see ../types/cypress-npm-api.d.ts
+     * @param {Cypress.ConfigOptions} config
+     * @returns {Cypress.ConfigOptions} the configuration passed in parameter
+     */
+    defineConfig(config: Cypress.ConfigOptions): Cypress.ConfigOptions
   }
 
   // export Cypress NPM module interface

cli/types/cypress-npm-api.d.ts

@@ -2992,6 +2992,7 @@ declare namespace Cypress {
     disableTimersAndAnimations: boolean
     padding: Padding
     scale: boolean
+    overwrite: boolean
     onBeforeScreenshot: ($el: JQuery) => void
     onAfterScreenshot: ($el: JQuery, props: {
       path: string

cli/types/cypress.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "description": "Cypress.io end to end testing tool",
   "private": true,
   "scripts": {
@@ -64,12 +64,8 @@
     "type-check": "node scripts/type_check",
     "verify:mocha:results": "node ./scripts/verify_mocha_results",
     "prewatch": "yarn ensure-deps",
-    "watch": "lerna exec yarn watch --parallel --stream"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "watch": "lerna exec yarn watch --parallel --stream",
+    "prepare": "husky install"
   },
   "devDependencies": {
     "@cypress/bumpercar": "2.0.12",
@@ -147,7 +143,7 @@
     "hasha": "5.0.0",
     "http-server": "0.12.3",
     "human-interval": "1.0.0",
-    "husky": "2.4.1",
+    "husky": "7.0.2",
     "inquirer": "3.3.0",
     "inquirer-confirm": "2.0.3",
     "jest": "24.9.0",
@@ -157,7 +153,7 @@
     "konfig": "0.2.1",
     "lazy-ass": "1.6.0",
     "lerna": "3.20.2",
-    "lint-staged": "11.0.0",
+    "lint-staged": "11.1.2",
     "listr2": "3.8.3",
     "lodash": "4.17.21",
     "make-empty-github-commit": "cypress-io/make-empty-github-commit#4a592aedb776ba2f4cc88979055315a53eec42ee",

package.json

@@ -437,11 +437,17 @@ describe('Project Nav', function () {
         cy.get('.browsers .fa-exclamation-triangle').trigger('mouseover')
 
         cy.get('.cy-tooltip').should('contain', 'Cypress detected policy settings on your computer that may cause issues with using this browser. For more information, see')
-        cy.get('.cy-tooltip a').click().then(function () {
+
+        // prevent tooltips from being hidden so we can snapshot the state
+        // of the browser warning tooltip
+        cy.percySnapshot({ elementOverrides: [] })
+
+        cy
+        .get('.cy-tooltip a')
+        .click()
+        .then(function () {
           expect(this.ipc.externalOpen).to.be.calledWith('https://on.cypress.io/bad-browser-policy')
         })
-
-        cy.percySnapshot()
       })
     })
 

packages/desktop-gui/cypress/integration/project_nav_spec.js

@@ -358,34 +358,52 @@ describe('Settings', () => {
   })
 
   describe('project id panel', () => {
-    beforeEach(function () {
-      this.openProject.resolve(this.config)
-      this.projectStatuses[0].id = this.config.projectId
-      this.getProjectStatus.resolve(this.projectStatuses[0])
+    context('with json file', () => {
+      beforeEach(function () {
+        this.openProject.resolve(this.config)
+        this.projectStatuses[0].id = this.config.projectId
+        this.getProjectStatus.resolve(this.projectStatuses[0])
 
-      this.goToSettings()
-      cy.contains('Project ID').click()
-    })
+        this.goToSettings()
+        cy.contains('Project ID').click()
+      })
 
-    it('displays project id section', function () {
-      cy.contains(this.config.projectId)
-      cy.percySnapshot()
-    })
+      it('displays project id section', function () {
+        cy.contains(this.config.projectId)
+        cy.percySnapshot()
+      })
+
+      it('shows tooltip on hover of copy to clipboard', () => {
+        cy.get('.action-copy').trigger('mouseover')
+        cy.get('.cy-tooltip').should('contain', 'Copy to clipboard')
+      })
 
-    it('shows tooltip on hover of copy to clipboard', () => {
-      cy.get('.action-copy').trigger('mouseover')
-      cy.get('.cy-tooltip').should('contain', 'Copy to clipboard')
+      it('copies project id config to clipboard', function () {
+        cy.get('.action-copy').click()
+        .then(() => {
+          const expectedJsonConfig = {
+            projectId: this.config.projectId,
+          }
+          const expectedCopyCommand = JSON.stringify(expectedJsonConfig, null, 2)
+
+          expect(this.ipc.setClipboardText).to.be.calledWith(expectedCopyCommand)
+        })
+      })
     })
 
-    it('copies project id config to clipboard', function () {
-      cy.get('.action-copy').click()
-      .then(() => {
-        const expectedJsonConfig = {
-          projectId: this.config.projectId,
-        }
-        const expectedCopyCommand = JSON.stringify(expectedJsonConfig, null, 2)
+    context('with js file', () => {
+      beforeEach(function () {
+        this.openProject.resolve({ ...this.config, configFile: 'custom.cypress.js' })
+        this.projectStatuses[0].id = this.config.projectId
+        this.getProjectStatus.resolve(this.projectStatuses[0])
+
+        this.goToSettings()
+        cy.contains('Project ID').click()
+      })
 
-        expect(this.ipc.setClipboardText).to.be.calledWith(expectedCopyCommand)
+      it('displays project id section', function () {
+        cy.get('[data-cy="project-id"] pre').contains('module.exports = {')
+        cy.percySnapshot()
       })
     })
   })
@@ -586,6 +604,17 @@ describe('Settings', () => {
       .should('contain', systemNodeVersion)
       .should('not.contain', bundledNodeVersion)
     })
+
+    it('should display an additional line when configFile is not JSON', function () {
+      const configFile = 'notjson.js'
+
+      this.navigateWithConfig({
+        configFile,
+      })
+
+      cy.contains(`Node.js Version (${bundledNodeVersion})`).click()
+      cy.get('.node-version li').should('contain', configFile)
+    })
   })
 
   describe('proxy settings panel', () => {

packages/desktop-gui/cypress/integration/settings_spec.js

@@ -6,10 +6,14 @@ const configFileFormatted = (configFile) => {
     return <><code>cypress.json</code> file (currently disabled by <code>--config-file false</code>)</>
   }
 
-  if (isUndefined(configFile) || configFile === 'cypress.json') {
+  if (isUndefined(configFile)) {
     return <><code>cypress.json</code> file</>
   }
 
+  if (['cypress.json', 'cypress.config.js'].includes(configFile)) {
+    return <><code>{configFile}</code> file</>
+  }
+
   return <>custom config file <code>{configFile}</code></>
 }
 

packages/desktop-gui/src/lib/config-file-formatted.jsx

@@ -103,3 +103,5 @@ export function stripSharedDirsFromDir2 (dir1, dir2, osName) {
   .join(sep)
   .value()
 }
+
+export const isFileJSON = (file) => file && /\.json$/.test(file)

packages/desktop-gui/src/lib/utils.js

@@ -3,6 +3,8 @@ import { observer } from 'mobx-react'
 import React from 'react'
 
 import ipc from '../lib/ipc'
+import { isFileJSON } from '../lib/utils'
+import { configFileFormatted } from '../lib/config-file-formatted'
 
 const openHelp = (e) => {
   e.preventDefault()
@@ -89,6 +91,9 @@ const NodeVersion = observer(({ project }) => {
         <div className='well text-muted'>
           This Node.js version is used to:
           <ul>
+            {isFileJSON(project.configFile)
+              ? undefined
+              : <li>Execute code in the {configFileFormatted(project.configFile)}.</li>}
             <li>Build files in the {formatIntegrationFolder()} folder.</li>
             <li>Build files in the <code>cypress/support</code> folder.</li>
             <li>Execute code in the {formatPluginsFile() ? formatPluginsFile() : 'plugins'} file.</li>

packages/desktop-gui/src/settings/node-version.jsx

@@ -3,6 +3,7 @@ import React from 'react'
 import Tooltip from '@cypress/react-tooltip'
 
 import ipc from '../lib/ipc'
+import { isFileJSON } from '../lib/utils'
 import { configFileFormatted } from '../lib/config-file-formatted'
 
 const openProjectIdHelp = (e) => {
@@ -19,10 +20,6 @@ const openProjectIdHelp = (e) => {
 const ProjectId = observer(({ project }) => {
   if (!project.id) return null
 
-  const projectIdJsonConfig = {
-    projectId: project.id,
-  }
-
   return (
     <div data-cy="project-id">
       <a href='#' className='learn-more' onClick={openProjectIdHelp}>
@@ -33,7 +30,7 @@ const ProjectId = observer(({ project }) => {
         It identifies your project and should not be changed.
       </p>
       <pre className='line-nums copy-to-clipboard'>
-        <a className="action-copy" onClick={() => ipc.setClipboardText(JSON.stringify(projectIdJsonConfig, null, 2))}>
+        <a className="action-copy" onClick={() => ipc.setClipboardText(document.querySelector('[data-cy="project-id"] pre').innerText)}>
           <Tooltip
             title='Copy to clipboard'
             placement='top'
@@ -42,9 +39,20 @@ const ProjectId = observer(({ project }) => {
             <i className='fas fa-clipboard' />
           </Tooltip>
         </a>
-        <span>{'{'}</span>
-        <span>{`  "projectId": "${project.id}"`}</span>
-        <span>{'}'}</span>
+        {
+          isFileJSON(project.configFile) ?
+            <>
+              <span>{'{'}</span>
+              <span>{`  "projectId": "${project.id}"`}</span>
+              <span>{'}'}</span>
+            </>
+            :
+            <>
+              <span>{'module.exports = {'}</span>
+              <span>{`  projectId: "${project.id}"`}</span>
+              <span>{'}'}</span>
+            </>
+        }
       </pre>
     </div>
   )

packages/desktop-gui/src/settings/project-id.jsx

@@ -44,4 +44,14 @@ describe('ProjectId', () => {
 
     cy.get('@externalOpen').should('have.been.called')
   })
+
+  it('shows a different output when configFile is js', () => {
+    mount(<ProjectId project={{ ...project, configFile: 'cypress.config.js' }} />, {
+      stylesheets: '/__root/dist/app.css',
+    })
+
+    cy.get('[data-cy=project-id] pre').then(($pre) => {
+      expect($pre.text()).to.contain('module.exports = ')
+    })
+  })
 })

packages/desktop-gui/src/settings/project-id_spec.jsx

@@ -112,6 +112,14 @@ describe('src/cy/commands/actions/select', () => {
       })
     })
 
+    it('unselects all options if called with empty array', () => {
+      cy.get('select[name=movies]').select(['apoc', 'br'])
+
+      cy.get('select[name=movies]').select([]).then(($select) => {
+        expect($select.val()).to.deep.eq([])
+      })
+    })
+
     // readonly should only be limited to inputs, not checkboxes
     it('can select a readonly select', () => {
       cy.get('select[name=hunter]').select('gon').then(($select) => {
@@ -505,17 +513,6 @@ describe('src/cy/commands/actions/select', () => {
         cy.get('select[name=foods]').select('')
       })
 
-      it('throws invalid array argument error when called with empty array', (done) => {
-        cy.on('fail', (err) => {
-          expect(err.message).to.include('`cy.select()` must be passed an array containing only strings and/or numbers. You passed: `[]`')
-          expect(err.docsUrl).to.eq('https://on.cypress.io/select')
-
-          done()
-        })
-
-        cy.get('select[name=foods]').select([])
-      })
-
       it('throws invalid array argument error when called with invalid array', (done) => {
         cy.on('fail', (err) => {
           expect(err.message).to.include('`cy.select()` must be passed an array containing only strings and/or numbers. You passed: `[true,false]`')