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 } from "enzyme";
   7 import * as Adapter from "enzyme-adapter-react-16";
   8 import { MainAppBar, MainAppBarProps } 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                 {...mockMainAppBarProps({ user })}
  31             />
  32         );
  33         expect(mainAppBar.find(SearchBar)).toHaveLength(1);
  34         expect(mainAppBar.find(Breadcrumbs)).toHaveLength(1);
  35         expect(mainAppBar.find(DropdownMenu)).toHaveLength(2);
  36     });
  37
  38     it("renders only the menu for anonymous user if user prop is undefined", () => {
  39         const menuItems = { accountMenu: [], helpMenu: [], anonymousMenu: [{ label: 'Sign in' }] };
  40         const mainAppBar = mount(
  41             <MainAppBar
  42                 {...mockMainAppBarProps({ user: undefined, menuItems })}
  43             />
  44         );
  45         expect(mainAppBar.find(SearchBar)).toHaveLength(0);
  46         expect(mainAppBar.find(Breadcrumbs)).toHaveLength(0);
  47         expect(mainAppBar.find(DropdownMenu)).toHaveLength(0);
  48         expect(mainAppBar.find(Button)).toHaveLength(1);
  49     });
  50
  51     it("communicates with <SearchBar />", () => {
  52         const onSearch = jest.fn();
  53         const mainAppBar = mount(
  54             <MainAppBar
  55                 {...mockMainAppBarProps({ searchText: 'search text', searchDebounce: 2000, onSearch, user })}
  56             />
  57         );
  58         const searchBar = mainAppBar.find(SearchBar);
  59         expect(searchBar.prop("value")).toBe("search text");
  60         expect(searchBar.prop("debounce")).toBe(2000);
  61         searchBar.prop("onSearch")("new search text");
  62         expect(onSearch).toBeCalledWith("new search text");
  63     });
  64
  65     it("communicates with menu", () => {
  66         const onMenuItemClick = jest.fn();
  67         const menuItems = { accountMenu: [{ label: "log out" }], helpMenu: [], anonymousMenu: [] };
  68         const mainAppBar = mount(
  69             <MainAppBar
  70                 {...mockMainAppBarProps({ menuItems, onMenuItemClick, user })}
  71             />
  72         );
  73
  74         mainAppBar.find(DropdownMenu).at(0).find(IconButton).simulate("click");
  75         mainAppBar.find(DropdownMenu).at(0).find(MenuItem).at(1).simulate("click");
  76         expect(onMenuItemClick).toBeCalledWith(menuItems.accountMenu[0]);
  77     });
  78 });
  79
  80 const Breadcrumbs = () => <span>Breadcrumbs</span>;
  81
  82 const mockMainAppBarProps = (props: Partial<MainAppBarProps>): MainAppBarProps => ({
  83     searchText: '',
  84     breadcrumbs: Breadcrumbs,
  85     menuItems: {
  86         accountMenu: [],
  87         helpMenu: [],
  88         anonymousMenu: [],
  89     },
  90     buildInfo: '',
  91     onSearch: jest.fn(),
  92     onMenuItemClick: jest.fn(),
  93     onDetailsPanelToggle: jest.fn(),
  94     ...props,
  95 });