-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: added test cases for UI components
- Loading branch information
SundasNoreen
committed
Jun 26, 2023
1 parent
45a1da9
commit 0e6a272
Showing
9 changed files
with
418 additions
and
9 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { | ||
| act, fireEvent, render, screen, waitFor, | ||
| } from '@testing-library/react'; | ||
| import MockAdapter from 'axios-mock-adapter'; | ||
| import { Context as ResponsiveContext } from 'react-responsive'; | ||
| import { Factory } from 'rosie'; | ||
|
|
||
| import { initializeMockApp } from '@edx/frontend-platform'; | ||
| import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; | ||
| import { IntlProvider } from '@edx/frontend-platform/i18n'; | ||
| import { AppContext, AppProvider } from '@edx/frontend-platform/react'; | ||
|
|
||
| import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown'; | ||
| import { initializeStore } from '../store'; | ||
| import executeThunk from '../test-utils'; | ||
| import { getNotificationsCountApiUrl } from './data/api'; | ||
| import { fetchAppsNotificationCount } from './data/thunks'; | ||
|
|
||
| import './data/__factories__'; | ||
|
|
||
| const notificationCountsApiUrl = getNotificationsCountApiUrl(); | ||
|
|
||
| let axiosMock; | ||
| let store; | ||
|
|
||
| async function renderComponent() { | ||
| await render( | ||
| <ResponsiveContext.Provider> | ||
| <IntlProvider locale="en" messages={{}}> | ||
| <AppProvider store={store}> | ||
| <AppContext.Provider> | ||
| <AuthenticatedUserDropdown /> | ||
| </AppContext.Provider> | ||
| </AppProvider> | ||
| </IntlProvider> | ||
| </ResponsiveContext.Provider>, | ||
| ); | ||
| } | ||
|
|
||
| describe('Notification test cases.', () => { | ||
| beforeEach(async () => { | ||
| initializeMockApp({ | ||
| authenticatedUser: { | ||
| userId: '123abc', | ||
| username: 'testuser', | ||
| administrator: false, | ||
| roles: [], | ||
| }, | ||
| }); | ||
|
|
||
| axiosMock = new MockAdapter(getAuthenticatedHttpClient()); | ||
| Factory.resetAll(); | ||
| store = initializeStore(); | ||
|
|
||
| axiosMock.onGet(notificationCountsApiUrl).reply(200, (Factory.build('notificationsCount'))); | ||
| await executeThunk(fetchAppsNotificationCount(), store.dispatch, store.getState); | ||
| }); | ||
|
|
||
| it('successfully showed bell icon and unseen count on it if unseen count is greater then 0.', async () => { | ||
| await renderComponent(); | ||
|
|
||
| const bellIcon = screen.queryByTestId('notification-bell-icon'); | ||
| const notificationCount = screen.queryByTestId('notification-count'); | ||
|
|
||
| expect(bellIcon).toBeInTheDocument(); | ||
| expect(notificationCount).toBeInTheDocument(); | ||
| expect(screen.queryByText(45)).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('successfully show/hide notification tray by clicking on the bell icon and setting icon.', async () => { | ||
| await renderComponent(); | ||
|
|
||
| const bellIcon = screen.queryByTestId('notification-bell-icon'); | ||
|
|
||
| await act(async () => { fireEvent.click(bellIcon); }); | ||
| expect(screen.queryByTestId('notification-tray')).toBeInTheDocument(); | ||
| expect(screen.queryByTestId('setting-icon')).toBeInTheDocument(); | ||
|
|
||
| await act(async () => { fireEvent.click(bellIcon); }); | ||
| await waitFor(() => expect(screen.queryByTestId('notification-tray')).not.toBeInTheDocument()); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { | ||
| act, fireEvent, render, screen, | ||
| } from '@testing-library/react'; | ||
| import MockAdapter from 'axios-mock-adapter'; | ||
| import { Context as ResponsiveContext } from 'react-responsive'; | ||
| import { Factory } from 'rosie'; | ||
|
|
||
| import { initializeMockApp } from '@edx/frontend-platform'; | ||
| import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; | ||
| import { IntlProvider } from '@edx/frontend-platform/i18n'; | ||
| import { AppContext, AppProvider } from '@edx/frontend-platform/react'; | ||
|
|
||
| import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown'; | ||
| import { initializeStore } from '../store'; | ||
| import { markNotificationAsReadApiUrl } from './data/api'; | ||
| import setupLearnerMockResponse from './test-utils'; | ||
|
|
||
| import './data/__factories__'; | ||
|
|
||
| const markedNotificationAsReadApiUrl = markNotificationAsReadApiUrl(); | ||
|
|
||
| let axiosMock; | ||
| let store; | ||
|
|
||
| async function renderComponent() { | ||
| await render( | ||
| <ResponsiveContext.Provider> | ||
| <IntlProvider locale="en" messages={{}}> | ||
| <AppProvider store={store}> | ||
| <AppContext.Provider> | ||
| <AuthenticatedUserDropdown /> | ||
| </AppContext.Provider> | ||
| </AppProvider> | ||
| </IntlProvider> | ||
| </ResponsiveContext.Provider>, | ||
| ); | ||
| } | ||
|
|
||
| describe('Notification row item test cases.', () => { | ||
| beforeEach(async () => { | ||
| initializeMockApp({ | ||
| authenticatedUser: { | ||
| userId: 3, | ||
| username: 'abc123', | ||
| administrator: true, | ||
| roles: [], | ||
| }, | ||
| }); | ||
|
|
||
| axiosMock = new MockAdapter(getAuthenticatedHttpClient()); | ||
| Factory.resetAll(); | ||
| store = initializeStore(); | ||
|
|
||
| ({ store, axiosMock } = await setupLearnerMockResponse()); | ||
| }); | ||
|
|
||
| it( | ||
| 'Successfully viewed notification icon, notification context, unread , course name and notification time.', | ||
| async () => { | ||
| await renderComponent(); | ||
|
|
||
| const bellIcon = screen.queryByTestId('notification-bell-icon'); | ||
| await act(async () => { fireEvent.click(bellIcon); }); | ||
|
|
||
| expect(screen.queryByTestId('notification-icon-1')).toBeInTheDocument(); | ||
| expect(screen.queryByTestId('notification-content-1')).toBeInTheDocument(); | ||
| expect(screen.queryByTestId('notification-course-1')).toBeInTheDocument(); | ||
| expect(screen.queryByTestId('notification-created-date-1')).toBeInTheDocument(); | ||
| expect(screen.queryByTestId('unread-1')).toBeInTheDocument(); | ||
| }, | ||
| ); | ||
|
|
||
| it('Successfully marked notification as read.', async () => { | ||
| axiosMock.onPut(markedNotificationAsReadApiUrl).reply(200, { message: 'Notification marked read.' }); | ||
| await renderComponent(); | ||
|
|
||
| const bellIcon = screen.queryByTestId('notification-bell-icon'); | ||
| await act(async () => { fireEvent.click(bellIcon); }); | ||
|
|
||
| const notification = screen.queryByTestId('notification-1'); | ||
| await act(async () => { fireEvent.click(notification); }); | ||
|
|
||
| expect(screen.queryByTestId('unread-1')).not.toBeInTheDocument(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { | ||
| act, fireEvent, render, screen, within, | ||
| } from '@testing-library/react'; | ||
| import MockAdapter from 'axios-mock-adapter'; | ||
| import { Context as ResponsiveContext } from 'react-responsive'; | ||
| import { Factory } from 'rosie'; | ||
|
|
||
| import { initializeMockApp } from '@edx/frontend-platform'; | ||
| import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; | ||
| import { IntlProvider } from '@edx/frontend-platform/i18n'; | ||
| import { AppContext, AppProvider } from '@edx/frontend-platform/react'; | ||
|
|
||
| import AuthenticatedUserDropdown from '../learning-header/AuthenticatedUserDropdown'; | ||
| import { initializeStore } from '../store'; | ||
| import { markNotificationAsReadApiUrl } from './data/api'; | ||
| import setupLearnerMockResponse from './test-utils'; | ||
|
|
||
| import './data/__factories__'; | ||
|
|
||
| const markedAllNotificationsAsReadApiUrl = markNotificationAsReadApiUrl(); | ||
|
|
||
| let axiosMock; | ||
| let store; | ||
|
|
||
| async function renderComponent() { | ||
| await render( | ||
| <ResponsiveContext.Provider> | ||
| <IntlProvider locale="en" messages={{}}> | ||
| <AppProvider store={store}> | ||
| <AppContext.Provider> | ||
| <AuthenticatedUserDropdown /> | ||
| </AppContext.Provider> | ||
| </AppProvider> | ||
| </IntlProvider> | ||
| </ResponsiveContext.Provider>, | ||
| ); | ||
| } | ||
|
|
||
| describe('Notification sections test cases.', () => { | ||
| beforeEach(async () => { | ||
| initializeMockApp({ | ||
| authenticatedUser: { | ||
| userId: 3, | ||
| username: 'abc123', | ||
| administrator: true, | ||
| roles: [], | ||
| }, | ||
| }); | ||
|
|
||
| axiosMock = new MockAdapter(getAuthenticatedHttpClient()); | ||
| Factory.resetAll(); | ||
| store = initializeStore(); | ||
|
|
||
| ({ store, axiosMock } = await setupLearnerMockResponse()); | ||
| }); | ||
|
|
||
| it('Successfully viewed last 24 hours and earlier section along with nark all as read label.', async () => { | ||
| await renderComponent(); | ||
|
|
||
| const bellIcon = screen.queryByTestId('notification-bell-icon'); | ||
| await act(async () => { fireEvent.click(bellIcon); }); | ||
| const notificationTraySection = screen.queryByTestId('notification-tray-section'); | ||
|
|
||
| expect(within(notificationTraySection).queryByText('Last 24 hours')).toBeInTheDocument(); | ||
| expect(within(notificationTraySection).queryByText('Earlier')).toBeInTheDocument(); | ||
| expect(within(notificationTraySection).queryByText('Mark all as read')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it( | ||
| 'Successfully clicks on the mark all as read, the unread status disappeared across all the notifications', | ||
| async () => { | ||
| axiosMock.onPut(markedAllNotificationsAsReadApiUrl).reply(200, { message: 'Notifications marked read.' }); | ||
| await renderComponent(); | ||
|
|
||
| const bellIcon = screen.queryByTestId('notification-bell-icon'); | ||
| await act(async () => { fireEvent.click(bellIcon); }); | ||
| const markAllReadButton = screen.queryByTestId('mark-all-read'); | ||
|
|
||
| expect(screen.queryByTestId('unread-1')).toBeInTheDocument(); | ||
| await act(async () => { fireEvent.click(markAllReadButton); }); | ||
|
|
||
| expect(screen.queryByTestId('unread-1')).not.toBeInTheDocument(); | ||
| }, | ||
| ); | ||
|
|
||
| it('Successfully load more notifications by clicking on load more notification button.', async () => { | ||
| await renderComponent(); | ||
|
|
||
| const bellIcon = screen.queryByTestId('notification-bell-icon'); | ||
| await act(async () => { fireEvent.click(bellIcon); }); | ||
|
|
||
| const loadMoreButton = screen.queryByTestId('load-more'); | ||
|
|
||
| expect(screen.queryAllByTestId('notification-contents')).toHaveLength(10); | ||
| await act(async () => { fireEvent.click(loadMoreButton); }); | ||
|
|
||
| expect(screen.queryAllByTestId('notification-contents')).toHaveLength(16); | ||
| }); | ||
| }); |
Oops, something went wrong.