diff --git a/src/flashbar/__tests__/collapsible.test.tsx b/src/flashbar/__tests__/collapsible.test.tsx
index d9227b7bfb..db8f385307 100644
--- 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
index d7f283c851..494add2ae5 100644
--- 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(
+
+ );
+ 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(
+
+ );
+ 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(
+
+ );
+ const wrapper = createWrapper(container);
+ const flashItem = wrapper.findFlashbar()?.findItemByTestId('"flash-item-test-id"')!.getElement();
+
+ expect(flashItem).toHaveTextContent('flash item');
+ });
+
test('findItemsByType', () => {
const wrapper = createFlashbarWrapper(
{renderItem(item, item.id ?? index)}
diff --git a/src/test-utils/dom/flashbar/index.ts b/src/test-utils/dom/flashbar/index.ts
index dda96af880..5f33006703 100644
--- 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.
*/