chore: Fix mocks application in app layout tests (#3277)

cloudscape-design · Feb 11, 2025 · ded9233 · ded9233
1 parent 6038d56
commit ded9233
Show file tree

Hide file tree

Showing 19 changed files with 95 additions and 150 deletions.
diff --git a/src/app-layout/__tests__/app-layout-navigation.test.tsx b/src/app-layout/__tests__/app-layout-navigation.test.tsx
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React from 'react';
-import { describeEachAppLayout, renderComponent } from './utils';
+
 import AppLayout from '../../../lib/components/app-layout';
+import { describeEachAppLayout, renderComponent } from './utils';
 
 import visualRefreshToolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.css.js';
 

diff --git a/src/app-layout/__tests__/common.test.tsx b/src/app-layout/__tests__/common.test.tsx
@@ -1,10 +1,10 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React from 'react';
+
+import AppLayout from '../../../lib/components/app-layout';
 import { AppLayoutWrapper } from '../../../lib/components/test-utils/dom';
 import { describeEachAppLayout, renderComponent, testDrawer, testDrawerWithoutLabels } from './utils';
-import AppLayout from '../../../lib/components/app-layout';
 
 jest.mock('@cloudscape-design/component-toolkit', () => ({
   ...jest.requireActual('@cloudscape-design/component-toolkit'),

diff --git a/src/app-layout/__tests__/desktop.test.tsx b/src/app-layout/__tests__/desktop.test.tsx
@@ -1,27 +1,26 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React from 'react';
 import { act, fireEvent, screen, within } from '@testing-library/react';
 
+import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
+import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
+import { KeyCode } from '../../internal/keycode';
 import {
   describeEachAppLayout,
+  getActiveDrawerWidth,
+  manyDrawers,
   renderComponent,
   testDrawer,
-  manyDrawers,
-  getActiveDrawerWidth,
   testDrawerWithoutLabels,
 } from './utils';
-import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
-import styles from '../../../lib/components/app-layout/styles.css.js';
+
+import drawerStyles from '../../../lib/components/app-layout/drawer/styles.css.js';
 import notificationStyles from '../../../lib/components/app-layout/notifications/styles.css.js';
+import styles from '../../../lib/components/app-layout/styles.css.js';
 import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
 import visualRefreshToolbarNotificationStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/notifications/styles.css.js';
 import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.css.js';
-import drawerStyles from '../../../lib/components/app-layout/drawer/styles.css.js';
-import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
-import { KeyCode } from '../../internal/keycode';
-import { useVisualRefresh } from '../../../lib/components/internal/hooks/use-visual-mode';
 
 jest.mock('@cloudscape-design/component-toolkit', () => ({
   ...jest.requireActual('@cloudscape-design/component-toolkit'),
@@ -252,14 +251,7 @@ describeEachAppLayout({ sizes: ['desktop'] }, ({ theme }) => {
   });
 });
 
-describe('Classic only features', () => {
-  beforeEach(() => {
-    (useVisualRefresh as jest.Mock).mockReturnValue(false);
-  });
-  afterEach(() => {
-    (useVisualRefresh as jest.Mock).mockReset();
-  });
-
+describeEachAppLayout({ themes: ['classic'], sizes: ['desktop'] }, () => {
   test(`should toggle single drawer on click of container`, () => {
     const { wrapper } = renderComponent(
       <AppLayout toolsHide={true} drawers={[testDrawer]} ariaLabels={{ drawers: 'Drawers' }} />

diff --git a/src/app-layout/__tests__/drawers.test.tsx b/src/app-layout/__tests__/drawers.test.tsx
@@ -1,27 +1,23 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React from 'react';
-import { act, render, fireEvent } from '@testing-library/react';
+import { act, fireEvent, render } from '@testing-library/react';
+
 import { KeyCode } from '@cloudscape-design/test-utils-core/utils.js';
-import createWrapper from '../../../lib/components/test-utils/dom';
 
+import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
+import createWrapper from '../../../lib/components/test-utils/dom';
 import {
   describeEachAppLayout,
-  renderComponent,
-  testDrawer,
+  findActiveDrawerLandmark,
   manyDrawers,
   manyDrawersWithBadges,
-  findActiveDrawerLandmark,
+  renderComponent,
+  testDrawer,
 } from './utils';
 
-import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
-import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
 import toolbarTriggerButtonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js';
-
-jest.mock('../../../lib/components/internal/hooks/use-mobile', () => ({
-  useMobile: jest.fn().mockReturnValue(true),
-}));
+import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
 
 const testIf = (condition: boolean) => (condition ? test : test.skip);
 

diff --git a/src/app-layout/__tests__/global-breadcrumbs.test.tsx b/src/app-layout/__tests__/global-breadcrumbs.test.tsx
@@ -1,15 +1,17 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
+
 import React, { useState } from 'react';
-import { act, render, cleanup, waitFor } from '@testing-library/react';
-import { describeEachAppLayout } from './utils';
-import createWrapper from '../../../lib/components/test-utils/dom';
+import { act, cleanup, render, waitFor } from '@testing-library/react';
+
+import { activateAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import { getGeneratedAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata/utils';
+
 import AppLayout from '../../../lib/components/app-layout';
 import BreadcrumbGroup, { BreadcrumbGroupProps } from '../../../lib/components/breadcrumb-group';
 import { awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
-import { activateAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
-import { getGeneratedAnalyticsMetadata } from '@cloudscape-design/component-toolkit/internal/analytics-metadata/utils';
+import createWrapper from '../../../lib/components/test-utils/dom';
+import { describeEachAppLayout } from './utils';
 
 const wrapper = createWrapper();
 

diff --git a/src/app-layout/__tests__/header-variant.test.tsx b/src/app-layout/__tests__/header-variant.test.tsx
@@ -11,14 +11,6 @@ import { describeEachAppLayout, renderComponent } from './utils';
 import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
 import toolbarSkeletonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.css.js';
 
-jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
-  useVisualRefresh: jest.fn().mockReturnValue(false),
-}));
-
-jest.mock('../../../lib/components/internal/hooks/use-mobile', () => ({
-  useMobile: jest.fn().mockReturnValue(false),
-}));
-
 const hasHighContrastContext = (element: HTMLElement) =>
   findUpUntil(element, el => el.classList.contains(highContrastHeaderClassName));
 

diff --git a/src/app-layout/__tests__/main.test.tsx b/src/app-layout/__tests__/main.test.tsx
@@ -1,24 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import * as React from 'react';
 import { waitFor } from '@testing-library/react';
-import { describeEachAppLayout, renderComponent, testDrawer } from './utils';
+
+import '../../__a11y__/to-validate-a11y';
 import AppLayout from '../../../lib/components/app-layout';
 import { AppLayoutWrapper } from '../../../lib/components/test-utils/dom';
+import { describeEachAppLayout, renderComponent, testDrawer } from './utils';
+
 import mobileStyles from '../../../lib/components/app-layout/mobile-toolbar/styles.css.js';
 import sharedStyles from '../../../lib/components/app-layout/styles.css.js';
-import '../../__a11y__/to-validate-a11y';
-
-jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
-  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
-  isMotionDisabled: jest.fn().mockReturnValue(true),
-}));
 
-// in our ResizeObserver mock resolves into mobile mode
-test('should render mobile mode by default', () => {
+test('does not render mobile mode by default', () => {
   const { wrapper } = renderComponent(<AppLayout />);
-  expect(wrapper.findByClassName(mobileStyles['mobile-bar'])).toBeTruthy();
+  expect(wrapper.findByClassName(mobileStyles['mobile-bar'])).toBeFalsy();
 });
 
 test('should not create a new stacking context by default', () => {

diff --git a/src/app-layout/__tests__/mobile.test.tsx b/src/app-layout/__tests__/mobile.test.tsx
@@ -1,37 +1,33 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React, { useState } from 'react';
 import { act, within } from '@testing-library/react';
+
+import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
+
+import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
+import SideNavigation from '../../../lib/components/side-navigation';
+import SplitPanel from '../../../lib/components/split-panel';
+import { AppLayoutWrapper } from '../../../lib/components/test-utils/dom';
 import {
   describeEachAppLayout,
-  renderComponent,
-  testDrawer,
   manyDrawers,
+  renderComponent,
   splitPanelI18nStrings,
+  testDrawer,
   testDrawerWithoutLabels,
 } from './utils';
-import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
-import SplitPanel from '../../../lib/components/split-panel';
-import { AppLayoutWrapper } from '../../../lib/components/test-utils/dom';
-import styles from '../../../lib/components/app-layout/styles.css.js';
+
 import drawersMobileStyles from '../../../lib/components/app-layout/mobile-toolbar/styles.css.js';
 import mobileToolbarStyles from '../../../lib/components/app-layout/mobile-toolbar/styles.css.js';
-import iconStyles from '../../../lib/components/icon/styles.css.js';
+import styles from '../../../lib/components/app-layout/styles.css.js';
 import testUtilsStyles from '../../../lib/components/app-layout/test-classes/styles.css.js';
-import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.css.js';
-import toolbarTriggerButtonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js';
+import visualRefreshRefactoredStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
 import toolbarNotificationsStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/notifications/styles.css.js';
 import toolbarSkeletonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.css.js';
-
-import visualRefreshRefactoredStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';
-import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
-import SideNavigation from '../../../lib/components/side-navigation';
-
-jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
-  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
-  isMotionDisabled: jest.fn().mockReturnValue(true),
-}));
+import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.css.js';
+import toolbarTriggerButtonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js';
+import iconStyles from '../../../lib/components/icon/styles.css.js';
 
 function AppLayoutWithControlledNavigation({
   initialNavigationOpen,

diff --git a/src/app-layout/__tests__/multi-layout.test.tsx b/src/app-layout/__tests__/multi-layout.test.tsx
@@ -1,17 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint-disable simple-import-sort/imports */
 import React, { useState } from 'react';
 import { act, cleanup, render, waitFor } from '@testing-library/react';
 
 import { clearMessageCache } from '@cloudscape-design/component-toolkit/internal';
 
-import { describeEachAppLayout, testDrawer } from './utils';
-
 import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 import { awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
 import SplitPanel from '../../../lib/components/split-panel';
 import createWrapper, { AppLayoutWrapper } from '../../../lib/components/test-utils/dom';
+import { describeEachAppLayout, testDrawer } from './utils';
 
 import testUtilStyles from '../../../lib/components/app-layout/test-classes/styles.css.js';
 

diff --git a/src/app-layout/__tests__/runtime-drawers-layout.test.tsx b/src/app-layout/__tests__/runtime-drawers-layout.test.tsx
@@ -1,16 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React, { RefObject } from 'react';
 import { act, render, waitFor } from '@testing-library/react';
-import { describeEachAppLayout, getGlobalDrawersTestUtils, testDrawer } from './utils';
+
 import AppLayout from '../../../lib/components/app-layout';
-import { awsuiPlugins, awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
+import { useAppLayoutPlacement } from '../../../lib/components/app-layout/utils/use-app-layout-placement';
 import { computeHorizontalLayout } from '../../../lib/components/app-layout/visual-refresh-toolbar/compute-layout';
+import { awsuiPlugins, awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
 import { DrawerConfig } from '../../../lib/components/internal/plugins/controllers/drawers';
 import createWrapper from '../../../lib/components/test-utils/dom';
 import { KeyCode } from '../../internal/keycode';
-import { useAppLayoutPlacement } from '../../../lib/components/app-layout/utils/use-app-layout-placement';
+import { describeEachAppLayout, getGlobalDrawersTestUtils, testDrawer } from './utils';
 
 beforeEach(() => {
   awsuiPluginsInternal.appLayout.clearRegisteredDrawers();

diff --git a/src/app-layout/__tests__/runtime-drawers.test.tsx b/src/app-layout/__tests__/runtime-drawers.test.tsx
@@ -1,25 +1,26 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React, { useState } from 'react';
 import { act, fireEvent, render } from '@testing-library/react';
+
+import { Button } from '../../../lib/components';
+import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
+import { TOOLS_DRAWER_ID } from '../../../lib/components/app-layout/utils/use-drawers';
+import { awsuiPlugins, awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
+import { DrawerConfig } from '../../../lib/components/internal/plugins/controllers/drawers';
+import createWrapper from '../../../lib/components/test-utils/dom';
 import {
   describeEachAppLayout,
   findActiveDrawerLandmark,
   getActiveDrawerWidth,
   getGlobalDrawersTestUtils,
   testDrawer,
 } from './utils';
-import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
-import { TOOLS_DRAWER_ID } from '../../../lib/components/app-layout/utils/use-drawers';
-import { awsuiPlugins, awsuiPluginsInternal } from '../../../lib/components/internal/plugins/api';
-import { DrawerConfig } from '../../../lib/components/internal/plugins/controllers/drawers';
-import createWrapper from '../../../lib/components/test-utils/dom';
+
 import triggerStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
-import toolbarTriggerStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js';
 import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js';
+import toolbarTriggerStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js';
 import iconStyles from '../../../lib/components/icon/styles.selectors.js';
-import { Button } from '../../../lib/components';
 
 beforeEach(() => {
   awsuiPluginsInternal.appLayout.clearRegisteredDrawers();

diff --git a/src/app-layout/__tests__/skeleton.test.tsx b/src/app-layout/__tests__/skeleton.test.tsx
@@ -1,12 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint-disable simple-import-sort/imports */
 import React from 'react';
 
-import { describeEachAppLayout, renderComponent } from './utils';
 import AppLayout from '../../../lib/components/app-layout';
 import BreadcrumbGroup from '../../../lib/components/breadcrumb-group';
 import { getFunnelKeySelector } from '../../internal/analytics/selectors';
+import { describeEachAppLayout, renderComponent } from './utils';
 
 let widgetMockEnabled = false;
 function createWidgetizedComponentMock(Implementation: React.ComponentType, Skeleton: React.ComponentType) {

diff --git a/src/app-layout/__tests__/slots.test.tsx b/src/app-layout/__tests__/slots.test.tsx
@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React from 'react';
-import { describeEachAppLayout, renderComponent } from './utils';
+
 import AppLayout from '../../../lib/components/app-layout';
+import { describeEachAppLayout, renderComponent } from './utils';
 
 describeEachAppLayout(() => {
   describe.each([true, false])('stickyNotifications=%s', stickyNotifications => {

diff --git a/src/app-layout/__tests__/split-panel.test.tsx b/src/app-layout/__tests__/split-panel.test.tsx
@@ -1,17 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-/* eslint simple-import-sort/imports: 0 */
 import React, { useState } from 'react';
 import { screen } from '@testing-library/react';
+
 import AppLayout from '../../../lib/components/app-layout';
 import { AppLayoutProps } from '../../../lib/components/app-layout/interfaces';
-import SplitPanel from '../../../lib/components/split-panel';
 import { KeyCode } from '../../../lib/components/internal/keycode';
-import { useVisualRefresh } from '../../../lib/components/internal/hooks/use-visual-mode';
-import { describeEachAppLayout, renderComponent, splitPanelI18nStrings } from './utils';
-import applayoutTools from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
+import SplitPanel from '../../../lib/components/split-panel';
 import { AppLayoutWrapper } from '../../../lib/components/test-utils/dom';
+import { describeEachAppLayout, renderComponent, splitPanelI18nStrings } from './utils';
 
+import applayoutTools from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
 import testUtilStyles from '../../../lib/components/split-panel/test-classes/styles.selectors.js';
 
 const defaultSplitPanel = (
@@ -30,17 +29,6 @@ const fakeComputedStyle: Window['getComputedStyle'] = (...args) => {
   return result;
 };
 
-jest.mock('../../../lib/components/internal/hooks/use-visual-mode', () => ({
-  useVisualRefresh: jest.fn().mockReturnValue(false),
-}));
-
-jest.mock('@cloudscape-design/component-toolkit/internal', () => ({
-  ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
-  isMotionDisabled: jest.fn().mockReturnValue(true),
-  useDensityMode: jest.fn().mockReturnValue('comfortable'),
-  useReducedMotion: jest.fn().mockReturnValue(true),
-}));
-
 let isMocked = false;
 
 jest.mock('@cloudscape-design/component-toolkit', () => {
@@ -261,14 +249,7 @@ describeEachAppLayout({ sizes: ['desktop'] }, ({ theme }) => {
   });
 });
 
-describe('Visual refresh only features', () => {
-  beforeEach(() => {
-    (useVisualRefresh as jest.Mock).mockReturnValue(true);
-  });
-  afterEach(() => {
-    (useVisualRefresh as jest.Mock).mockReset();
-  });
-
+describeEachAppLayout({ themes: ['refresh'], sizes: ['desktop'] }, () => {
   function isDrawersBarDisplayed(wrapper: AppLayoutWrapper) {
     return !!wrapper.findByClassName(applayoutTools['has-tools-form']);
   }