src/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 "./search-bar/search-bar";
  10 import Breadcrumbs from "../breadcrumbs/breadcrumbs";
  11 import DropdownMenu from "./dropdown-menu/dropdown-menu";
  12 import { Button, MenuItem, IconButton } from "@material-ui/core";
  13
  14 configure({ adapter: new Adapter() });
  15
  16 describe("<MainAppBar />", () => {
  17
  18     const user = {
  19         firstName: "Test",
  20         lastName: "User",
  21         email: "test.user@example.com"
  22     };
  23
  24     it("renders all components and the menu for authenticated user if user prop has value", () => {
  25         const mainAppBar = mount(
  26             <MainAppBar
  27                 user={user}
  28                 {...{ searchText: "", breadcrumbs: [], menuItems: { accountMenu: [], helpMenu: [], anonymousMenu: [] }, onSearch: jest.fn(), onBreadcrumbClick: jest.fn(), onMenuItemClick: jest.fn() }}
  29             />
  30         );
  31         expect(mainAppBar.find(SearchBar)).toHaveLength(1);
  32         expect(mainAppBar.find(Breadcrumbs)).toHaveLength(1);
  33         expect(mainAppBar.find(DropdownMenu)).toHaveLength(2);
  34     });
  35
  36     it("renders only the menu for anonymous user if user prop is undefined", () => {
  37         const menuItems = { accountMenu: [], helpMenu: [], anonymousMenu: [{ label: 'Sign in' }] };
  38         const mainAppBar = mount(
  39             <MainAppBar
  40                 menuItems={menuItems}
  41                 {...{ searchText: "", breadcrumbs: [], onSearch: jest.fn(), onBreadcrumbClick: jest.fn(), onMenuItemClick: jest.fn() }}
  42             />
  43         );
  44         expect(mainAppBar.find(SearchBar)).toHaveLength(0);
  45         expect(mainAppBar.find(Breadcrumbs)).toHaveLength(0);
  46         expect(mainAppBar.find(DropdownMenu)).toHaveLength(0);
  47         expect(mainAppBar.find(Button)).toHaveLength(1);
  48     });
  49
  50     it("communicates with <SearchBar />", () => {
  51         const onSearch = jest.fn();
  52         const mainAppBar = mount(
  53             <MainAppBar
  54                 searchText="search text"
  55                 searchDebounce={2000}
  56                 onSearch={onSearch}
  57                 {...{ user, breadcrumbs: [], menuItems: { accountMenu: [], helpMenu: [], anonymousMenu: [] }, onBreadcrumbClick: jest.fn(), onMenuItemClick: jest.fn() }}
  58             />
  59         );
  60         const searchBar = mainAppBar.find(SearchBar);
  61         expect(searchBar.prop("value")).toBe("search text");
  62         expect(searchBar.prop("debounce")).toBe(2000);
  63         searchBar.prop("onSearch")("new search text");
  64         expect(onSearch).toBeCalledWith("new search text");
  65     });
  66
  67     it("communicates with <Breadcrumbs />", () => {
  68         const items = [{ label: "breadcrumb 1" }];
  69         const onBreadcrumbClick = jest.fn();
  70         const mainAppBar = mount(
  71             <MainAppBar
  72                 breadcrumbs={items}
  73                 onBreadcrumbClick={onBreadcrumbClick}
  74                 {...{ user, searchText: "", menuItems: { accountMenu: [], helpMenu: [], anonymousMenu: [] }, onSearch: jest.fn(), onMenuItemClick: jest.fn() }}
  75             />
  76         );
  77         const breadcrumbs = mainAppBar.find(Breadcrumbs);
  78         expect(breadcrumbs.prop("items")).toBe(items);
  79         breadcrumbs.prop("onClick")(items[0]);
  80         expect(onBreadcrumbClick).toBeCalledWith(items[0]);
  81     });
  82
  83     it("communicates with menu", () => {
  84         const onMenuItemClick = jest.fn();
  85         const menuItems = { accountMenu: [{label: "log out"}], helpMenu: [], anonymousMenu: [] };
  86         const mainAppBar = mount(
  87             <MainAppBar
  88                 menuItems={menuItems}
  89                 onMenuItemClick={onMenuItemClick}
  90                 {...{ user, searchText: "", breadcrumbs: [], onSearch: jest.fn(), onBreadcrumbClick: jest.fn() }}
  91             />
  92         );
  93
  94         mainAppBar.find(DropdownMenu).at(0).find(IconButton).simulate("click");
  95         mainAppBar.find(DropdownMenu).at(0).find(MenuItem).at(1).simulate("click");
  96         expect(onMenuItemClick).toBeCalledWith(menuItems.accountMenu[0]);
  97     });
  98 });