Andal.LND/frontend-app-learner-dashboard
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/openedx/frontend-app-learner-dashboard into mashal-m/replace-edx/paragon-frontend-build

Browse Source
This commit is contained in:
Bilal Qamar
2024-02-29 11:05:44 +05:00
parent 75a4af95c5 e8660b941f
commit 53abfb03e7
52 changed files with 85 additions and 1276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/widgets/RecommendationsPanel/LoadedView.jsx
View File

@@ -12,9 +12,6 @@ import CourseCard from './components/CourseCard';
import messages from './messages';
import './index.scss';
import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
import { RECOMMENDATIONS_PANEL } from '../RecommendationsPaintedDoorBtn/constants';
import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
export const LoadedView = ({
courses,
@@ -22,11 +19,6 @@ export const LoadedView = ({
}) => {
const { formatMessage } = useIntl();
const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
const {
experimentVariation,
isPaintedDoorWidgetBtnVariation,
experimentLoading,
} = usePaintedDoorExperimentContext();
return (
<div className="p-4 w-100 panel-background">
@@ -43,19 +35,15 @@ export const LoadedView = ({
))}
</div>
<div className="text-center explore-courses-btn">
{!experimentLoading && isPaintedDoorWidgetBtnVariation ? (
<RecommendationsPaintedDoorBtn placement={RECOMMENDATIONS_PANEL} experimentVariation={experimentVariation} />
) : (
<Button
variant="tertiary"
iconBefore={Search}
as="a"
href={baseAppUrl(courseSearchUrl)}
onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
>
{formatMessage(messages.exploreCoursesButton)}
</Button>
)}
<Button
variant="tertiary"
iconBefore={Search}
as="a"
href={baseAppUrl(courseSearchUrl)}
onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
>
{formatMessage(messages.exploreCoursesButton)}
</Button>
</div>
</div>
);

45
src/widgets/RecommendationsPanel/LoadedView.test.jsx
View File

@@ -1,12 +1,9 @@
import React from 'react';
import { shallow } from '@edx/react-unit-test-utils';
import { Button } from '@openedx/paragon';
import LoadedView from './LoadedView';
import mockData from './mockData';
import messages from './messages';
import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
jest.mock('hooks', () => ({
reduxHooks: {
@@ -22,64 +19,24 @@ jest.mock('./track', () => ({
findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`),
}));
jest.mock('./components/CourseCard', () => 'CourseCard');
jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
usePaintedDoorExperimentContext: jest.fn(),
}));
describe('RecommendationsPanel LoadedView', () => {
const props = {
courses: mockData.courses,
isControl: null,
};
let mockExperimentContext = {
experimentVariation: '',
isPaintedDoorWidgetBtnVariation: true,
experimentLoading: false,
};
describe('RecommendationPanelLoadedView', () => {
test('without personalize recommendation', () => {
usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
const el = shallow(<LoadedView {...props} />);
expect(el.snapshot).toMatchSnapshot();
expect(el.instance.findByType('h3')[0].children[0].el).toEqual(messages.popularCoursesHeading.defaultMessage);
});
test('with personalize recommendation', () => {
usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
const el = shallow(<LoadedView {...props} isControl={false} />);
expect(el.snapshot).toMatchSnapshot();
expect(el.instance.findByType('h3')[0].children[0].el).toEqual(messages.recommendationsHeading.defaultMessage);
});
test('test painted door button is rendered if user is in variation', () => {
usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
const wrapper = shallow(<LoadedView {...props} />);
expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).not.toHaveLength(0);
});
test('test explore courses button is returned if user is not in variation', () => {
mockExperimentContext = {
...mockExperimentContext,
isPaintedDoorWidgetBtnVariation: false,
};
usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
const wrapper = shallow(<LoadedView {...props} />);
expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).toHaveLength(0);
expect(wrapper.instance.findByType(Button)[0].children[0].el)
.toEqual(messages.exploreCoursesButton.defaultMessage);
});
test('test explore courses button is returned if experiment is loading', () => {
mockExperimentContext = {
...mockExperimentContext,
isPaintedDoorWidgetBtnVariation: false,
experimentLoading: true,
};
usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
const wrapper = shallow(<LoadedView {...props} />);
expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).toHaveLength(0);
expect(wrapper.instance.findByType(Button)[0].children[0].el)
.toEqual(messages.exploreCoursesButton.defaultMessage);
});
});
});

26
src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap
View File

@@ -62,10 +62,15 @@ exports[`RecommendationsPanel LoadedView RecommendationPanelLoadedView with pers
<div
className="text-center explore-courses-btn"
>
<RecommendationsPaintedDoorBtn
experimentVariation=""
placement="recommendationsPanel"
/>
<Button
as="a"
href="http://localhost:18000/course-search-url"
iconBefore={[MockFunction icons.Search]}
onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
variant="tertiary"
>
Explore courses
</Button>
</div>
</div>
`;
@@ -132,10 +137,15 @@ exports[`RecommendationsPanel LoadedView RecommendationPanelLoadedView without p
<div
className="text-center explore-courses-btn"
>
<RecommendationsPaintedDoorBtn
experimentVariation=""
placement="recommendationsPanel"
/>
<Button
as="a"
href="http://localhost:18000/course-search-url"
iconBefore={[MockFunction icons.Search]}
onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
variant="tertiary"
>
Explore courses
</Button>
</div>
</div>
`;

30
src/widgets/RecommendationsPanel/index.jsx
View File

@@ -4,9 +4,6 @@ import LookingForChallengeWidget from 'widgets/LookingForChallengeWidget';
import LoadingView from './LoadingView';
import LoadedView from './LoadedView';
import hooks from './hooks';
import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
import { RECOMMENDATIONS_PANEL } from '../RecommendationsPaintedDoorBtn/constants';
import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
export const RecommendationsPanel = () => {
const {
@@ -16,29 +13,6 @@ export const RecommendationsPanel = () => {
isLoaded,
isLoading,
} = hooks.useRecommendationPanelData();
const {
experimentVariation,
isPaintedDoorWidgetBtnVariation,
experimentLoading,
} = usePaintedDoorExperimentContext();
const getDefaultOrFailedStateWidget = () => {
if (!experimentLoading && isPaintedDoorWidgetBtnVariation) {
return (
<>
<LookingForChallengeWidget />
<div className="pt-3" />
<RecommendationsPaintedDoorBtn
experimentVariation={experimentVariation}
placement={RECOMMENDATIONS_PANEL}
/>
</>
);
}
return (
<LookingForChallengeWidget />
);
};
if (isLoading) {
return (<LoadingView />);
@@ -49,10 +23,10 @@ export const RecommendationsPanel = () => {
);
}
if (isFailed) {
return getDefaultOrFailedStateWidget();
return (<LookingForChallengeWidget />);
}
// default fallback
return getDefaultOrFailedStateWidget();
return (<LookingForChallengeWidget />);
};
export default RecommendationsPanel;

73
src/widgets/RecommendationsPanel/index.test.jsx
View File

@@ -7,8 +7,6 @@ import mockData from './mockData';
import LoadedView from './LoadedView';
import LoadingView from './LoadingView';
import RecommendationsPanel from '.';
import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
jest.mock('./hooks', () => ({
useRecommendationPanelData: jest.fn(),
@@ -16,9 +14,6 @@ jest.mock('./hooks', () => ({
jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
jest.mock('./LoadingView', () => 'LoadingView');
jest.mock('./LoadedView', () => 'LoadedView');
jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
usePaintedDoorExperimentContext: jest.fn(),
}));
const { courses } = mockData;
@@ -34,13 +29,6 @@ describe('RecommendationsPanel snapshot', () => {
...defaultLoadedViewProps,
};
describe('RecommendationsPanel recommendations tests', () => {
beforeEach(() => {
usePaintedDoorExperimentContext.mockReturnValueOnce({
experimentVariation: '',
isPaintedDoorWidgetBtnVariation: false,
experimentLoading: false,
});
});
it('displays LoadingView if request is loading', () => {
hooks.useRecommendationPanelData.mockReturnValueOnce({
...defaultValues,
@@ -77,65 +65,4 @@ describe('RecommendationsPanel snapshot', () => {
);
});
});
describe('RecommendationsPanel painted door exp tests', () => {
it('displays painted door btn if user is in variation and request is failed', () => {
hooks.useRecommendationPanelData.mockReturnValueOnce({
...defaultValues,
isFailed: true,
});
usePaintedDoorExperimentContext.mockReturnValueOnce({
experimentVariation: '',
isPaintedDoorWidgetBtnVariation: true,
experimentLoading: false,
});
const wrapper = shallow(<RecommendationsPanel />);
expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).not.toHaveLength(0);
});
it('displays painted door btn if user is in variation and no flags are set (defaults)', () => {
hooks.useRecommendationPanelData.mockReturnValueOnce({
...defaultValues,
isFailed: true,
});
usePaintedDoorExperimentContext.mockReturnValueOnce({
experimentVariation: '',
isPaintedDoorWidgetBtnVariation: true,
experimentLoading: false,
});
const wrapper = shallow(<RecommendationsPanel />);
expect(wrapper.instance.findByType(RecommendationsPaintedDoorBtn)).not.toHaveLength(0);
});
it('renders only LookingForChallengeWidget if user is not in variation', () => {
hooks.useRecommendationPanelData.mockReturnValueOnce({
...defaultValues,
isFailed: true,
});
usePaintedDoorExperimentContext.mockReturnValueOnce({
experimentVariation: '',
isPaintedDoorWidgetBtnVariation: false,
experimentLoading: false,
});
expect({ ...shallow(<RecommendationsPanel />).shallowWrapper, children: expect.any(Array) }).toMatchObject(
shallow(<LookingForChallengeWidget />),
);
});
it('renders only LookingForChallengeWidget if experiment is loading', () => {
hooks.useRecommendationPanelData.mockReturnValueOnce({
...defaultValues,
isFailed: true,
});
usePaintedDoorExperimentContext.mockReturnValueOnce({
experimentVariation: '',
isPaintedDoorWidgetBtnVariation: false,
experimentLoading: true,
});
expect({ ...shallow(<RecommendationsPanel />).shallowWrapper, children: expect.any(Array) }).toMatchObject(
shallow(<LookingForChallengeWidget />),
);
});
});
});