From 582a7964b7849681adb5bf8b4e0357d84a075a31 Mon Sep 17 00:00:00 2001 From: hiba-aldalaty Date: Thu, 28 Oct 2021 10:02:09 +0100 Subject: [PATCH] Add tests for scalable sidebar Signed-off-by: hiba-aldalaty --- .../src/layout/Sidebar/Bar.test.tsx | 104 ++++++++++++++++++ .../src/layout/Sidebar/Bar.tsx | 7 +- .../src/layout/Sidebar/Items.tsx | 1 + .../src/layout/Sidebar/Submenu.tsx | 3 +- .../src/layout/Sidebar/SubmenuItem.tsx | 4 +- 5 files changed, 116 insertions(+), 3 deletions(-) create mode 100644 packages/core-components/src/layout/Sidebar/Bar.test.tsx diff --git a/packages/core-components/src/layout/Sidebar/Bar.test.tsx b/packages/core-components/src/layout/Sidebar/Bar.test.tsx new file mode 100644 index 0000000000..8a28d69e27 --- /dev/null +++ b/packages/core-components/src/layout/Sidebar/Bar.test.tsx @@ -0,0 +1,104 @@ +/* + * Copyright 2020 The Backstage Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { renderInTestApp } from '@backstage/test-utils'; +import { createEvent, fireEvent, screen, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; +import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; +import { CatalogSidebarLogo } from './icons/CatalogSidebarLogo'; +import { MiscIcon } from './icons/MiscIcon'; +import { Sidebar, SidebarExpandButton } from './Bar'; +import { SidebarItem, SidebarSearchField } from './Items'; +import { hexToRgb } from '@material-ui/core/styles'; +import { SubmenuItem } from './SubmenuItem'; + +async function renderScalableSidebar() { + await renderInTestApp( + + {}} to="/search" /> + {}} + text="Catalog" + hasSubMenu + submenuTitle="Catalog" + > + + + + + + , + ); +} + +describe('Sidebar', () => { + beforeEach(async () => { + await renderScalableSidebar(); + }); + + describe('Click to Expand', () => { + it('Sidebar should show expanded items when expand button is clicked', async () => { + userEvent.click(screen.getByTestId('sidebar-expand-button')); + expect(await screen.findByText('Create...')).toBeInTheDocument(); + }); + }); + describe('Submenu Items', () => { + it('Extended sidebar with submenu content hidden by default', async () => { + expect(await screen.queryByText('Tools')).not.toBeInTheDocument(); + expect(await screen.queryByText('Misc')).not.toBeInTheDocument(); + }); + + it('Extended sidebar with submenu content visible when hover over submenu items', async () => { + userEvent.hover(screen.getByTestId('item-with-submenu')); + expect(await screen.findByText('Tools')).toBeInTheDocument(); + expect(await screen.findByText('Misc')).toBeInTheDocument(); + }); + + it('Multicategory item in submenu shows drop down on click', async () => { + userEvent.hover(screen.getByTestId('item-with-submenu')); + userEvent.click(screen.getByText('Misc')); + expect(await screen.getByText('dropdown item 1')).toBeInTheDocument(); + expect(await screen.getByText('dropdown item 2')).toBeInTheDocument(); + }); + + it('Dropdown item in submenu renders a link when `to` value is provided', async () => { + userEvent.hover(screen.getByTestId('item-with-submenu')); + userEvent.click(screen.getByText('Misc')); + expect(screen.getByText('dropdown item 1').closest('a')).toHaveAttribute( + 'href', + '/dropdownitemlink', + ); + }); + }); +}); diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx index 6fc2ac1cdb..23a4ae1286 100644 --- a/packages/core-components/src/layout/Sidebar/Bar.tsx +++ b/packages/core-components/src/layout/Sidebar/Bar.tsx @@ -146,7 +146,12 @@ export const SidebarExpandButton = () => { } return ( -