refactor test implementation

cloudscape-design · Oct 11, 2024 · 936684e · 936684e
1 parent 87552c0
commit 936684e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/pages/app-layout/utils/content-blocks.tsx b/pages/app-layout/utils/content-blocks.tsx
@@ -7,7 +7,7 @@ import range from 'lodash/range';
 import BreadcrumbGroup from '~components/breadcrumb-group';
 import Button from '~components/button';
 import Container from '~components/container';
-import Flashbar from '~components/flashbar';
+import Flashbar, { FlashbarProps } from '~components/flashbar';
 import Header from '~components/header';
 import HelpPanel from '~components/help-panel';
 import SideNavigation from '~components/side-navigation';
@@ -66,23 +66,18 @@ export function Navigation() {
 
 export function Notifications() {
   const [visible, setVisible] = useState(true);
-  if (!visible) {
-    return null;
+  const notifications: Array<FlashbarProps.MessageDefinition> = [];
+  if (visible) {
+    notifications.push({
+      type: 'success',
+      header: 'Success message',
+      statusIconAriaLabel: 'success',
+      dismissLabel: 'Dismiss notification',
+      dismissible: true,
+      onDismiss: () => setVisible(false),
+    });
   }
-  return (
-    <Flashbar
-      items={[
-        {
-          type: 'success',
-          header: 'Success message',
-          statusIconAriaLabel: 'success',
-          dismissLabel: 'Dismiss notification',
-          dismissible: true,
-          onDismiss: () => setVisible(false),
-        },
-      ]}
-    />
-  );
+  return <Flashbar items={notifications} />;
 }
 
 export function Footer({ legacyConsoleNav }: { legacyConsoleNav: boolean }) {

diff --git a/pages/app-layout/with-notifications.page.tsx b/pages/app-layout/with-notifications.page.tsx
@@ -19,7 +19,7 @@ export default function () {
         // the case when `notifications` slot is not falsy, but eventually it renders no HTML
         notifications={<Notifications />}
         content={
-          <div className={styles.highlightBorder}>
+          <div data-testid="content-root" className={styles.highlightBorder}>
             <h1>Distribution details</h1>
             <p>Some information</p>
           </div>

diff --git a/src/app-layout/__integ__/awsui-applayout.test.ts b/src/app-layout/__integ__/awsui-applayout.test.ts
@@ -167,11 +167,18 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
   test(
     'does not render notifications slot when it is empty',
     setupTest({ pageName: 'with-notifications' }, async page => {
-      const { height: originalHeight } = await page.getBoundingBox(wrapper.findNotifications().toSelector());
-      expect(originalHeight).toBeGreaterThan(0);
       await page.click(wrapper.findNotifications().findFlashbar().findItems().get(1).findDismissButton().toSelector());
-      const { height: newHeight } = await page.getBoundingBox(wrapper.findNotifications().toSelector());
-      expect(newHeight).toEqual(0);
+      await expect(page.isExisting(wrapper.findNotifications().findFlashbar().toSelector())).resolves.toBe(true);
+      await expect(
+        page.getElementsCount(wrapper.findNotifications().findFlashbar().findItems().toSelector())
+      ).resolves.toBe(0);
+      const { top: contentTop } = await page.getBoundingBox('[data-testid="content-root"]');
+      const expectedOffset = {
+        classic: 61,
+        refresh: 57,
+        'refresh-toolbar': 99,
+      }[theme];
+      expect(contentTop).toEqual(expectedOffset);
     })
   );
 });