services/workbench2/src/components/data-explorer/data-explorer.cy.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6
   7 import { DataExplorer } from "./data-explorer";
   8 import { DataTableFetchMode } from "../data-table/data-table";
   9 import { ProjectIcon } from "../icon/icon";
  10 import { SortDirection } from "../data-table/data-column";
  11 import { combineReducers, createStore } from "redux";
  12 import { Provider } from "react-redux";
  13 import { ThemeProvider } from "@mui/material";
  14 import { CustomTheme } from "common/custom-theme";
  15
  16 describe("<DataExplorer />", () => {
  17     let store;
  18     beforeEach(() => {
  19         const initialMSState = {
  20             multiselect: {
  21                 checkedList: {},
  22                 isVisible: false,
  23             },
  24             resources: {},
  25         };
  26         store = createStore(
  27             combineReducers({
  28                 multiselect: (state = initialMSState.multiselect, action) => state,
  29                 resources: (state = initialMSState.resources, action) => state,
  30             })
  31         );
  32     });
  33
  34     it("communicates with <SearchInput/>", () => {
  35         const onSearch = cy.stub().as("onSearch");
  36         const onSetColumns = cy.stub();
  37
  38         cy.mount(
  39             <Provider store={store}>
  40               <ThemeProvider theme={CustomTheme}>
  41                 <DataExplorer
  42                     {...mockDataExplorerProps()}
  43                     items={[{ name: "item 1" }]}
  44                     searchValue="search value"
  45                     onSearch={onSearch}
  46                     onSetColumns={onSetColumns}
  47                 />
  48               </ThemeProvider>
  49             </Provider>
  50         );
  51         cy.get('input[type=text]').should('have.value', 'search value');
  52         cy.get('input[type=text]').clear();
  53         cy.get('input[type=text]').type('new value');
  54         cy.get('@onSearch').should('have.been.calledWith', 'new value');
  55     });
  56
  57     it("communicates with <ColumnSelector/>", () => {
  58         const onColumnToggle = cy.spy().as("onColumnToggle");
  59         const onSetColumns = cy.stub();
  60         const columns = [{ name: "Column 1", render: cy.stub(), selected: true, configurable: true, sortDirection: SortDirection.ASC, filters: {}}];
  61         cy.mount(
  62             <Provider store={store}>
  63               <ThemeProvider theme={CustomTheme}>
  64                 <DataExplorer
  65                     {...mockDataExplorerProps()}
  66                     columns={columns}
  67                     onColumnToggle={onColumnToggle}
  68                     items={[{ name: "item 1" }]}
  69                     onSetColumns={onSetColumns}
  70                 />
  71               </ThemeProvider>
  72             </Provider>
  73         );
  74         cy.get('[data-cy=column-selector-button]').should('exist').click();
  75         cy.get('[data-cy=column-selector-li]').contains('Column 1').should('exist').click();
  76         cy.get('@onColumnToggle').should('have.been.calledWith', columns[0]);
  77     });
  78
  79     it("communicates with <DataTable/>", () => {
  80         const onFiltersChange = cy.spy().as("onFiltersChange");
  81         const onSortToggle = cy.spy().as("onSortToggle");
  82         const onRowClick = cy.spy().as("onRowClick");
  83         const onSetColumns = cy.stub();
  84         const filters = { Filters : {
  85             id: 'Filters id',
  86             active: false,
  87             children: ['Filter 1', 'Filter 2'],
  88             expanded: false,
  89             initialState: true,
  90             parent: "",
  91             selected: false,
  92             status: "LOADED",
  93             value: { name: 'Filters'}
  94         } };
  95         const columns = [
  96             { name: "Column 1", render: cy.stub(), selected: true, configurable: true, sortDirection: SortDirection.ASC, filters },
  97             { name: "Column 2", render: cy.stub(), selected: true, configurable: true, sortDirection: SortDirection.ASC, filters: {}, sort: true }
  98         ];
  99         const items = [{ name: "item 1" }];
 100         cy.mount(
 101             <Provider store={store}>
 102               <ThemeProvider theme={CustomTheme}>
 103                 <DataExplorer
 104                     {...mockDataExplorerProps()}
 105                     columns={columns}
 106                     items={items}
 107                     onFiltersChange={onFiltersChange}
 108                     onSortToggle={onSortToggle}
 109                     onRowClick={onRowClick}
 110                     onSetColumns={onSetColumns}
 111                 />
 112               </ThemeProvider>
 113             </Provider>
 114         );
 115         //check if the table and column are rendered
 116         cy.get('[data-cy=data-table]').should('exist');
 117         cy.get('[data-cy=data-table]').contains('Column 1').should('exist');
 118         //check onRowClick
 119         cy.get('[data-cy=data-table-row]').should('exist');
 120         cy.get('[data-cy=data-table-row]').click();
 121         cy.get('@onRowClick').should('have.been.calledWith', items[0]);
 122         //check onFiltersChange
 123         cy.contains('Column 1').click();
 124         cy.get('[data-cy=tree-li]').contains('Filters').click();
 125         cy.get('@onFiltersChange').should('have.been.calledWith', filters, columns[0] );
 126         cy.contains('Close').click();
 127         //check onSortToggle
 128         cy.contains('Column 2').click();
 129         cy.get('@onSortToggle').should('have.been.calledWith', columns[1]);
 130     });
 131
 132     it("communicates with <TablePagination/>", () => {
 133         const onPageChange = cy.spy().as("onPageChange");
 134         const onChangeRowsPerPage = cy.spy().as("onChangeRowsPerPage");
 135         const onSetColumns = cy.stub();
 136         cy.mount(
 137             <Provider store={store}>
 138               <ThemeProvider theme={CustomTheme}>
 139                 <DataExplorer
 140                     {...mockDataExplorerProps()}
 141                     items={hundredItems}
 142                     itemsAvailable={100}
 143                     page={0}
 144                     rowsPerPage={50}
 145                     rowsPerPageOptions={[10, 20, 50, 100]}
 146                     onPageChange={onPageChange}
 147                     onChangeRowsPerPage={onChangeRowsPerPage}
 148                     onSetColumns={onSetColumns}
 149                 />
 150               </ThemeProvider>
 151             </Provider>
 152         );
 153         //check if the pagination is rendered
 154         cy.get('[data-cy=table-pagination]').should('exist');
 155         cy.get('[data-cy=table-pagination]').contains('1-50 of 100').should('exist');
 156         cy.get('p').contains('Rows per page:').should('exist');
 157         //check onPageChange
 158         cy.get('button[title="Go to next page"]').should('exist').click();
 159         cy.get('@onPageChange').should('have.been.calledWith', 1);
 160         //check onChangeRowsPerPage
 161         cy.get('input[value=50]').should('exist').parent().click();
 162         cy.get('li[data-value=10]').should('exist').click();
 163         cy.get('@onChangeRowsPerPage').should('have.been.calledWith', 10);
 164     });
 165 });
 166
 167 const mockDataExplorerProps = () => ({
 168     fetchMode: DataTableFetchMode.PAGINATED,
 169     columns: [],
 170     items: [],
 171     itemsAvailable: 0,
 172     contextActions: [],
 173     searchValue: "",
 174     page: 0,
 175     rowsPerPage: 0,
 176     rowsPerPageOptions: [0],
 177     onSearch: cy.stub(),
 178     onFiltersChange: cy.stub(),
 179     onSortToggle: cy.stub(),
 180     onRowClick: cy.stub(),
 181     onRowDoubleClick: cy.stub(),
 182     onColumnToggle: cy.stub(),
 183     onPageChange: cy.stub(),
 184     onChangeRowsPerPage: cy.stub(),
 185     onContextMenu: cy.stub(),
 186     defaultIcon: ProjectIcon,
 187     onSetColumns: cy.stub(),
 188     onLoadMore: cy.stub(),
 189     defaultMessages: ["testing"],
 190     contextMenuColumn: true,
 191     setCheckedListOnStore: cy.stub(),
 192     toggleMSToolbar: cy.stub(),
 193     isMSToolbarVisible: false,
 194     checkedList: {},
 195 });
 196
 197 const hundredItems = Array.from({ length: 100 }, (v, i) => ({ name: `item ${i}` }));