Skip to content

Commit f35e344

Browse files
VeraZabVeraZab
committed
add tests
1 parent d571b00 commit f35e344

File tree

4 files changed

+213
-5
lines changed

4 files changed

+213
-5
lines changed

‎src/__stories__/index.js

Lines changed: 73 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,72 @@ import './stories.css';
1212

1313
import React from 'react';
1414
import {storiesOf} from '@storybook/react';
15+
export const customConfigTest = {
16+
visibility_rules: {
17+
blacklist: [
18+
{type: 'attrName', regex_match: 'font.family'},
19+
{type: 'attrName', regex_match: 'font.size'},
20+
{
21+
type: 'attrName',
22+
regex_match: 'color',
23+
exceptions: [
24+
{
25+
type: 'attrName',
26+
regex_match: 'colorbar',
27+
exceptions: [
28+
{type: 'attrName', regex_match: 'colorbar.bgcolor'},
29+
{type: 'attrName', regex_match: 'colorbar.tickfont.color'},
30+
{type: 'attrName', regex_match: 'colorbar.title.font.color'},
31+
{type: 'attrName', regex_match: 'colorbar.outlinecolor'},
32+
{type: 'attrName', regex_match: 'colorbar.bordercolor'},
33+
{type: 'attrName', regex_match: 'colorbar.tickcolor'},
34+
],
35+
},
36+
{
37+
type: 'attrName',
38+
regex_match: 'coloraxis',
39+
exceptions: [
40+
{type: 'attrName', regex_match: 'coloraxis.colorscale'},
41+
{type: 'attrName', regex_match: 'coloraxis.colorbar.outlinecolor'},
42+
{type: 'attrName', regex_match: 'coloraxis.colorbar.bordercolor'},
43+
{type: 'attrName', regex_match: 'coloraxis.colorbar.bgcolor'},
44+
{type: 'attrName', regex_match: 'coloraxis.colorbar.tickcolor'},
45+
{type: 'attrName', regex_match: 'coloraxis.colorbar.tickfont.color'},
46+
{type: 'attrName', regex_match: 'coloraxis.colorbar.title.font.color'},
47+
],
48+
},
49+
{
50+
type: 'attrName',
51+
regex_match: 'colorscales',
52+
exceptions: [
53+
{
54+
type: 'attrName',
55+
regex_match: 'colorscales.items.concentrationscales.colorscale',
56+
},
57+
],
58+
},
59+
{type: 'attrName', regex_match: 'autocolorscale'},
60+
{type: 'attrName', regex_match: 'usecolormap'},
61+
{type: 'attrName', regex_match: 'bundlecolors'},
62+
{
63+
type: 'attrName',
64+
regex_match: 'marker.color',
65+
exceptions: [
66+
{type: 'controlType', regex_match: '^UnconnectedMultiColorPicker$'},
67+
{type: 'controlType', regex_match: '^UnconnectedColorscalePicker$'},
68+
{type: 'attrName', regex_match: 'marker.colorbar.outlinecolor'},
69+
{type: 'attrName', regex_match: 'marker.colorbar.bordercolor'},
70+
{type: 'attrName', regex_match: 'marker.colorbar.bgcolor'},
71+
{type: 'attrName', regex_match: 'marker.colorbar.tickcolor'},
72+
{type: 'attrName', regex_match: 'marker.colorbar.tickfont.color'},
73+
{type: 'attrName', regex_match: 'marker.colorbar.title.font.color'},
74+
],
75+
},
76+
],
77+
},
78+
],
79+
},
80+
};
1581

1682
/**
1783
* To add more Percy tests - add a mock file to /dev/percy, add it to /dev/percy/index.js
@@ -34,7 +100,7 @@ window.URL.createObjectURL = function() {
34100
return null;
35101
};
36102

37-
const panelFixture = (Panel, group, name, figure) => {
103+
const panelFixture = (Panel, group, name, figure, customConfig) => {
38104
const gd = setupGraphDiv(figure, plotly);
39105
gd._context = plotly.setPlotConfig();
40106
gd._context.setBackground = () => {
@@ -48,6 +114,7 @@ const panelFixture = (Panel, group, name, figure) => {
48114
graphDiv={gd}
49115
dataSources={fixtures.scatter().dataSources}
50116
dataSourceOptions={fixtures.scatter().dataSourceOptions}
117+
customConfig={customConfig || {}}
51118
>
52119
<PanelMenuWrapper>
53120
<Panel group={group} name={name} />
@@ -67,8 +134,10 @@ Object.keys(mocks).forEach(m => {
67134
const panelGroup = words[0];
68135
const panelName = words.slice(1, -1).join(' ');
69136

70-
stories = stories.add(`${m}_${p}`, () =>
71-
panelFixture(panels[p], panelGroup, panelName, mocks[m])
72-
);
137+
stories = stories
138+
.add(`${m}_${p}`, () => panelFixture(panels[p], panelGroup, panelName, mocks[m]))
139+
.add(`${m}_${p}_withCustomConfig`, () =>
140+
panelFixture(panels[p], panelGroup, panelName, mocks[m], customConfigTest)
141+
);
73142
});
74143
});

‎src/components/containers/__tests__/ConnectedContainersVisibility-test.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,57 @@ describe('Basic PlotlySection rules', () => {
7474
it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
7575
});
7676

77+
describe('PlotlyPanel > PlotlySection > Field-with-no-visible-attr-based-on-customConfig', () => {
78+
const wrapper = mount(
79+
<TestEditor
80+
{...fixtures.scatter({
81+
customConfig: {
82+
visibility_rules: {
83+
blacklist: [{type: 'attrName', regex_match: 'color'}],
84+
},
85+
},
86+
})}
87+
>
88+
<LayoutPanel>
89+
<PlotlySection>
90+
<Numeric attr="title.font.color" />
91+
</PlotlySection>
92+
</LayoutPanel>
93+
</TestEditor>
94+
);
95+
96+
it('HIDES Field based on customConfig', () =>
97+
expect(wrapper.find('input').length).toEqual(0));
98+
it('HIDES PlotlySection because no visible children according to custom config', () =>
99+
expect(wrapper.find('div.section').length).toEqual(0));
100+
});
101+
102+
describe('PlotlyPanel > PlotlySection > Field-with-no-visible-attr-based-on-customConfig', () => {
103+
const wrapper = mount(
104+
<TestEditor
105+
{...fixtures.scatter({
106+
customConfig: {
107+
visibility_rules: {
108+
blacklist: [{type: 'attrName', regex_match: 'color'}],
109+
},
110+
},
111+
})}
112+
>
113+
<LayoutPanel>
114+
<PlotlySection attr="title">
115+
<Numeric attr="title.font.color" />
116+
<Numeric attr="title" />
117+
</PlotlySection>
118+
</LayoutPanel>
119+
</TestEditor>
120+
);
121+
122+
it('HIDES the title.font.color Field based on customConfig', () =>
123+
expect(wrapper.find('input').length).toEqual(1));
124+
it('SHOWS PlotlySection if it has an attr that is accepted by customConfig', () =>
125+
expect(wrapper.find('div.section').length).toEqual(1));
126+
});
127+
77128
describe('div > PlotlySection > Field-with-visible-attr', () => {
78129
const wrapper = mount(
79130
<TestEditor {...fixtures.scatter()}>

‎src/lib/__tests__/unpackPlotProps-test.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import {computeCustomConfigVisibility} from '../index';
2+
3+
const validate = (string, expected, config, wrappedComponentDisplayName) => {
4+
const isVisible = computeCustomConfigVisibility(
5+
{attr: string},
6+
config,
7+
wrappedComponentDisplayName
8+
);
9+
expect(isVisible).toBe(expected[string]);
10+
};
11+
12+
describe('computeCustomConfigVisibility', () => {
13+
const customConfig = {
14+
visibility_rules: {
15+
blacklist: [
16+
{
17+
type: 'attrName',
18+
regex_match: 'color',
19+
exceptions: [
20+
{
21+
type: 'attrName',
22+
regex_match: 'colorscale',
23+
exceptions: [
24+
{type: 'attrName', regex_match: 'colorscale.title.font.color'},
25+
{type: 'attrName', regex_match: 'colorscale.tickcolor'},
26+
],
27+
},
28+
],
29+
},
30+
],
31+
},
32+
};
33+
34+
it('correctly blacklists attributes taking into account exceptions', () => {
35+
const cases = {
36+
bg_color: false,
37+
'font.color': false,
38+
somethingElse: true,
39+
colorscale: true,
40+
'colorscale.somethingElse': true,
41+
'colorscale.title.font.color': false,
42+
'colorscale.tickcolor': false,
43+
};
44+
45+
Object.keys(cases).forEach(c => validate(c, cases, customConfig));
46+
});
47+
48+
it('correctly whitelists attributes taking into account exceptions', () => {
49+
const config = {visibility_rules: {whitelist: customConfig.visibility_rules.blacklist}};
50+
51+
const cases = {
52+
bg_color: true,
53+
'font.color': true,
54+
somethingElse: false,
55+
colorscale: false,
56+
'colorscale.somethingElse': false,
57+
'colorscale.title.font.color': true,
58+
'colorscale.tickcolor': true,
59+
};
60+
61+
Object.keys(cases).forEach(c => validate(c, cases, config));
62+
});
63+
64+
it('correctly displays visibility based on controlType', () => {
65+
const config = {
66+
visibility_rules: {
67+
blacklist: [
68+
{
69+
type: 'attrName',
70+
regex_match: 'color',
71+
exceptions: [
72+
{
73+
type: 'attrName',
74+
regex_match: 'marker.color',
75+
exceptions: [{type: 'controlType', regex_match: '^ColorscalePicker$'}],
76+
},
77+
],
78+
},
79+
],
80+
},
81+
};
82+
83+
const case1 = {'marker.color': false};
84+
const case2 = {'marker.color': true};
85+
Object.keys(case1).forEach(c => validate(c, case1, config, 'ColorscalePicker'));
86+
Object.keys(case2).forEach(c => validate(c, case2, config, 'AnotherPicker'));
87+
});
88+
});

‎src/lib/test-utils.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ function applyConfig(config = {}, {graphDiv: {data, layout}, dataSourceOptions,
104104
// replace simple graphDiv with properly mocked GD including fullData/fullLayout
105105
const graphDiv = setupGraphDiv({data, layout});
106106

107-
return {dataSources, dataSourceOptions, graphDiv};
107+
return {dataSources, dataSourceOptions, graphDiv, customConfig: config.customConfig || {}};
108108
}
109109

110110
/*

0 commit comments

Comments
 (0)