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

fix: api updates

Browse Source
This commit is contained in:
Ben Warzeski
2022-08-10 14:42:35 -04:00
parent 1ace0c45ba
commit 2a19b1c5b3
11 changed files with 62 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/containers/CourseCard/components/Banners/EntitlementBanner.jsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import { useIntl } from '@edx/frontend-platform/i18n';
import { Button, MailtoLink } from '@edx/paragon';
@@ -7,10 +9,10 @@ import { hooks as appHooks } from 'data/redux';
import { dateFormatter } from 'utils';
import Banner from 'components/Banner';
import useSelectSessionModalData from 'containers/SelectSessionModal/hooks';
import messages from './messages';
export const EntitlementBanner = ({ cardId }) => {
const dispatch = useDispatch();
const {
isEntitlement,
hasSessions,
@@ -20,7 +22,7 @@ export const EntitlementBanner = ({ cardId }) => {
isExpired,
} = appHooks.useCardEntitlementsData(cardId);
const { supportEmail } = appHooks.usePlatformSettingsData();
const { openSessionModal } = useSelectSessionModalData({ cardId });
const openSessionModal = appHooks.useUpdateSelectSessionModalCallback(dispatch, cardId);
const { formatDate, formatMessage } = useIntl();
if (!isEntitlement) {
@@ -42,7 +44,7 @@ export const EntitlementBanner = ({ cardId }) => {
{formatMessage(messages.entitlementsExpiringSoon, {
changeDeadline: dateFormatter(formatDate, changeDeadline),
selectSessionButton: (
<Button variant="link" size="inline" className="m-0 p-0" onClick={openSessionModal(cardId)}>
<Button variant="link" size="inline" className="m-0 p-0" onClick={openSessionModal}>
{formatMessage(messages.selectSession)}
</Button>
),

10
src/containers/CourseCard/components/Banners/EntitlementBanner.test.jsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
import { useDispatch } from 'react-redux';
import { hooks as appHooks } from 'data/redux';
import EntitlementBanner from './EntitlementBanner';
@@ -9,11 +10,11 @@ jest.mock('data/redux', () => ({
hooks: {
usePlatformSettingsData: jest.fn(),
useCardEntitlementsData: jest.fn(),
useUpdateSelectSessionModalCallback: jest.fn(
(_, cardId) => jest.fn().mockName(`updateSelectSessionModalCallback(${cardId})`),
),
},
}));
jest.mock('containers/SelectSessionModal/hooks', () => () => ({
openSessionModal: (cardId) => jest.fn().mockName(`useSelectSessionModalData.openSessionModal(${cardId})`),
}));
const cardId = 'my-test-course-number';
@@ -35,10 +36,13 @@ const render = (overrides = {}) => {
el = shallow(<EntitlementBanner cardId={cardId} />);
};
const dispatch = useDispatch();
describe('EntitlementBanner', () => {
it('initializes data with course number from entitlements', () => {
render();
expect(appHooks.useCardEntitlementsData).toHaveBeenCalledWith(cardId);
expect(appHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(dispatch, cardId);
});
test('no display if not an entitlement', () => {
render({ entitlements: { isEntitlement: false } });

2
src/containers/CourseCard/components/Banners/__snapshots__/EntitlementBanner.test.jsx.snap
View File

@@ -15,7 +15,7 @@ exports[`EntitlementBanner snapshot: expiration warning 1`] = `
"changeDeadline": "11/11/2022",
"selectSessionButton": <Button
className="m-0 p-0"
onClick={[MockFunction useSelectSessionModalData.openSessionModal(my-test-course-number)]}
onClick={[MockFunction updateSelectSessionModalCallback(my-test-course-number)]}
size="inline"
variant="link"
>

8
src/containers/CourseCard/components/CourseCardActions/hooks.js
View File

@@ -1,12 +1,14 @@
import { useDispatch } from 'react-redux';
import { Locked } from '@edx/paragon/icons';
import { useIntl } from '@edx/frontend-platform/i18n';
import { hooks as appHooks } from 'data/redux';
import useSelectSessionModalData from 'containers/SelectSessionModal/hooks';
import messages from './messages';
export const useCardActionData = ({ cardId }) => {
const { formatMessage } = useIntl();
const dispatch = useDispatch();
const {
canUpgrade,
isAudit,
@@ -22,7 +24,7 @@ export const useCardActionData = ({ cardId }) => {
canChange,
hasSessions,
} = appHooks.useCardEntitlementsData(cardId);
const { openSessionModal } = useSelectSessionModalData();
const openSessionModal = appHooks.useUpdateSelectSessionModalCallback(dispatch, cardId);
let primary;
let secondary = null;
@@ -31,7 +33,7 @@ export const useCardActionData = ({ cardId }) => {
primary = {
children: formatMessage(messages.selectSession),
disabled: !(canChange && hasSessions),
onClick: openSessionModal(cardId),
onClick: openSessionModal,
};
} else {
primary = {

31
src/containers/CourseCard/components/CourseCardActions/hooks.test.js
View File

@@ -1,3 +1,4 @@
import { useDispatch } from 'react-redux';
import { Locked } from '@edx/paragon/icons';
import { useIntl } from '@edx/frontend-platform/i18n';
@@ -12,13 +13,12 @@ jest.mock('data/redux', () => ({
useCardCourseRunData: jest.fn(),
useCardEnrollmentData: jest.fn(),
useCardEntitlementsData: jest.fn(),
useUpdateSelectSessionModalCallback: jest.fn(
(...args) => ({ updateSelectSessionModalCallback: args }),
),
},
}));
jest.mock('containers/SelectSessionModal/hooks', () => () => ({
openSessionModal: (cardId) => jest.fn().mockName(`useSelectSession.openSessionModal(${cardId})`),
}));
const cardId = 'my-test-course-number';
const enrollmentData = {
@@ -40,6 +40,8 @@ const entitlementData = {
hasSessions: false,
};
const dispatch = useDispatch();
describe('CourseCardActions hooks', () => {
let out;
const { formatMessage } = useIntl();
@@ -50,6 +52,23 @@ describe('CourseCardActions hooks', () => {
appHooks.useCardEntitlementsData.mockReturnValueOnce({ ...entitlementData, ...entitlement });
out = hooks.useCardActionData({ cardId });
};
describe('behavior', () => {
beforeEach(() => {
runHook();
});
it('initializes courseRun data with cardId', () => {
expect(appHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
});
it('initializes Enrollment data with cardId', () => {
expect(appHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
});
it('initializes Entitlements data with cardId', () => {
expect(appHooks.useCardEntitlementsData).toHaveBeenCalledWith(cardId);
});
it('initializes SelectSession data with dispatch and cardId', () => {
expect(appHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(dispatch, cardId);
});
});
describe('entitlement', () => {
describe('secondary action', () => {
it('return null on entitlement course', () => {
@@ -83,6 +102,10 @@ describe('CourseCardActions hooks', () => {
});
expect(out.primary.disabled).toEqual(true);
});
it('calls updateSelectSessionModalCallback on click', () => {
runHook({ entitlement: { isEntitlement: true, isFulfilled: false } });
expect(out.primary.onClick).toEqual(appHooks.useUpdateSelectSessionModalCallback(dispatch, cardId));
});
});
describe('fulfilled entitlment', () => {

7
src/containers/CourseCard/components/CourseCardDetails/hooks.js
View File

@@ -1,6 +1,5 @@
import { useIntl } from '@edx/frontend-platform/i18n';
import { hooks as appHooks } from 'data/redux';
import useSelectSessionModalData from 'containers/SelectSessionModal/hooks';
import * as module from './hooks';
import messages from './messages';
@@ -29,7 +28,7 @@ export const useAccessMessage = ({ cardId }) => {
return null;
};
export const useCardDetailsData = ({ cardId }) => {
export const useCardDetailsData = ({ dispatch, cardId }) => {
const { formatMessage } = useIntl();
const providerName = appHooks.useCardProviderData(cardId).name;
const { courseNumber } = appHooks.useCardCourseData(cardId);
@@ -39,7 +38,7 @@ export const useCardDetailsData = ({ cardId }) => {
canChange,
} = appHooks.useCardEntitlementsData(cardId);
const { openSessionModal } = useSelectSessionModalData();
const openSessionModal = appHooks.useUpdateSelectSessionModalCallback(dispatch, cardId);
return {
providerName: providerName || formatMessage(messages.unknownProviderName),
@@ -47,7 +46,7 @@ export const useCardDetailsData = ({ cardId }) => {
isEntitlement,
isFulfilled,
canChange,
openSessionModal: openSessionModal(cardId),
openSessionModal,
formatMessage,
courseNumber,
};

4
src/containers/CourseCard/components/CourseCardDetails/hooks.test.js
View File

@@ -13,11 +13,9 @@ jest.mock('data/redux', () => ({
useCardEnrollmentData: jest.fn(),
useCardEntitlementsData: jest.fn(),
useCardProviderData: jest.fn(),
useUpdateSelectSessionModalCallback: (...args) => ({ updateSelectSessionModalCallback: args }),
},
}));
jest.mock('containers/SelectSessionModal/hooks', () => () => ({
openSessionModal: jest.fn().mockName('useSelectSession.openSessionModalFunction'),
}));
const cardId = 'my-test-card-id';
const courseNumber = 'test-course-number';

4
src/containers/CourseCard/components/CourseCardDetails/index.jsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import { Button } from '@edx/paragon';
@@ -8,6 +9,7 @@ import useCardDetailsData from './hooks';
import messages from './messages';
export const CourseCardDetails = ({ cardId }) => {
const dispatch = useDispatch();
const {
providerName,
accessMessage,
@@ -17,7 +19,7 @@ export const CourseCardDetails = ({ cardId }) => {
openSessionModal,
formatMessage,
courseNumber,
} = useCardDetailsData({ cardId });
} = useCardDetailsData({ cardId, dispatch });
return (
<span data-testid="CourseCardDetails">

12
src/containers/SelectSessionModal/__snapshots__/index.test.jsx.snap
View File

@@ -66,7 +66,7 @@ exports[`SelectSessionModal snapshot modal with leave option 1`] = `
name="sessions"
>
<Form.Radio
key="1/2/2000"
key="test-course-id-1"
value="1/2/2000"
>
1/2/2000
@@ -74,7 +74,7 @@ exports[`SelectSessionModal snapshot modal with leave option 1`] = `
1/2/2020
</Form.Radio>
<Form.Radio
key="2/3/2000"
key="test-course-id-2"
value="2/3/2000"
>
2/3/2000
@@ -82,7 +82,7 @@ exports[`SelectSessionModal snapshot modal with leave option 1`] = `
2/3/2020
</Form.Radio>
<Form.Radio
key="3/4/2000"
key="test-course-id-3"
value="3/4/2000"
>
3/4/2000
@@ -133,7 +133,7 @@ exports[`SelectSessionModal snapshot modal without leave option 1`] = `
name="sessions"
>
<Form.Radio
key="1/2/2000"
key="test-course-id-1"
value="1/2/2000"
>
1/2/2000
@@ -141,7 +141,7 @@ exports[`SelectSessionModal snapshot modal without leave option 1`] = `
1/2/2020
</Form.Radio>
<Form.Radio
key="2/3/2000"
key="test-course-id-2"
value="2/3/2000"
>
2/3/2000
@@ -149,7 +149,7 @@ exports[`SelectSessionModal snapshot modal without leave option 1`] = `
2/3/2020
</Form.Radio>
<Form.Radio
key="3/4/2000"
key="test-course-id-3"
value="3/4/2000"
>
3/4/2000

8
src/containers/SelectSessionModal/index.test.jsx
View File

@@ -18,12 +18,10 @@ const hookReturn = {
hint: 'test-hint',
};
const courseNumber = 'my-test-course-number';
const availableSessions = [
{ startDate: '1/2/2000', endDate: '1/2/2020', courseNumber },
{ startDate: '2/3/2000', endDate: '2/3/2020', courseNumber },
{ startDate: '3/4/2000', endDate: '3/4/2020', courseNumber },
{ startDate: '1/2/2000', endDate: '1/2/2020', courseId: 'test-course-id-1' },
{ startDate: '2/3/2000', endDate: '2/3/2020', courseId: 'test-course-id-2' },
{ startDate: '3/4/2000', endDate: '3/4/2020', courseId: 'test-course-id-3' },
];
describe('SelectSessionModal', () => {

5
src/data/redux/app/selectors.js
View File

@@ -39,10 +39,7 @@ export const courseCardData = (state, cardId) => (
const mkCardSelector = (sel) => (state, cardId) => {
const cardData = module.courseCardData(state, cardId);
if (cardData) {
return sel(cardData);
}
return {};
return sel(cardData);
};
const dateSixMonthsFromNow = new Date();