chore: Add more tests on app layout state management (#3722)

Author: just-boris

src/app-layout/__tests__/state.test.tsx

@@ -0,0 +1,53 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { act } from '@testing-library/react';
+
+import AppLayout from '../../../lib/components/app-layout';
+import { forceMobileModeSymbol } from '../../../lib/components/internal/hooks/use-mobile';
+import { describeEachAppLayout, renderComponent } from './utils';
+
+describeEachAppLayout({ themes: ['refresh-toolbar'] }, () => {
+  test('content dom reference is preserved when changing state', () => {
+    const refSpy = jest.fn();
+    const { rerender, wrapper } = renderComponent(
+      <AppLayout navigation="testing" content={<div ref={refSpy}>content</div>} />
+    );
+
+    expect(refSpy).toHaveBeenCalledTimes(1);
+    expect(refSpy).toHaveBeenCalledWith(expect.any(HTMLElement));
+    expect(wrapper.findContentRegion().getElement()).toHaveTextContent('content');
+
+    refSpy.mockClear();
+    rerender(<AppLayout navigationHide={true} navigation="testing" content={<div ref={refSpy}>content</div>} />);
+    expect(refSpy).toHaveBeenCalledTimes(0);
+    expect(wrapper.findContentRegion().getElement()).toHaveTextContent('content');
+
+    rerender(<></>);
+    expect(refSpy).toHaveBeenCalledTimes(1);
+    expect(refSpy).toHaveBeenCalledWith(null);
+  });
+
+  // does not work without this fix: https://github.com/cloudscape-design/component-toolkit/pull/151
+  test.skip('content dom reference is preserved when changing switching between desktop and mobile', () => {
+    const refSpy = jest.fn();
+    renderComponent(<AppLayout content={<div ref={refSpy}>content</div>} />);
+
+    expect(refSpy).toHaveBeenCalledTimes(1);
+    expect(refSpy).toHaveBeenCalledWith(expect.any(HTMLElement));
+
+    refSpy.mockClear();
+    const globalWithFlags = globalThis as any;
+    globalWithFlags[forceMobileModeSymbol] = !globalWithFlags[forceMobileModeSymbol];
+    act(() => {
+      window.dispatchEvent(new CustomEvent('resize'));
+    });
+    expect(refSpy).toHaveBeenCalledTimes(0);
+
+    globalWithFlags[forceMobileModeSymbol] = !globalWithFlags[forceMobileModeSymbol];
+    act(() => {
+      window.dispatchEvent(new CustomEvent('resize'));
+    });
+    expect(refSpy).toHaveBeenCalledTimes(0);
+  });
+});

src/app-layout/__tests__/utils.tsx

@@ -10,9 +10,9 @@ import { ComponentWrapper } from '@cloudscape-design/test-utils-core/dom';
 
 import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 import customCssProps from '../../../lib/components/internal/generated/custom-css-properties';
+import { forceMobileModeSymbol } from '../../../lib/components/internal/hooks/use-mobile';
 import { SplitPanelProps } from '../../../lib/components/split-panel';
 import createWrapper, { AppLayoutWrapper, ElementWrapper } from '../../../lib/components/test-utils/dom';
-import { forceMobileModeSymbol } from '../../internal/hooks/use-mobile';
 
 import testutilStyles from '../../../lib/components/app-layout/test-classes/styles.css.js';
 import visualRefreshStyles from '../../../lib/components/app-layout/visual-refresh/styles.css.js';