cloudscape-design · georgylobko · Apr 1, 2025 · Apr 14, 2025 · Apr 15, 2025 · Apr 15, 2025
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import AppLayout from '~components/app-layout';
 import BreadcrumbGroup from '~components/breadcrumb-group';
@@ -18,6 +18,14 @@ import labels from './utils/labels';
 
 function createView(name: string) {
   return function View() {
+    const [count, setCount] = useState(0);
+
+    useEffect(() => {
+      console.log('mount ', name);
+
+      return () => console.log('unmount ', name);
+    }, []);
+
     return (
       <AppLayout
         data-testid="secondary-layout"
@@ -45,6 +53,9 @@ function createView(name: string) {
             </Link>
 
             <div>Page content: {name}</div>
+
+            <button onClick={() => setCount(count + 1)}>increment count</button>
+            {count}
           </SpaceBetween>
         }
         tools={<Tools>Tools content: {name}</Tools>}

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import {
   AppLayout,
@@ -31,6 +31,18 @@ type DemoContext = React.Context<
   }>
 >;
 
+const CustomContent = () => {
+  useEffect(() => {
+    console.log('mount');
+
+    return () => {
+      console.log('unmount');
+    };
+  }, []);
+
+  return <div>Custom content</div>;
+};
+
 export default function WithDrawers() {
   const [activeDrawerId, setActiveDrawerId] = useState<string | null>(null);
   const [helpPathSlug, setHelpPathSlug] = useState<string>('default');
@@ -131,6 +143,7 @@ export default function WithDrawers() {
             }
           >
             Content
+            <CustomContent />
           </Header>
           <Containers />
         </ContentLayout>

@@ -32,35 +32,37 @@ export function IframeWrapper({ id, AppComponent }: { id: string; AppComponent:
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const container = ref.current;
-    if (!container) {
-      return;
-    }
-    const iframeEl = container.ownerDocument.createElement('iframe');
-    iframeEl.className = styles['full-screen'];
-    iframeEl.id = id;
-    iframeEl.title = id;
-    container.appendChild(iframeEl);
+    setTimeout(() => {
+      const container = ref.current;
+      if (!container) {
+        return;
+      }
+      const iframeEl = container.ownerDocument.createElement('iframe');
+      iframeEl.className = styles['full-screen'];
+      iframeEl.id = id;
+      iframeEl.title = id;
+      container.appendChild(iframeEl);
 
-    const iframeDocument = iframeEl.contentDocument!;
-    // Prevent iframe document instance from reload
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=543435
-    iframeDocument.open();
-    // set html5 doctype
-    iframeDocument.writeln('<!DOCTYPE html>');
-    iframeDocument.close();
+      const iframeDocument = iframeEl.contentDocument!;
+      // Prevent iframe document instance from reload
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=543435
+      iframeDocument.open();
+      // set html5 doctype
+      iframeDocument.writeln('<!DOCTYPE html>');
+      iframeDocument.close();
 
-    const innerAppRoot = iframeDocument.createElement('div');
-    iframeDocument.body.appendChild(innerAppRoot);
-    copyStyles(document, iframeDocument);
-    iframeDocument.dir = document.dir;
-    const syncClassesCleanup = syncClasses(document.body, iframeDocument.body);
-    ReactDOM.render(<AppComponent />, innerAppRoot);
-    return () => {
-      syncClassesCleanup();
-      ReactDOM.unmountComponentAtNode(innerAppRoot);
-      container.removeChild(iframeEl);
-    };
+      const innerAppRoot = iframeDocument.createElement('div');
+      iframeDocument.body.appendChild(innerAppRoot);
+      copyStyles(document, iframeDocument);
+      iframeDocument.dir = document.dir;
+      const syncClassesCleanup = syncClasses(document.body, iframeDocument.body);
+      ReactDOM.render(<AppComponent />, innerAppRoot);
+      return () => {
+        syncClassesCleanup();
+        ReactDOM.unmountComponentAtNode(innerAppRoot);
+        container.removeChild(iframeEl);
+      };
+    }, 50);
   }, [id, AppComponent]);
 
   return <div ref={ref}></div>;

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { act, render } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 
 import {
   activateAnalyticsMetadata,
@@ -125,7 +125,7 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
     });
   });
   describe('with tools', () => {
-    test('closed', () => {
+    test('closed', async () => {
       const wrapper = renderToolbar({
         tools: <span>tools</span>,
         toolsOpen: false,
@@ -134,6 +134,9 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
           toolsToggle: 'toggle tools',
         },
       });
+      await waitFor(() => {
+        expect(wrapper.findToolsToggle()).toBeTruthy();
+      });
       const toolsTrigger = wrapper.findToolsToggle().getElement();
       validateComponentNameAndLabels(toolsTrigger, {});
       expect(getGeneratedAnalyticsMetadata(toolsTrigger)).toEqual({
@@ -144,7 +147,7 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
         ...getMetadata(),
       });
     });
-    test('open', () => {
+    test('open', async () => {
       const wrapper = renderToolbar({
         tools: <span>tools</span>,
         toolsOpen: true,
@@ -154,6 +157,9 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
           toolsClose: 'close tools',
         },
       });
+      await waitFor(() => {
+        expect(wrapper.findToolsToggle()).toBeTruthy();
+      });
       const toolsTrigger = wrapper.findToolsToggle().getElement();
       validateComponentNameAndLabels(toolsTrigger, {});
       expect(getGeneratedAnalyticsMetadata(toolsTrigger)).toEqual({
@@ -174,7 +180,7 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
   });
 
   describe('with local drawer', () => {
-    test('closed', () => {
+    test('closed', async () => {
       const wrapper = renderToolbar({
         drawers: [
           {
@@ -191,6 +197,9 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
           },
         ],
       });
+      await waitFor(() => {
+        expect(wrapper.findDrawerTriggerById('test-drawer')).toBeTruthy();
+      });
       const drawerTrigger = wrapper.findDrawerTriggerById('test-drawer')!.getElement();
       validateComponentNameAndLabels(drawerTrigger, {});
       expect(getGeneratedAnalyticsMetadata(drawerTrigger)).toEqual({
@@ -201,7 +210,7 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
         ...getMetadata(),
       });
     });
-    test('open', () => {
+    test('open', async () => {
       const wrapper = renderToolbar({
         drawers: [
           {
@@ -232,6 +241,9 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
         activeDrawerId: 'test-drawer',
         onDrawerChange: () => {},
       });
+      await waitFor(() => {
+        expect(wrapper.findDrawerTriggerById('test-drawer')).toBeTruthy();
+      });
       const drawerTrigger = wrapper.findDrawerTriggerById('test-drawer')!.getElement();
       validateComponentNameAndLabels(drawerTrigger, {});
       expect(getGeneratedAnalyticsMetadata(drawerTrigger)).toEqual({
@@ -319,7 +331,7 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
   });
 
   describe('with split panel', () => {
-    test.each(['open', 'close'])('%s', action => {
+    test.each(['open', 'close'])('%s', async action => {
       const wrapper = renderToolbar({
         splitPanel: (
           <SplitPanel i18nStrings={{ openButtonAriaLabel: 'open split panel' }} header="Split panel header">
@@ -329,6 +341,9 @@ describe('AppLayoutToolbar renders correct analytics metadata', () => {
         splitPanelOpen: action !== 'open',
         onSplitPanelToggle: () => {},
       });
+      await waitFor(() => {
+        expect(wrapper.findSplitPanelOpenButton()).toBeTruthy();
+      });
       const splitPanelTrigger = wrapper.findSplitPanelOpenButton()!.getElement();
       validateComponentNameAndLabels(splitPanelTrigger, {});
       expect(getGeneratedAnalyticsMetadata(splitPanelTrigger)).toEqual({