src/views-components/main-app-bar/main-app-bar.test.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { mount, configure, ReactWrapper } from "enzyme";
   7 import * as Adapter from "enzyme-adapter-react-16";
   8 import { MainAppBar } from "./main-app-bar";
   9 import { SearchBar } from "../../components/search-bar/search-bar";
  10 import { Breadcrumbs } from "../../components/breadcrumbs/breadcrumbs";
  11 import { DropdownMenu } from "../../components/dropdown-menu/dropdown-menu";
  12 import { Button, MenuItem, IconButton } from "@material-ui/core";
  13 import { User } from "../../models/user";
  14
  15 configure({ adapter: new Adapter() });
  16
  17 describe("<MainAppBar />", () => {
  18
  19     const user: User = {
  20         firstName: "Test",
  21         lastName: "User",
  22         email: "test.user@example.com",
  23         uuid: "",
  24         ownerUuid: ""
  25     };
  26
  27     it("renders all components and the menu for authenticated user if user prop has value", () => {
  28         const mainAppBar = mount(
  29             <MainAppBar
  30                 user={user}
  31                 onContextMenu={jest.fn()}
  32                 onDetailsPanelToggle={jest.fn()}
  33                 onContextMenu={jest.fn()}
  34                 {...{ searchText: "", breadcrumbs: [], menuItems: { accountMenu: [], helpMenu: [], anonymousMenu: [] }, onSearch: jest.fn(), onBreadcrumbClick: jest.fn(), onMenuItemClick: jest.fn() }}
  35             />
  36         );
  37         expect(mainAppBar.find(SearchBar)).toHaveLength(1);
  38         expect(mainAppBar.find(Breadcrumbs)).toHaveLength(1);
  39         expect(mainAppBar.find(DropdownMenu)).toHaveLength(2);
  40     });
  41
  42     it("renders only the menu for anonymous user if user prop is undefined", () => {
  43         const menuItems = { accountMenu: [], helpMenu: [], anonymousMenu: [{ label: 'Sign in' }] };
  44         const mainAppBar = mount(
  45             <MainAppBar
  46                 menuItems={menuItems}
  47                 onDetailsPanelToggle={jest.fn()}
  48                 onContextMenu={jest.fn()}
  49                 {...{ searchText: "", breadcrumbs: [], onSearch: jest.fn(), onBreadcrumbClick: jest.fn(), onMenuItemClick: jest.fn() }}
  50             />
  51         );
  52         expect(mainAppBar.find(SearchBar)).toHaveLength(0);
  53         expect(mainAppBar.find(Breadcrumbs)).toHaveLength(0);
  54         expect(mainAppBar.find(DropdownMenu)).toHaveLength(0);
  55         expect(mainAppBar.find(Button)).toHaveLength(1);
  56     });
  57
  58     it("communicates with <SearchBar />", () => {
  59         const onSearch = jest.fn();
  60         const mainAppBar = mount(
  61             <MainAppBar
  62                 searchText="search text"
  63                 searchDebounce={2000}
  64                 onContextMenu={jest.fn()}
  65                 onSearch={onSearch}
  66                 onContextMenu={jest.fn()}
  67                 onDetailsPanelToggle={jest.fn()}
  68                 {...{ user, breadcrumbs: [], menuItems: { accountMenu: [], helpMenu: [], anonymousMenu: [] }, onBreadcrumbClick: jest.fn(), onMenuItemClick: jest.fn() }}
  69             />
  70         );
  71         const searchBar = mainAppBar.find(SearchBar);
  72         expect(searchBar.prop("value")).toBe("search text");
  73         expect(searchBar.prop("debounce")).toBe(2000);
  74         searchBar.prop("onSearch")("new search text");
  75         expect(onSearch).toBeCalledWith("new search text");
  76     });
  77
  78     it("communicates with <Breadcrumbs />", () => {
  79         const items = [{ label: "breadcrumb 1" }];
  80         const onBreadcrumbClick = jest.fn();
  81         const mainAppBar = mount(
  82             <MainAppBar
  83                 breadcrumbs={items}
  84                 onContextMenu={jest.fn()}
  85                 onBreadcrumbClick={onBreadcrumbClick}
  86                 onContextMenu={jest.fn()}
  87                 onDetailsPanelToggle={jest.fn()}
  88                 {...{ user, searchText: "", menuItems: { accountMenu: [], helpMenu: [], anonymousMenu: [] }, onSearch: jest.fn(), onMenuItemClick: jest.fn() }}
  89             />
  90         );
  91         const breadcrumbs = mainAppBar.find(Breadcrumbs);
  92         expect(breadcrumbs.prop("items")).toBe(items);
  93         breadcrumbs.prop("onClick")(items[0]);
  94         expect(onBreadcrumbClick).toBeCalledWith(items[0]);
  95     });
  96
  97     it("communicates with menu", () => {
  98         const onMenuItemClick = jest.fn();
  99         const menuItems = { accountMenu: [{label: "log out"}], helpMenu: [], anonymousMenu: [] };
 100         const mainAppBar = mount(
 101             <MainAppBar
 102                 menuItems={menuItems}
 103                 onContextMenu={jest.fn()}
 104                 onMenuItemClick={onMenuItemClick}
 105                 onContextMenu={jest.fn()}
 106                 onDetailsPanelToggle={jest.fn()}
 107                 {...{ user, searchText: "", breadcrumbs: [], onSearch: jest.fn(), onBreadcrumbClick: jest.fn() }}
 108             />
 109         );
 110
 111         mainAppBar.find(DropdownMenu).at(0).find(IconButton).simulate("click");
 112         mainAppBar.find(DropdownMenu).at(0).find(MenuItem).at(1).simulate("click");
 113         expect(onMenuItemClick).toBeCalledWith(menuItems.accountMenu[0]);
 114     });
 115 });