From 3e1d5b17ca6f10d545bd3c9dcbce10c44d7bf457 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 10 Feb 2022 02:59:49 +0800 Subject: [PATCH] Merge pull request #17266 from storybookjs/upgrade-compodoc-colors-dep Upgrade compodoc for colors.js bug --- .circleci/config.yml | 5 +- cypress/generated/addon-interactions.spec.ts | 33 +++++++++++++ .../src/frameworks/angular/Header.stories.ts | 11 +++-- .../src/frameworks/angular/Page.stories.ts | 22 +++++---- .../frameworks/angular/header.component.ts | 49 ++++++++++++------- .../src/frameworks/angular/page.component.ts | 40 +++++---------- lib/cli/src/generators/baseGenerator.ts | 3 +- 7 files changed, 100 insertions(+), 63 deletions(-) create mode 100644 cypress/generated/addon-interactions.spec.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index a561a14ec563..bd265a41feb1 100644 --- 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 new file mode 100644 index 000000000000..d66349525aae --- /dev/null +++ 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 index 7ad12ed8877c..200ed5766390 100644 --- 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
= (args: Header) => ({ @@ -23,7 +26,9 @@ const Template: Story
= (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 index a3a97e6a7512..3a1db15fe4ea 100644 --- 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 = (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 index 3997ceab3b50..51b0f310aa91 100644 --- 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';

Acme

- - - +
+ + Welcome, {{ user.name }}! + + +
+
+ + +
`, diff --git a/lib/cli/src/frameworks/angular/page.component.ts b/lib/cli/src/frameworks/angular/page.component.ts index 8de8eb0392ce..aceee990056d 100644 --- a/lib/cli/src/frameworks/angular/page.component.ts +++ b/lib/cli/src/frameworks/angular/page.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { Component } from '@angular/core'; import { User } from './User'; @Component({ @@ -6,9 +6,9 @@ import { User } from './User'; template: `

Pages in Storybook

@@ -61,31 +61,17 @@ import { User } from './User'; styleUrls: ['./page.css'], }) export default class PageComponent { - @Input() user: User | null = null; - @Output() - onLogin = new EventEmitter(); + doLogout() { + this.user = null; + } - @Output() - onLogout = new EventEmitter(); + doLogin() { + this.user = { name: 'Jane Doe' }; + } - @Output() - onCreateAccount = new EventEmitter(); + doCreateAccount() { + this.user = { name: 'Jane Doe' }; + } } - -// export const Page = ({ user, onLogin, onLogout, 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 index 0a8f3dc379cd..926af379e361 100644 --- 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,