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