CLI: Add common welcome MDX and cleanup

app/mithril/src/server/framework-preset-mithril.ts

@@ -3,6 +3,9 @@ import { TransformOptions } from '@babel/core';
 export function babelDefault(config: TransformOptions) {
   return {
     ...config,
-    plugins: [...config.plugins, require.resolve('@babel/plugin-transform-react-jsx')],
+    plugins: [
+      ...config.plugins,
+      [require.resolve('@babel/plugin-transform-react-jsx'), {}, 'preset'],
+    ],
   };
 }

app/preact/src/server/framework-preset-preact.ts

@@ -5,7 +5,7 @@ export function babelDefault(config: TransformOptions) {
     ...config,
     plugins: [
       ...config.plugins,
-      [require.resolve('@babel/plugin-transform-react-jsx'), { pragma: 'h' }],
+      [require.resolve('@babel/plugin-transform-react-jsx'), { pragma: 'h' }, 'preset'],
     ],
   };
 }

cypress/generated/addon-action.spec.ts

@@ -1,8 +1,6 @@
-import { visit } from '../helper';
-
 describe('addon-action', () => {
   before(() => {
-    visit();
+    cy.visitStorybook();
   });
 
   it('should trigger an action', () => {

cypress/generated/addon-link.spec.ts

@@ -1,25 +1,15 @@
-import { visit, clickAddon } from '../helper';
-
 describe('addon-link', () => {
   before(() => {
-    visit();
-    cy.get('#button').click();
+    cy.visitStorybook();
   });
 
   it('should redirect to another story', () => {
-    // click on the button
-    cy.get('#button--button-with-link-to-another-story').click();
-
-    // assert url changes
-    cy.url().should('include', 'path=/story/button--button-with-link-to-another-story');
-
-    // check for selected element
-    cy.get('#button--button-with-link-to-another-story').should('have.class', 'selected');
+    cy.navigateToStory('button', 'button with link to another story');
 
     // check for content
     cy.getStoryElement().contains('Go to Welcome Story').click();
 
     // assert url changes
-    cy.url().should('include', 'path=/story/welcome--to-storybook');
+    cy.url().should('include', 'path=/story/example-introduction--page');
   });
 });

cypress/generated/basic.spec.ts

@@ -1,18 +1,18 @@
-import { visit } from '../helper';
-
 describe('Basic Flow', () => {
   before(() => {
-    visit();
+    cy.visitStorybook();
   });
 
   it('should load welcome flow', () => {
+    cy.navigateToStory('example-introduction', 'page');
+
     // assert url changes
-    cy.url().should('include', 'path=/story/welcome--to-storybook');
+    cy.url().should('include', 'path=/story/example-introduction--page');
 
     // check for selected element
-    cy.get('#welcome--to-storybook').should('have.class', 'selected');
+    cy.get('#example-introduction--page').should('have.class', 'selected');
 
     // check for content
-    cy.getStoryElement().should('contain.text', 'Welcome to storybook');
+    cy.getDocsElement().should('contain.text', 'Welcome to Storybook');
   });
 });

cypress/support/commands.js

@@ -36,6 +36,20 @@ Cypress.Commands.add(
   }
 );
 
+Cypress.Commands.add('visitStorybook', () => {
+  cy.log('visitStorybook');
+  const host = Cypress.env('location') || 'http://localhost:8001';
+  return cy
+    .clearLocalStorage()
+    .visit(`${host}/?path=/story/example-introduction--page`)
+    .get(`#storybook-preview-iframe`, { log: false })
+    .its('0.contentDocument.body', { log: false })
+    .should('not.be.empty')
+    .then((body) => cy.wrap(body, { log: false }))
+    .find('#docs-root', { log: false })
+    .should('not.be.empty');
+});
+
 Cypress.Commands.add('getStoryElement', {}, () => {
   cy.log('getStoryElement');
   return cy
@@ -48,14 +62,30 @@ Cypress.Commands.add('getStoryElement', {}, () => {
     .then((storyRoot) => cy.wrap(storyRoot, { log: false }));
 });
 
+Cypress.Commands.add('getDocsElement', {}, () => {
+  cy.log('getDocsElement');
+  return cy
+    .get(`#storybook-preview-iframe`, { log: false })
+    .its('0.contentDocument.body', { log: false })
+    .should('not.be.empty')
+    .then((body) => cy.wrap(body, { log: false }))
+    .find('#docs-root', { log: false })
+    .should('not.be.empty')
+    .then((storyRoot) => cy.wrap(storyRoot, { log: false }));
+});
+
 Cypress.Commands.add('navigateToStory', (kind, name) => {
-  const kindId = kind.replace(' ', '-').toLowerCase();
-  const storyId = name.replace(' ', '-').toLowerCase();
+  const kindId = kind.replace(/ /g, '-').toLowerCase();
+  const storyId = name.replace(/ /g, '-').toLowerCase();
 
   const storyLinkId = `#${kindId}--${storyId}`;
-  cy.log('navigateToStory');
-  cy.get(`#${kindId}`, { log: false }).click();
-  cy.get(storyLinkId, { log: false }).click();
+  cy.log(`navigateToStory ${kind} ${name}`);
+
+  if (name !== 'page') {
+    // Section can be collapsed, click twice ensure expansion
+    cy.get(`#${kindId}`).click();
+  }
+  cy.get(storyLinkId).click();
 
   // assert url changes
   cy.url().should('include', `path=/story/${kindId}--${storyId}`);

cypress/support/index.d.ts

@@ -4,10 +4,19 @@ type LoggerMethod = 'log' | 'info' | 'debug';
 
 declare namespace Cypress {
   interface Chainable {
+    /**
+     * Visit storybook's introduction page
+     */
+    visitStorybook(): Chainable<Element>;
+
     /**
      * Custom command to select the DOM element of a story in the canvas tab.
      */
     getStoryElement(): Chainable<Element>;
+    /**
+     * Custom command to select the DOM element of a docs story in the canvas tab.
+     */
+    getDocsElement(): Chainable<Element>;
 
     /**
      * Navigate to a story.

lib/cli/src/frameworks/angular/1-Button.stories.ts

@@ -41,7 +41,7 @@ export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
   props: {
     text: 'Go to Welcome Story',
-    onClick: linkTo('Welcome'),
+    onClick: linkTo('example-introduction--page'),
   },
 });
 

lib/cli/src/frameworks/aurelia/1-Button.stories.ts

@@ -42,7 +42,7 @@ export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
   props: {
     text: 'Go to Welcome Story',
-    onClick: linkTo('Welcome'),
+    onClick: linkTo('example-introduction--page'),
   },
 });