simplify table visual tests a bit

plotly · alexcjohnson · Feb 18, 2022 · Feb 17, 2022 · Feb 17, 2022 · Feb 17, 2022
commit f2f57b79fab36521663c2798b38df69d663164ec
@@ -8,22 +8,33 @@ const actions = [TableAction.Native, TableAction.Custom];
 
 const setProps = () => {};
 
-let stories = storiesOf('DashTable/Props Validation', module);
+const elements: [React.ReactNode?] = [];
 
 actions.forEach(filter => {
     actions.forEach(sort => {
         actions.forEach(page => {
-            stories = stories.add(
-                `filter=${filter}, sorting=${sort}, pagination=${page}`,
-                () => (
-                    <DataTable
-                        filter_action={filter}
-                        sort_action={sort}
-                        page_action={page}
-                        setProps={setProps}
-                    />
-                )
+            elements.push(
+                <div
+                    style={{marginTop: '10px'}}
+                >{`filter=${filter}, sorting=${sort}, pagination=${page}`}</div>
+            );
+            elements.push(
+                <DataTable
+                    columns={[
+                        {name: 'A', id: 'a'},
+                        {name: 'B', id: 'b'}
+                    ]}
+                    data={[{a: 1, b: 2}]}
+                    filter_action={filter}
+                    sort_action={sort}
+                    page_action={page}
+                    setProps={setProps}
+                />
             );
         });
     });
 });
+
+storiesOf('DashTable/Props Validation', module).add('all variants', () => (
+    <div style={{width: '500px'}}>{elements}</div>
+));
@@ -14,8 +14,8 @@ const columns: {name: string[]; id: string; presentation?: string}[] = [
 
 const columns_dd = columns.map(i => ({...i, presentation: 'dropdown'}));
 
-storiesOf('DashTable/Types', module)
-    .add('types input', () => (
+storiesOf('DashTable/Types', module).add('types input & dropdown', () => (
+    <div>
         <DataTable
             setProps={setProps}
             id='types input'
@@ -51,8 +51,6 @@ storiesOf('DashTable/Types', module)
             ]}
             columns={columns}
         />
-    ))
-    .add('types dropdown', () => (
         <DataTable
             setProps={setProps}
             id='types dropdown'
@@ -121,4 +119,5 @@ storiesOf('DashTable/Types', module)
                 }
             }}
         />
-    ));
+    </div>
+));
@@ -19,7 +19,53 @@ const data = (() => {
     );
 })();
 
-const baseProps = {
+const basePropsDflts = {
+    setProps,
+    fill_width: false,
+    id: 'table',
+    data
+};
+
+const propsDflts = Object.assign({}, basePropsDflts, {
+    columns: columns.map(id => ({id: id, name: id.toUpperCase()}))
+});
+
+const basePropsWidth = {
+    setProps,
+    fill_width: false,
+    id: 'table',
+    data
+};
+
+const propsWidth = Object.assign({}, basePropsWidth, {
+    columns: columns.map(id => ({id: id, name: id.toUpperCase(), width: 20}))
+});
+
+const basePropsMax = {
+    setProps,
+    fill_width: false,
+    id: 'table',
+    data,
+    style_data_conditional: [{max_width: 10}]
+};
+
+const propsMax = Object.assign({}, basePropsMax, {
+    columns: columns.map(id => ({id: id, name: id.toUpperCase()}))
+});
+
+const basePropsMin = {
+    setProps,
+    fill_width: false,
+    id: 'table',
+    data
+};
+
+const propsMin = Object.assign({}, basePropsMin, {
+    columns: columns.map(id => ({id: id, name: id.toUpperCase()})),
+    style_data_conditional: [{min_width: 100}]
+});
+
+const basePropsAll = {
     setProps,
     id: 'table',
     data,
@@ -29,22 +75,80 @@ const baseProps = {
     ]
 };
 
-const props = Object.assign({}, baseProps, {
+const propsAll = Object.assign({}, basePropsAll, {
     columns: columns.map(id => ({id: id, name: id.toUpperCase()}))
 });
 
-storiesOf('DashTable/Width width, minWidth, maxWidth', module)
-    .add('without frozen columns or rows', () => <DataTable {...props} />)
-    .add('with frozen rows', () => (
-        <DataTable {...props} fixed_rows={{headers: true}} />
-    ))
-    .add('with frozen columns', () => (
-        <DataTable {...props} fixed_columns={{headers: true}} />
-    ))
-    .add('with frozen rows and frozen columns', () => (
-        <DataTable
-            {...props}
-            fixed_columns={{headers: true}}
-            fixed_rows={{headers: true}}
-        />
-    ));
+const basePropsPct = {
+    setProps,
+    id: 'table',
+    data
+};
+
+const propsPct = Object.assign({}, basePropsPct, {
+    columns: columns.map(id => ({id: id, name: id.toUpperCase()})),
+    style_cell: {
+        width: '33%'
+    },
+    style_table: {
+        width: '100%',
+        min_width: '100%',
+        max_width: '100%'
+    },
+    css: [
+        {
+            selector: '.dash-fixed-column',
+            rule: 'width: 33%;'
+        }
+    ]
+});
+
+const makeVariants =
+    (
+        title: string,
+        props:
+            | ({
+                  setProps: () => void;
+                  id: string;
+                  data: any[];
+                  fill_width: boolean;
+                  style_data_conditional: {
+                      width: string;
+                      min_width: string;
+                      max_width: string;
+                  }[];
+              } & {columns: {id: string; name: string}[]})
+            | (JSX.IntrinsicAttributes &
+                  JSX.IntrinsicClassAttributes<DataTable> &
+                  Readonly<any> &
+                  Readonly<{children?: React.ReactNode}>)
+    ) =>
+    () =>
+        (
+            <div>
+                <div style={{fontWeight: 'bold'}}>{title}</div>
+                <div>without frozen columns or rows</div>
+                <DataTable {...props} />
+                <div>with frozen rows</div>
+                <DataTable {...props} fixed_rows={{headers: true}} />
+                <div>with frozen columns</div>
+                <DataTable {...props} fixed_columns={{headers: true}} />
+                <div>with frozen rows and frozen columns</div>
+                <DataTable
+                    {...props}
+                    fixed_columns={{headers: true}}
+                    fixed_rows={{headers: true}}
+                />
+            </div>
+        );
+
+storiesOf('DashTable/Width -', module)
+    .add('defaults', makeVariants('defaults', propsDflts))
+    .add('width only', makeVariants('width only', propsWidth))
+    .add('maxWidth only', makeVariants('maxWidth only', propsMax))
+    .add('minWidth only', makeVariants('minWidth only', propsMin))
+    .add(
+        'width, minWidth, maxWidth',
+        makeVariants('width, minWidth, maxWidth', propsAll)
+    )
+    .add('percentage', makeVariants('percentage', propsPct));
@@ -34,33 +34,33 @@ const props = Object.assign({}, baseProps, {
     columns: columns.map(id => ({id: id, name: id.toUpperCase()}))
 });
 
-storiesOf('DashTable/Empty', module)
-    .add('with column filters -- no query', () => <DataTable {...props} />)
-    .add('with column filters -- invalid query', () => (
+storiesOf('DashTable/Empty', module).add('all variants', () => (
+    <div>
+        <div>with column filters -- no query</div>
+        <DataTable {...props} />
+        <div>with column filters -- invalid query</div>
         <DataTable
             {...R.merge(props, {
                 filter_query: '{a} !'
             })}
         />
-    ))
-    .add('with column filters -- single query', () => (
+        <div>with column filters -- single query</div>
         <DataTable
             {...R.merge(props, {
                 filter_query: '{a} ge 0'
             })}
         />
-    ))
-    .add('with column filters -- multi query', () => (
+        <div>with column filters -- multi query</div>
         <DataTable
             {...R.merge(props, {
                 filter_query: '{a} ge 0 && {b} ge 0'
             })}
         />
-    ))
-    .add('with column filters -- multi query, no data', () => (
+        <div>with column filters -- multi query, no data</div>
         <DataTable
             {...R.merge(props, {
                 filter_query: '{a} gt 1000 && {b} gt 1000'
             })}
         />
-    ));
+    </div>
+));