fix integration tests

cloudscape-design · Oct 22, 2024 · 1e78783 · 1e78783
1 parent 5d7b8c6
commit 1e78783
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 17 deletions.
diff --git a/pages/app-layout/multi-layout-iframe.page.tsx b/pages/app-layout/multi-layout-iframe.page.tsx
@@ -17,6 +17,7 @@ import * as toolsContent from './utils/tools-content';
 function InnerApp() {
   return (
     <AppLayout
+      {...{ __disableRuntimeDrawers: true }}
       data-testid="secondary-layout"
       ariaLabels={labels}
       breadcrumbs={<Breadcrumbs />}

diff --git a/pages/app-layout/multi-layout-simple.page.tsx b/pages/app-layout/multi-layout-simple.page.tsx
@@ -23,6 +23,7 @@ export default function () {
         disableContentPaddings={true}
         content={
           <AppLayout
+            {...{ __disableRuntimeDrawers: true }}
             data-testid="secondary-layout"
             ariaLabels={labels}
             breadcrumbs={<Breadcrumbs />}

diff --git a/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx b/pages/app-layout/multi-layout-with-hidden-instances-iframe.page.tsx
@@ -17,6 +17,7 @@ import * as toolsContent from './utils/tools-content';
 const SecondaryLayout = () => {
   return (
     <AppLayout
+      {...{ __disableRuntimeDrawers: true }}
       data-testid="secondary-layout"
       ariaLabels={labels}
       breadcrumbs={<Breadcrumbs />}
@@ -45,7 +46,7 @@ const NAV_ITEMS: Array<SideNavigationProps.Link> = [
 
 export default function () {
   const [activeHref, setActiveHref] = useState('page1');
-  const openPagesHistory = useRef<Set<string>>(new Set());
+  const openPagesHistory = useRef<Set<string>>(new Set([activeHref]));
 
   return (
     <ScreenshotArea gutters={false}>

diff --git a/pages/app-layout/multi-layout-with-hidden-instances.page.tsx b/pages/app-layout/multi-layout-with-hidden-instances.page.tsx
@@ -11,11 +11,11 @@ import SpaceBetween from '~components/space-between';
 import ScreenshotArea from '../utils/screenshot-area';
 import { Breadcrumbs, Tools } from './utils/content-blocks';
 import labels from './utils/labels';
-import * as toolsContent from './utils/tools-content';
 
-const SecondaryLayout: React.FC = ({ children }) => {
+const SecondaryLayout: React.FC<{ name: string }> = ({ name }) => {
   return (
     <AppLayout
+      {...{ __disableRuntimeDrawers: true }}
       data-testid="secondary-layout"
       ariaLabels={labels}
       breadcrumbs={<Breadcrumbs />}
@@ -30,10 +30,10 @@ const SecondaryLayout: React.FC = ({ children }) => {
             External link
           </Link>
 
-          {children}
+          <div>Page content: {name}</div>
         </SpaceBetween>
       }
-      tools={<Tools>{toolsContent.long}</Tools>}
+      tools={<Tools>Tools content: {name}</Tools>}
     />
   );
 };
@@ -46,7 +46,7 @@ const NAV_ITEMS: Array<SideNavigationProps.Link> = [
 
 export default function () {
   const [activeHref, setActiveHref] = useState('page1');
-  const openPagesHistory = useRef<Set<string>>(new Set());
+  const openPagesHistory = useRef<Set<string>>(new Set([activeHref]));
 
   return (
     <ScreenshotArea gutters={false}>
@@ -72,10 +72,8 @@ export default function () {
         content={
           <>
             {NAV_ITEMS.filter(item => item.href === activeHref || openPagesHistory.current.has(item.href)).map(item => (
-              <div key={item.href} style={{ display: item.href !== activeHref ? 'none' : '' }}>
-                <SecondaryLayout>
-                  <div>Page content: {item.href}</div>
-                </SecondaryLayout>
+              <div key={item.href} id={item.href} style={{ display: item.href !== activeHref ? 'none' : '' }}>
+                <SecondaryLayout name={item.href} />
               </div>
             ))}
           </>

diff --git a/src/app-layout/__integ__/multi-app-layout-navigation.test.ts b/src/app-layout/__integ__/multi-app-layout-navigation.test.ts
@@ -9,14 +9,12 @@ import { getUrlParams } from './utils';
 const theme = 'refresh-toolbar';
 
 class PageObject extends BasePageObject {
-  findNavItem(href: string) {
-    return this.browser.$(`[href="${href}"]`);
+  clickHref(href: string) {
+    return this.click(`[href="${href}"]`);
   }
 
   isToolsToggleActive() {
-    return this.browser
-      .$(`${createWrapper().findAppLayout().findToolsToggle().toSelector()}[aria-expanded="true"]`)
-      .isExisting();
+    return this.isExisting(`${createWrapper().findAppLayout().findToolsToggle().toSelector()}[aria-expanded="true"]`);
   }
 }
 
@@ -42,13 +40,13 @@ describe('Multi app layout navigation', () => {
           await expect(page.isClickable(secondaryLayout.findTools().toSelector())).resolves.toEqual(true);
         });
 
-        await page.findNavItem('page2').click();
+        await page.clickHref('page2');
         await expect(page.isToolsToggleActive()).resolves.toBe(false);
         await page.runInsideIframe('#page2', !!iframe, async () => {
           await expect(page.isClickable(secondaryLayout.findTools().toSelector())).resolves.toEqual(false);
         });
 
-        await page.findNavItem('page1').click();
+        await page.clickHref('page1');
         await expect(page.isToolsToggleActive()).resolves.toBe(true);
         await page.runInsideIframe('#page1', !!iframe, async () => {
           await expect(page.isClickable(secondaryLayout.findTools().toSelector())).resolves.toEqual(true);