Merge pull request #22223 from cypress-io/mikep/CLOUD-577-develop-merge

cypress-io · Jun 9, 2022 · f26ea2d · f26ea2d
2 parents 1489d14 + e85aeae
commit f26ea2d
Show file tree

Hide file tree

Showing 106 changed files with 612 additions and 230 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -310,9 +310,9 @@ The project utilizes [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspac
 
 > **⚠ Running on Windows?**
 >
-> Many of the NPM scripts used during development use commands designed for a Linux-like shell.If you are running a Windows operating system, you may encounter many commands that are not working. To fix this behavior, you have to set a Linux-like shell as the default `npm` script shell. If you have Git for Windows installed, you can set Git Bash as the default script shell by using the following command:
+> If you are running a Windows operating system, you may encounter some commands that are not working. In order to resolve paths correctly during the development build process, you may need to explicitly set your default `yarn` shell script to Command Prompt by using the following command:
 >```bash
-> yarn config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"
+> yarn config set script-shell "C:\\Windows\\system32\\cmd.exe"
 >```
 
 **Install all dependencies:**

diff --git a/browser-versions.json b/browser-versions.json
@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "102.0.5005.61",
-  "chrome:stable": "101.0.4951.64"
+  "chrome:beta": "103.0.5060.33",
+  "chrome:stable": "102.0.5005.61"
 }
diff --git a/circle.yml b/circle.yml
@@ -835,7 +835,7 @@ commands:
           command: |
             if [[ -f cypress.json ]]; then
               rm -rf cypress.json
-              echo 'module.exports = {}' > cypress.config.js
+              echo 'module.exports = { e2e: {} }' > cypress.config.js
             fi
       - run:
           name: Rename support file
@@ -1080,8 +1080,10 @@ jobs:
           name: Top level packages
           command: yarn list --depth=0 || true
       - run:
-          name: Check env canaries
-          command: node ./scripts/circle-env.js --check-canaries
+          name: Check env canaries on Mac/Linux
+          command: |
+            # Windows CircleCI does not have a way to pull per-job env
+            [[ $PLATFORM != 'windows' ]] && node ./scripts/circle-env.js --check-canaries || true
       - build-and-persist
       - store-npm-logs
 
@@ -2211,7 +2213,7 @@ jobs:
             CYPRESS_INTERNAL_FORCE_SCAFFOLD: "1"
           command: |
             rm -rf cypress.json
-            echo 'module.exports = {}' > cypress.config.js
+            echo 'module.exports = { e2e: {} }' > cypress.config.js
       - run:
           name: Rename support file
           working_directory: test-binary

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "10.0.2",
+  "version": "10.0.3",
   "description": "Cypress.io end to end testing tool",
   "private": true,
   "scripts": {

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -73,9 +73,7 @@
     "wonka": "^4.0.15"
   },
   "files": [
-    "dist",
-    "lib",
-    "src"
+    "dist"
   ],
   "vite": {
     "optimizeDeps": {

diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -208,4 +208,20 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
     cy.get('[data-cy="select-browser"] > button').should('be.disabled')
     cy.percySnapshot()
   })
+
+  it('opens and closes selector playground', () => {
+    cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
+      render: (gqlVal) => {
+        return renderWithGql(gqlVal)
+      },
+    })
+
+    cy.get('[data-cy="playground-activator"]').click()
+    cy.get('#selector-playground').should('be.visible')
+
+    cy.percySnapshot()
+
+    cy.get('[data-cy="playground-activator"]').click()
+    cy.get('#selector-playground').should('not.exist')
+  })
 })
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -21,7 +21,7 @@
           :aria-label="t('runner.selectorPlayground.toggle')"
           @click="togglePlayground"
         >
-          <i-cy-crosshairs_x16 class="icon-dark-gray-600" />
+          <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
         </Button>
         <div class="mr-12px max-w-100% grid text-gray-600 items-center truncate">
           {{ autStore.url }}
@@ -34,12 +34,12 @@
         <Button
           data-cy="playground-activator"
           :disabled="isDisabled"
-          class="border-gray-100  mr-12px"
+          class="border-gray-100 mr-12px"
           variant="outline"
           :aria-label="t('runner.selectorPlayground.toggle')"
           @click="togglePlayground"
         >
-          <i-cy-crosshairs_x16 class="icon-dark-gray-600" />
+          <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
         </Button>
       </div>
       <SpecRunnerDropdown

diff --git a/packages/app/src/runner/aut-iframe.ts b/packages/app/src/runner/aut-iframe.ts
@@ -462,17 +462,16 @@ export class AutIframe {
     const $el = this.getElements(Cypress.dom)
 
     const selectorPlaygroundStore = useSelectorPlaygroundStore()
-    const command = `cy.${selectorPlaygroundStore.method}('${selectorPlaygroundStore.selector}')`
 
     if (!$el) {
       return logger.logFormatted({
-        Command: command,
+        Command: selectorPlaygroundStore.command,
         Yielded: 'Nothing',
       })
     }
 
     logger.logFormatted({
-      Command: command,
+      Command: selectorPlaygroundStore.command,
       Elements: $el.length,
       Yielded: Cypress.dom.getElements($el),
     })

diff --git a/packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx b/packages/app/src/runner/selector-playground/SelectorPlayground.cy.tsx
@@ -117,7 +117,7 @@ describe('SelectorPlayground', () => {
     cy.get('[data-cy="selector-playground-tooltip"]').should('be.visible').contains('Copied!')
     cy.percySnapshot('Copy to clipboard click tooltip')
 
-    cy.wrap(copyStub).should('have.been.calledWith', '.foo-bar')
+    cy.wrap(copyStub).should('have.been.calledWith', 'cy.get(\'.foo-bar\')')
   })
 
   it('prints elements when selected elements found', () => {

diff --git a/packages/app/src/runner/selector-playground/SelectorPlayground.vue b/packages/app/src/runner/selector-playground/SelectorPlayground.vue
@@ -223,7 +223,7 @@ function printSelected () {
 
 const { copy } = useClipboard({ copiedDuring: 2000 })
 const copyToClipboard = () => {
-  copy(selector.value)
+  copy(selectorPlaygroundStore.command)
 }
 </script>
 

diff --git a/packages/app/src/specs/RowDirectory.vue b/packages/app/src/specs/RowDirectory.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="h-full grid gap-8px grid-cols-[14px,16px,auto] items-center focus:outline-transparent"
+    class="h-full grid gap-8px grid-cols-[14px,16px,auto] items-center focus:outline-none"
     :data-cy="`row-directory-depth-${depth}`"
     :aria-expanded="expanded"
   >

diff --git a/packages/app/src/specs/SpecItem.vue b/packages/app/src/specs/SpecItem.vue
@@ -4,14 +4,14 @@
     data-cy="spec-item"
   >
     <i-cy-document-blank_x16
-      class="icon-light-gray-50 icon-dark-gray-200"
+      class="icon-light-gray-50 icon-dark-gray-200 group-hocus:icon-light-indigo-200 group-hocus:icon-dark-indigo-400"
     />
 
     <div class="text-gray-400 text-indigo-500 group-hocus:text-indigo-600">
       <HighlightedText
         :text="fileName"
         :indexes="indexes.filter((idx) => idx < fileName.length)"
-        class="font-medium text-indigo-500 group-hocus:text-indigo-600"
+        class="font-medium text-indigo-500 group-hocus:text-indigo-700"
         highlight-classes="text-gray-1000"
       />
       <HighlightedText

diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
@@ -125,24 +125,18 @@
           :key="row.index"
           :data-cy="row.data.isLeaf ? 'spec-list-file' : 'spec-list-directory'"
           :data-cy-row="row.data.data?.baseName"
+          :is-leaf="row.data.isLeaf"
+          :route="{ path: '/specs/runner', query: { file: row.data.data?.relative?.replace(/\\/g, '/') } }"
+          @toggleRow="row.data.toggle"
         >
           <template #file>
-            <RouterLink
-              v-if="row.data.isLeaf && row.data"
-              :key="row.data.data?.absolute"
-              class="focus:outline-transparent"
-              :to="{ path: '/specs/runner', query: { file: row.data.data?.relative?.replace(/\\/g, '/') } }"
-              data-cy="spec-item-link"
-              @click.meta.prevent="handleCtrlClick"
-              @click.ctrl.prevent="handleCtrlClick"
-            >
-              <SpecItem
-                :file-name="row.data.data?.fileName || row.data.name"
-                :extension="row.data.data?.specFileExtension || ''"
-                :indexes="row.data.data?.fileIndexes"
-                :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 22}px` }"
-              />
-            </RouterLink>
+            <SpecItem
+              v-if="row.data.isLeaf"
+              :file-name="row.data.data?.fileName || row.data.name"
+              :extension="row.data.data?.specFileExtension || ''"
+              :indexes="row.data.data?.fileIndexes"
+              :style="{ paddingLeft: `${((row.data.depth - 2) * 10) + 22}px` }"
+            />
 
             <RowDirectory
               v-else
@@ -152,7 +146,7 @@
               :style="{ paddingLeft: `${(row.data.depth - 2) * 10}px` }"
               :indexes="getDirIndexes(row.data)"
               :aria-controls="getIdIfDirectory(row)"
-              @click="row.data.toggle"
+              @click.stop="row.data.toggle"
             />
           </template>
 
@@ -378,11 +372,6 @@ const { containerProps, list, wrapperProps, scrollTo } = useVirtualList(treeSpec
 // reset scroll position to top of list
 watch(() => treeSpecList.value, () => scrollTo(0))
 
-function handleCtrlClick () {
-  // noop intended to reduce the chances of opening tests multiple tabs
-  // which is not a supported state in Cypress
-}
-
 function getIdIfDirectory (row) {
   if (row.data.isLeaf && row.data) {
     return undefined

diff --git a/packages/app/src/specs/SpecsListRowItem.cy.tsx b/packages/app/src/specs/SpecsListRowItem.cy.tsx
@@ -0,0 +1,53 @@
+import SpecsListRowItem from './SpecsListRowItem.vue'
+
+describe('SpecItem', () => {
+  it('renders a SpecsListRowItem as leaf', () => {
+    const toggleRowHandler = cy.stub()
+
+    cy.mount(() => (
+      <SpecsListRowItem
+        isLeaf={true}
+        route={{ path: '/specs/runner', query: { file: '' } }}
+        onToggleRow={toggleRowHandler}
+        // @ts-ignore - doesn't know about vSlots
+        vSlots={{
+          file: () => <span>File Name</span>,
+          'git-info': () => <span>Git Info</span>,
+        }}
+      />))
+
+    // Clicking directly on file name section should trigger row
+    cy.get('[data-cy="specs-list-row-file"]').click()
+    cy.wrap(toggleRowHandler).should('have.callCount', 1)
+
+    // Clicking directory on git info section should trigger row
+    cy.get('[data-cy="specs-list-row-git-info"]').click()
+    cy.wrap(toggleRowHandler).should('have.callCount', 2)
+
+    // Clicking elsewhere on row should trigger row
+    cy.get('[data-cy="spec-item-link"]').click('right')
+    cy.wrap(toggleRowHandler).should('have.callCount', 3)
+  })
+
+  it('renders a SpecsListRowItem as non-leaf', () => {
+    const toggleRowHandler = cy.stub()
+
+    cy.mount(() => (
+      <SpecsListRowItem
+        isLeaf={false}
+        onToggleRow={toggleRowHandler}
+        // @ts-ignore - doesn't know about vSlots
+        vSlots={{
+          file: () => <span>Directory Name</span>,
+        }}
+      />))
+
+    // Clicking directly on file name section should trigger row
+    cy.get('[data-cy="specs-list-row-file"]').click()
+    cy.wrap(toggleRowHandler).should('have.callCount', 1)
+
+    // Clicking elsewhere on row should trigger row
+    cy.get('[data-cy="spec-item-directory"]').click('right')
+    cy.wrap(toggleRowHandler).should('have.callCount', 2)
+  })
+})
diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
@@ -1,21 +1,52 @@
 <template>
-  <div
-    class="h-full outline-none border-gray-50 ring-inset grid grid-cols-7 group focus-within:ring-indigo-300 focus-within:ring-1"
-    data-cy="specs-list-row"
-  >
-    <div class="col-span-3">
-      <slot name="file" />
-    </div>
+  <div data-cy="specs-list-row">
+    <component
+      :is="isLeaf ? 'RouterLink' : 'div'"
+      class="h-full outline-none border-gray-50 ring-inset grid grid-cols-7 group focus:outline-transparent focus-within:ring-indigo-300 focus-within:ring-1 children:cursor-pointer"
+      :to="route"
+      :data-cy="isLeaf ? 'spec-item-link' : 'spec-item-directory'"
+      @click="emit('toggleRow')"
+      @click.meta.prevent="handleCtrlClick"
+      @click.ctrl.prevent="handleCtrlClick"
+    >
+      <div
+        data-cy="specs-list-row-file"
+        class="col-span-3"
+      >
+        <slot name="file" />
+      </div>
 
-    <div class="col-span-2">
-      <slot name="git-info" />
-    </div>
+      <div
+        data-cy="specs-list-row-git-info"
+        class="col-span-2"
+      >
+        <slot name="git-info" />
+      </div>
 
-    <div>
-      <slot name="latest-runs" />
-    </div>
-    <div>
-      <slot name="average-duration" />
-    </div>
+      <div>
+        <slot name="latest-runs" />
+      </div>
+      <div>
+        <slot name="average-duration" />
+      </div>
+    </component>
   </div>
 </template>
+
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  isLeaf: boolean
+  route?: RouteLocationRaw
+}>()
+
+const emit = defineEmits<{
+  (event: 'toggleRow'): void
+}>()
+
+function handleCtrlClick (): void {
+  // noop intended to reduce the chances of opening tests multiple tabs
+  // which is not a supported state in Cypress
+}
+</script>
diff --git a/packages/app/src/store/selector-playground-store.ts b/packages/app/src/store/selector-playground-store.ts
@@ -99,5 +99,9 @@ export const useSelectorPlaygroundStore = defineStore({
 
       return state.numElements === 1 ? '1 matched element' : `${state.numElements} matched elements`
     },
+
+    command (state): string {
+      return `cy.${state.method}('${this.selector}')`
+    },
   },
 })
diff --git a/packages/data-context/src/actions/MigrationActions.ts b/packages/data-context/src/actions/MigrationActions.ts
@@ -32,6 +32,9 @@ import {
 } from '../sources/migration'
 import { makeCoreData } from '../data'
 import { LegacyPluginsIpc } from '../data/LegacyPluginsIpc'
+import { hasTypeScriptInstalled } from '../util'
+
+const tsNode = require.resolve('@packages/server/lib/plugins/child/register_ts_node')
 
 export function getConfigWithDefaults (legacyConfig: any) {
   const newConfig = _.cloneDeep(legacyConfig)
@@ -88,6 +91,23 @@ export async function processConfigViaLegacyPlugins (projectRoot: string, legacy
     const configProcessArgs = ['--projectRoot', projectRoot, '--file', cwd]
     const CHILD_PROCESS_FILE_PATH = require.resolve('@packages/server/lib/plugins/child/require_async_child')
 
+    // use ts-node if they've got typescript installed
+    // this matches the 9.x behavior, which is what we want for
+    // processing legacy pluginsFile (we never supported `"type": "module") in 9.x.
+    if (hasTypeScriptInstalled(projectRoot)) {
+      const tsNodeLoader = `--require ${tsNode}`
+
+      if (!childOptions.env) {
+        childOptions.env = {}
+      }
+
+      if (childOptions.env.NODE_OPTIONS) {
+        childOptions.env.NODE_OPTIONS += ` ${tsNodeLoader}`
+      } else {
+        childOptions.env.NODE_OPTIONS = tsNodeLoader
+      }
+    }
+
     const childProcess = fork(CHILD_PROCESS_FILE_PATH, configProcessArgs, childOptions)
     const ipc = new LegacyPluginsIpc(childProcess)