Merge pull request #17266 from storybookjs/upgrade-compodoc-colors-dep

Upgrade compodoc for colors.js bug
storybookjs · Feb 12, 2022 · 3e1d5b1 · 3e1d5b1
1 parent 81d7cbf
commit 3e1d5b1
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 63 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -195,7 +195,7 @@ jobs:
           command: yarn wait-on http://localhost:6000
       - run:
           name: Run E2E tests
-          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra
+          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
           no_output_timeout: 5m
       - store_artifacts:
           path: /tmp/cypress-record
@@ -221,8 +221,7 @@ jobs:
           name: Run E2E tests
           # Do not test CRA here because it's done in PnP part
           # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
-          # TODO: Add `angular` as soon as Storybook is compatible with Angular 13
-          command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2
+          command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react
           no_output_timeout: 5m
       - store_artifacts:
           path: /tmp/cypress-record

diff --git a/cypress/generated/addon-interactions.spec.ts b/cypress/generated/addon-interactions.spec.ts
@@ -0,0 +1,33 @@
+/* eslint-disable jest/no-identical-title */
+import { onlyOn } from '@cypress/skip-test';
+
+describe('addon-interactions', () => {
+  before(() => {
+    cy.visitStorybook();
+  });
+
+  const test = () => {
+    // click on the button
+    cy.navigateToStory('example-page', 'logged-in');
+
+    cy.viewAddonPanel('Interactions');
+
+    cy.getStoryElement().find('.welcome').should('contain.text', 'Welcome, Jane Doe!');
+
+    cy.get('#tabbutton-interactions').contains(/(1)/).should('be.visible');
+    cy.get('#storybook-panel-root')
+      .contains(/userEvent.click/)
+      .should('be.visible');
+    cy.get('[data-testid=icon-done]').should('be.visible');
+  };
+
+  // Having multiple of onlyOn for the same test is a workaround instead
+  // of having to use skipOn a long list of frameworks
+  onlyOn('angular', () => {
+    it('should have interactions', test);
+  });
+
+  onlyOn('react', () => {
+    it('should have interactions', test);
+  });
+});
diff --git a/lib/cli/src/frameworks/angular/Header.stories.ts b/lib/cli/src/frameworks/angular/Header.stories.ts
@@ -1,7 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import type { Story, Meta } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';
@@ -15,6 +14,10 @@ export default {
       imports: [CommonModule],
     }),
   ],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    layout: 'fullscreen',
+  },
 } as Meta;
 
 const Template: Story<Header> = (args: Header) => ({
@@ -23,7 +26,9 @@ const Template: Story<Header> = (args: Header) => ({
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {
-  user: {},
+  user: {
+    name: 'Jane Doe',
+  },
 };
 
 export const LoggedOut = Template.bind({});

diff --git a/lib/cli/src/frameworks/angular/Page.stories.ts b/lib/cli/src/frameworks/angular/Page.stories.ts
@@ -1,15 +1,18 @@
 import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
 
 import Button from './button.component';
 import Header from './header.component';
 import Page from './page.component';
 
-import * as HeaderStories from './Header.stories';
-
 export default {
   title: 'Example/Page',
   component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    layout: 'fullscreen',
+  },
   decorators: [
     moduleMetadata({
       declarations: [Button, Header],
@@ -22,13 +25,12 @@ const Template: Story<Page> = (args: Page) => ({
   props: args,
 });
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/angular/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
-};
-
 export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+
+// More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
+export const LoggedIn = Template.bind({});
+LoggedIn.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
+  await userEvent.click(loginButton);
 };
diff --git a/lib/cli/src/frameworks/angular/header.component.ts b/lib/cli/src/frameworks/angular/header.component.ts
@@ -25,25 +25,36 @@ import { User } from './User';
         <h1>Acme</h1>
       </div>
       <div>
-        <storybook-button
-          *ngIf="user"
-          size="small"
-          (onClick)="onLogout.emit($event)"
-          label="Log out"
-        ></storybook-button>
-        <storybook-button
-          *ngIf="!user"
-          size="small"
-          (onClick)="onLogin.emit($event)"
-          label="Log in"
-        ></storybook-button>
-        <storybook-button
-          *ngIf="!user"
-          primary
-          size="small"
-          (onClick)="onCreateAccount.emit($event)"
-          label="Sign up"
-        ></storybook-button>
+        <div *ngIf="user">
+          <span class="welcome">
+            Welcome, <b>{{ user.name }}</b
+            >!
+          </span>
+          <storybook-button
+            *ngIf="user"
+            size="small"
+            (onClick)="onLogout.emit($event)"
+            label="Log out"
+          ></storybook-button>
+        </div>
+        <div *ngIf="!user">
+          <storybook-button
+            *ngIf="!user"
+            size="small"
+            class="margin-left"
+            (onClick)="onLogin.emit($event)"
+            label="Log in"
+          ></storybook-button>
+          <storybook-button
+            *ngIf="!user"
+            primary
+            size="small"
+            primary="true"
+            class="margin-left"
+            (onClick)="onCreateAccount.emit($event)"
+            label="Sign up"
+          ></storybook-button>
+        </div>
       </div>
     </div>
   </header>`,

diff --git a/lib/cli/src/frameworks/angular/page.component.ts b/lib/cli/src/frameworks/angular/page.component.ts
@@ -1,14 +1,14 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component } from '@angular/core';
 import { User } from './User';
 
 @Component({
   selector: 'storybook-page',
   template: `<article>
     <storybook-header
       [user]="user"
-      (onLogout)="onLogout.emit($event)"
-      (onLogin)="onLogin.emit($event)"
-      (onCreateAccount)="onCreateAccount.emit($event)"
+      (onLogout)="doLogout()"
+      (onLogin)="doLogin()"
+      (onCreateAccount)="doCreateAccount()"
     ></storybook-header>
     <section>
       <h2>Pages in Storybook</h2>
@@ -61,31 +61,17 @@ import { User } from './User';
   styleUrls: ['./page.css'],
 })
 export default class PageComponent {
-  @Input()
   user: User | null = null;
 
-  @Output()
-  onLogin = new EventEmitter<Event>();
+  doLogout() {
+    this.user = null;
+  }
 
-  @Output()
-  onLogout = new EventEmitter<Event>();
+  doLogin() {
+    this.user = { name: 'Jane Doe' };
+  }
 
-  @Output()
-  onCreateAccount = new EventEmitter<Event>();
+  doCreateAccount() {
+    this.user = { name: 'Jane Doe' };
+  }
 }
-
-// export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => (
-//   <article>
-//     <Header user={user} onLogin={onLogin} onLogout={onLogout} onCreateAccount={onCreateAccount} />
-
-// );
-// Page.propTypes = {
-//   user: PropTypes.shape({}),
-//   onLogin: PropTypes.func.isRequired,
-//   onLogout: PropTypes.func.isRequired,
-//   onCreateAccount: PropTypes.func.isRequired,
-// };
-
-// Page.defaultProps = {
-//   user: null,
-// };
diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts
@@ -58,7 +58,8 @@ const builderDependencies = (builder: Builder) => {
 
 const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDetails(addon)[0]);
 
-const hasInteractiveStories = (framework: SupportedFrameworks) => ['react'].includes(framework);
+const hasInteractiveStories = (framework: SupportedFrameworks) =>
+  ['react', 'angular'].includes(framework);
 
 export async function baseGenerator(
   packageManager: JsPackageManager,