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

chore: better message tests

Browse Source
This commit is contained in:
Ben Warzeski
2022-07-19 16:00:02 -04:00
parent 25fb5cc41c
commit 02e31e2598
17 changed files with 98 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/containers/CourseCard/components/Banners/CertificateBanner.jsx
View File

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import { Hyperlink } from '@edx/paragon';
import { CheckCircle } from '@edx/paragon/icons';
// import { useIntl } from '@edx/frontend-platform/i18n';
import { selectors } from 'data/redux';
import Banner from 'components/Banner';
@@ -27,6 +28,9 @@ export const CertificateBanner = ({ courseNumber }) => {
isVerified: cardData.isVerified,
minPassingGrade: cardData.minPassingGrade,
});
// const { formatMessage } = useIntl();
if (data.isRestricted) {
return (
<Banner variant="danger">

15
src/containers/CourseCard/components/Banners/CourseBanner.jsx
View File

@@ -2,13 +2,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Hyperlink } from '@edx/paragon';
import { useIntl } from '@edx/frontend-platform/i18n';
import { useCardValues } from 'hooks';
import { selectors } from 'data/redux';
import Banner from 'components/Banner';
import { useCourseBannerData } from './hooks';
import messages from './messages';
const { cardData } = selectors;
export const CourseBanner = ({ courseNumber }) => {
const { courseData, formatMessage } = useCourseBannerData({ courseNumber });
const courseData = useCardValues(courseNumber, {
isVerified: cardData.isVerified,
isCourseRunActive: cardData.isCourseRunActive,
canUpgrade: cardData.canUpgrade,
isAuditAccessExpired: cardData.isAuditAccessExpired,
courseWebsite: cardData.courseWebsite,
});
const { formatMessage } = useIntl();
if (courseData.isVerified) { return null; }

32
src/containers/CourseCard/components/Banners/CourseBanner.test.jsx
View File

@@ -2,20 +2,20 @@ import React from 'react';
import { shallow } from 'enzyme';
import { Hyperlink } from '@edx/paragon';
import { formatMessage } from 'testUtils';
import * as appHooks from 'hooks';
import { testCardValues } from 'testUtils';
import { selectors } from 'data/redux';
import { CourseBanner } from './CourseBanner';
import * as hooks from './hooks';
import messages from './messages';
jest.mock('components/Banner', () => 'Banner');
jest.mock('./hooks', () => ({
useCourseBannerData: jest.fn(),
}));
const { fieldKeys } = selectors.cardData;
const courseNumber = 'my-test-course-number';
let el;
const courseData = {
isVerified: false,
isCourseRunActive: false,
@@ -24,20 +24,22 @@ const courseData = {
courseWebsite: 'test-course-website',
};
let el;
const render = (overrides) => {
hooks.useCourseBannerData.mockReturnValueOnce({
courseData: {
...courseData,
...overrides,
},
formatMessage,
const render = (overrides = {}) => {
appHooks.useCardValues.mockReturnValueOnce({
...courseData,
...overrides,
});
el = shallow(<CourseBanner courseNumber={courseNumber} />);
};
describe('CourseBanner', () => {
testCardValues(courseNumber, {
isVerified: fieldKeys.isVerified,
isCourseRunActive: fieldKeys.isCourseRunActive,
canUpgrade: fieldKeys.canUpgrade,
isAuditAccessExpired: fieldKeys.isAuditAccessExpired,
courseWebsite: fieldKeys.courseWebsite,
}, render);
test('no display if learner is verified', () => {
render({ isVerified: true });
expect(el.isEmptyRender()).toEqual(true);

20
src/containers/CourseCard/components/Banners/hooks.js
View File

@@ -1,20 +0,0 @@
import { useIntl } from '@edx/frontend-platform/i18n';
import { useCardValues } from 'hooks';
import { selectors } from 'data/redux';
const { cardData } = selectors;
export const useCourseBannerData = ({ courseNumber }) => ({
courseData: useCardValues(courseNumber, {
isVerified: cardData.isVerified,
isCourseRunActive: cardData.isCourseRunActive,
canUpgrade: cardData.canUpgrade,
isAuditAccessExpired: cardData.isAuditAccessExpired,
courseWebsite: cardData.courseWebsite,
}),
formatMessage: useIntl().formatMessage,
});
export default {
useCourseBannerData,
};

39
src/containers/CourseCard/components/Banners/hooks.test.js
View File

@@ -1,39 +0,0 @@
import { useIntl } from '@edx/frontend-platform/i18n';
import { selectors } from 'data/redux';
import { testCardValues } from 'testUtils';
import * as appHooks from 'hooks';
import * as hooks from './hooks';
const { fieldKeys } = selectors.cardData;
const courseNumber = 'my-test-course-number';
describe('CourseCard banner hooks', () => {
let out;
const { formatMessage } = useIntl();
describe('useCourseBannerData', () => {
const courseData = {
isVerified: false,
isCourseRunActive: false,
canUpgrade: false,
isAuditAcessExpired: false,
courseWebsite: 'test-course-website',
};
beforeEach(() => {
appHooks.useCardValues.mockReturnValueOnce(courseData);
out = hooks.useCourseBannerData({ courseNumber });
});
testCardValues(courseNumber, {
isVerified: fieldKeys.isVerified,
isCourseRunActive: fieldKeys.isCourseRunActive,
canUpgrade: fieldKeys.canUpgrade,
isAuditAccessExpired: fieldKeys.isAuditAccessExpired,
courseWebsite: fieldKeys.courseWebsite,
});
it('forwards formatMessage from useIntl', () => {
expect(out.formatMessage).toEqual(formatMessage);
});
});
});

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

@@ -1,7 +1,8 @@
import { Locked } from '@edx/paragon/icons';
import { useIntl } from '@edx/frontend-platform/i18n';
import { selectors } from 'data/redux';
import { useIntl, useCardValues } from 'hooks';
import { useCardValues } from 'hooks';
import messages from './messages';
const { cardData } = selectors;

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

@@ -1,4 +1,5 @@
import { Locked } from '@edx/paragon/icons';
import { useIntl } from '@edx/frontend-platform/i18n';
import { selectors } from 'data/redux';
@@ -22,7 +23,7 @@ const props = {
describe('CourseCardActions hooks', () => {
let out;
const { formatMessage } = appHooks.useIntl();
const { formatMessage } = useIntl();
describe('data connection', () => {
beforeEach(() => {
out = hooks.useCardActionData({ courseNumber });

3
src/containers/CourseCard/hooks.js
View File

@@ -1,6 +1,7 @@
import { useIntl } from '@edx/frontend-platform/i18n';
import { selectors } from 'data/redux';
import { useIntl, useCardValues } from 'hooks';
import { useCardValues } from 'hooks';
import * as module from './hooks';
import messages from './messages';

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

@@ -1,3 +1,5 @@
import { useIntl } from '@edx/frontend-platform/i18n';
import { keyStore } from 'utils';
import { selectors } from 'data/redux';
import * as appHooks from 'hooks';
@@ -15,7 +17,7 @@ const hookKeys = keyStore(hooks);
describe('CourseCard hooks', () => {
let out;
const { formatMessage, formatDate } = appHooks.useIntl();
const { formatMessage, formatDate } = useIntl();
describe('useCardData', () => {
beforeEach(() => {
jest.spyOn(hooks, hookKeys.useAccessMessage).mockImplementationOnce(mockAccessMessage);

60
src/containers/EmailSettingsModal/__snapshots__/index.test.jsx.snap
View File

@@ -16,38 +16,28 @@ exports[`EmailSettingsModal render snapshot: emails disabled, show: false 1`] =
}
>
<h4>
<formatMessage
msg="Receive course emails?"
/>
Receive course emails?
</h4>
<Form.Switch
checked={true}
onChange={[MockFunction hooks.onToggle]}
>
<formatMessage
msg="Course emails are on"
/>
Course emails are on
</Form.Switch>
<p>
<formatMessage
msg="Course emailsi include important information about your course."
/>
Course emailsi include important information about your course.
</p>
<ActionRow>
<Button
onClick={[MockFunction closeModal]}
variant="tertiary"
>
<formatMessage
msg="Nevermind"
/>
Nevermind
</Button>
<Button
onClick={[MockFunction hooks.save]}
>
<formatMessage
msg="Save settings"
/>
Save settings
</Button>
</ActionRow>
</div>
@@ -70,38 +60,28 @@ exports[`EmailSettingsModal render snapshot: emails disabled, show: true 1`] = `
}
>
<h4>
<formatMessage
msg="Receive course emails?"
/>
Receive course emails?
</h4>
<Form.Switch
checked={true}
onChange={[MockFunction hooks.onToggle]}
>
<formatMessage
msg="Course emails are on"
/>
Course emails are on
</Form.Switch>
<p>
<formatMessage
msg="Course emailsi include important information about your course."
/>
Course emailsi include important information about your course.
</p>
<ActionRow>
<Button
onClick={[MockFunction closeModal]}
variant="tertiary"
>
<formatMessage
msg="Nevermind"
/>
Nevermind
</Button>
<Button
onClick={[MockFunction hooks.save]}
>
<formatMessage
msg="Save settings"
/>
Save settings
</Button>
</ActionRow>
</div>
@@ -124,38 +104,28 @@ exports[`EmailSettingsModal render snapshot: emails enabled, show: true 1`] = `
}
>
<h4>
<formatMessage
msg="Receive course emails?"
/>
Receive course emails?
</h4>
<Form.Switch
checked={false}
onChange={[MockFunction hooks.onToggle]}
>
<formatMessage
msg="Course emails are off"
/>
Course emails are off
</Form.Switch>
<p>
<formatMessage
msg="Course emailsi include important information about your course."
/>
Course emailsi include important information about your course.
</p>
<ActionRow>
<Button
onClick={[MockFunction closeModal]}
variant="tertiary"
>
<formatMessage
msg="Nevermind"
/>
Nevermind
</Button>
<Button
onClick={[MockFunction hooks.save]}
>
<formatMessage
msg="Save settings"
/>
Save settings
</Button>
</ActionRow>
</div>

28
src/containers/RelatedProgramsModal/__snapshots__/index.test.jsx.snap
View File

@@ -9,19 +9,13 @@ exports[`RelatedProgramsModal snapshot: closed 1`] = `
isOpen={false}
onClose={[MockFunction props.closeModal]}
size="lg"
title={
<formatMessage
msg="Related Programs"
/>
}
title="Related Programs"
>
<ModalDialog.Header
as="h3"
className="programs-title m-0 p-0"
>
<formatMessage
msg="Related Programs"
/>
Related Programs
</ModalDialog.Header>
<ModalDialog.Header
as="h4"
@@ -33,9 +27,7 @@ exports[`RelatedProgramsModal snapshot: closed 1`] = `
className="pl-0"
>
<p>
<formatMessage
msg="Are you looking to expand your knowledge? Enrolling in a Program lets you take a series of courses in the subject that you're interested in"
/>
Are you looking to expand your knowledge? Enrolling in a Program lets you take a series of courses in the subject that you're interested in
</p>
<CardGrid
columnSizes={
@@ -93,19 +85,13 @@ exports[`RelatedProgramsModal snapshot: open 1`] = `
isOpen={true}
onClose={[MockFunction props.closeModal]}
size="lg"
title={
<formatMessage
msg="Related Programs"
/>
}
title="Related Programs"
>
<ModalDialog.Header
as="h3"
className="programs-title m-0 p-0"
>
<formatMessage
msg="Related Programs"
/>
Related Programs
</ModalDialog.Header>
<ModalDialog.Header
as="h4"
@@ -117,9 +103,7 @@ exports[`RelatedProgramsModal snapshot: open 1`] = `
className="pl-0"
>
<p>
<formatMessage
msg="Are you looking to expand your knowledge? Enrolling in a Program lets you take a series of courses in the subject that you're interested in"
/>
Are you looking to expand your knowledge? Enrolling in a Program lets you take a series of courses in the subject that you're interested in
</p>
<CardGrid
columnSizes={

20
src/containers/RelatedProgramsModal/components/__snapshots__/ProgramCard.test.jsx.snap
View File

@@ -12,18 +12,10 @@ exports[`RelatedProgramsModal ProgramCard snapshot 1`] = `
>
<Card.ImageCap
className="program-card-banner"
logoAlt={
<formatMessage
msg="Provider logo"
/>
}
logoAlt="Provider logo"
logoSrc="props.data.logoUrl"
src="props.data.bannerUrl"
srcAlt={
<formatMessage
msg="Programm banner"
/>
}
srcAlt="Programm banner"
/>
<Card.Header
subtitle={
@@ -57,13 +49,9 @@ exports[`RelatedProgramsModal ProgramCard snapshot 1`] = `
<div
className="program-summary mt-2"
>
<formatMessage
msg="{numCourses} Courses"
/>
2 Courses
•
<formatMessage
msg="{numWeeks} Weeks"
/>
1 Weeks
</div>
</div>
</Card>

16
src/containers/UnenrollConfirmModal/components/__snapshots__/ConfirmPane.test.jsx.snap
View File

@@ -3,30 +3,22 @@
exports[`UnenrollConfirmModal ConfirmPane snapshot 1`] = `
<Fragment>
<h4>
<formatMessage
msg="Unenroll from course?"
/>
Unenroll from course?
</h4>
<p>
<formatMessage
msg="Progress that you've made so far will not be saved"
/>
Progress that you've made so far will not be saved
</p>
<ActionRow>
<Button
onClick={[MockFunction props.handleClose]}
variant="tertiary"
>
<formatMessage
msg="Nevermind"
/>
Nevermind
</Button>
<Button
onClick={[MockFunction props.handleConfirm]}
>
<formatMessage
msg="Unenroll"
/>
Unenroll
</Button>
</ActionRow>
</Fragment>

28
src/containers/UnenrollConfirmModal/components/__snapshots__/FinishedPane.test.jsx.snap
View File

@@ -3,22 +3,16 @@
exports[`UnenrollConfirmModal FinishedPane snapshot: did not give reason 1`] = `
<Fragment>
<h4>
<formatMessage
msg="You are unenrolled"
/>
You are unenrolled
</h4>
<p>
<formatMessage
msg="This course will be removed from your dashboard."
/>
This course will be removed from your dashboard.
</p>
<ActionRow>
<Button
onClick={[MockFunction props.handleClose]}
>
<formatMessage
msg="Return to dashboard"
/>
Return to dashboard
</Button>
</ActionRow>
</Fragment>
@@ -27,25 +21,17 @@ exports[`UnenrollConfirmModal FinishedPane snapshot: did not give reason 1`] = `
exports[`UnenrollConfirmModal FinishedPane snapshot: gave reason 1`] = `
<Fragment>
<h4>
<formatMessage
msg="You are unenrolled"
/>
You are unenrolled
</h4>
<p>
<formatMessage
msg="Thank you for sharing your reason for unenrolling. "
/>
<formatMessage
msg="This course will be removed from your dashboard."
/>
Thank you for sharing your reason for unenrolling.
This course will be removed from your dashboard.
</p>
<ActionRow>
<Button
onClick={[MockFunction props.handleClose]}
>
<formatMessage
msg="Return to dashboard"
/>
Return to dashboard
</Button>
</ActionRow>
</Fragment>

54
src/containers/UnenrollConfirmModal/components/__snapshots__/ReasonPane.test.jsx.snap
View File

@@ -3,9 +3,7 @@
exports[`UnenrollConfirmModal ReasonPane snapshot 1`] = `
<Fragment>
<h4>
<formatMessage
msg="What's your main reason for unenrolling?"
/>
What's your main reason for unenrolling?
</h4>
<Form.RadioSet
name="unenrollReason"
@@ -16,84 +14,62 @@ exports[`UnenrollConfirmModal ReasonPane snapshot 1`] = `
key="prereqs"
value="prereqs"
>
<formatMessage
msg="I don't have the academic or language prerequisites"
/>
I don't have the academic or language prerequisites
</Form.Radio>
<Form.Radio
key="difficulty"
value="difficulty"
>
<formatMessage
msg="The course material was too hard"
/>
The course material was too hard
</Form.Radio>
<Form.Radio
key="goals"
value="goals"
>
<formatMessage
msg="This won't help me reach my goals"
/>
This won't help me reach my goals
</Form.Radio>
<Form.Radio
key="broken"
value="broken"
>
<formatMessage
msg="Something was broken"
/>
Something was broken
</Form.Radio>
<Form.Radio
key="time"
value="time"
>
<formatMessage
msg="I don't have the time"
/>
I don't have the time
</Form.Radio>
<Form.Radio
key="browse"
value="browse"
>
<formatMessage
msg="I just wanted to browse the material"
/>
I just wanted to browse the material
</Form.Radio>
<Form.Radio
key="support"
value="support"
>
<formatMessage
msg="I don't have enough support"
/>
I don't have enough support
</Form.Radio>
<Form.Radio
key="quality"
value="quality"
>
<formatMessage
msg="I am not happy with the quality of the content"
/>
I am not happy with the quality of the content
</Form.Radio>
<Form.Radio
key="easy"
value="easy"
>
<formatMessage
msg="The course material was too easy"
/>
The course material was too easy
</Form.Radio>
<Form.Radio
value="custom"
>
<Form.Control
onChange={[MockFunction props.reason.customOption.onChange]}
placeholder={
<formatMessage
msg="Other"
/>
}
placeholder="Other"
value="props.reason.customOption.value"
/>
</Form.Radio>
@@ -103,16 +79,12 @@ exports[`UnenrollConfirmModal ReasonPane snapshot 1`] = `
onClick={[MockFunction props.reason.skip]}
variant="tertiary"
>
<formatMessage
msg="Skip"
/>
Skip
</Button>
<Button
onClick={[MockFunction props.reason.submit]}
>
<formatMessage
msg="Submit"
/>
Submit
</Button>
</ActionRow>
</Fragment>

7
src/setupTest.jsx
View File

@@ -18,12 +18,7 @@ jest.mock('react', () => ({
jest.mock('@edx/frontend-platform/i18n', () => {
const i18n = jest.requireActual('@edx/frontend-platform/i18n');
const PropTypes = jest.requireActual('prop-types');
const formatMessage = jest.fn((msg) => (
<formatMessage
msg={msg.defaultMessage}
{...(msg.values && { values: msg.values })}
/>
));
const { formatMessage } = jest.requireActual('./testUtils');
const formatDate = jest.fn().mockName('useIntl.formatDate');
return {
...i18n,

6
src/testUtils.js
View File

@@ -200,9 +200,13 @@ export class MockUseState {
* Test that useCardValues was called with the given courseNumber and selector mapping.
* @param {string} courseNumber - course run identifier
* @param {obj} mapping - value mapping { <requestedKey>: <selectorFieldKey> }
* @param {[func]} beforeEachFn - optional beforeEach method
*/
export const testCardValues = (courseNumber, mapping) => {
export const testCardValues = (courseNumber, mapping, beforeEachFn) => {
describe('cardData values', () => {
if (beforeEachFn) {
beforeEach(beforeEachFn);
}
let mapped;
test('passess correct courseNumber', () => {
expect(appHooks.useCardValues.mock.calls[0][0]).toEqual(courseNumber);