diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx index 67dc298d40..e614c4fd6d 100644 --- a/src/app-layout/__tests__/runtime-drawers.test.tsx +++ b/src/app-layout/__tests__/runtime-drawers.test.tsx @@ -16,12 +16,12 @@ import * as awsuiWidgetPlugins from '../../../lib/components/internal/plugins/wi import { DrawerPayload as WidgetDrawerPayload } from '../../../lib/components/internal/plugins/widget/interfaces'; import SplitPanel from '../../../lib/components/split-panel'; import createWrapper from '../../../lib/components/test-utils/dom'; +import AppLayoutRuntimeWrapper from '../../../lib/components/test-utils/dom/internal/app-layout-drawers'; import { describeEachAppLayout, findActiveDrawerLandmark, getActiveDrawerWidth, getBottomDrawerHeight, - getGlobalDrawersTestUtils, getGlobalDrawerWidth, manyDrawers, testDrawer, @@ -45,7 +45,7 @@ jest.mock('@cloudscape-design/component-toolkit', () => ({ async function renderComponent(jsx: React.ReactElement) { const { container, rerender, getByTestId, ...rest } = render(jsx); const wrapper = createWrapper(container).findAppLayout()!; - const globalDrawersWrapper = getGlobalDrawersTestUtils(wrapper); + const globalDrawersWrapper = new AppLayoutRuntimeWrapper(wrapper.getElement()); await delay(); return { wrapper, @@ -1811,8 +1811,8 @@ describe('toolbar mode only features', () => { const outerLayout = createWrapper().find('[data-testid="first"]')!.findAppLayout()!; const innerLayout = createWrapper().find('[data-testid="second"]')!.findAppLayout()!; - const innerGlobalDrawers = getGlobalDrawersTestUtils(outerLayout); - const outerGlobalDrawers = getGlobalDrawersTestUtils(innerLayout); + const outerGlobalDrawers = new AppLayoutRuntimeWrapper(outerLayout.getElement()); + const innerGlobalDrawers = new AppLayoutRuntimeWrapper(innerLayout.getElement()); await delay(); @@ -1827,8 +1827,8 @@ describe('toolbar mode only features', () => { innerGlobalDrawers.findExpandedModeButtonByActiveDrawerId(drawerId)!.click(); - expect(innerGlobalDrawers.isLayoutInDrawerExpandedMode()).toBe(false); - expect(outerGlobalDrawers.isLayoutInDrawerExpandedMode()).toBe(true); + expect(innerGlobalDrawers.isLayoutInDrawerExpandedMode()).toBe(true); + expect(outerGlobalDrawers.isLayoutInDrawerExpandedMode()).toBe(false); await waitFor(() => expect(outerLayout.find(`.${skeletonStyles.navigation}`)!.getElement()).toHaveClass(skeletonStyles.hidden) diff --git a/src/test-utils/dom/internal/app-layout-drawers.ts b/src/test-utils/dom/internal/app-layout-drawers.ts new file mode 100644 index 0000000000..430ff8a5ee --- /dev/null +++ b/src/test-utils/dom/internal/app-layout-drawers.ts @@ -0,0 +1,74 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import { ComponentWrapper, ElementWrapper, usesDom } from '@cloudscape-design/test-utils-core/dom'; + +import AppLayoutWrapper from '../app-layout'; +import ButtonWrapper from '../button'; +import ButtonGroupWrapper from '../button-group'; + +import testutilStyles from '../../../app-layout/test-classes/styles.css.js'; +import globalDrawerStyles from '../../../app-layout/visual-refresh-toolbar/drawer/styles.css.js'; +import visualRefreshToolbarStyles from '../../../app-layout/visual-refresh-toolbar/skeleton/styles.css.js'; + +export class AppLayoutDrawerWrapper extends ComponentWrapper { + @usesDom + isActive(): boolean { + return this.element.classList.contains(testutilStyles['active-drawer']); + } + + @usesDom + isDrawerInExpandedMode(): boolean { + return this.element.classList.contains(globalDrawerStyles['drawer-expanded']); + } +} + +export default class AppLayoutRuntimeWrapper extends AppLayoutWrapper { + findActiveDrawers(): Array { + return this.findAllByClassName(testutilStyles['active-drawer']); + } + + findDrawerById(id: string): AppLayoutDrawerWrapper | null { + const element = this.find(`[data-testid="awsui-app-layout-drawer-${id}"]`); + return element ? new AppLayoutDrawerWrapper(element.getElement()) : null; + } + + findGlobalDrawersTriggers(): ElementWrapper[] { + return this.findAllByClassName(testutilStyles['drawers-trigger-global']); + } + + findResizeHandleByActiveDrawerId(id: string): ElementWrapper | null { + return this.find( + `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"] .${testutilStyles['drawers-slider']}` + ); + } + + findCloseButtonByActiveDrawerId(id: string): ButtonWrapper | null { + return this.findComponent( + `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"]`, + ButtonGroupWrapper + )!.findButtonById('close'); + } + + findExpandedModeButtonByActiveDrawerId(id: string): ButtonWrapper | null { + return this.findComponent( + `.${testutilStyles['active-drawer']}[data-testid="awsui-app-layout-drawer-${id}"]`, + ButtonGroupWrapper + )!.findButtonById('expand'); + } + + findLeaveExpandedModeButtonInAIDrawer(): ElementWrapper | null { + return this.find( + `.${testutilStyles['active-drawer']} .${testutilStyles['active-ai-drawer-leave-expanded-mode-custom-button']}` + ); + } + + @usesDom + isLayoutInDrawerExpandedMode(): boolean { + return this.element.matches(`.${visualRefreshToolbarStyles['drawer-expanded-mode']}`); + } + + findAiDrawerTrigger(): ElementWrapper | null { + return this.find(`.${testutilStyles['ai-drawer-toggle']}`); + } +}