diff --git a/src/components/Header/HeaderTests/ToolbarToggle.test.js b/src/components/Header/HeaderTests/ToolbarToggle.test.js index 02c6a71ce..c2e47d903 100644 --- a/src/components/Header/HeaderTests/ToolbarToggle.test.js +++ b/src/components/Header/HeaderTests/ToolbarToggle.test.js @@ -29,39 +29,39 @@ describe('ToolbarToggle', () => { clickSpy.mockReset(); }); - it('should render correctly', () => { + it('should render correctly', async () => { const { container } = render(); const toggleButton = container.querySelector('#foo'); expect(toggleButton).toBeTruthy(); - act(() => { + await act(async () => { fireEvent.click(toggleButton); }); expect(container.querySelector('div')).toMatchSnapshot(); }); - it('should open/close menu correctly', () => { + it('should open/close menu correctly', async () => { const { container } = render(); const toggleButton = container.querySelector('#foo'); expect(toggleButton).toBeTruthy(); - act(() => { + await act(async () => { fireEvent.click(toggleButton); }); expect(container.querySelectorAll('.pf-v5-c-menu__list-item')).toHaveLength(2); - act(() => { + await act(async () => { fireEvent.click(toggleButton); }); expect(container.querySelectorAll('.pf-v5-c-menu__list-item')).toHaveLength(0); }); - it('should call onClick menu item callback', () => { + it('should call onClick menu item callback', async () => { const { container } = render(); const toggleButton = container.querySelector('#foo'); - act(() => { + await act(async () => { fireEvent.click(toggleButton); }); const actionButton = container.querySelector('button.pf-v5-c-menu__item'); expect(actionButton).toBeTruthy(); - act(() => { + await act(async () => { fireEvent.click(actionButton); }); expect(clickSpy).toHaveBeenCalled(); diff --git a/src/components/Header/HeaderTests/__snapshots__/ToolbarToggle.test.js.snap b/src/components/Header/HeaderTests/__snapshots__/ToolbarToggle.test.js.snap index 268169d50..ec837b4cb 100644 --- a/src/components/Header/HeaderTests/__snapshots__/ToolbarToggle.test.js.snap +++ b/src/components/Header/HeaderTests/__snapshots__/ToolbarToggle.test.js.snap @@ -6,7 +6,10 @@ exports[`ToolbarToggle should render correctly 1`] = ` data-ouia-component-id="OUIA-Generated-Dropdown-1" data-ouia-component-type="PF5/Dropdown" data-ouia-safe="true" - style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px;" + data-popper-escaped="true" + data-popper-placement="bottom-end" + data-popper-reference-hidden="true" + style="position: absolute; left: 0px; top: 0px; z-index: 9999; min-width: 0px; transform: translate(0px, 0px);" >
{ + return render( + + + + + + + + ); +}; + +describe('Drawer panel functionality', () => { + test('Renders the drawer panel empty successfully. ', () => { + const store = mockStore(stateWithoutNotifications); + + const renderedResult = renderComponent(store); + expect(renderedResult.getByText('Notifications')).toBeInTheDocument(); + }); + + test('Renders notification drawer with notifications successfully', () => { + const store = mockStore(stateWithNotifications); + + const renderedResult = renderComponent(store); + expect(renderedResult.getByText('Test Notification 1')).toBeInTheDocument(); + }); + + test('Marking notification as read successfully', async () => { + const store = mockStore(stateWithNotifications); + + const renderedResult = renderComponent(store); + + const checkbox = renderedResult.getAllByRole('checkbox'); + + await act(async () => { + fireEvent.click(checkbox[0]); + }); + + const actions = store.getActions(); + + await waitFor(() => { + expect(actions).toContainEqual(markNotificationAsRead('1')); + }); + }); + + test('Mark notification as unread successfully', async () => { + const store = mockStore(stateWithReadNotifications); + + const renderedResult = renderComponent(store); + + const checkbox = renderedResult.getAllByRole('checkbox'); + + await act(async () => { + fireEvent.click(checkbox[0]); + }); + + const actions = store.getActions(); + + await waitFor(() => { + expect(actions).toContainEqual(markNotificationAsUnread('1')); + }); + }); + + test('Mark all notifications as read successfully', async () => { + const store = mockStore(stateWithNotifications); + + const renderedResult = renderComponent(store); + + const actionMenuButton = renderedResult.getByRole('button', { name: /Notifications actions dropdown/i }); + + await act(async () => { + fireEvent.click(actionMenuButton); + }); + + const actionDropdownItems = await renderedResult.getAllByRole('menuitem'); + + await act(async () => { + fireEvent.click(actionDropdownItems[0]); + }); + + const actions = store.getActions(); + + await waitFor(() => { + expect(actions).toContainEqual(markAllNotificationsAsRead()); + }); + }); + + test('Mark all notifications as unread successfully', async () => { + const store = mockStore(stateWithReadNotifications); + + const renderedResult = renderComponent(store); + + const actionMenuButton = renderedResult.getByRole('button', { name: /Notifications actions dropdown/i }); + + await act(async () => { + fireEvent.click(actionMenuButton); + }); + + const actionDropdownItems = await renderedResult.getAllByRole('menuitem'); + + act(() => { + fireEvent.click(actionDropdownItems[1]); + }); + + const actions = store.getActions(); + + await waitFor(() => { + expect(actions).toContainEqual(markAllNotificationsAsUnread()); + }); + }); + + test('Select filter successfully', async () => { + const store = mockStore(stateWithNotifications); + + const renderedResult = renderComponent(store); + + const filterMenuButton = renderedResult.getByRole('button', { name: /Notifications filter/i }); + + await act(async () => { + fireEvent.click(filterMenuButton); + }); + + const filterMenuItems = await renderedResult.getAllByRole('menuitem'); + + await act(async () => { + fireEvent.click(filterMenuItems[2]); + }); + + const filteredNotification = await renderedResult.getAllByRole('listitem'); + + await waitFor(() => { + expect(filteredNotification.length === 1); + }); + }); +}); diff --git a/src/components/NotificationsDrawer/DrawerPanelContent.tsx b/src/components/NotificationsDrawer/DrawerPanelContent.tsx index bdf629598..936fddaad 100644 --- a/src/components/NotificationsDrawer/DrawerPanelContent.tsx +++ b/src/components/NotificationsDrawer/DrawerPanelContent.tsx @@ -189,6 +189,7 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => { onClick={() => setIsFilterDropdownOpen(!isFilterDropdownOpen)} id="notifications-filter-toggle" variant="plain" + aria-label="Notifications filter" > @@ -199,7 +200,6 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => { position: PopoverPosition.right, }} id="notifications-filter-dropdown" - aria-label="Notifications filter" > {filterDropdownItems()} @@ -210,6 +210,7 @@ const DrawerPanelBase = ({ innerRef }: DrawerPanelProps) => { onClick={() => setIsDropdownOpen(!isDropdownOpen)} variant="plain" id="notifications-actions-toggle" + aria-label="Notifications actions dropdown" isFullWidth > diff --git a/src/components/NotificationsDrawer/NotificationItem.tsx b/src/components/NotificationsDrawer/NotificationItem.tsx index dabf6fbd4..3ad2edb4c 100644 --- a/src/components/NotificationsDrawer/NotificationItem.tsx +++ b/src/components/NotificationsDrawer/NotificationItem.tsx @@ -38,7 +38,7 @@ const NotificationItem: React.FC = ({ notification, onNav return ( - +