Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Migrate welcome page and recommendations tests to RTL (#1116)

Browse Source
This commit is contained in:
Attiya Ishaque
2023-12-19 15:57:51 +05:00
committed by GitHub
parent dae050ecb3
commit 924488c29b
4 changed files with 116 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/progressive-profiling/tests/ProgressiveProfiling.test.jsx
View File

@@ -5,7 +5,9 @@ import { getConfig, mergeConfig } from '@edx/frontend-platform';
import { identifyAuthenticatedUser, sendTrackEvent } from '@edx/frontend-platform/analytics';
import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
import { configure, injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import {
fireEvent, render, screen,
} from '@testing-library/react';
import { MemoryRouter, mockNavigate, useLocation } from 'react-router-dom';
import configureStore from 'redux-mock-store';
@@ -112,34 +114,43 @@ describe('ProgressiveProfilingTests', () => {
mergeConfig({
AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: '',
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
const { queryByRole } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
const button = queryByRole('button', { name: /learn more about how we use this information/i });
expect(progressiveProfilingPage.find('a.pgn__hyperlink').exists()).toBeFalsy();
expect(button).toBeNull();
});
it('should display button "Learn more about how we use this information."', () => {
mergeConfig({
AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
expect(progressiveProfilingPage.find('a.pgn__hyperlink').text()).toEqual('Learn more about how we use this information.');
const { getByText } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
const learnMoreButton = getByText('Learn more about how we use this information.');
expect(learnMoreButton).toBeDefined();
});
it('should open modal on pressing skip for now button', () => {
delete window.location;
window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
const { getByRole } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
const skipButton = getByRole('button', { name: /skip for now/i });
fireEvent.click(skipButton);
const modalContentContainer = document.getElementsByClassName('.pgn__modal-content-container');
expect(modalContentContainer).toBeTruthy();
progressiveProfilingPage.find('button.btn-link').simulate('click');
expect(progressiveProfilingPage.find('.pgn__modal-content-container').exists()).toBeTruthy();
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host: '' });
});
// ******** test event functionality ********
it('should make identify call to segment on progressive profiling page', () => {
mount(reduxWrapper(<IntlProgressiveProfilingPage />));
render(reduxWrapper(<IntlProgressiveProfilingPage />));
expect(identifyAuthenticatedUser).toHaveBeenCalledWith(3);
expect(identifyAuthenticatedUser).toHaveBeenCalled();
@@ -149,9 +160,11 @@ describe('ProgressiveProfilingTests', () => {
mergeConfig({
AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK: 'http://localhost:1999/support',
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
render(reduxWrapper(<IntlProgressiveProfilingPage />));
const supportLink = screen.getByRole('link', { name: /learn more about how we use this information/i });
fireEvent.click(supportLink);
progressiveProfilingPage.find('.pp-page__support-link a[target="_blank"]').simulate('click');
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.support.link.clicked');
});
@@ -164,9 +177,11 @@ describe('ProgressiveProfilingTests', () => {
};
delete window.location;
window.location = { href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING) };
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
render(reduxWrapper(<IntlProgressiveProfilingPage />));
const nextButton = screen.getByText('Next');
fireEvent.click(nextButton);
progressiveProfilingPage.find('button.btn-brand').simulate('click');
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.submit.clicked', expectedEventProperties);
});
@@ -178,12 +193,16 @@ describe('ProgressiveProfilingTests', () => {
extended_profile: [{ field_name: 'company', field_value: 'test company' }],
};
store.dispatch = jest.fn(store.dispatch);
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
const { getByLabelText, getByText } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
progressiveProfilingPage.find('select#gender').simulate('change', { target: { value: 'm', name: 'gender' } });
progressiveProfilingPage.find('input#company').simulate('change', { target: { value: 'test company', name: 'company' } });
const genderSelect = getByLabelText('Gender');
const companyInput = getByLabelText('Company');
fireEvent.change(genderSelect, { target: { value: 'm' } });
fireEvent.change(companyInput, { target: { value: 'test company' } });
fireEvent.click(getByText('Next'));
progressiveProfilingPage.find('button.btn-brand').simulate('click');
expect(store.dispatch).toHaveBeenCalledWith(saveUserProfile('abc123', formPayload));
});
@@ -196,8 +215,10 @@ describe('ProgressiveProfilingTests', () => {
},
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
expect(progressiveProfilingPage.find('#pp-page-errors').exists()).toBeTruthy();
const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
const errorElement = container.querySelector('#pp-page-errors');
expect(errorElement).toBeTruthy();
});
// ******** miscellaneous tests ********
@@ -210,7 +231,7 @@ describe('ProgressiveProfilingTests', () => {
href: getConfig().BASE_URL,
};
mount(reduxWrapper(<IntlProgressiveProfilingPage />));
render(reduxWrapper(<IntlProgressiveProfilingPage />));
expect(window.location.href).toEqual(DASHBOARD_URL);
});
@@ -228,9 +249,10 @@ describe('ProgressiveProfilingTests', () => {
success: true,
},
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
const nextButton = container.querySelector('button.btn-brand');
expect(nextButton.textContent).toEqual('Next');
expect(progressiveProfilingPage.find('button.btn-brand').text()).toEqual('Next');
expect(mockNavigate).toHaveBeenCalledWith(RECOMMENDATIONS);
});
@@ -254,9 +276,10 @@ describe('ProgressiveProfilingTests', () => {
},
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
const nextButton = container.querySelector('button.btn-brand');
expect(nextButton.textContent).toEqual('Submit');
expect(progressiveProfilingPage.find('button.btn-brand').text()).toEqual('Submit');
expect(window.location.href).toEqual(redirectUrl);
});
});
@@ -287,9 +310,11 @@ describe('ProgressiveProfilingTests', () => {
href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
search: `?host=${host}&variant=${EMBEDDED}`,
};
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
render(reduxWrapper(<IntlProgressiveProfilingPage />));
const skipLinkButton = screen.getByText('Skip for now');
fireEvent.click(skipLinkButton);
progressiveProfilingPage.find('button.btn-link').simulate('click');
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.skip.link.clicked', { host });
});
@@ -310,9 +335,10 @@ describe('ProgressiveProfilingTests', () => {
},
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
expect(progressiveProfilingPage.find('#tpa-spinner').exists()).toBeTruthy();
const tpaSpinnerElement = container.querySelector('#tpa-spinner');
expect(tpaSpinnerElement).toBeTruthy();
});
it('should set host property value to host where iframe is embedded for on ramp experience', () => {
@@ -327,8 +353,10 @@ describe('ProgressiveProfilingTests', () => {
href: getConfig().BASE_URL.concat(AUTHN_PROGRESSIVE_PROFILING),
search: `?host=${host}`,
};
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
progressiveProfilingPage.find('button.btn-brand').simulate('click');
render(reduxWrapper(<IntlProgressiveProfilingPage />));
const submitButton = screen.getByText('Next');
fireEvent.click(submitButton);
expect(sendTrackEvent).toHaveBeenCalledWith('edx.bi.welcome.page.submit.clicked', expectedEventProperties);
});
@@ -340,8 +368,10 @@ describe('ProgressiveProfilingTests', () => {
search: `?variant=${EMBEDDED}&host=${host}`,
};
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
expect(progressiveProfilingPage.find('#gender').exists()).toBeTruthy();
const { container } = render(reduxWrapper(<IntlProgressiveProfilingPage />));
const genderField = container.querySelector('#gender');
expect(genderField).toBeTruthy();
});
it('should redirect to dashboard if API call to get form field fails', () => {
@@ -359,7 +389,7 @@ describe('ProgressiveProfilingTests', () => {
},
});
mount(reduxWrapper(<IntlProgressiveProfilingPage />));
render(reduxWrapper(<IntlProgressiveProfilingPage />));
expect(window.location.href).toBe(DASHBOARD_URL);
});
@@ -387,8 +417,9 @@ describe('ProgressiveProfilingTests', () => {
},
});
const progressiveProfilingPage = mount(reduxWrapper(<IntlProgressiveProfilingPage />));
progressiveProfilingPage.find('button.btn-brand').simulate('click');
render(reduxWrapper(<IntlProgressiveProfilingPage />));
const submitButton = screen.getByText('Submit');
fireEvent.click(submitButton);
expect(window.location.href).toBe(redirectUrl);
});
});

16
src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';
import SmallLayout from './SmallLayout';
import mockedRecommendedProducts from '../data/tests/mockedData';
@@ -36,8 +36,11 @@ describe('RecommendationsPageTests', () => {
});
it('should render recommendations when recommendations are not loading', () => {
const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy();
const { container } = render(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
expect(reactLoadingSkeleton).toBeNull();
});
it('should render loading state when recommendations are loading', () => {
@@ -45,7 +48,10 @@ describe('RecommendationsPageTests', () => {
...props,
isLoading: true,
};
const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
const { container } = render(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
expect(reactLoadingSkeleton).toBeTruthy();
});
});

18
src/recommendations/tests/RecommendationsList.test.jsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import { Provider } from 'react-redux';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';
import { render } from '@testing-library/react';
import configureStore from 'redux-mock-store';
import mockedProductData from './mockedData';
@@ -25,8 +25,10 @@ describe('RecommendationsListTests', () => {
userId: 1234567,
};
const recommendationsList = mount(reduxWrapper(<IntlRecommendationList {...props} />));
expect(recommendationsList.find('.recommendation-card').length).toEqual(mockedProductData.length);
const { container } = render(reduxWrapper(<IntlRecommendationList {...props} />));
const recommendationCards = container.querySelectorAll('.recommendation-card');
expect(recommendationCards.length).toEqual(mockedProductData.length);
});
it('should render the recommendations card with footer content', () => {
@@ -35,8 +37,12 @@ describe('RecommendationsListTests', () => {
userId: 1234567,
};
const recommendationsList = mount(reduxWrapper(<IntlRecommendationList {...props} />));
expect(recommendationsList.find('.x-small').at(0).text()).toEqual('1 Course');
expect(recommendationsList.find('.x-small').at(1).text()).toEqual('2 Courses');
const { getByText } = render(reduxWrapper(<IntlRecommendationList {...props} />));
const firstFooterContent = getByText('1 Course');
const secondFooterContent = getByText('2 Courses');
expect(firstFooterContent).toBeTruthy();
expect(secondFooterContent).toBeTruthy();
});
});

43
src/recommendations/tests/RecommendationsPage.test.jsx
View File

@@ -5,7 +5,7 @@ import { getConfig } from '@edx/frontend-platform';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import { useMediaQuery } from '@edx/paragon';
import { mount } from 'enzyme';
import { fireEvent, render } from '@testing-library/react';
import { useLocation } from 'react-router-dom';
import configureStore from 'redux-mock-store';
@@ -77,7 +77,7 @@ describe('RecommendationsPageTests', () => {
});
it('should redirect to dashboard if user is not coming from registration workflow', () => {
mount(reduxWrapper(<IntlRecommendationsPage />));
render(reduxWrapper(<IntlRecommendationsPage />));
expect(window.location.href).toEqual(dashboardUrl);
});
@@ -86,15 +86,16 @@ describe('RecommendationsPageTests', () => {
recommendations: [],
isLoading: false,
});
mount(reduxWrapper(<IntlRecommendationsPage />));
render(reduxWrapper(<IntlRecommendationsPage />));
expect(window.location.href).toEqual(dashboardUrl);
});
it('should redirect user if they click "Skip for now" button', () => {
mockUseLocation();
jest.useFakeTimers();
const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage />));
recommendationsPage.find('.pgn__stateful-btn-state-default').first().simulate('click');
const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
const skipButton = container.querySelector('.pgn__stateful-btn-state-default');
fireEvent.click(skipButton);
jest.advanceTimersByTime(300);
expect(window.location.href).toEqual(redirectUrl);
});
@@ -102,19 +103,25 @@ describe('RecommendationsPageTests', () => {
it('should display recommendations small layout for small screen', () => {
mockUseLocation();
useMediaQuery.mockReturnValue(true);
const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage />));
const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
expect(recommendationsPage.find('#recommendations-small-layout').exists()).toBeTruthy();
expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy();
const recommendationsSmallLayout = container.querySelector('#recommendations-small-layout');
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
expect(recommendationsSmallLayout).toBeTruthy();
expect(reactLoadingSkeleton).toBeFalsy();
});
it('should display recommendations large layout for large screen', () => {
mockUseLocation();
useMediaQuery.mockReturnValue(false);
const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage />));
const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
expect(recommendationsPage.find('.pgn_collapsible').exists()).toBeFalsy();
expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy();
const pgnCollapsible = container.querySelector('.pgn_collapsible');
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
expect(pgnCollapsible).toBeFalsy();
expect(reactLoadingSkeleton).toBeFalsy();
});
it('should display skeletons if recommendations are loading for large screen', () => {
@@ -124,9 +131,11 @@ describe('RecommendationsPageTests', () => {
recommendations: [],
isLoading: true,
});
const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage />));
const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
expect(reactLoadingSkeleton).toBeTruthy();
});
it('should display skeletons if recommendations are loading for small screen', () => {
@@ -136,9 +145,11 @@ describe('RecommendationsPageTests', () => {
recommendations: [],
isLoading: true,
});
const recommendationsPage = mount(reduxWrapper(<IntlRecommendationsPage />));
const { container } = render(reduxWrapper(<IntlRecommendationsPage />));
expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton');
expect(reactLoadingSkeleton).toBeTruthy();
});
it('should fire recommendations viewed event', () => {
@@ -149,7 +160,7 @@ describe('RecommendationsPageTests', () => {
});
useMediaQuery.mockReturnValue(false);
mount(reduxWrapper(<IntlRecommendationsPage />));
render(reduxWrapper(<IntlRecommendationsPage />));
expect(sendTrackEvent).toBeCalled();
expect(sendTrackEvent).toHaveBeenCalledWith(