services/workbench2/src/components/tree/tree.cy.js

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4 import React from 'react';
   5 import { Tree, TreeItemStatus } from './tree';
   6 import { mockProjectResource } from '../../models/test-utils';
   7 import { ThemeProvider } from '@mui/material/styles';
   8 import { CustomTheme } from '../../common/custom-theme';
   9
  10 describe("Tree component", () => {
  11
  12     it("should render ListItem", () => {
  13         const project = {
  14             data: mockProjectResource(),
  15             id: "3",
  16             open: true,
  17             active: true,
  18             status: TreeItemStatus.LOADED
  19         };
  20         cy.mount(
  21             <ThemeProvider theme={CustomTheme}>
  22                 <Tree
  23                 render={project => <div />}
  24                 toggleItemOpen={cy.stub()}
  25                 toggleItemActive={cy.stub()}
  26                 onContextMenu={cy.stub()}
  27                 items={[project]} />
  28             </ThemeProvider>
  29         );
  30         cy.get('[data-cy=tree-li]').should('have.length', 1);
  31     });
  32
  33     it("should render arrow", () => {
  34         const project = {
  35             data: mockProjectResource(),
  36             id: "3",
  37             open: true,
  38             active: true,
  39             status: TreeItemStatus.LOADED,
  40         };
  41         cy.mount(
  42             <ThemeProvider theme={CustomTheme}>
  43                 <Tree
  44                 render={project => <div />}
  45                 toggleItemOpen={cy.stub()}
  46                 toggleItemActive={cy.stub()}
  47                 onContextMenu={cy.stub()}
  48                 items={[project]} />
  49             </ThemeProvider>
  50         );
  51         cy.get('i').should('have.length', 1);
  52     });
  53
  54     it("should render checkbox", () => {
  55         const project = {
  56             data: mockProjectResource(),
  57             id: "3",
  58             open: true,
  59             active: true,
  60             status: TreeItemStatus.LOADED
  61         };
  62         cy.mount(
  63             <ThemeProvider theme={CustomTheme}>
  64                 <Tree
  65                     showSelection={true}
  66                     render={() => <div />}
  67                     toggleItemOpen={cy.stub()}
  68                     toggleItemActive={cy.stub()}
  69                     onContextMenu={cy.stub()}
  70                     items={[project]} />
  71             </ThemeProvider>
  72         );
  73         cy.get('input[type=checkbox]').should('have.length', 1);
  74     });
  75
  76     it("call onSelectionChanged with associated item", () => {
  77         const project = {
  78             data: mockProjectResource(),
  79             id: "3",
  80             open: true,
  81             active: true,
  82             status: TreeItemStatus.LOADED,
  83         };
  84         const spy = cy.spy().as('spy');
  85         const onSelectionChanged = (event, item) => spy(item);
  86         cy.mount(
  87             <ThemeProvider theme={CustomTheme}>
  88                 <Tree
  89                 showSelection={true}
  90                 render={() => <div />}
  91                 toggleItemOpen={cy.stub()}
  92                 toggleItemActive={cy.stub()}
  93                 onContextMenu={cy.stub()}
  94                 toggleItemSelection={onSelectionChanged}
  95                 items={[project]} />
  96             </ThemeProvider>
  97             );
  98         cy.get('input[type=checkbox]').click();
  99         cy.get('@spy').should('have.been.calledWith', project);
 100     });
 101
 102 });