From 88ab5c4388e8bbe9dfa29ef5fff653a511d3096b Mon Sep 17 00:00:00 2001 From: Lucas Di Pentima Date: Tue, 3 Mar 2020 22:37:21 -0300 Subject: [PATCH] 15951: Removes dead code, updates tests to work with component being used. Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima --- .../data-table-filters-popover.test.tsx | 24 +++ .../data-table-filters.test.tsx | 27 --- .../data-table-filters/data-table-filters.tsx | 200 ------------------ src/components/data-table/data-table.test.tsx | 25 +-- 4 files changed, 26 insertions(+), 250 deletions(-) create mode 100644 src/components/data-table-filters/data-table-filters-popover.test.tsx delete mode 100644 src/components/data-table-filters/data-table-filters.test.tsx diff --git a/src/components/data-table-filters/data-table-filters-popover.test.tsx b/src/components/data-table-filters/data-table-filters-popover.test.tsx new file mode 100644 index 00000000..f7bd00f0 --- /dev/null +++ b/src/components/data-table-filters/data-table-filters-popover.test.tsx @@ -0,0 +1,24 @@ +// 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 { DataTableFiltersPopover } from "./data-table-filters-popover"; +import * as Adapter from 'enzyme-adapter-react-16'; +import { Checkbox, IconButton } from "@material-ui/core"; +import { getInitialProcessStatusFilters } from "~/store/resource-type-filters/resource-type-filters" + +configure({ adapter: new Adapter() }); + +describe("", () => { + it("renders filters according to their state", () => { + // 1st filter (All) is selected, the rest aren't. + const filters = getInitialProcessStatusFilters() + + const dataTableFilter = mount(); + dataTableFilter.find(IconButton).simulate("click"); + expect(dataTableFilter.find(Checkbox).at(0).prop("checked")).toBeTruthy(); + expect(dataTableFilter.find(Checkbox).at(1).prop("checked")).toBeFalsy(); + }); +}); diff --git a/src/components/data-table-filters/data-table-filters.test.tsx b/src/components/data-table-filters/data-table-filters.test.tsx deleted file mode 100644 index dc1969f4..00000000 --- a/src/components/data-table-filters/data-table-filters.test.tsx +++ /dev/null @@ -1,27 +0,0 @@ -// 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 { DataTableFilters } from "./data-table-filters"; -import * as Adapter from 'enzyme-adapter-react-16'; -import { Checkbox, ButtonBase } from "@material-ui/core"; - -configure({ adapter: new Adapter() }); - -describe("", () => { - it("renders filters according to their state", () => { - const filters = [{ - name: "Filter 1", - selected: true - }, { - name: "Filter 2", - selected: false - }]; - const dataTableFilter = mount(); - dataTableFilter.find(ButtonBase).simulate("click"); - expect(dataTableFilter.find(Checkbox).at(0).prop("checked")).toBeTruthy(); - expect(dataTableFilter.find(Checkbox).at(1).prop("checked")).toBeFalsy(); - }); -}); diff --git a/src/components/data-table-filters/data-table-filters.tsx b/src/components/data-table-filters/data-table-filters.tsx index a57f29aa..ed7b30e7 100644 --- a/src/components/data-table-filters/data-table-filters.tsx +++ b/src/components/data-table-filters/data-table-filters.tsx @@ -2,207 +2,7 @@ // // SPDX-License-Identifier: AGPL-3.0 -import * as React from "react"; -import { - WithStyles, - withStyles, - ButtonBase, - StyleRulesCallback, - Theme, - Popover, - List, - ListItem, - Checkbox, - ListItemText, - Button, - Card, - CardActions, - Typography, - CardContent, - Tooltip -} from "@material-ui/core"; -import * as classnames from "classnames"; -import { DefaultTransformOrigin } from "../popover/helpers"; -import { createTree, initTreeNode, mapTree } from '~/models/tree'; -import { DataTableFilters as DataTableFiltersModel, DataTableFiltersTree } from "./data-table-filters-tree"; -import { pipe } from 'lodash/fp'; -import { setNode } from '~/models/tree'; - -export type CssRules = "root" | "icon" | "active" | "checkbox"; - -const styles: StyleRulesCallback = (theme: Theme) => ({ - root: { - cursor: "pointer", - display: "inline-flex", - justifyContent: "flex-start", - flexDirection: "inherit", - alignItems: "center", - "&:hover": { - color: theme.palette.text.primary, - }, - "&:focus": { - color: theme.palette.text.primary, - }, - }, - active: { - color: theme.palette.text.primary, - '& $icon': { - opacity: 1, - }, - }, - icon: { - marginRight: 4, - marginLeft: 4, - opacity: 0.7, - userSelect: "none", - width: 16 - }, - checkbox: { - width: 24, - height: 24 - } -}); - export interface DataTableFilterItem { name: string; selected: boolean; } - -export interface DataTableFilterProps { - name: string; - filters: DataTableFilterItem[]; - onChange?: (filters: DataTableFilterItem[]) => void; -} - -interface DataTableFilterState { - anchorEl?: HTMLElement; - filters: DataTableFilterItem[]; - prevFilters: DataTableFilterItem[]; - filtersTree: DataTableFiltersModel; -} - -const filters: DataTableFiltersModel = pipe( - createTree, - setNode(initTreeNode({ id: 'Project', value: { name: 'Project' } })), - setNode(initTreeNode({ id: 'Process', value: { name: 'Process' } })), - setNode(initTreeNode({ id: 'Data collection', value: { name: 'Data collection' } })), - setNode(initTreeNode({ id: 'General', parent: 'Data collection', value: { name: 'General' } })), - setNode(initTreeNode({ id: 'Output', parent: 'Data collection', value: { name: 'Output' } })), - setNode(initTreeNode({ id: 'Log', parent: 'Data collection', value: { name: 'Log' } })), - mapTree(node => ({...node, selected: true})), -)(); - -export const DataTableFilters = withStyles(styles)( - class extends React.Component, DataTableFilterState> { - state: DataTableFilterState = { - anchorEl: undefined, - filters: [], - prevFilters: [], - filtersTree: filters, - }; - icon = React.createRef(); - - render() { - const { name, classes, children } = this.props; - const isActive = this.state.filters.some(f => f.selected); - return <> - - - {children} - - - - - - - - {name} - - - - {this.state.filters.map((filter, index) => - - - - {filter.name} - - - )} - - this.setState({ filtersTree })} /> - - - - - - - ; - } - - static getDerivedStateFromProps(props: DataTableFilterProps, state: DataTableFilterState): DataTableFilterState { - return props.filters !== state.prevFilters - ? { ...state, filters: props.filters, prevFilters: props.filters } - : state; - } - - open = () => { - this.setState({ anchorEl: this.icon.current || undefined }); - } - - submit = () => { - const { onChange } = this.props; - if (onChange) { - onChange(this.state.filters); - } - this.setState({ anchorEl: undefined }); - } - - cancel = () => { - this.setState(prev => ({ - ...prev, - filters: prev.prevFilters, - anchorEl: undefined - })); - } - - toggleFilter = (toggledFilter: DataTableFilterItem) => () => { - this.setState(prev => ({ - ...prev, - filters: prev.filters.map(filter => - filter === toggledFilter - ? { ...filter, selected: !filter.selected } - : filter) - })); - } - } -); diff --git a/src/components/data-table/data-table.test.tsx b/src/components/data-table/data-table.test.tsx index d0b83b96..3e4cc212 100644 --- a/src/components/data-table/data-table.test.tsx +++ b/src/components/data-table/data-table.test.tsx @@ -8,7 +8,6 @@ import { pipe } from 'lodash/fp'; import { TableHead, TableCell, Typography, TableBody, Button, TableSortLabel } from "@material-ui/core"; import * as Adapter from "enzyme-adapter-react-16"; import { DataTable, DataColumns } from "./data-table"; -import { DataTableFilters } from "~/components/data-table-filters/data-table-filters"; import { SortDirection, createDataColumn } from "./data-column"; import { DataTableFiltersPopover } from '~/components/data-table-filters/data-table-filters-popover'; import { createTree, setNode, initTreeNode } from '~/models/tree'; @@ -162,7 +161,7 @@ describe("", () => { expect(onSortToggle).toHaveBeenCalledWith(columns[0]); }); - it("does not display if there is no filters provided", () => { + it("does not display if there is no filters provided", () => { const columns: DataColumns = [{ name: "Column 1", sortDirection: SortDirection.ASC, @@ -180,7 +179,7 @@ describe("", () => { onRowDoubleClick={jest.fn()} onSortToggle={jest.fn()} onContextMenu={jest.fn()} />); - expect(dataTable.find(DataTableFilters)).toHaveLength(0); + expect(dataTable.find(DataTableFiltersPopover)).toHaveLength(0); }); it("passes filter props to ", () => { @@ -209,24 +208,4 @@ describe("", () => { dataTable.find(DataTableFiltersPopover).prop("onChange")([]); expect(onFiltersChange).toHaveBeenCalledWith([], columns[0]); }); - - // it("shows default view if there is no items", () => { - // const columns: DataColumns = [ - // createDataColumn({ - // name: "Column 1", - // render: () => , - // selected: true, - // configurable: true - // }), - // ]; - // const dataTable = mount(); - // expect(dataTable.find(DataTableDefaultView)).toHaveLength(1); - // }); }); -- 2.30.2