services/workbench2/src/components/column-selector/column-selector.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 import { ColumnSelector } from "./column-selector";
   7
   8 describe("<ColumnSelector />", () => {
   9     it("shows only configurable columns", () => {
  10         const columns = [
  11             {
  12                 name: "Column 1",
  13                 render: () => <span />,
  14                 selected: true,
  15                 configurable: true
  16             },
  17             {
  18                 name: "Column 2",
  19                 render: () => <span />,
  20                 selected: true,
  21                 configurable: true,
  22             },
  23             {
  24                 name: "Column 3",
  25                 render: () => <span />,
  26                 selected: true,
  27                 configurable: false
  28             }
  29         ];
  30         cy.mount(<ColumnSelector columns={columns} onColumnToggle={cy.stub()} />);
  31         cy.get('button[aria-label="Select columns"]').click();
  32         cy.get('[data-cy=column-selector-li]').should('have.length', 2);
  33     });
  34
  35     it("renders checked checkboxes next to selected columns", () => {
  36         const columns = [
  37             {
  38                 name: "Column 1",
  39                 render: () => <span />,
  40                 selected: true,
  41                 configurable: true
  42             },
  43             {
  44                 name: "Column 2",
  45                 render: () => <span />,
  46                 selected: false,
  47                 configurable: true
  48             },
  49             {
  50                 name: "Column 3",
  51                 render: () => <span />,
  52                 selected: true,
  53                 configurable: true
  54             }
  55         ];
  56         cy.mount(<ColumnSelector columns={columns} onColumnToggle={cy.stub()} />);
  57         cy.get('button[aria-label="Select columns"]').click();
  58         cy.get('input[type=checkbox]').should('have.length', 3);
  59         cy.get('input[type=checkbox]').eq(0).should('be.checked');
  60         cy.get('input[type=checkbox]').eq(1).should('not.be.checked');
  61         cy.get('input[type=checkbox]').eq(2).should('be.checked');
  62     });
  63
  64     it("calls onColumnToggle with clicked column", () => {
  65         const columns = [
  66             {
  67                 name: "Column 1",
  68                 render: () => <span />,
  69                 selected: true,
  70                 configurable: true
  71             }
  72         ];
  73         const onColumnToggle = cy.spy().as("onColumnToggle");
  74         cy.mount(<ColumnSelector columns={columns} onColumnToggle={onColumnToggle} />);
  75         cy.get('button[aria-label="Select columns"]').click();
  76         cy.get('[data-cy=column-selector-li]').click();
  77         cy.get('@onColumnToggle').should('have.been.calledWith', columns[0]);
  78     });
  79 });