Skip to content

Commit 0dfe2c0

Browse files
just-borisjust-boris
authored
chore: Cleanup app layout unit tests (#3924)
1 parent 917de81 commit 0dfe2c0

File tree

5 files changed

+276
-276
lines changed

5 files changed

+276
-276
lines changed

‎src/app-layout/__tests__/common.test.tsx‎

Lines changed: 1 addition & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { act, waitFor } from '@testing-library/react';
55

66
import AppLayout from '../../../lib/components/app-layout';
77
import { AppLayoutWrapper } from '../../../lib/components/test-utils/dom';
8-
import { describeEachAppLayout, renderComponent, testDrawer, testDrawerWithoutLabels } from './utils';
8+
import { describeEachAppLayout, renderComponent } from './utils';
99

1010
jest.mock('@cloudscape-design/component-toolkit', () => ({
1111
...jest.requireActual('@cloudscape-design/component-toolkit'),
@@ -227,18 +227,6 @@ describeEachAppLayout(({ theme, size }) => {
227227
expect(findClose(wrapper).getElement()).not.toHaveAttribute('aria-label');
228228
});
229229

230-
test('Opens and closes drawer in uncontrolled mode', () => {
231-
// use content type with initial closed state for all drawers
232-
const { wrapper } = renderComponent(<AppLayout contentType="form" />);
233-
expect(findOpenElement(wrapper)).toBeFalsy();
234-
235-
findToggle(wrapper).click();
236-
expect(findOpenElement(wrapper)).toBeTruthy();
237-
238-
findClose(wrapper).click();
239-
expect(findOpenElement(wrapper)).toBeFalsy();
240-
});
241-
242230
test('Moves focus between open and close buttons', async () => {
243231
// use content type with initial closed state for all drawers
244232
const { wrapper } = renderComponent(<AppLayout contentType="form" />);
@@ -266,88 +254,4 @@ describeEachAppLayout(({ theme, size }) => {
266254
});
267255
}
268256
);
269-
270-
// Drawers tests
271-
272-
describe(`Drawers`, () => {
273-
test(`Should call handler once on open when toggle is clicked`, () => {
274-
const onChange = jest.fn();
275-
const { wrapper } = renderComponent(
276-
<AppLayout drawers={[testDrawer]} onDrawerChange={event => onChange(event.detail)} />
277-
);
278-
wrapper.findDrawerTriggerById('security')!.click();
279-
expect(onChange).toHaveBeenCalledWith({ activeDrawerId: 'security' });
280-
});
281-
282-
test(`Should call handler once on open when span inside toggle is clicked`, () => {
283-
const onChange = jest.fn();
284-
const { wrapper } = renderComponent(
285-
<AppLayout drawers={[testDrawer]} onDrawerChange={event => onChange(event.detail)} />
286-
);
287-
288-
// Chrome bubbles up events from specific elements inside <button>s.
289-
wrapper.findDrawerTriggerById('security')!.find('span')!.click();
290-
expect(onChange).toHaveBeenCalledTimes(1);
291-
expect(onChange).toHaveBeenCalledWith({ activeDrawerId: 'security' });
292-
});
293-
294-
test(`Should call handler once on close`, () => {
295-
const onChange = jest.fn();
296-
const { wrapper } = renderComponent(
297-
<AppLayout
298-
drawers={[testDrawer]}
299-
activeDrawerId={testDrawer.id}
300-
onDrawerChange={event => onChange(event.detail)}
301-
/>
302-
);
303-
304-
wrapper.findActiveDrawerCloseButton()!.click();
305-
expect(onChange).toHaveBeenCalledTimes(1);
306-
expect(onChange).toHaveBeenCalledWith({ activeDrawerId: null });
307-
});
308-
309-
test('Renders aria-expanded only on toggle', () => {
310-
const { wrapper } = renderComponent(<AppLayout drawers={[testDrawer]} />);
311-
312-
const drawerTrigger = wrapper.findDrawerTriggerById('security')!;
313-
expect(drawerTrigger.getElement()).toHaveAttribute('aria-expanded', 'false');
314-
expect(drawerTrigger.getElement()).toHaveAttribute('aria-haspopup', 'true');
315-
316-
drawerTrigger.click();
317-
expect(drawerTrigger.getElement()).toHaveAttribute('aria-expanded', 'true');
318-
expect(wrapper.findActiveDrawerCloseButton()!.getElement()).not.toHaveAttribute('aria-expanded');
319-
expect(wrapper.findActiveDrawerCloseButton()!.getElement()).not.toHaveAttribute('aria-haspopup');
320-
});
321-
322-
test('Close button does have a label if it is defined', () => {
323-
const { wrapper } = renderComponent(
324-
<AppLayout activeDrawerId={testDrawer.id} drawers={[testDrawer]} onDrawerChange={() => {}} />
325-
);
326-
327-
expect(wrapper.findActiveDrawerCloseButton()!.getElement()).toHaveAttribute(
328-
'aria-label',
329-
'Security close button'
330-
);
331-
});
332-
333-
test('Close button does not render a label if is not defined', () => {
334-
const { wrapper } = renderComponent(
335-
<AppLayout activeDrawerId={testDrawerWithoutLabels.id} drawers={[testDrawerWithoutLabels]} />
336-
);
337-
338-
expect(wrapper.findActiveDrawerCloseButton()!.getElement()).not.toHaveAttribute('aria-label');
339-
});
340-
341-
test('Opens and closes drawer in uncontrolled mode', () => {
342-
// use content type with initial closed state for all drawers
343-
const { wrapper } = renderComponent(<AppLayout drawers={[testDrawer]} />);
344-
expect(wrapper.findActiveDrawer()).toBeNull();
345-
346-
wrapper.findDrawerTriggerById('security')!.find('span')!.click();
347-
expect(wrapper.findActiveDrawer()).not.toBeNull();
348-
349-
wrapper.findActiveDrawerCloseButton()!.click();
350-
expect(wrapper.findActiveDrawer()).toBeNull();
351-
});
352-
});
353257
});

‎src/app-layout/__tests__/desktop.test.tsx‎

Lines changed: 3 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,17 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
33
import React from 'react';
4-
import { act, fireEvent, screen, waitFor, within } from '@testing-library/react';
4+
import { act, fireEvent, screen, waitFor } from '@testing-library/react';
55

66
import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
77
import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
88
import { KeyCode } from '../../internal/keycode';
9-
import {
10-
describeEachAppLayout,
11-
getActiveDrawerWidth,
12-
manyDrawers,
13-
renderComponent,
14-
testDrawer,
15-
testDrawerWithoutLabels,
16-
} from './utils';
17-
18-
import drawerStyles from '../../../lib/components/app-layout/drawer/styles.css.js';
9+
import { describeEachAppLayout, getActiveDrawerWidth, manyDrawers, renderComponent, testDrawer } from './utils';
10+
1911
import notificationStyles from '../../../lib/components/app-layout/notifications/styles.css.js';
2012
import styles from '../../../lib/components/app-layout/styles.css.js';
2113
import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
2214
import visualRefreshToolbarNotificationStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/notifications/styles.css.js';
23-
import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.css.js';
2415

2516
jest.mock('@cloudscape-design/component-toolkit', () => ({
2617
...jest.requireActual('@cloudscape-design/component-toolkit'),
@@ -152,14 +143,6 @@ describeEachAppLayout({ sizes: ['desktop'] }, ({ theme }) => {
152143
});
153144
});
154145

155-
test('should render an active drawer', () => {
156-
const { wrapper } = renderComponent(
157-
<AppLayout activeDrawerId={testDrawer.id} drawers={[testDrawer]} onDrawerChange={() => {}} />
158-
);
159-
160-
expect(wrapper.findActiveDrawer()).toBeTruthy();
161-
});
162-
163146
test(`should toggle drawer on click`, () => {
164147
const { wrapper } = renderComponent(<AppLayout toolsHide={true} drawers={[testDrawer]} />);
165148
wrapper.findDrawersTriggers()![0].click();
@@ -225,13 +208,6 @@ describeEachAppLayout({ sizes: ['desktop'] }, ({ theme }) => {
225208
expect(wrapper.findDrawersTriggers()!.length).toBeLessThan(100);
226209
});
227210

228-
test('Renders aria-controls on toggle only when active', () => {
229-
const { wrapper } = renderComponent(<AppLayout drawers={[testDrawer]} />);
230-
expect(wrapper.findDrawerTriggerById('security')!.getElement()).not.toHaveAttribute('aria-controls');
231-
wrapper.findDrawerTriggerById('security')!.click();
232-
expect(wrapper.findDrawerTriggerById('security')!.getElement()).toHaveAttribute('aria-controls', 'security');
233-
});
234-
235211
test('should render badge when defined', () => {
236212
const { wrapper } = renderComponent(<AppLayout drawers={manyDrawers} />);
237213

@@ -272,62 +248,4 @@ describeEachAppLayout({ themes: ['classic'], sizes: ['desktop'] }, () => {
272248
fireEvent.click(screen.getByLabelText('Drawers', { selector: '[role=region]' }));
273249
expect(wrapper.findActiveDrawer()).toBeFalsy();
274250
});
275-
276-
test('renders roles only when aria labels are not provided (classic)', () => {
277-
const { wrapper } = renderComponent(<AppLayout navigationHide={true} drawers={[testDrawerWithoutLabels]} />);
278-
const drawersAside = within(wrapper.findByClassName(drawerStyles['drawer-closed'])!.getElement()).getByRole(
279-
'region'
280-
);
281-
282-
expect(wrapper.findDrawerTriggerById(testDrawer.id)!.getElement()).not.toHaveAttribute('aria-label');
283-
expect(drawersAside).not.toHaveAttribute('aria-label');
284-
expect(wrapper.findByClassName(drawerStyles['drawer-triggers-wrapper'])!.getElement()).toHaveAttribute(
285-
'role',
286-
'toolbar'
287-
);
288-
});
289-
290-
test('renders roles and aria labels when provided (classic)', () => {
291-
const { wrapper } = renderComponent(<AppLayout drawers={[testDrawer]} ariaLabels={{ drawers: 'Drawers' }} />);
292-
const drawersAside = within(wrapper.findByClassName(drawerStyles['drawer-closed'])!.getElement()).getByRole(
293-
'region'
294-
);
295-
296-
expect(wrapper.findDrawerTriggerById('security')!.getElement()).toHaveAttribute(
297-
'aria-label',
298-
'Security trigger button'
299-
);
300-
expect(drawersAside).toHaveAttribute('aria-label', 'Drawers');
301-
expect(wrapper.findByClassName(drawerStyles['drawer-triggers-wrapper'])!.getElement()).toHaveAttribute(
302-
'role',
303-
'toolbar'
304-
);
305-
});
306-
});
307-
308-
describeEachAppLayout({ themes: ['refresh', 'refresh-toolbar'], sizes: ['desktop'] }, ({ theme }) => {
309-
const styles = theme === 'refresh' ? visualRefreshStyles : toolbarStyles;
310-
test(`${theme} - renders roles only when aria labels are not provided`, () => {
311-
const { wrapper } = renderComponent(<AppLayout navigationHide={true} drawers={[testDrawerWithoutLabels]} />);
312-
313-
expect(wrapper.findDrawerTriggerById(testDrawer.id)!.getElement()).not.toHaveAttribute('aria-label');
314-
expect(wrapper.findByClassName(styles['drawers-desktop-triggers-container'])!.getElement()).not.toHaveAttribute(
315-
'aria-label'
316-
);
317-
expect(wrapper.findByClassName(styles['drawers-trigger-content'])!.getElement()).toHaveAttribute('role', 'toolbar');
318-
});
319-
320-
test(`${theme} - renders roles and aria labels when provided`, () => {
321-
const { wrapper } = renderComponent(<AppLayout drawers={[testDrawer]} ariaLabels={{ drawers: 'Drawers' }} />);
322-
323-
expect(wrapper.findDrawerTriggerById('security')!.getElement()).toHaveAttribute(
324-
'aria-label',
325-
'Security trigger button'
326-
);
327-
expect(wrapper.findByClassName(styles['drawers-desktop-triggers-container'])!.getElement()).toHaveAttribute(
328-
'aria-label',
329-
'Drawers'
330-
);
331-
expect(wrapper.findByClassName(styles['drawers-trigger-content'])!.getElement()).toHaveAttribute('role', 'toolbar');
332-
});
333251
});

0 commit comments

Comments
 (0)