From 2ac6d8a591c0aeaca09123910b92161a308b7d44 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Sun, 11 Jul 2021 20:44:36 +0200 Subject: [PATCH] fix(controls): use correct assertion for color type --- lib/client-api/src/inferControls.test.ts | 56 ++++++++++++++---------- lib/client-api/src/inferControls.ts | 3 +- 2 files changed, 35 insertions(+), 24 deletions(-) diff --git a/lib/client-api/src/inferControls.test.ts b/lib/client-api/src/inferControls.test.ts index 5b33d095a4a5..1905431fc6a1 100644 --- a/lib/client-api/src/inferControls.test.ts +++ b/lib/client-api/src/inferControls.test.ts @@ -31,7 +31,7 @@ describe('inferControls', () => { warnSpy.mockRestore(); }); - it('should return color type when matching color', () => { + it('should return color type when using color matcher', () => { // passing a string, should return control type color const inferredControls = inferControls( getStoryContext({ @@ -39,7 +39,6 @@ describe('inferControls', () => { background: { type: { name: 'string', - value: 'red', }, name: 'background', }, @@ -55,31 +54,42 @@ describe('inferControls', () => { 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', + it('should return inferred type when using color matcher but arg passed is not a string', () => { + const sampleTypes = [ + { + name: 'object', + value: { + rgb: { + name: 'number', }, }, - controls: { - matchers: { - color: /background/, + }, + { name: 'number' }, + { name: 'boolean' }, + ]; + + sampleTypes.forEach((type) => { + const inferredControls = inferControls( + getStoryContext({ + argTypes: { + background: { + // passing an object which is unsupported + // should ignore color control and infer the type instead + type, + name: 'background', + }, }, - }, - }) - ); + controls: { + matchers: { + color: /background/, + }, + }, + }) + ); - expect(warnSpy).toHaveBeenCalled(); - expect(inferredControls.background.control.type).toEqual('object'); + expect(warnSpy).toHaveBeenCalled(); + expect(inferredControls.background.control.type).toEqual(type.name); + }); }); }); diff --git a/lib/client-api/src/inferControls.ts b/lib/client-api/src/inferControls.ts index 5097082ae5c2..85439860763d 100644 --- a/lib/client-api/src/inferControls.ts +++ b/lib/client-api/src/inferControls.ts @@ -19,7 +19,8 @@ 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)) { - const controlType = typeof argType.type.value; + const controlType = argType.type.name; + if (controlType === 'string') { return { control: { type: 'color' } }; }