Merge branch 'next' into 16174-fix-docs-args-hmr

.circleci/config.yml

@@ -27,7 +27,7 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
-  sb_cypress_6_node_12:
+  sb_cypress_8_node_14:
     parameters:
       class:
         description: The Resource class
@@ -37,8 +37,8 @@ executors:
     working_directory: /tmp/storybook
     docker:
       # ⚠️ The Cypress docker image is based on Node.js one so be careful when updating it because it can also
-      # cause an upgrade of the Node.
-      - image: cypress/included:6.8.0
+      # cause an upgrade of Node.js version too. Cypress 8.5 image is based on Node.js 14
+      - image: cypress/included:8.7.0
         environment:
           NODE_OPTIONS: --max_old_space_size=3076
     resource_class: <<parameters.class>>
@@ -169,7 +169,7 @@ jobs:
   e2e-tests-extended:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     parallelism: 4
     steps:
       - when:
@@ -203,7 +203,7 @@ jobs:
   e2e-tests-core:
     executor:
       class: large
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     parallelism: 2
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -229,7 +229,7 @@ jobs:
   cra-bench:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -253,7 +253,7 @@ jobs:
   e2e-tests-pnp:
     executor:
       class: medium
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     working_directory: /tmp/storybook
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -276,7 +276,7 @@ jobs:
   e2e-tests-examples:
     executor:
       class: small
-      name: sb_cypress_6_node_12
+      name: sb_cypress_8_node_14
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'

app/vue/preset.js

@@ -1 +1 @@
-module.exports = require('./dist/cjs/server/framework-preset-babel-vue');
+module.exports = require('./dist/cjs/server/framework-preset-vue');

cypress.json

@@ -1,5 +1,7 @@
 {
   "defaultCommandTimeout": 20000,
   "requestTimeout": 20000,
-  "responseTimeout": 60000
+  "responseTimeout": 60000,
+  "viewportHeight": 800,
+  "viewportWidth": 1280
 }

cypress/helper.ts

@@ -11,22 +11,19 @@ const getUrl = (route: string) => {
 };
 
 export const visit = (route = '') => {
-  return cy
-    .clearLocalStorage()
-    .visit(getUrl(route))
-    .get(`#storybook-preview-iframe`)
-    .then({ timeout: 15000 }, (iframe) => {
-      return cy.wrap(iframe, { timeout: 10000 }).should(() => {
-        const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument;
-        const element: HTMLElement | null = content !== null ? content.documentElement : null;
+  cy.clearLocalStorage().visit(getUrl(route));
+  return cy.get(`#storybook-preview-iframe`).then({ timeout: 15000 }, (iframe) => {
+    return cy.wrap(iframe, { timeout: 10000 }).should(() => {
+      const content: Document | null = (iframe[0] as HTMLIFrameElement).contentDocument;
+      const element: HTMLElement | null = content !== null ? content.documentElement : null;
 
-        expect(element).not.null;
+      expect(element).not.null;
 
-        if (element !== null) {
-          expect(element.querySelector('#root > *')).not.null;
-        }
-      });
+      if (element !== null) {
+        expect(element.querySelector('#root > *')).not.null;
+      }
     });
+  });
 };
 
 export const clickAddon = (addonName: Addons) => {

cypress/integration/navigation.spec.ts

@@ -6,15 +6,19 @@ describe('Navigation', () => {
   });
 
   it('should search navigation item', () => {
-    cy.get('#storybook-explorer-searchfield').click().clear().type('syntax');
+    cy.get('#storybook-explorer-searchfield').click({ force: true });
+    cy.get('#storybook-explorer-searchfield').clear();
+    cy.get('#storybook-explorer-searchfield').type('syntax');
 
     cy.get('#storybook-explorer-menu button')
       .should('contain', 'SyntaxHighlighter')
       .and('not.contain', 'a11y');
   });
 
   it('should display no results after searching a non-existing navigation item', () => {
-    cy.get('#storybook-explorer-searchfield').click().clear().type('zzzzzzzzzz');
+    cy.get('#storybook-explorer-searchfield').click({ force: true });
+    cy.get('#storybook-explorer-searchfield').clear();
+    cy.get('#storybook-explorer-searchfield').type('zzzzzzzzzz');
 
     cy.get('#storybook-explorer-menu button').should('be.hidden');
   });
@@ -24,7 +28,7 @@ describe('Routing', () => {
   it('should navigate to story addons-a11y-basebutton--default', () => {
     visit('official-storybook');
 
-    cy.get('#addons-a11y-basebutton--label').click();
+    cy.get('#addons-a11y-basebutton--label').click({ force: true });
     cy.url().should('include', 'path=/story/addons-a11y-basebutton--label');
   });
 

cypress/support/commands.js

@@ -103,7 +103,12 @@ Cypress.Commands.add('navigateToStory', (kind, name) => {
       if ($item.attr('aria-expanded') === 'false') $item.click();
     });
   }
-  cy.get(storyLinkId).click();
+  cy.get(storyLinkId).click({ force: true });
+
+  // FIXME: Find a way to not wait like this but check for an element in the UI
+  // A pause is good when switching stories
+  // eslint-disable-next-line cypress/no-unnecessary-waiting
+  cy.wait(300);
 
   // assert url changes
   cy.url().should('include', `path=/story/${kindId}--${storyId}`);

cypress/support/index.js

@@ -16,5 +16,13 @@
 // Import commands.js using ES2015 syntax:
 import './commands';
 
+// Turn off all uncaught exception handling
+// https://docs.cypress.io/guides/references/migration-guide#Uncaught-exception-and-unhandled-rejections
+Cypress.on('uncaught:exception', (err, runnable) => {
+  // returning false here prevents Cypress from
+  // failing the test
+  return false;
+});
+
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package.json

@@ -318,8 +318,8 @@
   },
   "optionalDependencies": {
     "@cypress/skip-test": "^2.6.1",
-    "@cypress/webpack-preprocessor": "^5.7.0",
-    "cypress": "6.8.0",
+    "@cypress/webpack-preprocessor": "^5.9.1",
+    "cypress": "8.7.0",
     "puppeteer": "^2.1.1",
     "ts-loader": "^8.0.14",
     "verdaccio": "^4.10.0",