add tests for loader mock

Author: just-boris

src/app-layout/__tests__/utils.tsx

@@ -59,12 +59,12 @@ export function describeEachAppLayout(
         beforeEach(() => {
           globalWithFlags[forceMobileModeSymbol] = size === 'mobile';
           globalWithFlags[Symbol.for('awsui-visual-refresh-flag')] = () => theme !== 'classic';
-          setGlobalFlag('appLayoutWidget', theme === 'refresh-toolbar');
+          setGlobalFlag('appLayoutToolbar', theme === 'refresh-toolbar');
         });
         afterEach(() => {
           delete globalWithFlags[forceMobileModeSymbol];
           delete globalWithFlags[Symbol.for('awsui-visual-refresh-flag')];
-          setGlobalFlag('appLayoutWidget', undefined);
+          setGlobalFlag('appLayoutToolbar', undefined);
           clearVisualRefreshState();
         });
         test('mocks applied correctly', () => {

src/app-layout/__tests__/widget-loader-mock.test.tsx

@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+
+import { setGlobalFlag } from '@cloudscape-design/component-toolkit/internal/testing';
+
+import AppLayout from '../../../lib/components/app-layout';
+import { describeEachAppLayout, renderComponent } from './utils';
+
+jest.mock('../../../lib/components/internal/widgets/loader-mock', () => {
+  // set this flag before the module is instantiated
+  (window as any)[Symbol.for('awsui-custom-flags')] = { appLayoutDelayedWidget: true };
+  return jest.requireActual('../../../lib/components/internal/widgets/loader-mock');
+});
+
+describeEachAppLayout({ themes: ['refresh-toolbar'], sizes: ['desktop'] }, () => {
+  test('renders instantly when widget is not activated', () => {
+    const { wrapper } = renderComponent(<AppLayout />);
+    expect(wrapper.findNavigation()).toBeTruthy();
+    expect(wrapper.findTools()).toBeTruthy();
+  });
+
+  describe('when widget is active', () => {
+    beforeEach(() => {
+      setGlobalFlag('appLayoutWidget', true);
+    });
+
+    afterEach(() => {
+      setGlobalFlag('appLayoutWidget', undefined);
+    });
+
+    test('renders app layout with a delay', async () => {
+      const { wrapper } = renderComponent(<AppLayout />);
+      expect(wrapper.findNavigation()).toBeFalsy();
+      expect(wrapper.findTools()).toBeFalsy();
+
+      await waitFor(() => {
+        expect(wrapper.findNavigation()).toBeTruthy();
+        expect(wrapper.findTools()).toBeTruthy();
+      });
+    });
+  });
+});