src/components/breadcrumbs/breadcrumbs.test.tsx

   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 { configure, mount } from "enzyme";
   7
   8 import Adapter from "enzyme-adapter-react-16";
   9 import { Breadcrumbs } from "./breadcrumbs";
  10 import { Button, MuiThemeProvider } from "@material-ui/core";
  11 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
  12 import { CustomTheme } from 'common/custom-theme';
  13 import { Provider } from "react-redux";
  14 import { combineReducers, createStore } from "redux";
  15
  16 configure({ adapter: new Adapter() });
  17
  18 describe("<Breadcrumbs />", () => {
  19
  20     let onClick: () => void;
  21     let resources = {};
  22     let store;
  23     beforeEach(() => {
  24         onClick = jest.fn();
  25         const initialAuthState = {
  26             config: {
  27                 clusterConfig: {
  28                     Collections: {
  29                         ForwardSlashNameSubstitution: "/"
  30                     }
  31                 }
  32             }
  33         }
  34         store = createStore(combineReducers({
  35             auth: (state: any = initialAuthState, action: any) => state,
  36         }));
  37     });
  38
  39     it("renders one item", () => {
  40         const items = [
  41             { label: 'breadcrumb 1', uuid: '1' }
  42         ];
  43         const breadcrumbs = mount(
  44             <Provider store={store}>
  45                 <MuiThemeProvider theme={CustomTheme}>
  46                     <Breadcrumbs items={items} resources={resources} onClick={onClick} onContextMenu={jest.fn()} />
  47                 </MuiThemeProvider>
  48             </Provider>);
  49         expect(breadcrumbs.find(Button)).toHaveLength(1);
  50         expect(breadcrumbs.find(ChevronRightIcon)).toHaveLength(0);
  51     });
  52
  53     it("renders multiple items", () => {
  54         const items = [
  55             { label: 'breadcrumb 1', uuid: '1' },
  56             { label: 'breadcrumb 2', uuid: '2' }
  57         ];
  58         const breadcrumbs = mount(
  59             <Provider store={store}>
  60                 <MuiThemeProvider theme={CustomTheme}>
  61                     <Breadcrumbs items={items} resources={resources} onClick={onClick} onContextMenu={jest.fn()} />
  62                 </MuiThemeProvider>
  63             </Provider>);
  64         expect(breadcrumbs.find(Button)).toHaveLength(2);
  65         expect(breadcrumbs.find(ChevronRightIcon)).toHaveLength(1);
  66     });
  67
  68     it("calls onClick with clicked item", () => {
  69         const items = [
  70             { label: 'breadcrumb 1', uuid: '1' },
  71             { label: 'breadcrumb 2', uuid: '2' }
  72         ];
  73         const breadcrumbs = mount(
  74             <Provider store={store}>
  75                 <MuiThemeProvider theme={CustomTheme}>
  76                     <Breadcrumbs items={items} resources={resources} onClick={onClick} onContextMenu={jest.fn()} />
  77                 </MuiThemeProvider>
  78             </Provider>);
  79         breadcrumbs.find(Button).at(1).simulate('click');
  80         expect(onClick).toBeCalledWith(items[1]);
  81     });
  82
  83 });