Merge branch '10.0-release' into tgriesser/refactor/error-improvements

* 10.0-release: feat: validate specPattern root level (#19980) feat(unify): unsupported browsers (#19997) feat: persist isSideNavigationOpen (#20026) feat: add types for urqlCacheKeys (#20027) fix: rename spec.js to spec.cy.js (#20029) feat: waiting for dependencies to be installed in wizard (#19955) fix: migrate config fields to correct the location (#19940) feat: relaunch browser when switching testing types from app (#19961) test: final ct-audit tests and component tweaks (#19948)
cypress-io · Feb 4, 2022 · dd5e8e3 · dd5e8e3
2 parents 78518df + 5d52758
commit dd5e8e3
Show file tree

Hide file tree

Showing 182 changed files with 3,366 additions and 1,162 deletions.
diff --git a/cli/schema/cypress.schema.json b/cli/schema/cypress.schema.json
@@ -15,7 +15,7 @@
           "description": "Any values to be set as environment variables. See https://on.cypress.io/environment-variables",
           "body": {}
         },
-        "ignoreSpecPattern": {
+        "excludeSpecPattern": {
           "type": [
             "string",
             "array"

diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
@@ -2631,14 +2631,14 @@ declare namespace Cypress {
     /**
      * A String or Array of glob patterns used to ignore test files that would otherwise be shown in your list of tests. Cypress uses minimatch with the options: {dot: true, matchBase: true}. We suggest using http://globtester.com to test what files would match.
      * @default "*.hot-update.js"
-     * @deprecated use `ignoreSpecPattern` instead
+     * @deprecated use `excludeSpecPattern` instead
      */
     ignoreTestFiles: string | string[]
     /**
      * A String or Array of glob patterns used to ignore test files that would otherwise be shown in your list of tests. Cypress uses minimatch with the options: {dot: true, matchBase: true}. We suggest using http://globtester.com to test what files would match.
      * @default "*.hot-update.js"
      */
-    ignoreSpecPattern: string | string[]
+    excludeSpecPattern: string | string[]
     /**
      * The number of tests for which snapshots and command data are kept in memory. Reduce this number if you are experiencing high memory consumption in your browser during a test run.
      * @default 50

diff --git a/graphql-codegen.yml b/graphql-codegen.yml
@@ -91,6 +91,19 @@ generates:
           content: '/* eslint-disable */'
       - 'typescript'
 
+  ###
+  # Generates types for us to infer the correct keys for graphcache
+  ###
+  './packages/data-context/src/gen/graphcache-config.gen.ts':
+    config:
+      useTypeImports: true
+    schema: 'packages/graphql/schemas/schema.graphql'
+    plugins:
+      - add:
+          content: '/* eslint-disable */'
+      - typescript
+      - typescript-urql-graphcache
+
   ###
   # All of the GraphQL Query/Mutation documents we import for use in the .{vue,ts,tsx,js,jsx}
   # files for useQuery / useMutation, as well as types associated with the fragments

diff --git a/npm/cypress-schematic/src/schematics/ng-add/files/cypress.config.ts b/npm/cypress-schematic/src/schematics/ng-add/files/cypress.config.ts
@@ -1,5 +1,7 @@
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
-  'baseUrl': '<%= baseUrl%>',
+  e2e: {
+    'baseUrl': '<%= baseUrl%>',
+  },
 })
diff --git a/npm/design-system/cypress.config.js b/npm/design-system/cypress.config.js
@@ -6,12 +6,12 @@ module.exports = {
   env: {
     reactDevtools: true,
   },
-  ignoreSpecPattern: [
-    '**/__snapshots__/*',
-    '**/__image_snapshots__/*',
-  ],
   fixturesFolder: false,
   component: {
+    excludeSpecPattern: [
+      '**/__snapshots__/*',
+      '**/__image_snapshots__/*',
+    ],
     devServer (cypressConfig) {
       const { startDevServer } = require('@cypress/vite-dev-server')
 

diff --git a/npm/react/cypress.config.js b/npm/react/cypress.config.js
@@ -8,13 +8,13 @@ module.exports = {
   'env': {
     'reactDevtools': true,
   },
-  'ignoreSpecPattern': [
-    '**/__snapshots__/*',
-    '**/__image_snapshots__/*',
-  ],
   'experimentalFetchPolyfill': true,
   'component': {
-    ignoreSpecPattern: 'examples/**/*',
+    'excludeSpecPattern': [
+      '**/__snapshots__/*',
+      '**/__image_snapshots__/*',
+      'examples/**/*',
+    ],
     devServer (cypressConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const path = require('path')

diff --git a/npm/react/examples/snapshots/cypress.config.js b/npm/react/examples/snapshots/cypress.config.js
@@ -3,16 +3,16 @@ module.exports = {
   'fixturesFolder': false,
   'viewportWidth': 500,
   'viewportHeight': 500,
-  'ignoreSpecPattern': [
-    '**/__snapshots__/*',
-    '**/__image_snapshots__/*',
-  ],
   'env': {
     'cypress-plugin-snapshots': {
       'prettier': true,
     },
   },
   'component': {
+    'excludeSpecPattern': [
+      '**/__snapshots__/*',
+      '**/__image_snapshots__/*',
+    ],
     setupNodeEvents (on, config) {
       // load file devServer that comes with this plugin
       // https://github.com/bahmutov/cypress-react-unit-test#install

diff --git a/npm/vue/cypress.config.ts b/npm/vue/cypress.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
     'supportFile': false,
   },
   'component': {
-    ignoreSpecPattern: 'examples/**/*',
+    excludeSpecPattern: 'examples/**/*',
     devServer (cypressConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('./webpack.config')

diff --git a/npm/webpack-preprocessor/examples/react-app/cypress.config.js b/npm/webpack-preprocessor/examples/react-app/cypress.config.js
@@ -1,8 +1,8 @@
 module.exports = {
-  'baseUrl': 'http://localhost:3000',
   'fixturesFolder': false,
   'viewportWidth': 600,
   'e2e': {
+    'baseUrl': 'http://localhost:3000',
     'supportFile': false,
   },
 }
diff --git a/package.json b/package.json
@@ -83,10 +83,11 @@
     "@fellow/eslint-plugin-coffee": "0.4.13",
     "@graphql-codegen/add": "3.1.0",
     "@graphql-codegen/cli": "2.2.0",
-    "@graphql-codegen/plugin-helpers": "2.1.1",
-    "@graphql-codegen/typed-document-node": "2.1.4",
-    "@graphql-codegen/typescript": "2.2.2",
-    "@graphql-codegen/typescript-operations": "2.1.4",
+    "@graphql-codegen/plugin-helpers": "2.3.2",
+    "@graphql-codegen/typed-document-node": "2.2.2",
+    "@graphql-codegen/typescript": "2.4.2",
+    "@graphql-codegen/typescript-operations": "2.2.3",
+    "@graphql-codegen/typescript-urql-graphcache": "2.2.3",
     "@graphql-tools/batch-delegate": "8.1.0",
     "@graphql-tools/delegate": "8.2.1",
     "@graphql-tools/utils": "8.2.3",

diff --git a/packages/app/cypress/component/support/index.ts b/packages/app/cypress/component/support/index.ts
@@ -35,3 +35,5 @@ beforeEach(() => {
 registerMountFn({ plugins: [() => createRouter(), () => pinia] })
 
 installCustomPercyCommand()
+
+Cypress.on('uncaught:exception', (err) => !err.message.includes('ResizeObserver loop limit exceeded'))
diff --git a/packages/app/cypress/e2e/index.cy.ts b/packages/app/cypress/e2e/index.cy.ts
@@ -12,22 +12,22 @@ describe('App: Index', () => {
         // With no specs present, the page renders two cards, one for scaffolding example specs,
         // another for creating a new blank spec.
         cy.findAllByTestId('card').eq(0).as('ScaffoldCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2, name: defaultMessages.createSpec.e2e.importFromScaffold.header,
+          cy.findByRole('button', {
+            name: defaultMessages.createSpec.e2e.importFromScaffold.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.e2e.importFromScaffold.description)
           .should('be.visible')
         })
 
         cy.findAllByTestId('card').eq(1).as('EmptySpecCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2, name: defaultMessages.createSpec.e2e.importEmptySpec.header,
+          cy.findByRole('button', {
+            name: defaultMessages.createSpec.e2e.importEmptySpec.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.e2e.importEmptySpec.description)
           .should('be.visible')
@@ -259,11 +259,9 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.e2e.importFromScaffold.header)
 
           cy.findAllByTestId('card').eq(1)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.e2e.importEmptySpec.header)
         })
       })
@@ -305,24 +303,22 @@ describe('App: Index', () => {
         // With no specs present, the page renders two cards, one for creating from found components,
         // another for creating from found stories.
         cy.findAllByTestId('card').eq(0).as('ComponentCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2,
+          cy.findByRole('button', {
             name: defaultMessages.createSpec.component.importFromComponent.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.component.importFromComponent.description)
           .should('be.visible')
         })
 
         cy.findAllByTestId('card').eq(1).as('StoryCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2,
+          cy.findByRole('button', {
             name: defaultMessages.createSpec.component.importFromStory.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.component.importFromStory.description)
           .should('be.visible')
@@ -458,11 +454,10 @@ describe('App: Index', () => {
             name: defaultMessages.createSpec.newSpecModalTitle,
           }).within(() => {
             cy.findAllByTestId('card').eq(0)
-            .should('have.attr', 'tabindex', '0')
 
             // the storybook card remains enabled here
-            cy.findAllByTestId('card').eq(1)
-            .should('have.attr', 'tabindex', '0')
+            cy.contains('button', defaultMessages.createSpec.component.importFromStory.header)
+            .should('not.be.disabled')
           })
         })
       })
@@ -479,22 +474,22 @@ describe('App: Index', () => {
         // another for creating from found stories. The story card is disabled due to storybook not
         // being configured for the scaffolded project.
         cy.findAllByTestId('card').eq(0).as('ComponentCard')
-        .should('have.attr', 'tabindex', '0')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2, name: defaultMessages.createSpec.component.importFromComponent.header,
+          cy.findByRole('button', {
+            name: defaultMessages.createSpec.component.importFromComponent.header,
           }).should('be.visible')
+          .and('not.be.disabled')
 
           cy.contains(defaultMessages.createSpec.component.importFromComponent.description)
           .should('be.visible')
         })
 
         cy.findAllByTestId('card').eq(1).as('StoryCard')
-        .should('have.attr', 'tabindex', '-1')
         .within(() => {
-          cy.findByRole('heading', {
-            level: 2, name: defaultMessages.createSpec.component.importFromStory.header,
+          cy.findByRole('button', {
+            name: defaultMessages.createSpec.component.importFromStory.header,
           }).should('be.visible')
+          .and('be.disabled')
 
           cy.contains(defaultMessages.createSpec.component.importFromStory.notSetupDescription)
           .should('be.visible')
@@ -614,11 +609,10 @@ describe('App: Index', () => {
           // another spec.
           cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
             cy.findAllByTestId('card').eq(0)
-            .should('have.attr', 'tabindex', '0')
 
             // the storybook card remains disabled here
-            cy.findAllByTestId('card').eq(1)
-            .should('have.attr', 'tabindex', '-1')
+            cy.contains('button', defaultMessages.createSpec.component.importFromStory.header)
+            .should('be.disabled')
           })
         })
 
@@ -702,11 +696,9 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromComponent.description)
 
           cy.findAllByTestId('card').eq(1)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromStory.description)
         })
       })
@@ -716,7 +708,6 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromComponent.description).click()
         })
 
@@ -735,7 +726,6 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(0)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromComponent.description).click()
         })
 
@@ -766,7 +756,6 @@ describe('App: Index', () => {
 
         cy.findByRole('dialog', { name: defaultMessages.createSpec.newSpecModalTitle }).within(() => {
           cy.findAllByTestId('card').eq(1)
-          .should('have.attr', 'tabindex', '0')
           .and('contain', defaultMessages.createSpec.component.importFromStory.description).click()
         })
 

diff --git a/packages/app/cypress/e2e/sidebar_navigation.cy.ts b/packages/app/cypress/e2e/sidebar_navigation.cy.ts
@@ -39,6 +39,26 @@ describe('Sidebar Navigation', () => {
       cy.percySnapshot()
     })
 
+    it('closes the left nav bar when clicking the expand button and persist the state if browser is refreshed', () => {
+      cy.findByLabelText('Sidebar').closest('[aria-expanded]').should('have.attr', 'aria-expanded', 'true')
+      cy.findAllByText('todos').eq(1).as('title')
+      cy.get('@title').should('be.visible')
+
+      cy.findByLabelText('toggle navigation', {
+        selector: 'button',
+      }).click()
+
+      cy.findByLabelText('Sidebar').closest('[aria-expanded]').should('have.attr', 'aria-expanded', 'false')
+      cy.get('@title').should('not.be.visible')
+
+      cy.reload()
+
+      cy.findByLabelText('Sidebar').closest('[aria-expanded]').should('have.attr', 'aria-expanded', 'false')
+      cy.findAllByText('todos').should('not.be.visible')
+
+      cy.percySnapshot()
+    })
+
     it('has unlabeled menu item that shows the keyboard shortcuts modal (unexpanded state)', () => {
       cy.findByLabelText('toggle navigation', {
         selector: 'button',
@@ -115,7 +135,7 @@ describe('Sidebar Navigation', () => {
         cy.contains('Configured')
       })
 
-      cy.intercept('mutation-SwitchTestingType_ReconfigureProject').as('SwitchTestingType')
+      cy.intercept('mutation-SwitchTestingTypeAndRelaunch').as('SwitchTestingTypeAndRelaunch')
       cy.withCtx((ctx) => {
         ctx.actions.project.reconfigureProject = sinon.stub()
       })
@@ -124,10 +144,14 @@ describe('Sidebar Navigation', () => {
         cy.contains('Not Configured')
       }).click()
 
-      cy.wait('@SwitchTestingType').then((interception) => {
+      cy.wait('@SwitchTestingTypeAndRelaunch').then((interception) => {
         expect(interception.request.body.variables.testingType).eq('component')
       })
 
+      cy.withCtx((ctx) => {
+        expect(ctx.coreData.app.relaunchBrowser).eq(true)
+      })
+
       cy.get('[aria-label="Close"]').click()
       cy.findByText('Choose a testing type').should('not.exist')
 
@@ -199,7 +223,7 @@ describe('Sidebar Navigation', () => {
         cy.contains('Configured')
       })
 
-      cy.intercept('mutation-SwitchTestingType_ReconfigureProject').as('SwitchTestingType')
+      cy.intercept('mutation-SwitchTestingTypeAndRelaunch').as('SwitchTestingTypeAndRelaunch')
       cy.withCtx((ctx) => {
         ctx.actions.project.reconfigureProject = sinon.stub()
       })
@@ -208,7 +232,7 @@ describe('Sidebar Navigation', () => {
         cy.contains('Not Configured')
       }).click()
 
-      cy.wait('@SwitchTestingType').then((interception) => {
+      cy.wait('@SwitchTestingTypeAndRelaunch').then((interception) => {
         expect(interception.request.body.variables.testingType).eq('e2e')
       })
     })

diff --git a/packages/app/src/components/FileMatch.cy.tsx b/packages/app/src/components/FileMatch.cy.tsx
@@ -50,11 +50,11 @@ describe('<FileMatch />', { viewportWidth: 600, viewportHeight: 300 }, () => {
     describe('expanding/collapsing', () => {
       it('can be expanded and collapsed by the extension button', () => {
         cy.get(extensionInputSelector).should('not.exist')
-        cy.percySnapshot()
+        cy.percySnapshot('before expand')
         cy.get(fileMatchButtonSelector).click()
         .get(extensionInputSelector).should('be.visible')
 
-        cy.percySnapshot()
+        cy.percySnapshot('after expand')
         cy.get(fileMatchButtonSelector).click()
         .get(extensionInputSelector).should('not.exist')
       })
Original file line number	Diff line number	Diff line change
Expand Up		@@ -35,3 +35,5 @@ beforeEach(() => {
		registerMountFn({ plugins: [() => createRouter(), () => pinia] })

		installCustomPercyCommand()

		Cypress.on('uncaught:exception', (err) => !err.message.includes('ResizeObserver loop limit exceeded'))