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. */