From c167d6853df8669755f490a4c13dd12acf48d9f8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 21 Apr 2021 22:48:10 +0200 Subject: [PATCH 1/5] test(client-api): include/exclude on inferControls --- lib/client-api/src/inferControls.test.ts | 51 ++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 lib/client-api/src/inferControls.test.ts diff --git a/lib/client-api/src/inferControls.test.ts b/lib/client-api/src/inferControls.test.ts new file mode 100644 index 00000000000..bd6e35c3435 --- /dev/null +++ b/lib/client-api/src/inferControls.test.ts @@ -0,0 +1,51 @@ +import { StoryContext } from '@storybook/addons'; +import { inferControls } from './inferControls'; + +const getStoryContext = (customParams = {}): StoryContext => ({ + id: '', + kind: '', + name: '', + args: {}, + globals: {}, + argTypes: {}, + parameters: { + argTypes: { + label: { control: 'text' }, + labelName: { control: 'text' }, + borderWidth: { control: { type: 'number', min: 0, max: 10 } }, + }, + __isArgsStory: true, + ...customParams, + }, +}); + +describe('inferControls', () => { + it('should return argTypes as is when no exclude or include is passed', () => { + const controls = inferControls(getStoryContext()); + expect(Object.keys(controls)).toEqual(['label', 'labelName', 'borderWidth']); + }); + + it('should return filtered argTypes when include is passed', () => { + const [includeString, includeArray, includeRegex] = [ + inferControls(getStoryContext({ controls: { include: 'label' } })), + inferControls(getStoryContext({ controls: { include: ['label'] } })), + inferControls(getStoryContext({ controls: { include: /label*/ } })), + ]; + + expect(Object.keys(includeString)).toEqual(['label', 'labelName']); + expect(Object.keys(includeArray)).toEqual(['label']); + expect(Object.keys(includeRegex)).toEqual(['label', 'labelName']); + }); + + it('should return filtered argTypes when exclude is passed', () => { + const [excludeString, excludeArray, excludeRegex] = [ + inferControls(getStoryContext({ controls: { exclude: 'label' } })), + inferControls(getStoryContext({ controls: { exclude: ['label'] } })), + inferControls(getStoryContext({ controls: { exclude: /label*/ } })), + ]; + + expect(Object.keys(excludeString)).toEqual(['borderWidth']); + expect(Object.keys(excludeArray)).toEqual(['labelName', 'borderWidth']); + expect(Object.keys(excludeRegex)).toEqual(['borderWidth']); + }); +}); From d4c1269784f7c1b30342d1c77fae852382daebc2 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 21 Apr 2021 22:48:58 +0200 Subject: [PATCH 2/5] test(controls): add e2e scenario for controls --- cypress/generated/addon-controls.spec.ts | 48 ++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 cypress/generated/addon-controls.spec.ts diff --git a/cypress/generated/addon-controls.spec.ts b/cypress/generated/addon-controls.spec.ts new file mode 100644 index 00000000000..b3e65828c77 --- /dev/null +++ b/cypress/generated/addon-controls.spec.ts @@ -0,0 +1,48 @@ +describe('addon-controls', () => { + it('should change component when changing controls', () => { + cy.visitStorybook(); + + cy.navigateToStory('example-button', 'Primary'); + + cy.viewAddonPanel('Controls'); + + // Text input: Label + cy.getStoryElement().find('button').should('contain.text', 'Button'); + cy.get('#label').clear().type('Hello world'); + cy.getStoryElement().find('button').should('contain.text', 'Hello world'); + + // Args in URL + cy.url().should('include', 'args=label:Hello+world'); + + // Boolean toggle: Primary/secondary + cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)'); + cy.get('#primary').click(); + cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgba(0, 0, 0, 0)'); + + // Color picker: Background color + cy.get('input[placeholder="Choose color"]').type('red'); + cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(255, 0, 0)'); + + // Radio buttons: Size + cy.getStoryElement().find('button').should('have.css', 'font-size', '14px'); + cy.get('label[for="size-large"]').click(); + cy.getStoryElement().find('button').should('have.css', 'font-size', '16px'); + + // Reset controls: assert that the component is back to original state + cy.get('button[title="Reset controls"]').click(); + cy.getStoryElement().find('button').should('have.css', 'font-size', '14px'); + cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(30, 167, 253)'); + cy.getStoryElement().find('button').should('contain.text', 'Button'); + }); + + it('should apply controls automatically when passed via url', () => { + cy.visit('/', { + qs: { + path: '/story/example-button--primary', + args: 'label:Hello world', + }, + }); + + cy.getStoryElement().find('button').should('contain.text', 'Hello world'); + }); +}); From e19c58940938889fcd903738cf0add2c10405990 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 23 Apr 2021 19:05:43 +0200 Subject: [PATCH 3/5] fix(controls): handle unsupported values for color matcher --- lib/client-api/src/inferControls.test.ts | 63 ++++++++++++++++++++++++ lib/client-api/src/inferControls.ts | 11 ++++- 2 files changed, 73 insertions(+), 1 deletion(-) diff --git a/lib/client-api/src/inferControls.test.ts b/lib/client-api/src/inferControls.test.ts index bd6e35c3435..5b33d095a4a 100644 --- a/lib/client-api/src/inferControls.test.ts +++ b/lib/client-api/src/inferControls.test.ts @@ -1,4 +1,5 @@ import { StoryContext } from '@storybook/addons'; +import { logger } from '@storybook/client-logger'; import { inferControls } from './inferControls'; const getStoryContext = (customParams = {}): StoryContext => ({ @@ -20,6 +21,68 @@ const getStoryContext = (customParams = {}): StoryContext => ({ }); describe('inferControls', () => { + describe('with custom matchers', () => { + let warnSpy: jest.SpyInstance; + beforeEach(() => { + warnSpy = jest.spyOn(logger, 'warn'); + warnSpy.mockImplementation(() => {}); + }); + afterEach(() => { + warnSpy.mockRestore(); + }); + + it('should return color type when matching color', () => { + // passing a string, should return control type color + const inferredControls = inferControls( + getStoryContext({ + argTypes: { + background: { + type: { + name: 'string', + value: 'red', + }, + name: 'background', + }, + }, + controls: { + matchers: { + color: /background/, + }, + }, + }) + ); + + expect(inferredControls.background.control.type).toEqual('color'); + }); + + it('should return inferred type when matches color but arg is not a string', () => { + // passing an object which is unsupported, should infer the type to object + const inferredControls = inferControls( + getStoryContext({ + argTypes: { + background: { + type: { + name: 'object', + value: { + rgb: [255, 255, 0], + }, + }, + name: 'background', + }, + }, + controls: { + matchers: { + color: /background/, + }, + }, + }) + ); + + expect(warnSpy).toHaveBeenCalled(); + expect(inferredControls.background.control.type).toEqual('object'); + }); + }); + it('should return argTypes as is when no exclude or include is passed', () => { const controls = inferControls(getStoryContext()); expect(Object.keys(controls)).toEqual(['label', 'labelName', 'borderWidth']); diff --git a/lib/client-api/src/inferControls.ts b/lib/client-api/src/inferControls.ts index b33c674c977..5097082ae5c 100644 --- a/lib/client-api/src/inferControls.ts +++ b/lib/client-api/src/inferControls.ts @@ -1,5 +1,7 @@ import mapValues from 'lodash/mapValues'; import { ArgType } from '@storybook/addons'; +import { logger } from '@storybook/client-logger'; + import { SBEnumType, ArgTypesEnhancer } from './types'; import { combineParameters } from './parameters'; import { filterArgTypes } from './filterArgTypes'; @@ -17,7 +19,14 @@ const inferControl = (argType: ArgType, name: string, matchers: ControlsMatchers // args that end with background or color e.g. iconColor if (matchers.color && matchers.color.test(name)) { - return { control: { type: 'color' } }; + const controlType = typeof argType.type.value; + if (controlType === 'string') { + return { control: { type: 'color' } }; + } + + logger.warn( + `Addon controls: Control of type color only supports string, received "${controlType}" instead` + ); } // args that end with date e.g. purchaseDate From adff90603ed4b7bcc6a06bc20400a929b9bb03a1 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Sat, 1 May 2021 13:46:48 +0200 Subject: [PATCH 4/5] test(lit): disable controls assertion temporarily - until all CLI templates are aligned we can't test radio controls --- cypress/generated/addon-controls.spec.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/cypress/generated/addon-controls.spec.ts b/cypress/generated/addon-controls.spec.ts index b3e65828c77..6f4665c6a8c 100644 --- a/cypress/generated/addon-controls.spec.ts +++ b/cypress/generated/addon-controls.spec.ts @@ -23,10 +23,11 @@ describe('addon-controls', () => { cy.get('input[placeholder="Choose color"]').type('red'); cy.getStoryElement().find('button').should('have.css', 'background-color', 'rgb(255, 0, 0)'); + // TODO: enable this once the controls for size are aligned in all CLI templates. // Radio buttons: Size - cy.getStoryElement().find('button').should('have.css', 'font-size', '14px'); - cy.get('label[for="size-large"]').click(); - cy.getStoryElement().find('button').should('have.css', 'font-size', '16px'); + // cy.getStoryElement().find('button').should('have.css', 'font-size', '14px'); + // cy.get('label[for="size-large"]').click(); + // cy.getStoryElement().find('button').should('have.css', 'font-size', '16px'); // Reset controls: assert that the component is back to original state cy.get('button[title="Reset controls"]').click(); From ba1e5a42bafc8df6885e2d05fdac60205586ab3a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Sat, 1 May 2021 16:09:01 +0200 Subject: [PATCH 5/5] fix(cli): fix style property in webcomponents example - It should use styleMap to pass style properties --- lib/cli/src/frameworks/web-components/js/Button.js | 5 +++-- lib/cli/src/frameworks/web-components/ts/Button.ts | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/cli/src/frameworks/web-components/js/Button.js b/lib/cli/src/frameworks/web-components/js/Button.js index 3cc631f9e91..8d3bc41a166 100644 --- a/lib/cli/src/frameworks/web-components/js/Button.js +++ b/lib/cli/src/frameworks/web-components/js/Button.js @@ -1,17 +1,18 @@ import { html } from 'lit-html'; +import { styleMap } from 'lit-html/directives/style-map'; import './button.css'; /** * Primary UI component for user interaction */ -export const Button = ({ primary, backgroundColor, size, label, onClick }) => { +export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return html`