Merge branch 'next-6.0.0' into ts-migration/polymer

CHANGELOG.md

@@ -1,3 +1,34 @@
+## 5.3.0 (January 11, 2020)
+
+Storybook 5.3 is here!
+
+- 📝 [Custom documentation in MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc)
+- 🎨 [Multi-framework SB Docs (React, Vue, Angular, WC, Ember)](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
+- 📦 [Web-components framework support](https://dev.to/open-wc/storybook-for-web-components-on-steroids-4h29)
+- 🔼 [Main.js declarative configuration](https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78)
+
+5.3 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.3.0-alpha.*`, `5.3.0-beta.*`, and `5.3.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
+
+## 5.3.0-rc.14 (January 11, 2020)
+
+* Merge `master` into `next` for 5.3.0 release ([#9388](https://github.com/storybookjs/storybook/pull/9388))
+
+## 5.3.0-rc.13 (January 11, 2020)
+
+### Bug Fixes
+
+* Addon-docs: Fix link CORS errors using channel navigate event ([#9381](https://github.com/storybookjs/storybook/pull/9381))
+* CLI: Fix `sb init` to use spawn.sync if creating package.json ([#9359](https://github.com/storybookjs/storybook/pull/9359))
+
+### Maintenance
+
+* Official-storybook: Prop table example for multiple named exports ([#9364](https://github.com/storybookjs/storybook/pull/9364))
+* Addon-docs / web-components: Rename 'props' to 'properties' in props table ([#9362](https://github.com/storybookjs/storybook/pull/9362))
+
+### Dependency Upgrades
+
+* Upgrade @types/webpack-env and @types/node to fix conflicting types ([#9365](https://github.com/storybookjs/storybook/pull/9365))
+
 ## 5.3.0-rc.12 (January 8, 2020)
 
 ### Bug Fixes

MIGRATION.md

@@ -143,7 +143,6 @@ const theme = create({
 });
 
 addons.setConfig({
- showRoots: true,
  panelPosition: 'bottom',
  theme,
 });
@@ -210,7 +209,11 @@ yarn sb migrate upgrade-hierarchy-separators --glob="*.stories.js"
 If you were using `|` and wish to keep the "root" behavior, use the `showRoots: true` option to re-enable roots:
 
 ```js
-addParameters({ options: { showRoots: true } });
+addParameters({ 
+ options: {
+ showRoots: true,
+ },
+});
 ```
 
 NOTE: it is no longer possible to have some stories with roots and others without. If you want to keep the old behavior, simply add a root called "Others" to all your previously unrooted stories.

addons/a11y/README.md

@@ -69,6 +69,8 @@ export default {
  config: {},
  // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
  options: {},
+ // optional flag to prevent the automatic check
+ manual: true,
  },
  },
 };

addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
- "version": "5.3.0-rc.12",
+ "version": "5.3.0",
  "description": "a11y addon for storybook",
  "keywords": [
  "a11y",
@@ -33,12 +33,12 @@
  "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
- "@storybook/addons": "5.3.0-rc.12",
- "@storybook/api": "5.3.0-rc.12",
- "@storybook/client-logger": "5.3.0-rc.12",
- "@storybook/components": "5.3.0-rc.12",
- "@storybook/core-events": "5.3.0-rc.12",
- "@storybook/theming": "5.3.0-rc.12",
+ "@storybook/addons": "5.3.0",
+ "@storybook/api": "5.3.0",
+ "@storybook/client-logger": "5.3.0",
+ "@storybook/components": "5.3.0",
+ "@storybook/core-events": "5.3.0",
+ "@storybook/theming": "5.3.0",
  "axe-core": "^3.3.2",
  "core-js": "^3.0.1",
  "global": "^4.3.2",

addons/a11y/src/components/A11YPanel.test.js

@@ -1,19 +1,18 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { EventEmitter } from 'events';
 
 import { ThemeProvider, themes, convert } from '@storybook/theming';
-import { STORY_RENDERED } from '@storybook/core-events';
-import { ScrollArea } from '@storybook/components';
 
 import { A11YPanel } from './A11YPanel';
 import { EVENTS } from '../constants';
 
 function createApi() {
- return {
-  emit: jest.fn(),
-  on: jest.fn(),
-  off: jest.fn(),
- };
+ const emitter = new EventEmitter();
+ jest.spyOn(emitter, 'emit');
+ jest.spyOn(emitter, 'on');
+ jest.spyOn(emitter, 'off');
+ return emitter;
 }
 
 const axeResult = {
@@ -63,7 +62,7 @@ function ThemedA11YPanel(props) {
 }
 
 describe('A11YPanel', () => {
- it('should register STORY_RENDERED, RESULT and ERROR updater on mount', () => {
+ it('should register event listener on mount', () => {
  // given
  const api = createApi();
  expect(api.on).not.toHaveBeenCalled();
@@ -73,152 +72,99 @@ describe('A11YPanel', () => {
 
  // then
  expect(api.on.mock.calls.length).toBe(3);
- expect(api.on.mock.calls[0][0]).toBe(STORY_RENDERED);
- expect(api.on.mock.calls[1][0]).toBe(EVENTS.RESULT);
- expect(api.on.mock.calls[2][0]).toBe(EVENTS.ERROR);
+ expect(api.on.mock.calls[0][0]).toBe(EVENTS.RESULT);
+ expect(api.on.mock.calls[1][0]).toBe(EVENTS.ERROR);
+ expect(api.on.mock.calls[2][0]).toBe(EVENTS.MANUAL);
  });
 
- it('should request a run on tab activation', () => {
+ it('should deregister event listener on unmount', () => {
  // given
  const api = createApi();
-
- const wrapper = mount(<ThemedA11YPanel api={api} />);
- expect(api.emit).not.toHaveBeenCalled();
-
- // when
- wrapper.setProps({ active: true });
- wrapper.update();
-
- // then
- expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST);
- expect(wrapper.find(ScrollArea).length).toBe(0);
- });
-
- it('should deregister STORY_RENDERED, RESULT and ERROR updater on unmount', () => {
- // given
- const api = createApi();
- const wrapper = mount(<ThemedA11YPanel api={api} />);
  expect(api.off).not.toHaveBeenCalled();
 
  // when
+ const wrapper = mount(<ThemedA11YPanel api={api} />);
  wrapper.unmount();
 
  // then
  expect(api.off.mock.calls.length).toBe(3);
- expect(api.off.mock.calls[0][0]).toBe(STORY_RENDERED);
- expect(api.off.mock.calls[1][0]).toBe(EVENTS.RESULT);
- expect(api.off.mock.calls[2][0]).toBe(EVENTS.ERROR);
+ expect(api.off.mock.calls[0][0]).toBe(EVENTS.RESULT);
+ expect(api.off.mock.calls[1][0]).toBe(EVENTS.ERROR);
+ expect(api.off.mock.calls[2][0]).toBe(EVENTS.MANUAL);
  });
 
- it('should update run result', () => {
+ it('should handle "initial" status', () => {
  // given
  const api = createApi();
- const wrapper = mount(<ThemedA11YPanel api={api} active />);
- const onUpdate = api.on.mock.calls.find(([event]) => event === EVENTS.RESULT)[1];
-
- expect(
- wrapper
- .find('button')
- .last()
- .text()
- .trim()
- ).toBe('Rerun tests');
 
  // when
- onUpdate(axeResult);
-
- // then
- expect(
- wrapper
- .find('button')
- .last()
- .text()
- .trim()
- ).toBe('Tests completed');
- });
-
- it('should request run', () => {
- // given
- const api = createApi();
  const wrapper = mount(<ThemedA11YPanel api={api} active />);
- const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1];
-
- expect(
- wrapper
- .find('button')
- .last()
- .text()
- .trim()
- ).toBe('Rerun tests');
- expect(api.emit).not.toHaveBeenCalled();
-
- // when
- request();
 
  // then
- expect(
- wrapper
- .find('button')
- .last()
- .text()
- .trim()
- ).toBe('Running test');
- expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST);
+ expect(api.emit).not.toHaveBeenCalled();
+ expect(wrapper.text()).toMatch(/Initializing/);
  });
 
- it('should NOT request run on inactive tab', () => {
+ it('should handle "manual" status', () => {
  // given
  const api = createApi();
- mount(<ThemedA11YPanel api={api} active={false} />);
- const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1];
- expect(api.emit).not.toHaveBeenCalled();
+ const wrapper = mount(<ThemedA11YPanel api={api} active />);
 
  // when
- request();
+ api.emit(EVENTS.MANUAL, true);
+ wrapper.update();
 
  // then
- expect(api.emit).not.toHaveBeenCalled();
+ expect(wrapper.text()).toMatch(/Manually run the accessibility scan/);
+ expect(api.emit).not.toHaveBeenCalledWith(EVENTS.REQUEST);
  });
 
- it('should render report', () => {
+ it('should handle "running" status', () => {
  // given
  const api = createApi();
  const wrapper = mount(<ThemedA11YPanel api={api} active />);
- const onUpdate = api.on.mock.calls.find(([event]) => event === EVENTS.RESULT)[1];
 
  // when
- onUpdate(axeResult);
+ api.emit(EVENTS.MANUAL, false);
+ wrapper.update();
 
  // then
- expect(wrapper.find(A11YPanel)).toMatchSnapshot();
+ expect(wrapper.text()).toMatch(/Please wait while the accessibility scan is running/);
+ expect(api.emit).toHaveBeenCalledWith(EVENTS.REQUEST);
  });
 
- it("should render loader when it's running", () => {
+ it('should handle "ran" status', () => {
  // given
  const api = createApi();
  const wrapper = mount(<ThemedA11YPanel api={api} active />);
- const request = api.on.mock.calls.find(([event]) => event === STORY_RENDERED)[1];
 
  // when
- request();
+ api.emit(EVENTS.RESULT, axeResult);
  wrapper.update();
 
  // then
- expect(wrapper.find('ScrollArea').length).toBe(0);
- expect(wrapper.find('Loader').length).toBe(1);
- expect(wrapper.find('ActionBar').length).toBe(1);
- expect(wrapper.find('Loader')).toMatchSnapshot();
+ expect(
+ wrapper
+ .find('button')
+ .last()
+ .text()
+ .trim()
+ ).toBe('Tests completed');
+ expect(wrapper.find('Tabs').prop('tabs').length).toBe(3);
+ expect(wrapper.find('Tabs').prop('tabs')[0].label.props.children).toEqual([1, ' Violations']);
+ expect(wrapper.find('Tabs').prop('tabs')[1].label.props.children).toEqual([1, ' Passes']);
+ expect(wrapper.find('Tabs').prop('tabs')[2].label.props.children).toEqual([1, ' Incomplete']);
  });
 
- it('should NOT anything when tab is not active', () => {
+ it('should handle inactive state', () => {
  // given
  const api = createApi();
 
  // when
  const wrapper = mount(<ThemedA11YPanel api={api} active={false} />);
 
  // then
- expect(wrapper.find('ScrollArea').length).toBe(0);
- expect(wrapper.find('ActionBar').length).toBe(0);
+ expect(wrapper.text()).toBe('');
+ expect(api.emit).not.toHaveBeenCalled();
  });
 });