Skip to content

Commit f2f57b7

Browse files
alexcjohnsonalexcjohnson
committed
simplify table visual tests a bit
1 parent ef8bf17 commit f2f57b7

File tree

9 files changed

+157
-293
lines changed

9 files changed

+157
-293
lines changed

‎components/dash-table/tests/visual/percy-storybook/TriadValidation.percy.tsx

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,33 @@ const actions = [TableAction.Native, TableAction.Custom];
88

99
const setProps = () => {};
1010

11-
let stories = storiesOf('DashTable/Props Validation', module);
11+
const elements: [React.ReactNode?] = [];
1212

1313
actions.forEach(filter => {
1414
actions.forEach(sort => {
1515
actions.forEach(page => {
16-
stories = stories.add(
17-
`filter=${filter}, sorting=${sort}, pagination=${page}`,
18-
() => (
19-
<DataTable
20-
filter_action={filter}
21-
sort_action={sort}
22-
page_action={page}
23-
setProps={setProps}
24-
/>
25-
)
16+
elements.push(
17+
<div
18+
style={{marginTop: '10px'}}
19+
>{`filter=${filter}, sorting=${sort}, pagination=${page}`}</div>
20+
);
21+
elements.push(
22+
<DataTable
23+
columns={[
24+
{name: 'A', id: 'a'},
25+
{name: 'B', id: 'b'}
26+
]}
27+
data={[{a: 1, b: 2}]}
28+
filter_action={filter}
29+
sort_action={sort}
30+
page_action={page}
31+
setProps={setProps}
32+
/>
2633
);
2734
});
2835
});
2936
});
37+
38+
storiesOf('DashTable/Props Validation', module).add('all variants', () => (
39+
<div style={{width: '500px'}}>{elements}</div>
40+
));

‎components/dash-table/tests/visual/percy-storybook/Types.percy.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const columns: {name: string[]; id: string; presentation?: string}[] = [
1414

1515
const columns_dd = columns.map(i => ({...i, presentation: 'dropdown'}));
1616

17-
storiesOf('DashTable/Types', module)
18-
.add('types input', () => (
17+
storiesOf('DashTable/Types', module).add('types input & dropdown', () => (
18+
<div>
1919
<DataTable
2020
setProps={setProps}
2121
id='types input'
@@ -51,8 +51,6 @@ storiesOf('DashTable/Types', module)
5151
]}
5252
columns={columns}
5353
/>
54-
))
55-
.add('types dropdown', () => (
5654
<DataTable
5755
setProps={setProps}
5856
id='types dropdown'
@@ -121,4 +119,5 @@ storiesOf('DashTable/Types', module)
121119
}
122120
}}
123121
/>
124-
));
122+
</div>
123+
));

‎components/dash-table/tests/visual/percy-storybook/Width.all.percy.tsx

Lines changed: 121 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,53 @@ const data = (() => {
1919
);
2020
})();
2121

22-
const baseProps = {
22+
const basePropsDflts = {
23+
setProps,
24+
fill_width: false,
25+
id: 'table',
26+
data
27+
};
28+
29+
const propsDflts = Object.assign({}, basePropsDflts, {
30+
columns: columns.map(id => ({id: id, name: id.toUpperCase()}))
31+
});
32+
33+
const basePropsWidth = {
34+
setProps,
35+
fill_width: false,
36+
id: 'table',
37+
data
38+
};
39+
40+
const propsWidth = Object.assign({}, basePropsWidth, {
41+
columns: columns.map(id => ({id: id, name: id.toUpperCase(), width: 20}))
42+
});
43+
44+
const basePropsMax = {
45+
setProps,
46+
fill_width: false,
47+
id: 'table',
48+
data,
49+
style_data_conditional: [{max_width: 10}]
50+
};
51+
52+
const propsMax = Object.assign({}, basePropsMax, {
53+
columns: columns.map(id => ({id: id, name: id.toUpperCase()}))
54+
});
55+
56+
const basePropsMin = {
57+
setProps,
58+
fill_width: false,
59+
id: 'table',
60+
data
61+
};
62+
63+
const propsMin = Object.assign({}, basePropsMin, {
64+
columns: columns.map(id => ({id: id, name: id.toUpperCase()})),
65+
style_data_conditional: [{min_width: 100}]
66+
});
67+
68+
const basePropsAll = {
2369
setProps,
2470
id: 'table',
2571
data,
@@ -29,22 +75,80 @@ const baseProps = {
2975
]
3076
};
3177

32-
const props = Object.assign({}, baseProps, {
78+
const propsAll = Object.assign({}, basePropsAll, {
3379
columns: columns.map(id => ({id: id, name: id.toUpperCase()}))
3480
});
3581

36-
storiesOf('DashTable/Width width, minWidth, maxWidth', module)
37-
.add('without frozen columns or rows', () => <DataTable {...props} />)
38-
.add('with frozen rows', () => (
39-
<DataTable {...props} fixed_rows={{headers: true}} />
40-
))
41-
.add('with frozen columns', () => (
42-
<DataTable {...props} fixed_columns={{headers: true}} />
43-
))
44-
.add('with frozen rows and frozen columns', () => (
45-
<DataTable
46-
{...props}
47-
fixed_columns={{headers: true}}
48-
fixed_rows={{headers: true}}
49-
/>
50-
));
82+
const basePropsPct = {
83+
setProps,
84+
id: 'table',
85+
data
86+
};
87+
88+
const propsPct = Object.assign({}, basePropsPct, {
89+
columns: columns.map(id => ({id: id, name: id.toUpperCase()})),
90+
style_cell: {
91+
width: '33%'
92+
},
93+
style_table: {
94+
width: '100%',
95+
min_width: '100%',
96+
max_width: '100%'
97+
},
98+
css: [
99+
{
100+
selector: '.dash-fixed-column',
101+
rule: 'width: 33%;'
102+
}
103+
]
104+
});
105+
106+
const makeVariants =
107+
(
108+
title: string,
109+
props:
110+
| ({
111+
setProps: () => void;
112+
id: string;
113+
data: any[];
114+
fill_width: boolean;
115+
style_data_conditional: {
116+
width: string;
117+
min_width: string;
118+
max_width: string;
119+
}[];
120+
} & {columns: {id: string; name: string}[]})
121+
| (JSX.IntrinsicAttributes &
122+
JSX.IntrinsicClassAttributes<DataTable> &
123+
Readonly<any> &
124+
Readonly<{children?: React.ReactNode}>)
125+
) =>
126+
() =>
127+
(
128+
<div>
129+
<div style={{fontWeight: 'bold'}}>{title}</div>
130+
<div>without frozen columns or rows</div>
131+
<DataTable {...props} />
132+
<div>with frozen rows</div>
133+
<DataTable {...props} fixed_rows={{headers: true}} />
134+
<div>with frozen columns</div>
135+
<DataTable {...props} fixed_columns={{headers: true}} />
136+
<div>with frozen rows and frozen columns</div>
137+
<DataTable
138+
{...props}
139+
fixed_columns={{headers: true}}
140+
fixed_rows={{headers: true}}
141+
/>
142+
</div>
143+
);
144+
145+
storiesOf('DashTable/Width -', module)
146+
.add('defaults', makeVariants('defaults', propsDflts))
147+
.add('width only', makeVariants('width only', propsWidth))
148+
.add('maxWidth only', makeVariants('maxWidth only', propsMax))
149+
.add('minWidth only', makeVariants('minWidth only', propsMin))
150+
.add(
151+
'width, minWidth, maxWidth',
152+
makeVariants('width, minWidth, maxWidth', propsAll)
153+
)
154+
.add('percentage', makeVariants('percentage', propsPct));

‎components/dash-table/tests/visual/percy-storybook/Width.defaults.percy.tsx

Lines changed: 0 additions & 47 deletions
This file was deleted.

‎components/dash-table/tests/visual/percy-storybook/Width.empty.percy.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,33 +34,33 @@ const props = Object.assign({}, baseProps, {
3434
columns: columns.map(id => ({id: id, name: id.toUpperCase()}))
3535
});
3636

37-
storiesOf('DashTable/Empty', module)
38-
.add('with column filters -- no query', () => <DataTable {...props} />)
39-
.add('with column filters -- invalid query', () => (
37+
storiesOf('DashTable/Empty', module).add('all variants', () => (
38+
<div>
39+
<div>with column filters -- no query</div>
40+
<DataTable {...props} />
41+
<div>with column filters -- invalid query</div>
4042
<DataTable
4143
{...R.merge(props, {
4244
filter_query: '{a} !'
4345
})}
4446
/>
45-
))
46-
.add('with column filters -- single query', () => (
47+
<div>with column filters -- single query</div>
4748
<DataTable
4849
{...R.merge(props, {
4950
filter_query: '{a} ge 0'
5051
})}
5152
/>
52-
))
53-
.add('with column filters -- multi query', () => (
53+
<div>with column filters -- multi query</div>
5454
<DataTable
5555
{...R.merge(props, {
5656
filter_query: '{a} ge 0 && {b} ge 0'
5757
})}
5858
/>
59-
))
60-
.add('with column filters -- multi query, no data', () => (
59+
<div>with column filters -- multi query, no data</div>
6160
<DataTable
6261
{...R.merge(props, {
6362
filter_query: '{a} gt 1000 && {b} gt 1000'
6463
})}
6564
/>
66-
));
65+
</div>
66+
));

‎components/dash-table/tests/visual/percy-storybook/Width.max.percy.tsx

Lines changed: 0 additions & 48 deletions
This file was deleted.

0 commit comments

Comments
 (0)