|
|
@@ -0,0 +1,719 @@
|
|
|
+// Licensed to Cloudera, Inc. under one
|
|
|
+// or more contributor license agreements. See the NOTICE file
|
|
|
+// distributed with this work for additional information
|
|
|
+// regarding copyright ownership. Cloudera, Inc. licenses this file
|
|
|
+// to you 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 { render, screen, within } from '@testing-library/react';
|
|
|
+import userEvent from '@testing-library/user-event';
|
|
|
+import '@testing-library/jest-dom';
|
|
|
+
|
|
|
+import PushDrawer, { DrawerHeader } from './PushDrawer';
|
|
|
+
|
|
|
+const drawerTestTitle = 'test drawer title';
|
|
|
+const drawerContentCheckboxLabel = 'test content checkbox';
|
|
|
+
|
|
|
+const getTestDrawerConfig = () => ({
|
|
|
+ width: '100px',
|
|
|
+ header: () => <DrawerHeader onClose={jest.fn()} title={drawerTestTitle} />,
|
|
|
+ content: () => (
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="chk1-label" />
|
|
|
+ <label htmlFor="chk1-label">{drawerContentCheckboxLabel}</label>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+});
|
|
|
+
|
|
|
+describe('PushDrawer', () => {
|
|
|
+ describe('with left drawer open', () => {
|
|
|
+ test('renders drawer on the left side in parent container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ expect(getComputedStyle(drawerContainer).width).toEqual('100px');
|
|
|
+ expect(getComputedStyle(drawerContainer).left).toEqual('0px');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('sets the correct width on content container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const contentContainer = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(getComputedStyle(contentContainer).width).toEqual('calc(100% - 100px)');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders DrawerHeader as visible', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ expect(within(drawerContainer).getByRole('heading', { level: 3 })).toBeVisible();
|
|
|
+ expect(within(drawerContainer).getByRole('button', { name: 'Close' })).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders drawer with custom title in DrawerHeader', async () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ expect(within(drawerContainer).getByText(drawerTestTitle)).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders custom JSX header', () => {
|
|
|
+ const myTestConfig = {
|
|
|
+ ...getTestDrawerConfig(),
|
|
|
+ isOpen: true,
|
|
|
+ header: () => <h1>custom-header</h1>
|
|
|
+ };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ expect(within(drawerContainer).getByText('custom-header')).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders drawer content as visible', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ const checkbox = within(drawerContainer).getByRole('checkbox', {
|
|
|
+ name: drawerContentCheckboxLabel
|
|
|
+ });
|
|
|
+ expect(checkbox).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('accepts tab focus on input elements placed in the drawer', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ expect(document.body).toHaveFocus();
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ const closeButton = within(drawerContainer).getByRole('button', { name: 'Close' });
|
|
|
+ const contentCheckbox = within(drawerContainer).getByRole('checkbox', {
|
|
|
+ name: drawerContentCheckboxLabel
|
|
|
+ });
|
|
|
+
|
|
|
+ await user.tab();
|
|
|
+ expect(closeButton).toHaveFocus();
|
|
|
+ await user.tab();
|
|
|
+ expect(contentCheckbox).toHaveFocus();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has visible main content', async () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={myTestConfig}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>main content button</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(
|
|
|
+ within(mainContent).getByRole('button', { name: 'main content button' })
|
|
|
+ ).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has focusable main content', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ const configWithEmptyDrawer = {
|
|
|
+ ...myTestConfig,
|
|
|
+ header: () => <></>,
|
|
|
+ content: () => <></>
|
|
|
+ };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={configWithEmptyDrawer}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>test me</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+
|
|
|
+ await user.tab();
|
|
|
+ expect(within(mainContent).getByRole('button', { name: 'test me' })).toHaveFocus();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('calls onClose when close button is clicked', async () => {
|
|
|
+ const onCloseMock = jest.fn();
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = {
|
|
|
+ ...getTestDrawerConfig(),
|
|
|
+ isOpen: true,
|
|
|
+ header: () => <DrawerHeader onClose={onCloseMock} />
|
|
|
+ };
|
|
|
+
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ const closeButton = within(drawerContainer).getByRole('button', { name: 'Close' });
|
|
|
+
|
|
|
+ expect(onCloseMock).not.toHaveBeenCalled();
|
|
|
+ await user.click(closeButton);
|
|
|
+ expect(onCloseMock).toHaveBeenCalled();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ describe('with left drawer closed', () => {
|
|
|
+ test('renders drawer outside parent container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ const drawerLeftPosition = getComputedStyle(drawerContainer).left;
|
|
|
+
|
|
|
+ expect(getComputedStyle(drawerContainer).width).toEqual('100px');
|
|
|
+ expect(drawerLeftPosition).toEqual('-100px');
|
|
|
+ expect(
|
|
|
+ within(drawerContainer).getByRole('heading', { level: 3, hidden: true })
|
|
|
+ ).not.toBeVisible();
|
|
|
+ expect(
|
|
|
+ within(drawerContainer).getByRole('button', { name: 'Close', hidden: true })
|
|
|
+ ).not.toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('sets the correct width on main content container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const contentContainer = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(getComputedStyle(contentContainer).width).toEqual('calc(100% - 100px)');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders DrawerHeader as not visible', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ expect(
|
|
|
+ within(drawerContainer).getByRole('heading', { level: 3, hidden: true })
|
|
|
+ ).not.toBeVisible();
|
|
|
+ expect(
|
|
|
+ within(drawerContainer).getByRole('button', { name: 'Close', hidden: true })
|
|
|
+ ).not.toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('does not accept tab focus on input elements placed in the drawer', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ render(<PushDrawer leftDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ const closeButton = within(drawerContainer).getByRole('button', {
|
|
|
+ name: 'Close',
|
|
|
+ hidden: true
|
|
|
+ });
|
|
|
+ const contentCheckbox = within(drawerContainer).getByRole('checkbox', {
|
|
|
+ name: drawerContentCheckboxLabel,
|
|
|
+ hidden: true
|
|
|
+ });
|
|
|
+
|
|
|
+ expect(document.body).toHaveFocus();
|
|
|
+ await user.tab();
|
|
|
+ expect(closeButton).not.toHaveFocus();
|
|
|
+ expect(contentCheckbox).not.toHaveFocus();
|
|
|
+ await user.tab();
|
|
|
+ expect(closeButton).not.toHaveFocus();
|
|
|
+ expect(contentCheckbox).not.toHaveFocus();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has visible main content', async () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={myTestConfig}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>main content button</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(
|
|
|
+ within(mainContent).getByRole('button', { name: 'main content button' })
|
|
|
+ ).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has focusable main content', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ const configWithEmptyDrawer = {
|
|
|
+ ...myTestConfig,
|
|
|
+ header: () => <></>,
|
|
|
+ content: () => <></>
|
|
|
+ };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={configWithEmptyDrawer}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>test me</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ await user.tab();
|
|
|
+ expect(within(mainContent).getByRole('button', { name: 'test me' })).toHaveFocus();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ describe('with right drawer open', () => {
|
|
|
+ test('renders drawer on the left side in parent container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ expect(getComputedStyle(drawerContainer).width).toEqual('100px');
|
|
|
+ expect(getComputedStyle(drawerContainer).left).toEqual('calc(100% - 100px)');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('sets the correct width on main content container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const contentContainer = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(getComputedStyle(contentContainer).width).toEqual('calc(100% - 100px)');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders DrawerHeader as visible', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ expect(within(drawerContainer).getByRole('heading', { level: 3 })).toBeVisible();
|
|
|
+ expect(within(drawerContainer).getByRole('button', { name: 'Close' })).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders drawer with custom title in DrawerHeader', async () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ expect(within(drawerContainer).getByText(drawerTestTitle)).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders custom JSX header', () => {
|
|
|
+ const myTestConfig = {
|
|
|
+ ...getTestDrawerConfig(),
|
|
|
+ isOpen: true,
|
|
|
+ header: () => <h1>custom-header</h1>
|
|
|
+ };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ expect(within(drawerContainer).getByText('custom-header')).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders drawer content as visible', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ const checkbox = within(drawerContainer).getByRole('checkbox', {
|
|
|
+ name: drawerContentCheckboxLabel
|
|
|
+ });
|
|
|
+ expect(checkbox).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('accepts tab focus on input elements placed in the drawer', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ expect(document.body).toHaveFocus();
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ const closeButton = within(drawerContainer).getByRole('button', { name: 'Close' });
|
|
|
+ const contentCheckbox = within(drawerContainer).getByRole('checkbox', {
|
|
|
+ name: drawerContentCheckboxLabel
|
|
|
+ });
|
|
|
+
|
|
|
+ await user.tab();
|
|
|
+ expect(closeButton).toHaveFocus();
|
|
|
+ await user.tab();
|
|
|
+ expect(contentCheckbox).toHaveFocus();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has visible main content', async () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ rightDrawer={myTestConfig}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>main content button</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(
|
|
|
+ within(mainContent).getByRole('button', { name: 'main content button' })
|
|
|
+ ).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has focusable main content', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ const configWithEmptyDrawer = {
|
|
|
+ ...myTestConfig,
|
|
|
+ header: () => <></>,
|
|
|
+ content: () => <></>
|
|
|
+ };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ rightDrawer={configWithEmptyDrawer}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>test me</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+
|
|
|
+ await user.tab();
|
|
|
+ expect(within(mainContent).getByRole('button', { name: 'test me' })).toHaveFocus();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('calls onClose when close button is clicked', async () => {
|
|
|
+ const onCloseMock = jest.fn();
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = {
|
|
|
+ ...getTestDrawerConfig(),
|
|
|
+ isOpen: true,
|
|
|
+ header: () => <DrawerHeader onClose={onCloseMock} />
|
|
|
+ };
|
|
|
+
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ const closeButton = within(drawerContainer).getByRole('button', { name: 'Close' });
|
|
|
+
|
|
|
+ expect(onCloseMock).not.toHaveBeenCalled();
|
|
|
+ await user.click(closeButton);
|
|
|
+ expect(onCloseMock).toHaveBeenCalled();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ describe('with right drawer closed', () => {
|
|
|
+ test('renders drawer outside parent container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ expect(getComputedStyle(drawerContainer).width).toEqual('100px');
|
|
|
+ expect(getComputedStyle(drawerContainer).left).toEqual('calc(100% - 0px)');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('sets the correct width on main content container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const contentContainer = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(getComputedStyle(contentContainer).width).toEqual('calc(100% - 100px)');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders DrawerHeader as not visible', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ expect(
|
|
|
+ within(drawerContainer).getByRole('heading', { level: 3, hidden: true })
|
|
|
+ ).not.toBeVisible();
|
|
|
+ expect(
|
|
|
+ within(drawerContainer).getByRole('button', { name: 'Close', hidden: true })
|
|
|
+ ).not.toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('does not accept tab focus on input elements placed in the drawer', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ render(<PushDrawer rightDrawer={myTestConfig} mainContent={() => <div></div>} />);
|
|
|
+
|
|
|
+ const drawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ const closeButton = within(drawerContainer).getByRole('button', {
|
|
|
+ name: 'Close',
|
|
|
+ hidden: true
|
|
|
+ });
|
|
|
+ const contentCheckbox = within(drawerContainer).getByRole('checkbox', {
|
|
|
+ name: drawerContentCheckboxLabel,
|
|
|
+ hidden: true
|
|
|
+ });
|
|
|
+
|
|
|
+ expect(document.body).toHaveFocus();
|
|
|
+ await user.tab();
|
|
|
+ expect(closeButton).not.toHaveFocus();
|
|
|
+ expect(contentCheckbox).not.toHaveFocus();
|
|
|
+ await user.tab();
|
|
|
+ expect(closeButton).not.toHaveFocus();
|
|
|
+ expect(contentCheckbox).not.toHaveFocus();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has visible main content', async () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ rightDrawer={myTestConfig}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>main content button</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(
|
|
|
+ within(mainContent).getByRole('button', { name: 'main content button' })
|
|
|
+ ).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has focusable main content', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: false };
|
|
|
+ const configWithEmptyDrawer = {
|
|
|
+ ...myTestConfig,
|
|
|
+ header: () => <></>,
|
|
|
+ content: () => <></>
|
|
|
+ };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ rightDrawer={configWithEmptyDrawer}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>test me</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ await user.tab();
|
|
|
+ expect(within(mainContent).getByRole('button', { name: 'test me' })).toHaveFocus();
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ describe('with left AND right drawer open', () => {
|
|
|
+ test('renders drawers on the left and right side in parent container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={myTestConfig}
|
|
|
+ rightDrawer={myTestConfig}
|
|
|
+ mainContent={() => <div></div>}
|
|
|
+ />
|
|
|
+ );
|
|
|
+
|
|
|
+ const leftDrawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ expect(getComputedStyle(leftDrawerContainer).width).toEqual('100px');
|
|
|
+ expect(getComputedStyle(leftDrawerContainer).left).toEqual('0px');
|
|
|
+
|
|
|
+ const rightDrawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ expect(getComputedStyle(rightDrawerContainer).width).toEqual('100px');
|
|
|
+ expect(getComputedStyle(rightDrawerContainer).left).toEqual('calc(100% - 100px)');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('sets the correct width on content container', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={myTestConfig}
|
|
|
+ rightDrawer={myTestConfig}
|
|
|
+ mainContent={() => <div></div>}
|
|
|
+ />
|
|
|
+ );
|
|
|
+
|
|
|
+ const contentContainer = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(getComputedStyle(contentContainer).width).toEqual('calc(100% - 200px)');
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders DrawerHeaders as visible', () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={myTestConfig}
|
|
|
+ rightDrawer={myTestConfig}
|
|
|
+ mainContent={() => <div></div>}
|
|
|
+ />
|
|
|
+ );
|
|
|
+
|
|
|
+ const leftDrawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ expect(within(leftDrawerContainer).getByRole('heading', { level: 3 })).toBeVisible();
|
|
|
+ expect(within(leftDrawerContainer).getByRole('button', { name: 'Close' })).toBeVisible();
|
|
|
+
|
|
|
+ const rightDrawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ expect(within(rightDrawerContainer).getByRole('heading', { level: 3 })).toBeVisible();
|
|
|
+ expect(within(rightDrawerContainer).getByRole('button', { name: 'Close' })).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('renders all drawer content as visible', () => {
|
|
|
+ const myLeftTestConfig = {
|
|
|
+ ...getTestDrawerConfig(),
|
|
|
+ isOpen: true,
|
|
|
+ content: () => (
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="chk1-label" />
|
|
|
+ <label htmlFor="chk1-label">{drawerContentCheckboxLabel}</label>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ };
|
|
|
+ const myRightTestConfig = {
|
|
|
+ ...getTestDrawerConfig(),
|
|
|
+ isOpen: true,
|
|
|
+ content: () => (
|
|
|
+ <div>
|
|
|
+ <input type="checkbox" id="chk2-label" />
|
|
|
+ <label htmlFor="chk2-label">{drawerContentCheckboxLabel}</label>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ };
|
|
|
+
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={myLeftTestConfig}
|
|
|
+ rightDrawer={myRightTestConfig}
|
|
|
+ mainContent={() => <div></div>}
|
|
|
+ />
|
|
|
+ );
|
|
|
+
|
|
|
+ const leftDrawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ const leftDrawerCheckbox = within(leftDrawerContainer).getByRole('checkbox', {
|
|
|
+ name: drawerContentCheckboxLabel
|
|
|
+ });
|
|
|
+ expect(leftDrawerCheckbox).toBeVisible();
|
|
|
+
|
|
|
+ const rightDrawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ const rightDrawerCheckbox = within(rightDrawerContainer).getByRole('checkbox', {
|
|
|
+ name: drawerContentCheckboxLabel
|
|
|
+ });
|
|
|
+ expect(rightDrawerCheckbox).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('accepts tab focus on input elements placed in both the drawers', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true, content: () => <div></div> };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={myTestConfig}
|
|
|
+ rightDrawer={myTestConfig}
|
|
|
+ mainContent={() => <div></div>}
|
|
|
+ />
|
|
|
+ );
|
|
|
+
|
|
|
+ expect(document.body).toHaveFocus();
|
|
|
+
|
|
|
+ const leftDrawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ const leftCloseButton = within(leftDrawerContainer).getByRole('button', { name: 'Close' });
|
|
|
+ const rightDrawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ const rightCloseButton = within(rightDrawerContainer).getByRole('button', { name: 'Close' });
|
|
|
+
|
|
|
+ await user.tab();
|
|
|
+ expect(leftCloseButton).toHaveFocus();
|
|
|
+ await user.tab();
|
|
|
+ expect(rightCloseButton).toHaveFocus();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has visible main content', async () => {
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={myTestConfig}
|
|
|
+ rightDrawer={myTestConfig}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>main content button</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+ expect(
|
|
|
+ within(mainContent).getByRole('button', { name: 'main content button' })
|
|
|
+ ).toBeVisible();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('has focusable main content', async () => {
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const myTestConfig = { ...getTestDrawerConfig(), isOpen: true };
|
|
|
+ const configWithEmptyDrawer = {
|
|
|
+ ...myTestConfig,
|
|
|
+ header: () => <></>,
|
|
|
+ content: () => <></>
|
|
|
+ };
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={configWithEmptyDrawer}
|
|
|
+ rightDrawer={configWithEmptyDrawer}
|
|
|
+ mainContent={() => (
|
|
|
+ <div>
|
|
|
+ <button>test me</button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ );
|
|
|
+ const mainContent = screen.getByTestId('hue-push-drawer-content');
|
|
|
+
|
|
|
+ await user.tab();
|
|
|
+ expect(within(mainContent).getByRole('button', { name: 'test me' })).toHaveFocus();
|
|
|
+ });
|
|
|
+
|
|
|
+ test('calls correct onClose when close buttons are clicked', async () => {
|
|
|
+ const onLeftCloseMock = jest.fn();
|
|
|
+ const onRightCloseMock = jest.fn();
|
|
|
+ const user = userEvent.setup();
|
|
|
+ const leftTestConfig = {
|
|
|
+ ...getTestDrawerConfig(),
|
|
|
+ isOpen: true,
|
|
|
+ header: () => <DrawerHeader onClose={onLeftCloseMock} />
|
|
|
+ };
|
|
|
+ const rightTestConfig = {
|
|
|
+ ...getTestDrawerConfig(),
|
|
|
+ isOpen: true,
|
|
|
+ header: () => <DrawerHeader onClose={onRightCloseMock} />
|
|
|
+ };
|
|
|
+
|
|
|
+ render(
|
|
|
+ <PushDrawer
|
|
|
+ leftDrawer={leftTestConfig}
|
|
|
+ rightDrawer={rightTestConfig}
|
|
|
+ mainContent={() => <div></div>}
|
|
|
+ />
|
|
|
+ );
|
|
|
+
|
|
|
+ const leftDrawerContainer = screen.getByTestId('hue-push-drawer-left-drawer');
|
|
|
+ const leftCloseButton = within(leftDrawerContainer).getByRole('button', { name: 'Close' });
|
|
|
+
|
|
|
+ expect(onLeftCloseMock).not.toHaveBeenCalled();
|
|
|
+ await user.click(leftCloseButton);
|
|
|
+ expect(onLeftCloseMock).toHaveBeenCalled();
|
|
|
+
|
|
|
+ const rightDrawerContainer = screen.getByTestId('hue-push-drawer-right-drawer');
|
|
|
+ const rightCloseButton = within(rightDrawerContainer).getByRole('button', { name: 'Close' });
|
|
|
+
|
|
|
+ expect(onRightCloseMock).not.toHaveBeenCalled();
|
|
|
+ await user.click(rightCloseButton);
|
|
|
+ expect(onRightCloseMock).toHaveBeenCalled();
|
|
|
+ });
|
|
|
+ });
|
|
|
+});
|