/
inferControls.test.ts
124 lines (112 loc) · 3.71 KB
/
inferControls.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { StoryContext } from '@storybook/addons';
import { logger } from '@storybook/client-logger';
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', () => {
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 using color matcher', () => {
// passing a string, should return control type color
const inferredControls = inferControls(
getStoryContext({
argTypes: {
background: {
type: {
name: 'string',
},
name: 'background',
},
},
controls: {
matchers: {
color: /background/,
},
},
})
);
expect(inferredControls.background.control.type).toEqual('color');
});
it('should return inferred type when using color matcher but arg passed is not a string', () => {
const sampleTypes = [
{
name: 'object',
value: {
rgb: {
name: 'number',
},
},
},
{ 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(type.name);
});
});
});
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']);
});
});