From 4d3675d7557e1a5160e6786b5910107430a615e4 Mon Sep 17 00:00:00 2001
From: Lisa Knox <lisa.knox@curii.com>
Date: Thu, 11 Jul 2024 13:50:52 -0400
Subject: [PATCH] 21720:

* updated data-table test

Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>
---
 .../components/data-table/data-table.cy.js    | 274 ++++++++++++++++++
 .../components/data-table/data-table.test.tsx | 248 ----------------
 .../src/components/data-table/data-table.tsx  |   3 +
 3 files changed, 277 insertions(+), 248 deletions(-)
 create mode 100644 services/workbench2/src/components/data-table/data-table.cy.js
 delete mode 100644 services/workbench2/src/components/data-table/data-table.test.tsx

diff --git a/services/workbench2/src/components/data-table/data-table.cy.js b/services/workbench2/src/components/data-table/data-table.cy.js
new file mode 100644
index 0000000000..35f1c999ab
--- /dev/null
+++ b/services/workbench2/src/components/data-table/data-table.cy.js
@@ -0,0 +1,274 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from "react";
+import { Typography, Button } from "@mui/material";
+import { DataTable } from "./data-table";
+import { SortDirection, createDataColumn } from "./data-column";
+import { ThemeProvider } from "@mui/material";
+import { CustomTheme } from "common/custom-theme";
+
+describe("<DataTable />", () => {
+    it("shows only selected columns", () => {
+        const columns = [
+            createDataColumn({
+                name: "Column 1",
+                render: () => <span />,
+                selected: true,
+                configurable: true,
+            }),
+            createDataColumn({
+                name: "Column 2",
+                render: () => <span />,
+                selected: true,
+                configurable: true,
+            }),
+            createDataColumn({
+                name: "Column 3",
+                render: () => <span />,
+                selected: false,
+                configurable: true,
+            }),
+        ];
+        cy.mount(
+            <ThemeProvider theme={CustomTheme}>
+                <DataTable
+                    columns={columns}
+                    items={[{ key: "1", name: "item 1" }]}
+                    onFiltersChange={cy.stub()}
+                    onRowClick={cy.stub()}
+                    onRowDoubleClick={cy.stub()}
+                    onContextMenu={cy.stub()}
+                    onSortToggle={cy.stub()}
+                    setCheckedListOnStore={cy.stub()}
+                />
+            </ThemeProvider>
+        );
+        cy.get('th').should('have.length', 3);
+    });
+
+    it("renders column name", () => {
+        const columns = [
+            createDataColumn({
+                name: "Column 1",
+                render: () => <span />,
+                selected: true,
+                configurable: true,
+            }),
+        ];
+        cy.mount(
+            <ThemeProvider theme={CustomTheme}>
+                <DataTable
+                    columns={columns}
+                    items={["item 1"]}
+                    onFiltersChange={cy.stub()}
+                    onRowClick={cy.stub()}
+                    onRowDoubleClick={cy.stub()}
+                    onContextMenu={cy.stub()}
+                    onSortToggle={cy.stub()}
+                    setCheckedListOnStore={cy.stub()}
+                />
+            </ThemeProvider>
+        );
+        cy.get('th').last().contains('Column 1').should('exist');
+    });
+
+    it("uses renderHeader instead of name prop", () => {
+        const columns = [
+            createDataColumn({
+                name: "Column 1",
+                renderHeader: () => <span>Column Header</span>,
+                render: () => <span />,
+                selected: true,
+                configurable: true,
+            }),
+        ];
+        cy.mount(
+            <ThemeProvider theme={CustomTheme}>
+                <DataTable
+                    columns={columns}
+                    items={[]}
+                    onFiltersChange={cy.stub()}
+                    onRowClick={cy.stub()}
+                    onRowDoubleClick={cy.stub()}
+                    onContextMenu={cy.stub()}
+                    onSortToggle={cy.stub()}
+                    setCheckedListOnStore={cy.stub()}
+                />
+            </ThemeProvider>
+        );
+        cy.get('th').last().contains('Column Header').should('exist');
+    });
+
+    it("passes column key prop to corresponding cells", () => {
+        const columns = [
+            createDataColumn({
+                name: "Column 1",
+                key: "column-1-key",
+                render: () => <span />,
+                selected: true,
+                configurable: true,
+            }),
+        ];
+        cy.mount(
+            <ThemeProvider theme={CustomTheme}>
+                <DataTable
+                    columns={columns}
+                    working={false}
+                    items={["item 1"]}
+                    onFiltersChange={cy.stub()}
+                    onRowClick={cy.stub()}
+                    onRowDoubleClick={cy.stub()}
+                    onContextMenu={cy.stub()}
+                    onSortToggle={cy.stub()}
+                    setCheckedListOnStore={cy.stub()}
+                />
+            </ThemeProvider>
+        );
+        setTimeout(() => {
+            // cannot access key prop directly, so data-cy is assigned to column.key value
+            cy.get('td').last().should('have.attr', 'data-cy', 'column-1-key');
+        }, 1000);
+    });
+
+    it("renders items", () => {
+        const columns = [
+            createDataColumn({
+                name: "Column 1",
+                render: item => <Typography>{item}</Typography>,
+                selected: true,
+                configurable: true,
+            }),
+            createDataColumn({
+                name: "Column 2",
+                render: item => <Button>{item}</Button>,
+                selected: true,
+                configurable: true,
+            }),
+        ];
+        cy.mount(
+            <ThemeProvider theme={CustomTheme}>
+                <DataTable
+                    columns={columns}
+                    working={false}
+                    items={["item 1"]}
+                    onFiltersChange={cy.stub()}
+                    onRowClick={cy.stub()}
+                    onRowDoubleClick={cy.stub()}
+                    onContextMenu={cy.stub()}
+                    onSortToggle={cy.stub()}
+                    setCheckedListOnStore={cy.stub()}
+                />
+            </ThemeProvider>
+        );
+        setTimeout(() => {
+            cy.get('p').last().contains('item 1').should('exist');
+            cy.get('button').last().contains('item 1').should('exist');
+        }, 1000);
+    });
+
+    it("passes sorting props to <TableSortLabel />", () => {
+        const columns = [
+            createDataColumn({
+                name: "Column 1",
+                sort: { direction: SortDirection.ASC, field: "length" },
+                selected: true,
+                configurable: true,
+                render: item => <Typography>{item}</Typography>,
+            }),
+        ];
+        const onSortToggle = cy.spy().as("onSortToggle");
+        cy.mount(
+            <ThemeProvider theme={CustomTheme}>
+                <DataTable
+                    columns={columns}
+                    items={["item 1"]}
+                    onFiltersChange={cy.stub()}
+                    onRowClick={cy.stub()}
+                    onRowDoubleClick={cy.stub()}
+                    onContextMenu={cy.stub()}
+                    onSortToggle={onSortToggle}
+                    setCheckedListOnStore={cy.stub()}
+                />
+            </ThemeProvider>
+        );
+        setTimeout(() => {
+            cy.get('th').last().contains('Column 1').should('exist');
+            cy.get('[data-cy="sort-button"]').should('exist').click();
+            cy.get('@onSortToggle').should('have.been.calledWith', columns[1]);
+        }, 1000);
+    });
+
+    it("does not display <DataTableFiltersPopover /> if there is no filters provided", () => {
+        const columns = [
+            {
+                name: "Column 1",
+                selected: true,
+                configurable: true,
+                filters: [],
+                render: item => <Typography>{item}</Typography>,
+            },
+        ];
+        const onFiltersChange = cy.stub();
+        cy.mount(
+            <ThemeProvider theme={CustomTheme}>
+                <DataTable
+                    columns={columns}
+                    items={[]}
+                    onFiltersChange={onFiltersChange}
+                    onRowClick={cy.stub()}
+                    onRowDoubleClick={cy.stub()}
+                    onSortToggle={cy.stub()}
+                    onContextMenu={cy.stub()}
+                    setCheckedListOnStore={cy.stub()}
+                />
+            </ThemeProvider>
+        );
+        cy.get('[data-cy=data-table]').should('exist');
+        cy.get('[data-cy=popover]').should('not.exist');
+    });
+
+    it("passes filter props to <DataTableFiltersPopover />", () => {
+        const filters = { Filters : {
+            id: 'Filters id',
+            active: false,
+            children: ['Filter 1', 'Filter 2'],
+            expanded: false,
+            initialState: true,
+            parent: "",
+            selected: false,
+            status: "LOADED",
+            value: { name: 'Filter'}
+        } };
+        const columns = [
+            {
+                name: "Column 1",
+                selected: true,
+                configurable: true,
+                filters: filters,
+                render: item => <Typography>{item}</Typography>,
+            },
+        ];
+        const onFiltersChange = cy.spy().as("onFiltersChange");
+        cy.mount(
+            <ThemeProvider theme={CustomTheme}>
+                <DataTable
+                    columns={columns}
+                    items={[]}
+                    onFiltersChange={onFiltersChange}
+                    onRowClick={cy.stub()}
+                    onRowDoubleClick={cy.stub()}
+                    onSortToggle={cy.stub()}
+                    onContextMenu={cy.stub()}
+                    setCheckedListOnStore={cy.stub()}
+                />  
+            </ThemeProvider>
+        );
+        setTimeout(() => {
+            cy.get('span[role="button"]').contains('Column 1').should('exist').click();
+            cy.get('[data-cy="tree-li"]').contains('Filter').should('exist').click();
+            cy.get('@onFiltersChange').should('have.been.calledWith', filters, columns[1]);
+        }, 1000);
+    });
+});
diff --git a/services/workbench2/src/components/data-table/data-table.test.tsx b/services/workbench2/src/components/data-table/data-table.test.tsx
deleted file mode 100644
index 6709a5b42e..0000000000
--- a/services/workbench2/src/components/data-table/data-table.test.tsx
+++ /dev/null
@@ -1,248 +0,0 @@
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import React from "react";
-import { mount, configure } from "enzyme";
-import { pipe } from "lodash/fp";
-import { TableHead, TableCell, Typography, TableBody, Button, TableSortLabel } from "@mui/material";
-import Adapter from "enzyme-adapter-react-16";
-import { DataTable, DataColumns } from "./data-table";
-import { SortDirection, createDataColumn } from "./data-column";
-import { DataTableFiltersPopover } from "components/data-table-filters/data-table-filters-popover";
-import { createTree, setNode, initTreeNode } from "models/tree";
-import { DataTableFilterItem } from "components/data-table-filters/data-table-filters-tree";
-
-configure({ adapter: new Adapter() });
-
-describe("<DataTable />", () => {
-    it("shows only selected columns", () => {
-        const columns: DataColumns<string, string> = [
-            createDataColumn({
-                name: "Column 1",
-                render: () => <span />,
-                selected: true,
-                configurable: true,
-            }),
-            createDataColumn({
-                name: "Column 2",
-                render: () => <span />,
-                selected: true,
-                configurable: true,
-            }),
-            createDataColumn({
-                name: "Column 3",
-                render: () => <span />,
-                selected: false,
-                configurable: true,
-            }),
-        ];
-        const dataTable = mount(
-            <DataTable
-                columns={columns}
-                items={[{ key: "1", name: "item 1" }]}
-                onFiltersChange={jest.fn()}
-                onRowClick={jest.fn()}
-                onRowDoubleClick={jest.fn()}
-                onContextMenu={jest.fn()}
-                onSortToggle={jest.fn()}
-                setCheckedListOnStore={jest.fn()}
-            />
-        );
-        expect(dataTable.find(TableHead).find(TableCell)).toHaveLength(3);
-    });
-
-    it("renders column name", () => {
-        const columns: DataColumns<string, string> = [
-            createDataColumn({
-                name: "Column 1",
-                render: () => <span />,
-                selected: true,
-                configurable: true,
-            }),
-        ];
-        const dataTable = mount(
-            <DataTable
-                columns={columns}
-                items={["item 1"]}
-                onFiltersChange={jest.fn()}
-                onRowClick={jest.fn()}
-                onRowDoubleClick={jest.fn()}
-                onContextMenu={jest.fn()}
-                onSortToggle={jest.fn()}
-                setCheckedListOnStore={jest.fn()}
-            />
-        );
-        expect(dataTable.find(TableHead).find(TableCell).last().text()).toBe("Column 1");
-    });
-
-    it("uses renderHeader instead of name prop", () => {
-        const columns: DataColumns<string, string> = [
-            createDataColumn({
-                name: "Column 1",
-                renderHeader: () => <span>Column Header</span>,
-                render: () => <span />,
-                selected: true,
-                configurable: true,
-            }),
-        ];
-        const dataTable = mount(
-            <DataTable
-                columns={columns}
-                items={[]}
-                onFiltersChange={jest.fn()}
-                onRowClick={jest.fn()}
-                onRowDoubleClick={jest.fn()}
-                onContextMenu={jest.fn()}
-                onSortToggle={jest.fn()}
-                setCheckedListOnStore={jest.fn()}
-            />
-        );
-        expect(dataTable.find(TableHead).find(TableCell).last().text()).toBe("Column Header");
-    });
-
-    it("passes column key prop to corresponding cells", () => {
-        const columns: DataColumns<string, string> = [
-            createDataColumn({
-                name: "Column 1",
-                key: "column-1-key",
-                render: () => <span />,
-                selected: true,
-                configurable: true,
-            }),
-        ];
-        const dataTable = mount(
-            <DataTable
-                columns={columns}
-                working={false}
-                items={["item 1"]}
-                onFiltersChange={jest.fn()}
-                onRowClick={jest.fn()}
-                onRowDoubleClick={jest.fn()}
-                onContextMenu={jest.fn()}
-                onSortToggle={jest.fn()}
-                setCheckedListOnStore={jest.fn()}
-            />
-        );
-        setTimeout(() => {
-            expect(dataTable.find(TableBody).find(TableCell).last().key()).toBe("column-1-key");
-        }, 1000);
-    });
-
-    it("renders items", () => {
-        const columns: DataColumns<string, string> = [
-            createDataColumn({
-                name: "Column 1",
-                render: item => <Typography>{item}</Typography>,
-                selected: true,
-                configurable: true,
-            }),
-            createDataColumn({
-                name: "Column 2",
-                render: item => <Button>{item}</Button>,
-                selected: true,
-                configurable: true,
-            }),
-        ];
-        const dataTable = mount(
-            <DataTable
-                columns={columns}
-                working={false}
-                items={["item 1"]}
-                onFiltersChange={jest.fn()}
-                onRowClick={jest.fn()}
-                onRowDoubleClick={jest.fn()}
-                onContextMenu={jest.fn()}
-                onSortToggle={jest.fn()}
-                setCheckedListOnStore={jest.fn()}
-            />
-        );
-        setTimeout(() => {
-            expect(dataTable.find(TableBody).find(Typography).last().text()).toBe("item 1");
-            expect(dataTable.find(TableBody).find(Button).last().text()).toBe("item 1");
-        }, 1000);
-    });
-
-    it("passes sorting props to <TableSortLabel />", () => {
-        const columns: DataColumns<string, string> = [
-            createDataColumn({
-                name: "Column 1",
-                sort: { direction: SortDirection.ASC, field: "length" },
-                selected: true,
-                configurable: true,
-                render: item => <Typography>{item}</Typography>,
-            }),
-        ];
-        const onSortToggle = jest.fn();
-        const dataTable = mount(
-            <DataTable
-                columns={columns}
-                items={["item 1"]}
-                onFiltersChange={jest.fn()}
-                onRowClick={jest.fn()}
-                onRowDoubleClick={jest.fn()}
-                onContextMenu={jest.fn()}
-                onSortToggle={onSortToggle}
-                setCheckedListOnStore={jest.fn()}
-            />
-        );
-        expect(dataTable.find(TableSortLabel).prop("active")).toBeTruthy();
-        dataTable.find(TableSortLabel).at(0).simulate("click");
-        expect(onSortToggle).toHaveBeenCalledWith(columns[1]);
-    });
-
-    it("does not display <DataTableFiltersPopover /> if there is no filters provided", () => {
-        const columns: DataColumns<string, string> = [
-            {
-                name: "Column 1",
-                selected: true,
-                configurable: true,
-                filters: [],
-                render: item => <Typography>{item}</Typography>,
-            },
-        ];
-        const onFiltersChange = jest.fn();
-        const dataTable = mount(
-            <DataTable
-                columns={columns}
-                items={[]}
-                onFiltersChange={onFiltersChange}
-                onRowClick={jest.fn()}
-                onRowDoubleClick={jest.fn()}
-                onSortToggle={jest.fn()}
-                onContextMenu={jest.fn()}
-                setCheckedListOnStore={jest.fn()}
-            />
-        );
-        expect(dataTable.find(DataTableFiltersPopover)).toHaveLength(0);
-    });
-
-    it("passes filter props to <DataTableFiltersPopover />", () => {
-        const filters = pipe(() => createTree<DataTableFilterItem>(), setNode(initTreeNode({ id: "filter", value: { name: "filter" } })));
-        const columns: DataColumns<string, string> = [
-            {
-                name: "Column 1",
-                selected: true,
-                configurable: true,
-                filters: filters(),
-                render: item => <Typography>{item}</Typography>,
-            },
-        ];
-        const onFiltersChange = jest.fn();
-        const dataTable = mount(
-            <DataTable
-                columns={columns}
-                items={[]}
-                onFiltersChange={onFiltersChange}
-                onRowClick={jest.fn()}
-                onRowDoubleClick={jest.fn()}
-                onSortToggle={jest.fn()}
-                onContextMenu={jest.fn()}
-                setCheckedListOnStore={jest.fn()}
-            />
-        );
-        expect(dataTable.find(DataTableFiltersPopover).prop("filters")).toBe(columns[1].filters);
-        dataTable.find(DataTableFiltersPopover).prop("onChange")([]);
-        expect(onFiltersChange).toHaveBeenCalledWith([], columns[1]);
-    });
-});
diff --git a/services/workbench2/src/components/data-table/data-table.tsx b/services/workbench2/src/components/data-table/data-table.tsx
index 35f6e2d903..32348364dd 100644
--- a/services/workbench2/src/components/data-table/data-table.tsx
+++ b/services/workbench2/src/components/data-table/data-table.tsx
@@ -261,6 +261,7 @@ export const DataTable = withStyles(styles)(
 
         isAnySelected = (): boolean => {
             const { checkedList } = this.props;
+            if (!checkedList) return false;
             if (!Object.keys(checkedList).length) return false;
             for (const key in checkedList) {
                 if (checkedList[key] === true) return true;
@@ -420,6 +421,7 @@ export const DataTable = withStyles(styles)(
 
         ArrowIcon = ({ className, ...props }: SvgIconProps) => (
             <IconButton
+                data-cy="sort-button"
                 component="span"
                 className={this.props.classes.arrowButton}
                 tabIndex={-1}
@@ -448,6 +450,7 @@ export const DataTable = withStyles(styles)(
                     {this.mapVisibleColumns((column, index) => (
                         <TableCell
                             key={column.key || index}
+                            data-cy={column.key || index}
                             className={
                                 currentRoute === "/workflows"
                                     ? classes.tableCellWorkflows
-- 
2.39.5