feat: Adds test id to flashbar dom selector

cloudscape-design · Nov 8, 2024 · 2e88cbb · 2e88cbb
1 parent 7a5e18d
commit 2e88cbb
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 2 deletions.
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`test-utils selectors 1`] = `
   ],
   "anchor-navigation": [
     "awsui_anchor-item--active_17oho",
+    "awsui_anchor-item_17oho",
     "awsui_anchor-link-info_17oho",
     "awsui_anchor-link-text_17oho",
     "awsui_anchor-link_17oho",

diff --git a/src/flashbar/__tests__/collapsible.test.tsx b/src/flashbar/__tests__/collapsible.test.tsx
@@ -151,6 +151,85 @@ describe('Collapsible Flashbar', () => {
       });
     });
 
+    test('assigns data-testid to flash items', () => {
+      const wrapper = renderFlashbar({
+        items: [
+          {
+            testId: 'flash-item-1',
+            content: 'first flash item',
+          },
+          {
+            testId: 'flash-item-2',
+            content: 'second flash item',
+          },
+        ],
+      });
+      findNotificationBar(wrapper)!.click();
+      const flashbarItemsTestIds = wrapper
+        .findItems()
+        .map(flashbar => flashbar.getElement()!.getAttribute('data-testid'));
+
+      expect(flashbarItemsTestIds).toEqual(['flash-item-1', 'flash-item-2']);
+    });
+
+    test('findItemByTestId', () => {
+      const wrapper = renderFlashbar({
+        items: [
+          {
+            testId: 'flash-item-1',
+            content: 'first flash item',
+          },
+          {
+            testId: 'flash-item-2',
+            content: 'second flash item',
+          },
+        ],
+      });
+      findNotificationBar(wrapper)!.click();
+      const secondFlashItemFromTestId = wrapper.findItemByTestId('flash-item-2')!.getElement();
+
+      expect(secondFlashItemFromTestId).toHaveTextContent('second flash item');
+    });
+
+    test('findItemByTestId returns the item even if the test ID contains double quotes', () => {
+      const wrapper = renderFlashbar({
+        items: [
+          {
+            testId: '"flash-item-1"',
+            content: 'first flash item',
+          },
+          {
+            testId: '"flash-item-2"',
+            content: 'second flash item',
+          },
+        ],
+      });
+      findNotificationBar(wrapper)!.click();
+      const flashItem = wrapper.findItemByTestId('"flash-item-1"')!.getElement();
+
+      expect(flashItem).toHaveTextContent('first flash item');
+    });
+
+    test('findItemByTestId doesn not return the next items if the collapsible is not expanded', () => {
+      const wrapper = renderFlashbar({
+        items: [
+          {
+            testId: 'flash-item-1',
+            content: 'first flash item',
+          },
+          {
+            testId: 'flash-item-2',
+            content: 'second flash item',
+          },
+        ],
+      });
+      const fistFlashItem = wrapper.findItemByTestId('flash-item-1');
+      const secondFlashItem = wrapper.findItemByTestId('flash-item-2');
+
+      expect(fistFlashItem).toBeTruthy();
+      expect(secondFlashItem).not.toBeTruthy();
+    });
+
     test('findItemsByType', () => {
       {
         const wrapper = createFlashbarWrapper(

diff --git a/src/flashbar/__tests__/flashbar.test.tsx b/src/flashbar/__tests__/flashbar.test.tsx
@@ -196,6 +196,67 @@ describe('Flashbar component', () => {
       }
     });
 
+    test('assigns data-testid to flash items', () => {
+      const { container } = reactRender(
+        <Flashbar
+          items={[
+            {
+              testId: 'flash-item-1',
+              content: 'first flash item',
+            },
+            {
+              testId: 'flash-item-2',
+              content: 'second flash item',
+            },
+          ]}
+        />
+      );
+      const wrapper = createWrapper(container);
+      const flashbarItemsTestIds = wrapper
+        .findFlashbar()!
+        .findItems()
+        .map(flashbar => flashbar.getElement()!.getAttribute('data-testid'));
+
+      expect(flashbarItemsTestIds).toEqual(['flash-item-1', 'flash-item-2']);
+    });
+
+    test('findItemByTestId', () => {
+      const { container } = reactRender(
+        <Flashbar
+          items={[
+            {
+              testId: 'flash-item-1',
+              content: 'first flash item',
+            },
+            {
+              testId: 'flash-item-2',
+              content: 'second flash item',
+            },
+          ]}
+        />
+      );
+      const wrapper = createWrapper(container);
+      const secondFlashItemFromTestId = wrapper.findFlashbar()!.findItemByTestId('flash-item-2')!.getElement();
+      expect(secondFlashItemFromTestId).toHaveTextContent('second flash item');
+    });
+
+    test('findItemByTestId returns the item even if the test ID contains double quotes', () => {
+      const { container } = reactRender(
+        <Flashbar
+          items={[
+            {
+              testId: '"flash-item-test-id"',
+              content: 'flash item',
+            },
+          ]}
+        />
+      );
+      const wrapper = createWrapper(container);
+      const flashItem = wrapper.findFlashbar()?.findItemByTestId('"flash-item-test-id"')!.getElement();
+
+      expect(flashItem).toHaveTextContent('flash item');
+    });
+
     test('findItemsByType', () => {
       const wrapper = createFlashbarWrapper(
         <Flashbar

diff --git a/src/flashbar/collapsible-flashbar.tsx b/src/flashbar/collapsible-flashbar.tsx
@@ -250,6 +250,7 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro
             {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (
               <li
                 aria-hidden={!showInnerContent(item)}
+                data-testid={item.testId}
                 className={
                   showInnerContent(item)
                     ? clsx(

diff --git a/src/flashbar/flash.tsx b/src/flashbar/flash.tsx
@@ -72,7 +72,7 @@ export const focusFlashById = throttle(
   { trailing: false }
 );
 
-export interface FlashProps extends FlashbarProps.MessageDefinition {
+export interface FlashProps extends Omit<FlashbarProps.MessageDefinition, 'testId'> {
   className: string;
   transitionState?: string;
   i18nStrings?: FlashbarProps.I18nStrings;

diff --git a/src/flashbar/interfaces.ts b/src/flashbar/interfaces.ts
@@ -20,6 +20,13 @@ export namespace FlashbarProps {
     buttonText?: ButtonProps['children'];
     onButtonClick?: ButtonProps['onClick'];
     onDismiss?: ButtonProps['onClick'];
+
+    /**
+     * Test ID of the flash list item.
+     * Assigns this value to the `data-testid` attribute of the flash list item.
+     * Flash component is the direct child of the flash list item.
+     */
+    testId?: string;
   }
 
   export interface I18nStrings {

diff --git a/src/flashbar/non-collapsible-flashbar.tsx b/src/flashbar/non-collapsible-flashbar.tsx
@@ -62,7 +62,7 @@ export default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProp
             in={true}
           >
             {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (
-              <li className={styles['flash-list-item']}>
+              <li className={styles['flash-list-item']} data-testid={item.testId}>
                 {renderItem(item, item.id ?? index, transitionRootElement, state)}
               </li>
             )}
@@ -91,6 +91,7 @@ export default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProp
           <li
             key={item.id ?? index}
             className={styles['flash-list-item']}
+            data-testid={item.testId}
             {...getAnalyticsMetadataAttribute(getItemAnalyticsMetadata(index + 1, item.type || 'info', item.id))}
           >
             {renderItem(item, item.id ?? index)}

diff --git a/src/test-utils/dom/flashbar/index.ts b/src/test-utils/dom/flashbar/index.ts
@@ -31,6 +31,20 @@ export default class FlashbarWrapper extends ComponentWrapper {
     );
   }
 
+  /**
+   * Returns the wrapper of the first flash list item that matches the specified test ID.
+   * If the items are stacked, the hidden items will not be returned.
+   *
+   * Looks for the `data-testid` attribute that is assigned via `items` prop.
+   * If no matching flash list item is found, returns `null`.
+   *
+   * @param {string} testId
+   * @returns {FlashbarWrapper | null}
+   */
+  findItemByTestId(testId: string): FlashWrapper | null {
+    return this.findComponent(`.${styles['flash-list-item']}[data-testid="${CSS.escape(testId)}"]`, FlashWrapper);
+  }
+
   /**
    * Returns the toggle button that expands and collapses stacked notifications.
    */