services/workbench2/src/components/breadcrumbs/breadcrumbs.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 { Breadcrumbs } from "./breadcrumbs";
   7 import { ThemeProvider, StyledEngineProvider } from "@mui/material";
   8 import { CustomTheme } from 'common/custom-theme';
   9 import { Provider } from "react-redux";
  10 import { combineReducers, createStore } from "redux";
  11
  12 describe("<Breadcrumbs />", () => {
  13
  14     let onClick;
  15     let resources = {};
  16     let store;
  17     beforeEach(() => {
  18         onClick = cy.spy().as('onClick');
  19         const initialAuthState = {
  20             config: {
  21                 clusterConfig: {
  22                     Collections: {
  23                         ForwardSlashNameSubstitution: "/"
  24                     }
  25                 }
  26             }
  27         }
  28         store = createStore(combineReducers({
  29             auth: (state = initialAuthState, action) => state,
  30         }));
  31     });
  32
  33     it("renders one item", () => {
  34         const items = [
  35             { label: 'breadcrumb 1', uuid: '1' }
  36         ];
  37         cy.mount(
  38             <Provider store={store}>
  39                 <StyledEngineProvider injectFirst>
  40                     <ThemeProvider theme={CustomTheme}>
  41                         <Breadcrumbs items={items} resources={resources} onClick={onClick} onContextMenu={cy.stub()} />
  42                     </ThemeProvider>
  43                 </StyledEngineProvider>
  44             </Provider>);
  45         cy.get('button').should('have.length', 1);
  46         cy.get('button').should('have.text', 'breadcrumb 1');
  47         cy.get('[data-testid=ChevronRightIcon]').should('have.length', 0);
  48     });
  49
  50     it("renders multiple items", () => {
  51         const items = [
  52             { label: 'breadcrumb 1', uuid: '1' },
  53             { label: 'breadcrumb 2', uuid: '2' }
  54         ];
  55         cy.mount(
  56             <Provider store={store}>
  57                 <StyledEngineProvider injectFirst>
  58                     <ThemeProvider theme={CustomTheme}>
  59                         <Breadcrumbs items={items} resources={resources} onClick={onClick} onContextMenu={cy.stub()} />
  60                     </ThemeProvider>
  61                 </StyledEngineProvider>
  62             </Provider>);
  63         cy.get('button').should('have.length', 2);
  64         cy.get('[data-testid=ChevronRightIcon]').should('have.length', 1);
  65     });
  66
  67     it("calls onClick with clicked item", () => {
  68         const items = [
  69             { label: 'breadcrumb 1', uuid: '1' },
  70             { label: 'breadcrumb 2', uuid: '2' }
  71         ];
  72         cy.mount(
  73             <Provider store={store}>
  74                 <StyledEngineProvider injectFirst>
  75                     <ThemeProvider theme={CustomTheme}>
  76                         <Breadcrumbs items={items} resources={resources} onClick={onClick} onContextMenu={cy.stub()} />
  77                     </ThemeProvider>
  78                 </StyledEngineProvider>
  79             </Provider>);
  80         cy.get('button').eq(1).click();
  81         cy.get('@onClick').should('have.been.calledWith', Cypress.sinon.match.func, items[1]);
  82     });
  83
  84 });