feat: Add findItemById test-util to FlashbarWrapper

Author: Johannes Weber

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -37453,6 +37453,25 @@ wrapper.selectOptionByValue('option_1');
     },
     {
       "methods": [
+        {
+          "description": "Returns a flash item by its id.
+
+The id is matched against the \`id\` property of each item passed to the \`items\` property of the Flashbar component.",
+          "name": "findItemById",
+          "parameters": [
+            {
+              "flags": {
+                "isOptional": false,
+              },
+              "name": "id",
+              "typeName": "string",
+            },
+          ],
+          "returnType": {
+            "isNullable": true,
+            "name": "FlashWrapper",
+          },
+        },
         {
           "description": "Returns the individual flashes of this flashbar.
 
@@ -47284,6 +47303,25 @@ The mode selector is only rendered as a Select on narrow viewports. On wide view
     },
     {
       "methods": [
+        {
+          "description": "Returns a flash item by its id.
+
+The id is matched against the \`id\` property of each item passed to the \`items\` property of the Flashbar component.",
+          "name": "findItemById",
+          "parameters": [
+            {
+              "flags": {
+                "isOptional": false,
+              },
+              "name": "id",
+              "typeName": "string",
+            },
+          ],
+          "returnType": {
+            "isNullable": true,
+            "name": "FlashWrapper",
+          },
+        },
         {
           "description": "Returns the individual flashes of this flashbar.
 

src/flashbar/__integ__/find-item-by-id.test.ts

@@ -0,0 +1,34 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+const flashbar = createWrapper().findFlashbar();
+
+const setupTest = (testFn: (page: BasePageObject) => Promise<void>) =>
+  useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/flashbar/interactive');
+    await page.waitForVisible(flashbar.toSelector());
+    await testFn(page);
+  });
+
+describe('findItemById', () => {
+  test(
+    'finds a flash item by its id',
+    setupTest(async page => {
+      const item = flashbar.findItemById('0');
+      await expect(page.isExisting(item!.toSelector())).resolves.toBe(true);
+    })
+  );
+
+  test(
+    'returns null for non-existent id',
+    setupTest(async page => {
+      const item = flashbar.findItemById('nonexistent');
+      await expect(page.isExisting(item!.toSelector())).resolves.toBe(false);
+    })
+  );
+});

src/flashbar/__tests__/collapsible.test.tsx

@@ -620,6 +620,26 @@ describe('Collapsible Flashbar', () => {
     disableMotion(true);
     testFlashDismissal({ stackItems: true });
   });
+
+  test('findItemById', () => {
+    const wrapper = createFlashbarWrapper(
+      <Flashbar
+        stackItems={true}
+        items={[
+          { content: 'Flash 1', id: 'flash-1', type: 'success' },
+          { content: 'Flash 2', id: 'flash-2', type: 'error' },
+        ]}
+      />
+    );
+    expect(wrapper.findItemById('flash-1')).not.toBeNull();
+    expect(wrapper.findItemById('flash-2')).toBeNull();
+
+    findNotificationBar(wrapper)!.click();
+
+    expect(wrapper.findItemById('flash-1')).not.toBeNull();
+    expect(wrapper.findItemById('flash-2')).not.toBeNull();
+    expect(wrapper.findItemById('nonexistent')).toBeNull();
+  });
 });
 
 // Entire interactive element including the counter and the actual <button/> element

src/flashbar/__tests__/flashbar.test.tsx

@@ -443,4 +443,22 @@ describe('Flashbar component', () => {
     setAnimations(false);
     testFlashDismissal({ stackItems: false });
   });
+
+  test('findItemById', () => {
+    const wrapper = createFlashbarWrapper(
+      <Flashbar
+        items={[
+          { content: 'Flash 1', id: 'flash-1', type: 'success' },
+          { content: 'Flash 2', id: 'flash-2', type: 'error' },
+          { content: 'Flash 3', type: 'warning' },
+        ]}
+      />
+    );
+    expect(wrapper.findItemById('flash-1')).not.toBeNull();
+    expect(wrapper.findItemById('flash-1')!.findContent()!.getElement()).toHaveTextContent('Flash 1');
+    expect(wrapper.findItemById('flash-2')).not.toBeNull();
+    expect(wrapper.findItemById('flash-2')!.findContent()!.getElement()).toHaveTextContent('Flash 2');
+    expect(wrapper.findItemById('nonexistent')).toBeNull();
+    expect(wrapper.findItemById('flash-3')).toBeNull();
+  });
 });

src/test-utils/dom/flashbar/index.ts

@@ -18,6 +18,16 @@ export default class FlashbarWrapper extends ComponentWrapper {
     return this.findAllByClassName(styles['flash-list-item']).map(item => new FlashWrapper(item.getElement()));
   }
 
+  /**
+   * Returns a flash item by its id.
+   *
+   * The id is matched against the `id` property of each item passed to the `items` property of the Flashbar component.
+   */
+  findItemById(id: string): FlashWrapper | null {
+    const element = this.find(`[data-itemid="${CSS.escape(id)}"]`);
+    return element ? new FlashWrapper(element.getElement()) : null;
+  }
+
   /**
    * Returns the individual flashes of this flashbar given the item type.
    *