Merge branch 'develop' into ryanm/fix/v8-improvements

.eslintrc.js

@@ -34,6 +34,12 @@ module.exports = {
     'plugin:@cypress/dev/tests',
   ],
   parser: '@typescript-eslint/parser',
+  ignorePatterns: [
+    // cli types are checked by dtslint
+    'cli/types/**',
+    // these fixtures are supposed to fail linting
+    'npm/eslint-plugin-dev/test/fixtures/**',
+  ],
   overrides: [
     {
       files: [

cli/types/cypress.d.ts

@@ -142,6 +142,39 @@ declare namespace Cypress {
     clear: (keys?: string[]) => void
   }
 
+  // TODO: raise minimum required TypeScript version to 3.7
+  // and make this recursive
+  // https://github.com/cypress-io/cypress/issues/24875
+  type Storable =
+    | string
+    | number
+    | boolean
+    | null
+    | StorableObject
+    | StorableArray
+
+  interface StorableObject {
+    [key: string]: Storable
+  }
+
+  interface StorableArray extends Array<Storable> { }
+
+  type StorableRecord = Record<string, Storable>
+
+  interface OriginStorage {
+    origin: string
+    value: StorableRecord
+  }
+
+  interface Storages {
+    localStorage: OriginStorage[]
+    sessionStorage: OriginStorage[]
+  }
+
+  interface StorageByOrigin {
+    [key: string]: StorableRecord
+  }
+
   type IsBrowserMatcher = BrowserName | Partial<Browser> | Array<BrowserName | Partial<Browser>>
 
   interface ViewportPosition extends WindowPosition {
@@ -792,7 +825,35 @@ declare namespace Cypress {
     clearCookies(options?: CookieOptions): Chainable<null>
 
     /**
-     * Clear data in local storage.
+     * Get local storage for all origins.
+     *
+     * @see https://on.cypress.io/getalllocalstorage
+     */
+    getAllLocalStorage(options?: Partial<Loggable>): Chainable<StorageByOrigin>
+
+    /**
+     * Clear local storage for all origins.
+     *
+     * @see https://on.cypress.io/clearalllocalstorage
+     */
+    clearAllLocalStorage(options?: Partial<Loggable>): Chainable<null>
+
+    /**
+     * Get session storage for all origins.
+     *
+     * @see https://on.cypress.io/getallsessionstorage
+     */
+    getAllSessionStorage(options?: Partial<Loggable>): Chainable<StorageByOrigin>
+
+    /**
+     * Clear session storage for all origins.
+     *
+     * @see https://on.cypress.io/clearallsessionstorage
+     */
+     clearAllSessionStorage(options?: Partial<Loggable>): Chainable<null>
+
+    /**
+     * Clear data in local storage for the current origin.
      * Cypress automatically runs this command before each test to prevent state from being
      * shared across tests. You shouldn't need to use this command unless you're using it
      * to clear localStorage inside a single test. Yields `localStorage` object.

cli/types/tests/cypress-tests.ts

@@ -1062,3 +1062,29 @@ namespace CypressClearCookiesTests {
   cy.clearCookies({ timeout: '10' }) // $ExpectError
   cy.clearCookies({ domain: false }) // $ExpectError
 }
+
+namespace CypressLocalStorageTests {
+  cy.getAllLocalStorage().then((result) => {
+    result // $ExpectType StorageByOrigin
+  })
+  cy.getAllLocalStorage({ log: false })
+  cy.getAllLocalStorage({ log: 'true' }) // $ExpectError
+
+  cy.clearAllLocalStorage().then((result) => {
+    result // $ExpectType null
+  })
+  cy.clearAllLocalStorage({ log: false })
+  cy.clearAllLocalStorage({ log: 'true' }) // $ExpectError
+
+  cy.getAllSessionStorage().then((result) => {
+    result // $ExpectType StorageByOrigin
+  })
+  cy.getAllSessionStorage({ log: false })
+  cy.getAllSessionStorage({ log: 'true' }) // $ExpectError
+
+  cy.clearAllSessionStorage().then((result) => {
+    result // $ExpectType null
+  })
+  cy.clearAllSessionStorage({ log: false })
+  cy.clearAllSessionStorage({ log: 'true' }) // $ExpectError
+}

packages/app/cypress/e2e/run-all-specs.cy.ts

@@ -6,9 +6,15 @@ describe('run-all-specs', () => {
     spec2: { relative: 'cypress/e2e/folder-a/spec-b.cy.js', name: 'runs folder-a/spec-b' },
     spec3: { relative: 'cypress/e2e/folder-b/spec-a.cy.js', name: 'runs folder-b/spec-a' },
     spec4: { relative: 'cypress/e2e/folder-b/spec-b.cy.js', name: 'runs folder-b/spec-b' },
+    spec5: { relative: 'folder-c/spec-a.cy.js', name: 'runs folder-c/spec-a' },
+    spec6: { relative: 'folder-c/spec-b.cy.js', name: 'runs folder-c/spec-b' },
   }
 
   const clickRunAllSpecs = (directory: string) => {
+    if (directory === 'all') {
+      return cy.findByTestId('run-all-specs-for-all').click()
+    }
+
     const command = cy.get('[data-cy=spec-item-directory]').contains(directory)
 
     return command.realHover().then(() => {
@@ -30,7 +36,7 @@ describe('run-all-specs', () => {
     // Verify "Run All Specs" with sub-directory
     const subDirectorySpecs = [ALL_SPECS.spec1, ALL_SPECS.spec2]
 
-    cy.get('[data-cy=sidebar-link-specs-page]').click()
+    cy.findByTestId('sidebar-link-specs-page').click()
 
     clickRunAllSpecs('folder-a')
 
@@ -87,16 +93,16 @@ describe('run-all-specs', () => {
     // Verify "Run All Specs" live-reload
     cy.get('[data-cy=sidebar-link-specs-page]').click()
     cy.findByLabelText('Search specs').clear()
-    cy.get('[data-cy=spec-list-file]').should('have.length', 4)
+    cy.get('[data-cy=spec-list-file]').should('have.length', 6)
 
-    clickRunAllSpecs('cypress/e2e')
+    clickRunAllSpecs('all')
 
     cy.withCtx((ctx, { specs, runAllSpecsKey }) => {
       expect(ctx.actions.project.launchProject).to.have.been.calledWith('e2e', undefined, runAllSpecsKey)
       expect(ctx.project.runAllSpecs).to.include.members(specs.map((spec) => spec.relative))
     }, { specs: Object.values(ALL_SPECS), runAllSpecsKey: RUN_ALL_SPECS_KEY })
 
-    cy.waitForSpecToFinish({ passCount: 4 })
+    cy.waitForSpecToFinish({ passCount: 6 })
 
     for (const spec of Object.values(ALL_SPECS)) {
       cy.get('.runnable-title').contains(spec.name)
@@ -111,6 +117,6 @@ describe('run-all-specs', () => {
       await ctx.actions.file.writeFileInProject(spec.relative, newContent)
     }, { spec: ALL_SPECS.spec1 })
 
-    cy.waitForSpecToFinish({ passCount: 3, failCount: 1 })
+    cy.waitForSpecToFinish({ passCount: 5, failCount: 1 })
   })
 })

packages/app/src/pages/Specs/Runner.vue

@@ -31,6 +31,7 @@ import SpecRunnerContainerOpenMode from '../../runner/SpecRunnerContainerOpenMod
 import SpecRunnerContainerRunMode from '../../runner/SpecRunnerContainerRunMode.vue'
 import { useEventManager } from '../../runner/useEventManager'
 import { useSpecStore } from '../../store'
+import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 
 gql`
 query SpecPageContainer {
@@ -59,18 +60,14 @@ subscription Runner_ConfigChange {
 }
 `
 
-const isRunMode = window.__CYPRESS_MODE__ === 'run'
-
 // subscriptions are used to trigger live updates without
 // reloading the page.
 // this is only useful in open mode - in run mode, we don't
 // use GraphQL, so we pause the
 // subscriptions so they never execute.
-const shouldPauseSubscriptions = isRunMode && window.top === window
-
 useSubscription({
   query: SpecPageContainer_SpecsChangeDocument,
-  pause: shouldPauseSubscriptions,
+  pause: isRunMode,
 })
 
 // in run mode, we are not using GraphQL or urql
@@ -80,7 +77,7 @@ useSubscription({
 // requests, which is what we want.
 const query = useQuery({
   query: SpecPageContainerDocument,
-  pause: shouldPauseSubscriptions,
+  pause: isRunMode,
 })
 
 let initialLoad = true

packages/app/src/runner/screenshot/AdjustRunnerStyleDuringScreenshot.vue

@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts" setup>
+import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 import { computed } from 'vue'
 import { useScreenshotStore } from '../../store'
 import { runnerConstants } from '../runner-constants'
 
 const screenshotStore = useScreenshotStore()
-const isRunMode = window.__CYPRESS_MODE__ === 'run'
 
 const style = computed(() => {
   if (screenshotStore.isScreenshotting) {

packages/app/src/runner/useRunnerStyle.ts

@@ -1,3 +1,4 @@
+import { isRunMode } from '@packages/frontend-shared/src/utils/isRunMode'
 import { useWindowSize } from '@vueuse/core'
 import { computed, ref, watchEffect } from 'vue'
 import { usePreferences } from '../composables/usePreferences'
@@ -97,7 +98,7 @@ export const useRunnerStyle = () => {
   return {
     viewportStyle,
     windowWidth: computed(() => {
-      if (window.__CYPRESS_MODE__ === 'run') {
+      if (isRunMode) {
         return windowWidth.value
       }
 

packages/app/src/specs/InlineRunAllSpecs.cy.tsx

@@ -13,15 +13,27 @@ describe('<InlineRunAllSpecs/>', () => {
     })
 
     it('renders component correctly', () => {
-      cy.findByTestId('tooltip').children().should('have.length', 1)
+      cy.findByTestId('run-all-specs-for-cypress/e2e').children().should('have.length', 1)
       cy.findByTestId('play-button').should('be.visible')
     })
 
     it('provides expected tooltip content', () => {
       cy.findByTestId('tooltip-content').should('not.exist')
-      cy.findByTestId('tooltip').realHover().then(() => {
+      cy.findByTestId('run-all-specs-for-cypress/e2e').realHover().then(() => {
         cy.findByTestId('tooltip-content').should('contain.text', 'Run 40 specs')
       })
     })
   })
+
+  it('disables button when no specs are available', () => {
+    cy.mount(() => {
+      return (
+        <div class="flex justify-center">
+          <InlineRunAllSpecs specNumber={0} directory='cypress/e2e' />
+        </div>
+      )
+    })
+
+    cy.findByTestId('run-all-specs-button').should('be.disabled')
+  })
 })

packages/app/src/specs/InlineRunAllSpecs.vue

@@ -1,16 +1,20 @@
 <template>
   <Tooltip
     placement="right"
-    class="h-full truncate"
-    data-cy="tooltip"
+    :data-cy="`run-all-specs-for-${directory}`"
   >
-    <button @click.stop="emits('runAllSpecs')">
+    <button
+      class="flex h-full w-full items-center justify-center"
+      data-cy="run-all-specs-button"
+      :disabled="specNumber === 0"
+      @click.stop="emits('runAllSpecs')"
+    >
       <IconActionPlaySmall
         size="16"
-        stroke-color="gray-700"
+        :stroke-color="grayscale ? 'gray-200' : 'gray-700'"
         fill-color="transparent"
-        hocus-stroke-color="indigo-500"
-        hocus-fill-color="indigo-100"
+        :hocus-stroke-color="grayscale ? undefined : 'indigo-500'"
+        :hocus-fill-color="grayscale ? undefined : 'indigo-100'"
         class="inline-flex align-text-bottom"
         data-cy="play-button"
       />
@@ -22,7 +26,7 @@
         class="font-normal text-sm inline-flex"
         data-cy="tooltip-content"
       >
-        {{ t('specPage.runAllSpecs', specNumber) }}
+        {{ t('specPage.runSelectedSpecs', specNumber) }}
       </span>
     </template>
   </Tooltip>
@@ -38,6 +42,7 @@ const { t } = useI18n()
 defineProps<{
   specNumber: number
   directory: string
+  grayscale?: boolean
 }>()
 
 const emits = defineEmits<{