feat: Adds test id to flashbar dom selector

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

Hide file tree

Showing 6 changed files with 162 additions and 0 deletions.
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/flash.tsx b/src/flashbar/flash.tsx
@@ -163,6 +163,7 @@ export const Flash = React.forwardRef(
         role={ariaRole}
         aria-live={ariaRole ? 'off' : undefined}
         data-itemid={id}
+        data-testid={props.testId}
         className={clsx(
           styles.flash,
           styles[`flash-type-${effectiveType}`],

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

diff --git a/src/flashbar/non-collapsible-flashbar.tsx b/src/flashbar/non-collapsible-flashbar.tsx
@@ -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 flashbar 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 flashbar 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.
    */