[ARVADOS-WORKBENCH2] updated: 1.1.4-69-g9b91761

Git user git at public.curoverse.com
Thu Jun 14 10:02:51 EDT 2018


Summary of changes:
 .../columns-configurator.test.tsx                  | 79 ++++++++++++++++++++++
 .../columns-configurator/columns-configurator.tsx  | 25 ++++---
 2 files changed, 96 insertions(+), 8 deletions(-)
 create mode 100644 src/components/data-explorer/columns-configurator/columns-configurator.test.tsx

       via  9b9176157227d347493ad2a7572dbca57ed9308b (commit)
       via  e5e907eac3162ddf7e76a431f66b8c26e80b0acf (commit)
      from  dbb23fe7623260b495ad64f0601feefdd103d376 (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit 9b9176157227d347493ad2a7572dbca57ed9308b
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Thu Jun 14 16:00:23 2018 +0200

    Create tests for columns configurator
    
    Feature #13601
    
    Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>

diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.test.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.test.tsx
new file mode 100644
index 0000000..56b195f
--- /dev/null
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.test.tsx
@@ -0,0 +1,79 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import { mount, configure } from "enzyme";
+import * as Adapter from "enzyme-adapter-react-16";
+import ColumnsConfigurator, { ColumnsConfiguratorTrigger } from "./columns-configurator";
+import { Column } from "../column";
+import { ListItem, Checkbox } from "@material-ui/core";
+
+configure({ adapter: new Adapter() });
+
+describe("<ColumnsConfigurator />", () => {
+    it("shows only configurable columns", () => {
+        const columns: Array<Column<void>> = [
+            {
+                header: "Column 1",
+                render: () => <span />,
+                selected: true
+            },
+            {
+                header: "Column 2",
+                render: () => <span />,
+                selected: true,
+                configurable: true,
+            },
+            {
+                header: "Column 3",
+                render: () => <span />,
+                selected: true,
+                configurable: false
+            }
+        ];
+        const columnsConfigurator = mount(<ColumnsConfigurator columns={columns} onColumnToggle={jest.fn()} />);
+        columnsConfigurator.find(ColumnsConfiguratorTrigger).simulate("click");
+        expect(columnsConfigurator.find(ListItem)).toHaveLength(2);
+    });
+
+    it("renders checked checkboxes next to selected columns", () => {
+        const columns: Array<Column<void>> = [
+            {
+                header: "Column 1",
+                render: () => <span />,
+                selected: true
+            },
+            {
+                header: "Column 2",
+                render: () => <span />,
+                selected: false
+            },
+            {
+                header: "Column 3",
+                render: () => <span />,
+                selected: true
+            }
+        ];
+        const columnsConfigurator = mount(<ColumnsConfigurator columns={columns} onColumnToggle={jest.fn()} />);
+        columnsConfigurator.find(ColumnsConfiguratorTrigger).simulate("click");
+        expect(columnsConfigurator.find(Checkbox).at(0).prop("checked")).toBe(true);
+        expect(columnsConfigurator.find(Checkbox).at(1).prop("checked")).toBe(false);
+        expect(columnsConfigurator.find(Checkbox).at(2).prop("checked")).toBe(true);
+    });
+
+    it("calls onColumnToggle with clicked column", () => {
+        const columns: Array<Column<void>> = [
+            {
+                header: "Column 1",
+                render: () => <span />,
+                selected: true
+            }
+        ];
+        const onColumnToggle = jest.fn();
+        const columnsConfigurator = mount(<ColumnsConfigurator columns={columns} onColumnToggle={onColumnToggle} />);
+        columnsConfigurator.find(ColumnsConfiguratorTrigger).simulate("click");
+        columnsConfigurator.find(ListItem).simulate("click");
+        expect(onColumnToggle).toHaveBeenCalledWith(columns[0]);
+    });
+});
\ No newline at end of file
diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
index 73d38b7..cf5841e 100644
--- a/src/components/data-explorer/columns-configurator/columns-configurator.tsx
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
@@ -46,7 +46,7 @@ const ColumnsConfigurator: React.SFC<ColumnsConfiguratorProps & WithStyles<CssRu
     );
 };
 
-const ColumnsConfiguratorTrigger: React.SFC<IconButtonProps> = (props) => (
+export const ColumnsConfiguratorTrigger: React.SFC<IconButtonProps> = (props) => (
     <IconButton {...props}>
         <MenuIcon />
     </IconButton>

commit e5e907eac3162ddf7e76a431f66b8c26e80b0acf
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Thu Jun 14 15:36:42 2018 +0200

    Clean up columns configurator code
    
    Feature #13601
    
    Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>

diff --git a/src/components/data-explorer/columns-configurator/columns-configurator.tsx b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
index c729ca8..73d38b7 100644
--- a/src/components/data-explorer/columns-configurator/columns-configurator.tsx
+++ b/src/components/data-explorer/columns-configurator/columns-configurator.tsx
@@ -3,10 +3,9 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem, Typography, ListSubheader } from '@material-ui/core';
+import { WithStyles, StyleRulesCallback, Theme, withStyles, IconButton, Paper, List, Checkbox, ListItemText, ListItem } from '@material-ui/core';
 import MenuIcon from "@material-ui/icons/Menu";
 import { Column, isColumnConfigurable } from '../column';
-import { PopoverOrigin } from '@material-ui/core/Popover';
 import Popover from "../../popover/popover";
 import { IconButtonProps } from '@material-ui/core/IconButton';
 
@@ -24,9 +23,20 @@ const ColumnsConfigurator: React.SFC<ColumnsConfiguratorProps & WithStyles<CssRu
                         columns
                             .filter(isColumnConfigurable)
                             .map((column, index) => (
-                                <ListItem key={index} button onClick={() => onColumnToggle(column)}>
-                                    <Checkbox disableRipple color="primary" checked={column.selected} className={classes.checkbox} />
-                                    <ListItemText>{column.header}</ListItemText>
+                                <ListItem
+                                    button
+                                    key={index}
+                                    onClick={() => onColumnToggle(column)}
+                                >
+                                    <Checkbox
+                                        disableRipple
+                                        color="primary"
+                                        checked={column.selected}
+                                        className={classes.checkbox}
+                                    />
+                                    <ListItemText>
+                                        {column.header}
+                                    </ListItemText>
                                 </ListItem>
                             ))
                     }
@@ -42,10 +52,9 @@ const ColumnsConfiguratorTrigger: React.SFC<IconButtonProps> = (props) => (
     </IconButton>
 );
 
-type CssRules = "root" | "checkbox";
+type CssRules = "checkbox";
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
-    root: {},
     checkbox: {
         width: 24,
         height: 24

-----------------------------------------------------------------------


hooks/post-receive
-- 




More information about the arvados-commits mailing list