Skip to content

Commit d15284e

Browse files
cnathecnathe
committed
jest test for ColorPickerInputs
1 parent 38650b2 commit d15284e

2 files changed

Lines changed: 287 additions & 26 deletions

File tree

‎packages/components/src/internal/components/chart/ChartColorInputs.test.tsx‎

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import { ChartConfig } from './models';
4+
import { LABKEY_VIS } from '../../constants';
5+
6+
import { ChartColorInputs, ShapeOptionRenderer, SeriesOptionRenderer, showColorOption } from './ChartColorInputs';
7+
import {makeTestQueryModel} from "../../../public/QueryModel/testUtils";
8+
import {SchemaQuery} from "../../../public/SchemaQuery";
9+
10+
LABKEY_VIS = {
11+
Scale: {
12+
ShapeMap: { circle: jest.fn },
13+
},
14+
};
15+
16+
describe('showColorOption', () => {
17+
test('boxFillColor', () => {
18+
expect(showColorOption({ renderType: 'bar_chart' } as ChartConfig, 'boxFillColor')).toBe(true);
19+
expect(showColorOption({ renderType: 'box_plot' } as ChartConfig, 'boxFillColor')).toBe(true);
20+
expect(showColorOption({ renderType: 'line_plot' } as ChartConfig, 'boxFillColor')).toBe(false);
21+
expect(showColorOption({ renderType: 'scatter_plot' } as ChartConfig, 'boxFillColor')).toBe(false);
22+
expect(showColorOption({ renderType: 'pie_chart' } as ChartConfig, 'boxFillColor')).toBe(false);
23+
24+
expect(
25+
showColorOption(
26+
{ renderType: 'bar_chart', measures: { xSub: { name: 'test' } } } as ChartConfig,
27+
'boxFillColor'
28+
)
29+
).toBe(false);
30+
});
31+
32+
test('colorPaletteScale', () => {
33+
expect(showColorOption({ renderType: 'bar_chart' } as ChartConfig, 'colorPaletteScale')).toBe(false);
34+
expect(showColorOption({ renderType: 'box_plot' } as ChartConfig, 'colorPaletteScale')).toBe(false);
35+
expect(showColorOption({ renderType: 'line_plot' } as ChartConfig, 'colorPaletteScale')).toBe(false);
36+
expect(showColorOption({ renderType: 'scatter_plot' } as ChartConfig, 'colorPaletteScale')).toBe(false);
37+
expect(showColorOption({ renderType: 'pie_chart' } as ChartConfig, 'colorPaletteScale')).toBe(true);
38+
39+
expect(
40+
showColorOption(
41+
{ renderType: 'line_plot', measures: { series: { name: 'test' } } } as ChartConfig,
42+
'colorPaletteScale'
43+
)
44+
).toBe(true);
45+
expect(
46+
showColorOption(
47+
{ renderType: 'bar_chart', measures: { xSub: { name: 'test' } } } as ChartConfig,
48+
'colorPaletteScale'
49+
)
50+
).toBe(true);
51+
expect(
52+
showColorOption(
53+
{ renderType: 'box_plot', measures: { color: { name: 'test' } } } as ChartConfig,
54+
'colorPaletteScale'
55+
)
56+
).toBe(true);
57+
expect(
58+
showColorOption(
59+
{ renderType: 'scatter_plot', measures: { color: { name: 'test' } } } as ChartConfig,
60+
'colorPaletteScale'
61+
)
62+
).toBe(true);
63+
});
64+
65+
test('lineColor', () => {
66+
expect(showColorOption({ renderType: 'bar_chart' } as ChartConfig, 'lineColor')).toBe(true);
67+
expect(showColorOption({ renderType: 'box_plot' } as ChartConfig, 'lineColor')).toBe(true);
68+
expect(showColorOption({ renderType: 'line_plot' } as ChartConfig, 'lineColor')).toBe(false);
69+
expect(showColorOption({ renderType: 'scatter_plot' } as ChartConfig, 'lineColor')).toBe(false);
70+
expect(showColorOption({ renderType: 'pie_chart' } as ChartConfig, 'lineColor')).toBe(false);
71+
72+
expect(
73+
showColorOption(
74+
{ renderType: 'bar_chart', measures: { xSub: { name: 'test' } } } as ChartConfig,
75+
'lineColor'
76+
)
77+
).toBe(false);
78+
});
79+
80+
test('pointFillColor', () => {
81+
expect(showColorOption({ renderType: 'bar_chart' } as ChartConfig, 'pointFillColor')).toBe(false);
82+
expect(showColorOption({ renderType: 'box_plot' } as ChartConfig, 'pointFillColor')).toBe(true);
83+
expect(showColorOption({ renderType: 'line_plot' } as ChartConfig, 'pointFillColor')).toBe(true);
84+
expect(showColorOption({ renderType: 'scatter_plot' } as ChartConfig, 'pointFillColor')).toBe(true);
85+
expect(showColorOption({ renderType: 'pie_chart' } as ChartConfig, 'pointFillColor')).toBe(false);
86+
87+
expect(
88+
showColorOption(
89+
{ renderType: 'line_plot', measures: { series: { name: 'test' } } } as ChartConfig,
90+
'pointFillColor'
91+
)
92+
).toBe(false);
93+
expect(
94+
showColorOption(
95+
{ renderType: 'box_plot', measures: { color: { name: 'test' } } } as ChartConfig,
96+
'pointFillColor'
97+
)
98+
).toBe(false);
99+
expect(
100+
showColorOption(
101+
{ renderType: 'scatter_plot', measures: { color: { name: 'test' } } } as ChartConfig,
102+
'pointFillColor'
103+
)
104+
).toBe(false);
105+
});
106+
});
107+
108+
describe('ShapeOptionRenderer', () => {
109+
test('isValueRenderer false', () => {
110+
render(<ShapeOptionRenderer isValueRenderer={false} name="circle" />);
111+
expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
112+
expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(0);
113+
});
114+
115+
test('isValueRenderer true', () => {
116+
render(<ShapeOptionRenderer isValueRenderer name="circle" />);
117+
expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
118+
expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(1);
119+
});
120+
});
121+
122+
describe('SeriesOptionRenderer', () => {
123+
test('isValueRenderer false', () => {
124+
render(<SeriesOptionRenderer isValueRenderer={false} name="series1" seriesOptionMap={{}} />);
125+
expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
126+
expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(0);
127+
});
128+
129+
test('isValueRenderer true', () => {
130+
render(<SeriesOptionRenderer isValueRenderer name="series1" seriesOptionMap={{}} />);
131+
expect(document.querySelectorAll('.chart-builder-type-option')).toHaveLength(1);
132+
expect(document.querySelectorAll('.chart-builder-type-option--value')).toHaveLength(1);
133+
});
134+
135+
test('without seriesOptionMap value', () => {
136+
render(<SeriesOptionRenderer isValueRenderer name="series1" seriesOptionMap={{}} />);
137+
expect(document.querySelector('.chart-builder-type-option').textContent).toBe('A series1');
138+
expect(document.querySelectorAll('.color-icon__chip-small')).toHaveLength(0);
139+
expect(document.querySelectorAll('i')).toHaveLength(0);
140+
expect(document.querySelectorAll('.letter-icon')).toHaveLength(1);
141+
});
142+
143+
test('with seriesOptionMap value', () => {
144+
render(
145+
<SeriesOptionRenderer
146+
isValueRenderer
147+
name="series1"
148+
seriesOptionMap={{ series1: { color: 'red' } }}
149+
/>
150+
);
151+
expect(document.querySelector('.chart-builder-type-option').textContent).toBe(' series1');
152+
expect(document.querySelectorAll('.color-icon__chip-small')).toHaveLength(1);
153+
expect(document.querySelectorAll('i')).toHaveLength(1);
154+
expect(document.querySelector('i').getAttribute('style')).toBe('background-color: red;');
155+
expect(document.querySelectorAll('.letter-icon')).toHaveLength(0);
156+
});
157+
});
158+
159+
describe('ChartColorInputs', () => {
160+
const model = makeTestQueryModel(new SchemaQuery('schema', 'query'), undefined, [], 0);
161+
162+
test('default bar chart', () => {
163+
render(
164+
<ChartColorInputs
165+
chartConfig={{ renderType: 'bar_chart', geomOptions: {} } as ChartConfig}
166+
model={model}
167+
setChartConfig={jest.fn()}
168+
/>
169+
);
170+
expect(document.querySelectorAll('.row')).toHaveLength(1);
171+
expect(document.querySelectorAll('.color-picker')).toHaveLength(2);
172+
expect(document.querySelectorAll('.select-input')).toHaveLength(0);
173+
});
174+
175+
test('default pie chart', () => {
176+
render(
177+
<ChartColorInputs
178+
chartConfig={{ renderType: 'pie_chart', geomOptions: {} } as ChartConfig}
179+
model={model}
180+
setChartConfig={jest.fn()}
181+
/>
182+
);
183+
expect(document.querySelectorAll('.row')).toHaveLength(2);
184+
expect(document.querySelectorAll('.color-picker')).toHaveLength(0);
185+
expect(document.querySelectorAll('.select-input')).toHaveLength(1);
186+
});
187+
188+
test('default box plot', () => {
189+
render(
190+
<ChartColorInputs
191+
chartConfig={{ renderType: 'box_plot', geomOptions: {} } as ChartConfig}
192+
model={model}
193+
setChartConfig={jest.fn()}
194+
/>
195+
);
196+
expect(document.querySelectorAll('.row')).toHaveLength(1);
197+
expect(document.querySelectorAll('.color-picker')).toHaveLength(3);
198+
expect(document.querySelectorAll('.select-input')).toHaveLength(0);
199+
});
200+
201+
test('default scatter plot', () => {
202+
render(
203+
<ChartColorInputs
204+
chartConfig={{ renderType: 'scatter_plot', geomOptions: {} } as ChartConfig}
205+
model={model}
206+
setChartConfig={jest.fn()}
207+
/>
208+
);
209+
expect(document.querySelectorAll('.row')).toHaveLength(1);
210+
expect(document.querySelectorAll('.color-picker')).toHaveLength(1);
211+
expect(document.querySelectorAll('.select-input')).toHaveLength(0);
212+
});
213+
214+
test('scatter plot with color', () => {
215+
render(
216+
<ChartColorInputs
217+
chartConfig={{ renderType: 'scatter_plot', geomOptions: {}, measures: { color: { name: 'test' } }, } as ChartConfig}
218+
model={model}
219+
setChartConfig={jest.fn()}
220+
/>
221+
);
222+
expect(document.querySelectorAll('.row')).toHaveLength(2);
223+
expect(document.querySelectorAll('.color-picker')).toHaveLength(0);
224+
expect(document.querySelectorAll('.select-input')).toHaveLength(1);
225+
});
226+
227+
test('default line plot', () => {
228+
render(
229+
<ChartColorInputs
230+
chartConfig={{ renderType: 'line_plot', geomOptions: {} } as ChartConfig}
231+
model={model}
232+
setChartConfig={jest.fn()}
233+
/>
234+
);
235+
expect(document.querySelectorAll('.row')).toHaveLength(1);
236+
expect(document.querySelectorAll('.color-picker')).toHaveLength(1);
237+
expect(document.querySelectorAll('.select-input')).toHaveLength(0);
238+
});
239+
240+
test('line plot with series', () => {
241+
render(
242+
<ChartColorInputs
243+
chartConfig={{
244+
renderType: 'line_plot',
245+
geomOptions: {},
246+
measures: { series: { name: 'test' } },
247+
} as ChartConfig}
248+
model={model}
249+
setChartConfig={jest.fn()}
250+
/>
251+
);
252+
expect(document.querySelectorAll('.row')).toHaveLength(2);
253+
expect(document.querySelectorAll('.color-picker')).toHaveLength(0);
254+
expect(document.querySelectorAll('.select-input')).toHaveLength(1);
255+
});
256+
});

‎packages/components/src/internal/components/chart/ChartColorInputs.tsx‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import { ColorIcon } from '../base/ColorIcon';
1111
import { LABKEY_VIS } from '../../constants';
1212
import { RemoveEntityButton } from '../buttons/RemoveEntityButton';
1313

14-
const showColorOption = function (chartConfig: ChartConfig, optionName: string): boolean {
14+
// export for jest testing
15+
export const showColorOption = function (chartConfig: ChartConfig, optionName: string): boolean {
1516
const chartType = chartConfig.renderType;
1617
const isBarChart = chartType === 'bar_chart';
1718
const isBoxPlot = chartType === 'box_plot';
@@ -50,7 +51,9 @@ interface ShapeOptionRendererProps {
5051
isValueRenderer: boolean;
5152
name: string;
5253
}
53-
const ShapeOptionRenderer: FC<ShapeOptionRendererProps> = memo(({ name, isValueRenderer }) => {
54+
55+
// export for jest testing
56+
export const ShapeOptionRenderer: FC<ShapeOptionRendererProps> = memo(({ name, isValueRenderer }) => {
5457
const size = 10;
5558
const iconSize = name === 'diamond' ? size / 2.5 : size / 2;
5659
const icon = LABKEY_VIS.Scale.ShapeMap[name](iconSize);
@@ -78,24 +81,30 @@ interface SeriesOptionRendererProps {
7881
name: string;
7982
seriesOptionMap: Record<string, Record<string, string>>;
8083
}
81-
const SeriesOptionRenderer: FC<SeriesOptionRendererProps> = memo(({ name, seriesOptionMap, isValueRenderer }) => {
82-
const value = seriesOptionMap?.[name]?.color;
83-
const className = classNames('chart-builder-type-option', { 'chart-builder-type-option--value': isValueRenderer });
84-
return (
85-
<span className={className} data-series-shape={name}>
86-
{value && (
87-
<>
88-
<ColorIcon asSquare cls="color-icon__chip-small" value={value} /> {name}
89-
</>
90-
)}
91-
{!value && (
92-
<>
93-
<LetterIcon letter="A" /> {name}
94-
</>
95-
)}
96-
</span>
97-
);
98-
});
84+
85+
// export for jest testing
86+
export const SeriesOptionRenderer: FC<SeriesOptionRendererProps> = memo(
87+
({ name, seriesOptionMap, isValueRenderer }) => {
88+
const value = seriesOptionMap?.[name]?.color;
89+
const className = classNames('chart-builder-type-option', {
90+
'chart-builder-type-option--value': isValueRenderer,
91+
});
92+
return (
93+
<span className={className} data-series-shape={name}>
94+
{value && (
95+
<>
96+
<ColorIcon asSquare cls="color-icon__chip-small" value={value} /> {name}
97+
</>
98+
)}
99+
{!value && (
100+
<>
101+
<LetterIcon letter="A" /> {name}
102+
</>
103+
)}
104+
</span>
105+
);
106+
}
107+
);
99108
SeriesOptionRenderer.displayName = 'SeriesOptionRenderer';
100109

101110
function seriesOptionRenderer(option, seriesOptionMap) {
@@ -244,7 +253,7 @@ interface SeriesLineStyleInputProps {
244253
model: QueryModel;
245254
setChartConfig: ChartConfigSetter;
246255
}
247-
export const SeriesLineStyleInput: FC<SeriesLineStyleInputProps> = memo(({ chartConfig, model, setChartConfig }) => {
256+
const SeriesLineStyleInput: FC<SeriesLineStyleInputProps> = memo(({ chartConfig, model, setChartConfig }) => {
248257
const [distinctSeriesOptions, setDistinctSeriesOptions] = useState<{ label: string; value: string }[]>();
249258
const [selectedSeries, setSelectedSeries] = useState<string>();
250259
const [seriesOptionMap, setSeriesOptionMap] = useState<Record<string, MeasureOption>>(
@@ -397,10 +406,6 @@ export const SeriesLineStyleInput: FC<SeriesLineStyleInputProps> = memo(({ chart
397406
SeriesLineStyleInput.displayName = 'SeriesLineStyleInput';
398407

399408
const LetterIcon: FC<{ letter: string }> = ({ letter }) => {
400-
return (
401-
<div className='letter-icon'>
402-
{letter}
403-
</div>
404-
);
409+
return <div className="letter-icon">{letter}</div>;
405410
};
406411
LetterIcon.displayName = 'LetterIcon';

0 commit comments

Comments
 (0)