diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 9e92f77915..6a1fa2083d 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -37439,6 +37439,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.
@@ -47270,6 +47289,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.
diff --git a/src/flashbar/__tests__/collapsible.test.tsx b/src/flashbar/__tests__/collapsible.test.tsx
index a6fb5f6372..241dbecd48 100644
--- a/src/flashbar/__tests__/collapsible.test.tsx
+++ b/src/flashbar/__tests__/collapsible.test.tsx
@@ -620,6 +620,25 @@ describe('Collapsible Flashbar', () => {
disableMotion(true);
testFlashDismissal({ stackItems: true });
});
+
+ test('findItemById', () => {
+ const wrapper = createFlashbarWrapper(
+
+ );
+ 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();
+ });
});
// Entire interactive element including the counter and the actual element
diff --git a/src/flashbar/__tests__/flashbar.test.tsx b/src/flashbar/__tests__/flashbar.test.tsx
index d8351bc74b..d8da507f83 100644
--- a/src/flashbar/__tests__/flashbar.test.tsx
+++ b/src/flashbar/__tests__/flashbar.test.tsx
@@ -445,6 +445,21 @@ describe('Flashbar component', () => {
testFlashDismissal({ stackItems: false });
});
+ test('findItemById', () => {
+ const wrapper = createFlashbarWrapper(
+
+ );
+ expect(wrapper.findItemById('flash-1')!.findContent()!.getElement()).toHaveTextContent('Flash 1');
+ expect(wrapper.findItemById('flash-2')!.findContent()!.getElement()).toHaveTextContent('Flash 2');
+ expect(wrapper.findItemById('flash-3')).toBeNull();
+ });
+
describe('rapid item replacement with animations', () => {
beforeEach(() => {
jest.useFakeTimers();
diff --git a/src/test-utils/dom/flashbar/index.ts b/src/test-utils/dom/flashbar/index.ts
index dda96af880..04b9e242b8 100644
--- a/src/test-utils/dom/flashbar/index.ts
+++ b/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.
*