diff --git a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx index a29f1121..2fbf88d8 100644 --- a/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx +++ b/src/progressive-profiling/tests/ProgressiveProfiling.test.jsx @@ -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()); + const { queryByRole } = render(reduxWrapper()); + 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()); - expect(progressiveProfilingPage.find('a.pgn__hyperlink').text()).toEqual('Learn more about how we use this information.'); + const { getByText } = render(reduxWrapper()); + + 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()); + const { getByRole } = render(reduxWrapper()); + + 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()); + render(reduxWrapper()); 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()); + render(reduxWrapper()); + + 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()); + render(reduxWrapper()); + + 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()); + const { getByLabelText, getByText } = render(reduxWrapper()); - 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()); - expect(progressiveProfilingPage.find('#pp-page-errors').exists()).toBeTruthy(); + const { container } = render(reduxWrapper()); + const errorElement = container.querySelector('#pp-page-errors'); + + expect(errorElement).toBeTruthy(); }); // ******** miscellaneous tests ******** @@ -210,7 +231,7 @@ describe('ProgressiveProfilingTests', () => { href: getConfig().BASE_URL, }; - mount(reduxWrapper()); + render(reduxWrapper()); expect(window.location.href).toEqual(DASHBOARD_URL); }); @@ -228,9 +249,10 @@ describe('ProgressiveProfilingTests', () => { success: true, }, }); - const progressiveProfilingPage = mount(reduxWrapper()); + const { container } = render(reduxWrapper()); + 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()); + const { container } = render(reduxWrapper()); + 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()); + render(reduxWrapper()); + + 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()); + const { container } = render(reduxWrapper()); - 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()); - progressiveProfilingPage.find('button.btn-brand').simulate('click'); + render(reduxWrapper()); + 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()); - expect(progressiveProfilingPage.find('#gender').exists()).toBeTruthy(); + const { container } = render(reduxWrapper()); + + 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()); + render(reduxWrapper()); expect(window.location.href).toBe(DASHBOARD_URL); }); @@ -387,8 +417,9 @@ describe('ProgressiveProfilingTests', () => { }, }); - const progressiveProfilingPage = mount(reduxWrapper()); - progressiveProfilingPage.find('button.btn-brand').simulate('click'); + render(reduxWrapper()); + const submitButton = screen.getByText('Submit'); + fireEvent.click(submitButton); expect(window.location.href).toBe(redirectUrl); }); }); diff --git a/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx b/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx index dc490993..e1586988 100644 --- a/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx +++ b/src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx @@ -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()); - expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy(); + const { container } = render(reduxWrapper()); + + 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()); - expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy(); + const { container } = render(reduxWrapper()); + + const reactLoadingSkeleton = container.querySelector('.react-loading-skeleton'); + + expect(reactLoadingSkeleton).toBeTruthy(); }); }); diff --git a/src/recommendations/tests/RecommendationsList.test.jsx b/src/recommendations/tests/RecommendationsList.test.jsx index fc2fc1f6..e273936a 100644 --- a/src/recommendations/tests/RecommendationsList.test.jsx +++ b/src/recommendations/tests/RecommendationsList.test.jsx @@ -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()); - expect(recommendationsList.find('.recommendation-card').length).toEqual(mockedProductData.length); + const { container } = render(reduxWrapper()); + + 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()); - 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()); + + const firstFooterContent = getByText('1 Course'); + const secondFooterContent = getByText('2 Courses'); + + expect(firstFooterContent).toBeTruthy(); + expect(secondFooterContent).toBeTruthy(); }); }); diff --git a/src/recommendations/tests/RecommendationsPage.test.jsx b/src/recommendations/tests/RecommendationsPage.test.jsx index 238d1b4a..7c283add 100644 --- a/src/recommendations/tests/RecommendationsPage.test.jsx +++ b/src/recommendations/tests/RecommendationsPage.test.jsx @@ -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()); + render(reduxWrapper()); expect(window.location.href).toEqual(dashboardUrl); }); @@ -86,15 +86,16 @@ describe('RecommendationsPageTests', () => { recommendations: [], isLoading: false, }); - mount(reduxWrapper()); + render(reduxWrapper()); expect(window.location.href).toEqual(dashboardUrl); }); it('should redirect user if they click "Skip for now" button', () => { mockUseLocation(); jest.useFakeTimers(); - const recommendationsPage = mount(reduxWrapper()); - recommendationsPage.find('.pgn__stateful-btn-state-default').first().simulate('click'); + const { container } = render(reduxWrapper()); + 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()); + const { container } = render(reduxWrapper()); - 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()); + const { container } = render(reduxWrapper()); - 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()); + const { container } = render(reduxWrapper()); - 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()); + const { container } = render(reduxWrapper()); - 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()); + render(reduxWrapper()); expect(sendTrackEvent).toBeCalled(); expect(sendTrackEvent).toHaveBeenCalledWith(