From 9d094d5d3d0003173170397048e48476eec400df Mon Sep 17 00:00:00 2001 From: Syed Sajjad Hussain Shah Date: Mon, 4 Sep 2023 15:30:35 +0500 Subject: [PATCH] fix: default open popular recs when no personalized recs for small screen VAN-1642 --- .../SmallLayout.jsx | 8 +- .../SmallLayout.test.jsx | 133 ++++++++++++++++++ src/recommendations/data/tests/mockedData.js | 6 +- .../tests/RecommendationsPage.test.jsx | 23 --- 4 files changed, 142 insertions(+), 28 deletions(-) create mode 100644 src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx diff --git a/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx b/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx index 897354c73d..56d2bcbfd7 100644 --- a/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx +++ b/src/recommendations/RecommendationsPageLayouts/SmallLayout.jsx @@ -24,10 +24,13 @@ const RecommendationsSmallLayout = (props) => { const [hasViewedTrendingRecommendations, setHasViewedTrendingRecommendations] = useState(false); useEffect(() => { - if (!isLoading) { + if (!isLoading && personalizedRecommendations.length > 0) { trackRecommendationsViewed(personalizedRecommendations, PERSONALIZED, userId); + } else if (!isLoading && personalizedRecommendations.length === 0) { + trackRecommendationsViewed(popularProducts, POPULAR, userId); + setHasViewedPopularRecommendations(true); } - }, [isLoading, personalizedRecommendations, userId]); + }, [isLoading, personalizedRecommendations, popularProducts, userId]); const handlePopularRecommendationsViewed = () => { if (!hasViewedPopularRecommendations) { @@ -78,6 +81,7 @@ const RecommendationsSmallLayout = (props) => { styling="basic" title={formatMessage(messages['recommendation.option.popular'])} onOpen={handlePopularRecommendationsViewed} + defaultOpen={!isLoading && personalizedRecommendations.length === 0} > ({ + sendTrackEvent: jest.fn(), +})); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useLocation: jest.fn(), +})); + +jest.mock('@edx/paragon', () => ({ + ...jest.requireActual('@edx/paragon'), + useMediaQuery: jest.fn(), +})); + +describe('RecommendationsPageTests', () => { + let props = {}; + + const reduxWrapper = children => ( + + {children} + + ); + + beforeEach(() => { + props = { + userId: 123, + personalizedRecommendations: mockedRecommendedProducts, + popularProducts: mockedRecommendedProducts, + trendingProducts: mockedRecommendedProducts, + isLoading: false, + }; + }); + + it('should render recommendations when recommendations are not loading', () => { + const recommendationsPage = mount(reduxWrapper()); + expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeFalsy(); + }); + + it('should render loading state when recommendations are loading', () => { + props = { + ...props, + isLoading: true, + }; + const recommendationsPage = mount(reduxWrapper()); + expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy(); + }); + + it('should fire recommendations viewed event on mount for personalized recommendations only if available', () => { + mount(reduxWrapper()); + + expect(sendTrackEvent).toBeCalled(); + expect(sendTrackEvent).toHaveBeenCalledWith( + eventNames.recommendationsViewed, + { + page: 'authn_recommendations', + recommendation_type: PERSONALIZED, + products: getProductMapping(props.personalizedRecommendations), + user_id: props.userId, + }, + ); + }); + + it('should fire recommendations viewed event on mount for popular recs if personalized not available', () => { + props = { + ...props, + personalizedRecommendations: [], + }; + + mount(reduxWrapper()); + + expect(sendTrackEvent).toBeCalled(); + expect(sendTrackEvent).toHaveBeenCalledWith( + eventNames.recommendationsViewed, + { + page: 'authn_recommendations', + recommendation_type: POPULAR, + products: getProductMapping(props.popularProducts), + user_id: props.userId, + }, + ); + }); + + it('should fire recommendations viewed event on collapsible open for popular recs', () => { + const recommendationsPage = mount(reduxWrapper()); + + recommendationsPage.find('.collapsible-trigger span').filterWhere( + (span) => span.text() === 'Most Popular', + ).simulate('click'); + + expect(sendTrackEvent).toBeCalled(); + expect(sendTrackEvent).toHaveBeenCalledWith( + eventNames.recommendationsViewed, + { + page: 'authn_recommendations', + recommendation_type: POPULAR, + products: getProductMapping(props.popularProducts), + user_id: props.userId, + }, + ); + }); + + it('should fire recommendations viewed event on collapsible open for trending recs', () => { + const recommendationsPage = mount(reduxWrapper()); + + recommendationsPage.find('.collapsible-trigger span').filterWhere( + (span) => span.text() === 'Trending Now', + ).simulate('click'); + + expect(sendTrackEvent).toBeCalled(); + expect(sendTrackEvent).toHaveBeenCalledWith( + eventNames.recommendationsViewed, + { + page: 'authn_recommendations', + recommendation_type: TRENDING, + products: getProductMapping(props.trendingProducts), + user_id: props.userId, + }, + ); + }); +}); diff --git a/src/recommendations/data/tests/mockedData.js b/src/recommendations/data/tests/mockedData.js index fa7c55b5b4..4c07127279 100644 --- a/src/recommendations/data/tests/mockedData.js +++ b/src/recommendations/data/tests/mockedData.js @@ -35,7 +35,7 @@ const mockedRecommendedProducts = [ }, owners: [], title: 'test_title', - uuid: 'test_uuid', + uuid: 'test_uuid2', objectID: 'course-test_uuid', productSource: { slug: 'test_source', @@ -56,7 +56,7 @@ const mockedRecommendedProducts = [ }, owners: [], title: 'test_title', - uuid: 'test_uuid', + uuid: 'test_uuid3', objectID: 'course-test_uuid', productSource: { slug: 'test_source', @@ -77,7 +77,7 @@ const mockedRecommendedProducts = [ }, owners: [], title: 'test_title', - uuid: 'test_uuid', + uuid: 'test_uuid4', objectID: 'course-test_uuid', productSource: { slug: 'test_source', diff --git a/src/recommendations/tests/RecommendationsPage.test.jsx b/src/recommendations/tests/RecommendationsPage.test.jsx index cb0b674efc..3cc625dc66 100644 --- a/src/recommendations/tests/RecommendationsPage.test.jsx +++ b/src/recommendations/tests/RecommendationsPage.test.jsx @@ -203,27 +203,4 @@ describe('RecommendationsPageTests', () => { }, ); }); - - it('[Small Screen] should fire recommendations viewed event on mount for personalized recommendations only', () => { - useRecommendations.mockReturnValue({ - algoliaRecommendations: mockedRecommendedProducts, - popularProducts: mockedRecommendedProducts, - trendingProducts: [], - isLoading: false, - }); - - useMediaQuery.mockReturnValue(true); - mount(reduxWrapper()); - - expect(sendTrackEvent).toBeCalled(); - expect(sendTrackEvent).toHaveBeenCalledWith( - eventNames.recommendationsViewed, - { - page: 'authn_recommendations', - recommendation_type: PERSONALIZED, - products: getProductMapping(mockedRecommendedProducts), - user_id: 111, - }, - ); - }); });