Skip to content

Commit

Permalink
fix: default open popular recs when no personalized recs for small sc…
Browse files Browse the repository at this point in the history
…reen

VAN-1642
  • Loading branch information
syedsajjadkazmii committed Sep 4, 2023
1 parent 8c65c35 commit a47430f
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 32 deletions.
8 changes: 4 additions & 4 deletions src/recommendations/RecommendationsPage.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ const RecommendationsPage = () => {
handleSkipRecommendationPage();
};

if (!registrationResponse) {
window.location.href = DASHBOARD_URL;
return null;
}
// if (!registrationResponse) {
// window.location.href = DASHBOARD_URL;
// return null;
// }

if (!isLoading && (!popularProducts.length || !trendingProducts.length)) {
handleSkipRecommendationPage();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -78,6 +81,7 @@ const RecommendationsSmallLayout = (props) => {
styling="basic"
title={formatMessage(messages['recommendation.option.popular'])}
onOpen={handlePopularRecommendationsViewed}
defaultOpen={!isLoading && personalizedRecommendations.length === 0}
>
<RecommendationsList
recommendations={popularProducts}
Expand Down
133 changes: 133 additions & 0 deletions src/recommendations/RecommendationsPageLayouts/SmallLayout.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import React from 'react';

import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
import { mount } from 'enzyme';

import SmallLayout from './SmallLayout';
import { PERSONALIZED, POPULAR, TRENDING } from '../data/constants';
import mockedRecommendedProducts from '../data/tests/mockedData';
import { eventNames, getProductMapping } from '../track';

const IntlRecommendationsSmallLayoutPage = injectIntl(SmallLayout);

jest.mock('@edx/frontend-platform/analytics', () => ({
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 => (
<IntlProvider locale="en">
{children}
</IntlProvider>
);

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(<IntlRecommendationsSmallLayoutPage {...props} />));
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(<IntlRecommendationsSmallLayoutPage {...props} />));
expect(recommendationsPage.find('.react-loading-skeleton').exists()).toBeTruthy();
});

it('should fire recommendations viewed event on mount for personalized recommendations only if available', () => {
mount(reduxWrapper(<IntlRecommendationsSmallLayoutPage {...props} />));

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(<IntlRecommendationsSmallLayoutPage {...props} />));

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(<IntlRecommendationsSmallLayoutPage {...props} />));

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(<IntlRecommendationsSmallLayoutPage {...props} />));

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,
},
);
});
});
14 changes: 11 additions & 3 deletions src/recommendations/data/tests/mockedData.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ const mockedRecommendedProducts = [
type: 'test_course_run_type',
marketingUrl: 'test_marketingUrl',
},
schoolLogo: '',
subtitle: 'test_subtitle',
allowedIn: [],
blockedIn: [],
cardType: 'course',
Expand All @@ -26,6 +28,8 @@ const mockedRecommendedProducts = [
type: 'test_course_run_type',
marketingUrl: 'test_marketingUrl',
},
schoolLogo: '',
subtitle: 'test_subtitle',
allowedIn: [],
blockedIn: [],
cardType: 'course',
Expand All @@ -35,7 +39,7 @@ const mockedRecommendedProducts = [
},
owners: [],
title: 'test_title',
uuid: 'test_uuid',
uuid: 'test_uuid2',
objectID: 'course-test_uuid',
productSource: {
slug: 'test_source',
Expand All @@ -47,6 +51,8 @@ const mockedRecommendedProducts = [
type: 'test_course_run_type',
marketingUrl: 'test_marketingUrl',
},
schoolLogo: '',
subtitle: 'test_subtitle',
allowedIn: [],
blockedIn: [],
cardType: 'course',
Expand All @@ -56,7 +62,7 @@ const mockedRecommendedProducts = [
},
owners: [],
title: 'test_title',
uuid: 'test_uuid',
uuid: 'test_uuid3',
objectID: 'course-test_uuid',
productSource: {
slug: 'test_source',
Expand All @@ -68,6 +74,8 @@ const mockedRecommendedProducts = [
type: 'test_course_run_type',
marketingUrl: 'test_marketingUrl',
},
schoolLogo: '',
subtitle: 'test_subtitle',
allowedIn: [],
blockedIn: [],
cardType: 'course',
Expand All @@ -77,7 +85,7 @@ const mockedRecommendedProducts = [
},
owners: [],
title: 'test_title',
uuid: 'test_uuid',
uuid: 'test_uuid4',
objectID: 'course-test_uuid',
productSource: {
slug: 'test_source',
Expand Down
23 changes: 0 additions & 23 deletions src/recommendations/tests/RecommendationsPage.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(<IntlRecommendationsPage />));

expect(sendTrackEvent).toBeCalled();
expect(sendTrackEvent).toHaveBeenCalledWith(
eventNames.recommendationsViewed,
{
page: 'authn_recommendations',
recommendation_type: PERSONALIZED,
products: getProductMapping(mockedRecommendedProducts),
user_id: 111,
},
);
});
});

0 comments on commit a47430f

Please sign in to comment.