Andal.LND/frontend-app-learner-dashboard
6
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-15 14:51:25 +05:00
parent 79314ead86 3268165233
commit e1a6293ebb
110 changed files with 1044 additions and 1232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import ActionButton from '.';
@@ -14,12 +14,12 @@ describe('ActionButton', () => {
test('is collapsed', () => {
useIsCollapsed.mockReturnValueOnce(true);
const wrapper = shallow(<ActionButton {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is not collapsed', () => {
useIsCollapsed.mockReturnValueOnce(false);
const wrapper = shallow(<ActionButton {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
});

13
src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
View File

@@ -1,6 +1,5 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { htmlProps } from 'data/constants/htmlKeys';
import { reduxHooks } from 'hooks';
import track from 'tracking';
import useActionDisabledState from '../hooks';
@@ -59,10 +58,10 @@ describe('BeginCourseButton', () => {
wrapper = shallow(<BeginCourseButton {...props} />);
});
test('snapshot', () => {
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
it('should be disabled', () => {
expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
expect(wrapper.instance.props.disabled).toEqual(true);
});
});
describe('enabled', () => {
@@ -70,13 +69,13 @@ describe('BeginCourseButton', () => {
wrapper = shallow(<BeginCourseButton {...props} />);
});
test('snapshot', () => {
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
it('should be enabled', () => {
expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
expect(wrapper.instance.props.disabled).toEqual(false);
});
it('should track enter course clicked event on click, with exec ed param', () => {
expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
track.course.enterCourseClicked,
props.cardId,
homeUrl + execEdPath(props.cardId),

13
src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
View File

@@ -1,6 +1,5 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { htmlProps } from 'data/constants/htmlKeys';
import { reduxHooks } from 'hooks';
import track from 'tracking';
import useActionDisabledState from '../hooks';
@@ -57,10 +56,10 @@ describe('ResumeButton', () => {
wrapper = shallow(<ResumeButton {...props} />);
});
test('snapshot', () => {
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
it('should be disabled', () => {
expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
expect(wrapper.instance.props.disabled).toEqual(true);
});
});
describe('enabled', () => {
@@ -68,13 +67,13 @@ describe('ResumeButton', () => {
wrapper = shallow(<ResumeButton {...props} />);
});
test('snapshot', () => {
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
it('should be enabled', () => {
expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
expect(wrapper.instance.props.disabled).toEqual(false);
});
it('should track enter course clicked event on click, with exec ed param', () => {
expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
track.course.enterCourseClicked,
props.cardId,
resumeUrl + execEdPath(props.cardId),

13
src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx
View File

@@ -1,7 +1,6 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import { htmlProps } from 'data/constants/htmlKeys';
import useActionDisabledState from '../hooks';
import SelectSessionButton from './SelectSessionButton';
@@ -19,17 +18,17 @@ let wrapper;
describe('SelectSessionButton', () => {
const props = { cardId: 'cardId' };
it('default render', () => {
expect(wrapper).toMatchSnapshot();
wrapper = shallow(<SelectSessionButton {...props} />);
expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
expect(wrapper.prop(htmlProps.onClick).getMockName()).toEqual(
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.props.disabled).toEqual(false);
expect(wrapper.instance.props.onClick.getMockName()).toEqual(
reduxHooks.useUpdateSelectSessionModalCallback().getMockName(),
);
});
test('disabled states', () => {
useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
expect(wrapper).toMatchSnapshot();
wrapper = shallow(<SelectSessionButton {...props} />);
expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.props.disabled).toEqual(true);
});
});

13
src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx
View File

@@ -1,8 +1,7 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import track from 'tracking';
import { reduxHooks } from 'hooks';
import { htmlProps } from 'data/constants/htmlKeys';
import useActionDisabledState from '../hooks';
import UpgradeButton from './UpgradeButton';
@@ -32,9 +31,9 @@ describe('UpgradeButton', () => {
describe('snapshot', () => {
test('can upgrade', () => {
const wrapper = shallow(<UpgradeButton {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.props.disabled).toEqual(false);
expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
track.course.upgradeClicked,
props.cardId,
upgradeUrl,
@@ -43,8 +42,8 @@ describe('UpgradeButton', () => {
test('cannot upgrade', () => {
useActionDisabledState.mockReturnValueOnce({ disableUpgradeCourse: true });
const wrapper = shallow(<UpgradeButton {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.props.disabled).toEqual(true);
});
});
});

13
src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
View File

@@ -1,7 +1,6 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import track from 'tracking';
import { htmlProps } from 'data/constants/htmlKeys';
import { reduxHooks } from 'hooks';
import useActionDisabledState from '../hooks';
import ViewCourseButton from './ViewCourseButton';
@@ -29,18 +28,18 @@ const homeUrl = 'homeUrl';
describe('ViewCourseButton', () => {
test('learner can view course', () => {
const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
track.course.enterCourseClicked,
defaultProps.cardId,
homeUrl,
));
expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
expect(wrapper.instance.props.disabled).toEqual(false);
});
test('learner cannot view course', () => {
useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.props.disabled).toEqual(true);
});
});

13
src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap
View File

@@ -1,8 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SelectSessionButton default render 1`] = `undefined`;
exports[`SelectSessionButton disabled states 1`] = `
exports[`SelectSessionButton default render 1`] = `
<ActionButton
disabled={false}
onClick={[MockFunction mockOpenSessionModal]}
@@ -10,3 +8,12 @@ exports[`SelectSessionButton disabled states 1`] = `
Select Session
</ActionButton>
`;
exports[`SelectSessionButton disabled states 1`] = `
<ActionButton
disabled={true}
onClick={[MockFunction mockOpenSessionModal]}
>
Select Session
</ActionButton>
`;

34
src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import CertificateBanner from './CertificateBanner';
@@ -61,7 +61,7 @@ describe('CertificateBanner', () => {
isRestricted: true,
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is restricted with support email', () => {
const wrapper = createWrapper({
@@ -72,7 +72,7 @@ describe('CertificateBanner', () => {
supportEmail: 'suport@email',
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is restricted with billing email', () => {
const wrapper = createWrapper({
@@ -83,7 +83,7 @@ describe('CertificateBanner', () => {
billingEmail: 'billing@email',
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is restricted and verified', () => {
const wrapper = createWrapper({
@@ -94,7 +94,7 @@ describe('CertificateBanner', () => {
isVerified: true,
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is restricted and verified with support email', () => {
const wrapper = createWrapper({
@@ -108,7 +108,7 @@ describe('CertificateBanner', () => {
supportEmail: 'suport@email',
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is restricted and verified with billing email', () => {
const wrapper = createWrapper({
@@ -122,7 +122,7 @@ describe('CertificateBanner', () => {
billingEmail: 'billing@email',
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is restricted and verified with support and billing email', () => {
const wrapper = createWrapper({
@@ -137,21 +137,21 @@ describe('CertificateBanner', () => {
billingEmail: 'billing@email',
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is passing and is downloadable', () => {
const wrapper = createWrapper({
grade: { isPassing: true },
certificate: { isDownloadable: true },
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('not passing and is downloadable', () => {
const wrapper = createWrapper({
grade: { isPassing: false },
certificate: { isDownloadable: true },
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('not passing and audit', () => {
const wrapper = createWrapper({
@@ -159,17 +159,17 @@ describe('CertificateBanner', () => {
isAudit: true,
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('not passing and has finished', () => {
const wrapper = createWrapper({
courseRun: { isArchived: true },
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('not passing and not audit and not finished', () => {
const wrapper = createWrapper({});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is passing and is earned but unavailable', () => {
const wrapper = createWrapper({
@@ -180,7 +180,7 @@ describe('CertificateBanner', () => {
isEarnedButUnavailable: true,
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('is passing and not downloadable render empty', () => {
const wrapper = createWrapper({
@@ -188,7 +188,7 @@ describe('CertificateBanner', () => {
isPassing: true,
},
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
describe('behavior', () => {
@@ -202,7 +202,7 @@ describe('CertificateBanner', () => {
billingEmail: 'billing@email',
},
});
const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
});
@@ -219,7 +219,7 @@ describe('CertificateBanner', () => {
billingEmail: 'billing@email',
},
});
const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage);
});

44
src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { Hyperlink } from '@openedx/paragon';
import { reduxHooks } from 'hooks';
@@ -70,11 +70,11 @@ describe('CourseBanner', () => {
render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } });
});
test('snapshot: (auditAccessExpired, upgradeToAccess)', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
test('messages: (auditAccessExpired, upgradeToAccess)', () => {
expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
expect(el.text()).toContain(messages.upgradeToAccess.defaultMessage);
expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
expect(el.instance.children[0].children[2].el).toContain(messages.upgradeToAccess.defaultMessage);
});
});
describe('audit access expired, cannot upgrade', () => {
@@ -82,11 +82,11 @@ describe('CourseBanner', () => {
render({ enrollment: { isAuditAccessExpired: true } });
});
test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
test('messages: (auditAccessExpired, upgradeToAccess)', () => {
expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
expect(el.find(Hyperlink).text()).toEqual(messages.findAnotherCourse.defaultMessage);
expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
});
});
describe('course run active and cannot upgrade', () => {
@@ -94,31 +94,31 @@ describe('CourseBanner', () => {
render({ courseRun: { isActive: true } });
});
test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
expect(el.text()).toContain(messages.upgradeDeadlinePassed.defaultMessage);
const link = el.find(Hyperlink);
expect(link.text()).toEqual(messages.exploreCourseDetails.defaultMessage);
expect(link.props().destination).toEqual(courseRunData.marketingUrl);
expect(el.instance.children[0].children[0].el).toContain(messages.upgradeDeadlinePassed.defaultMessage);
const link = el.instance.findByType(Hyperlink);
expect(link[0].children[0].el).toEqual(messages.exploreCourseDetails.defaultMessage);
expect(link[0].props.destination).toEqual(courseRunData.marketingUrl);
});
});
test('no display if audit access not expired and (course is not active or can upgrade)', () => {
render();
// isEmptyRender() isn't true because the minimal is <Fragment />
expect(el.html()).toEqual('');
expect(el.instance.children).toEqual([]);
render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } });
expect(el.html()).toEqual('');
expect(el.instance.children).toEqual([]);
});
describe('unmet prerequisites', () => {
beforeEach(() => {
render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
});
test('snapshot: unmetPrerequisites', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
test('messages: prerequisitesNotMet', () => {
expect(el.text()).toContain(messages.prerequisitesNotMet.defaultMessage);
expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage);
});
});
describe('too early', () => {
@@ -126,17 +126,17 @@ describe('CourseBanner', () => {
beforeEach(() => {
render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
});
test('snapshot', () => expect(el).toMatchSnapshot());
test('messages', () => expect(el.text()).toEqual(''));
test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
test('messages', () => expect(el.instance.children).toEqual([]));
});
describe('has start date', () => {
beforeEach(() => {
render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
});
test('snapshot', () => expect(el).toMatchSnapshot());
test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
test('messages: courseHasNotStarted', () => {
expect(el.text()).toContain(
expect(el.instance.children[0].children[0].el).toContain(
formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
);
});
@@ -147,7 +147,7 @@ describe('CourseBanner', () => {
render({ enrollment: { coursewareAccess: { isStaff: true } } });
});
test('snapshot: isStaff', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
});
test('snapshot: stacking banners', () => {
@@ -160,6 +160,6 @@ describe('CourseBanner', () => {
},
},
});
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
});

2
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/__snapshots__/index.test.jsx.snap
View File

@@ -6,6 +6,7 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
>
<p
className="credit-error-msg"
data-testid="credit-error-msg"
>
<format-message-function
message={
@@ -38,6 +39,7 @@ exports[`CreditBanner component render with error state with no email snapshot 1
>
<p
className="credit-error-msg"
data-testid="credit-error-msg"
>
An error occurred with this transaction.
</p>

2
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx
View File

@@ -21,7 +21,7 @@ export const CreditBanner = ({ cardId }) => {
return (
<Banner {...(error && { variant: 'danger' })}>
{error && (
<p className="credit-error-msg">
<p className="credit-error-msg" data-testid="credit-error-msg">
{supportEmail ? formatMessage(messages.error, { supportEmailLink }) : formatMessage(messages.errorNoEmail)}
</p>
)}

26
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { formatMessage } from 'testUtils';
import { MailtoLink } from '@openedx/paragon';
@@ -44,20 +44,18 @@ describe('CreditBanner component', () => {
el = shallow(<CreditBanner cardId={cardId} />);
});
test('snapshot', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
it('passes danger variant to Banner parent', () => {
expect(el.find('Banner').props().variant).toEqual('danger');
expect(el.instance.findByType('Banner')[0].props.variant).toEqual('danger');
});
it('includes credit-error-msg with support email link', () => {
expect(el.find('.credit-error-msg').containsMatchingElement(
formatMessage(messages.error, {
supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
}),
)).toEqual(true);
expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(shallow(formatMessage(messages.error, {
supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
})));
});
it('loads ContentComponent with cardId', () => {
expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
});
});
@@ -70,12 +68,10 @@ describe('CreditBanner component', () => {
el = shallow(<CreditBanner cardId={cardId} />);
});
test('snapshot', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
it('includes credit-error-msg without support email link', () => {
expect(el.find('.credit-error-msg').containsMatchingElement(
formatMessage(messages.errorNoEmail),
)).toEqual(true);
expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(formatMessage(messages.errorNoEmail));
});
});
@@ -89,10 +85,10 @@ describe('CreditBanner component', () => {
el = shallow(<CreditBanner cardId={cardId} />);
});
test('snapshot', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
it('loads ContentComponent with cardId', () => {
expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
});
});
});

12
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { formatMessage } from 'testUtils';
import { reduxHooks } from 'hooks';
@@ -38,19 +38,19 @@ describe('ApprovedContent component', () => {
describe('rendered CreditContent component', () => {
let component;
beforeAll(() => {
component = el.find('CreditContent');
component = el.instance.findByType('CreditContent');
});
test('action.href from credit.providerStatusUrl', () => {
expect(component.props().action.href).toEqual(credit.providerStatusUrl);
expect(component[0].props.action.href).toEqual(credit.providerStatusUrl);
});
test('action.message is formatted viewCredit message', () => {
expect(component.props().action.message).toEqual(formatMessage(messages.viewCredit));
expect(component[0].props.action.message).toEqual(formatMessage(messages.viewCredit));
});
test('action.disabled is false', () => {
expect(component.props().action.disabled).toEqual(false);
expect(component[0].props.action.disabled).toEqual(false);
});
test('message is formatted approved message', () => {
expect(component.props().message).toEqual(formatMessage(
expect(component[0].props.message).toEqual(formatMessage(
messages.approved,
{
congratulations: (<b>{formatMessage(messages.congratulations)}</b>),

12
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import { formatMessage } from 'testUtils';
@@ -36,7 +36,7 @@ const render = () => {
el = shallow(<EligibleContent cardId={cardId} />);
};
const loadComponent = () => {
component = el.find('CreditContent');
component = el.instance.findByType('CreditContent');
};
describe('EligibleContent component', () => {
beforeEach(() => {
@@ -56,24 +56,24 @@ describe('EligibleContent component', () => {
loadComponent();
});
test('action.onClick sends credit purchase track event', () => {
expect(component.props().action.onClick).toEqual(
expect(component[0].props.action.onClick).toEqual(
track.credit.purchase(courseId),
);
});
test('action.message is formatted getCredit message', () => {
expect(component.props().action.message).toEqual(formatMessage(messages.getCredit));
expect(component[0].props.action.message).toEqual(formatMessage(messages.getCredit));
});
test('message is formatted eligible message if no provider', () => {
reduxHooks.useCardCreditData.mockReturnValueOnce({});
render();
loadComponent();
expect(component.props().message).toEqual(formatMessage(
expect(component[0].props.message).toEqual(formatMessage(
messages.eligible,
{ getCredit: (<b>{formatMessage(messages.getCredit)}</b>) },
));
});
test('message is formatted eligible message if provider', () => {
expect(component.props().message).toEqual(
expect(component[0].props.message).toEqual(
formatMessage(messages.eligibleFromProvider, { providerName: credit.providerName }),
);
});

14
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { formatMessage } from 'testUtils';
@@ -45,21 +45,21 @@ describe('MustRequestContent component', () => {
describe('render', () => {
describe('rendered CreditContent component', () => {
beforeEach(() => {
component = el.find('CreditContent');
component = el.instance.findByType('CreditContent');
});
test('action.onClick calls createCreditRequest from useCreditRequestData hook', () => {
expect(component.props().action.onClick).toEqual(createCreditRequest);
expect(component[0].props.action.onClick).toEqual(createCreditRequest);
});
test('action.message is formatted requestCredit message', () => {
expect(component.props().action.message).toEqual(
expect(component[0].props.action.message).toEqual(
formatMessage(messages.requestCredit),
);
});
test('action.disabled is false', () => {
expect(component.props().action.disabled).toEqual(false);
expect(component[0].props.action.disabled).toEqual(false);
});
test('message is formatted mustRequest message', () => {
expect(component.props().message).toEqual(
expect(component[0].props.message).toEqual(
formatMessage(messages.mustRequest, {
linkToProviderSite: <ProviderLink cardId={cardId} />,
requestCredit: <b>{formatMessage(messages.requestCredit)}</b>,
@@ -67,7 +67,7 @@ describe('MustRequestContent component', () => {
);
});
test('requestData drawn from useCreditRequestData hook', () => {
expect(component.props().requestData).toEqual(requestData);
expect(component[0].props.requestData).toEqual(requestData);
});
});
});

12
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { formatMessage } from 'testUtils';
import { reduxHooks } from 'hooks';
@@ -40,21 +40,21 @@ describe('PendingContent component', () => {
describe('render', () => {
describe('rendered CreditContent component', () => {
beforeEach(() => {
component = el.find('CreditContent');
component = el.instance.findByType('CreditContent');
});
test('action.href will go to provider status site', () => {
expect(component.props().action.href).toEqual(providerStatusUrl);
expect(component[0].props.action.href).toEqual(providerStatusUrl);
});
test('action.message is formatted requestCredit message', () => {
expect(component.props().action.message).toEqual(
expect(component[0].props.action.message).toEqual(
formatMessage(messages.viewDetails),
);
});
test('action.disabled is false', () => {
expect(component.props().action.disabled).toEqual(false);
expect(component[0].props.action.disabled).toEqual(false);
});
test('message is formatted pending message', () => {
expect(component.props().message).toEqual(
expect(component[0].props.message).toEqual(
formatMessage(messages.received, { providerName }),
);
});

8
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { formatMessage } from 'testUtils';
import { reduxHooks } from 'hooks';
@@ -25,7 +25,7 @@ reduxHooks.useCardCreditData.mockReturnValue(credit);
let el;
let component;
const render = () => { el = shallow(<RejectedContent cardId={cardId} />); };
const loadComponent = () => { component = el.find('CreditContent'); };
const loadComponent = () => { component = el.instance.findByType('CreditContent'); };
describe('RejectedContent component', () => {
beforeEach(render);
@@ -38,10 +38,10 @@ describe('RejectedContent component', () => {
describe('rendered CreditContent component', () => {
beforeAll(loadComponent);
test('no action is passed', () => {
expect(component.props().action).toEqual(undefined);
expect(component[0].props.action).toEqual(undefined);
});
test('message is formatted rejected message', () => {
expect(component.props().message).toEqual(formatMessage(
expect(component[0].props.message).toEqual(formatMessage(
messages.rejected,
{
linkToProviderSite: <ProviderLink cardId={cardId} />,

3
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.jsx
View File

@@ -6,7 +6,7 @@ import CreditRequestForm from './CreditRequestForm';
export const CreditContent = ({ action, message, requestData }) => (
<>
<div className="message-copy credit-msg">
<div className="message-copy credit-msg" data-testid="credit-msg">
{message}
</div>
{action && (
@@ -21,6 +21,7 @@ export const CreditContent = ({ action, message, requestData }) => (
variant="outline-primary"
className="border-gray-400"
onClick={action.onClick}
data-testid="action-row-btn"
>
{action.message}
</Button>

28
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import CreditContent from './CreditContent';
@@ -22,24 +22,24 @@ describe('CreditContent component', () => {
el = shallow(<CreditContent {...props} />);
});
test('snapshot', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
it('loads href, onClick, and message into action row button', () => {
const buttonEl = el.find('ActionRow Button');
expect(buttonEl.props().href).toEqual(action.href);
expect(buttonEl.props().onClick).toEqual(action.onClick);
expect(buttonEl.props().disabled).toEqual(action.disabled);
expect(buttonEl.text()).toEqual(action.message);
const buttonEl = el.instance.findByTestId('action-row-btn')[0];
expect(buttonEl.props.href).toEqual(action.href);
expect(buttonEl.props.onClick).toEqual(action.onClick);
expect(buttonEl.props.disabled).toEqual(action.disabled);
expect(buttonEl.children[0].el).toEqual(action.message);
});
it('loads message into credit-msg div', () => {
expect(el.find('div.credit-msg').text()).toEqual(message);
expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
});
it('loads CreditRequestForm with passed requestData', () => {
expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData);
expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
});
test('disables action button when action.disabled is true', () => {
el.setProps({ action: { ...action, disabled: true } });
expect(el.find('ActionRow Button').props().disabled).toEqual(true);
el = shallow(<CreditContent {...props} action={{ ...action, disabled: true }} />);
expect(el.instance.findByTestId('action-row-btn')[0].props.disabled).toEqual(true);
});
});
describe('without action', () => {
@@ -47,13 +47,13 @@ describe('CreditContent component', () => {
el = shallow(<CreditContent {...{ message, requestData }} />);
});
test('snapshot', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
it('loads message into credit-msg div', () => {
expect(el.find('div.credit-msg').text()).toEqual(message);
expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
});
it('loads CreditRequestForm with passed requestData', () => {
expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData);
expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
});
});
});

20
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { keyStore } from 'utils';
@@ -46,19 +46,19 @@ describe('CreditRequestForm component', () => {
shallowRender(requestData);
});
test('snapshot', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
it('loads Form with requestData url', () => {
expect(el.find('Form').props().action).toEqual(requestData.url);
expect(el.instance.findByType('Form')[0].props.action).toEqual(requestData.url);
});
it('loads a textarea form control for each requestData parameter', () => {
const controls = el.find('FormControl');
expect(controls.at(0).props().name).toEqual(paramKeys.key1);
expect(controls.at(0).props().value).toEqual(requestData.parameters.key1);
expect(controls.at(1).props().name).toEqual(paramKeys.key2);
expect(controls.at(1).props().value).toEqual(requestData.parameters.key2);
expect(controls.at(2).props().name).toEqual(paramKeys.key3);
expect(controls.at(2).props().value).toEqual(requestData.parameters.key3);
const controls = el.instance.findByType('FormControl');
expect(controls[0].props.name).toEqual(paramKeys.key1);
expect(controls[0].props.value).toEqual(requestData.parameters.key1);
expect(controls[1].props.name).toEqual(paramKeys.key2);
expect(controls[1].props.value).toEqual(requestData.parameters.key2);
expect(controls[2].props.name).toEqual(paramKeys.key3);
expect(controls[2].props.value).toEqual(requestData.parameters.key3);
});
});
});

8
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
@@ -30,13 +30,13 @@ describe('ProviderLink component', () => {
});
describe('render', () => {
test('snapshot', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
it('passes credit.providerStatusUrl to the hyperlink href', () => {
expect(el.find('Hyperlink').props().href).toEqual(credit.providerStatusUrl);
expect(el.instance.findByType('Hyperlink')[0].props.href).toEqual(credit.providerStatusUrl);
});
it('passes providerName for the link message', () => {
expect(el.find('Hyperlink').text()).toEqual(credit.providerName);
expect(el.instance.findByType('Hyperlink')[0].children[0].el).toEqual(credit.providerName);
});
});
});

3
src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/__snapshots__/CreditContent.test.jsx.snap
View File

@@ -4,6 +4,7 @@ exports[`CreditContent component render with action snapshot 1`] = `
<Fragment>
<div
className="message-copy credit-msg"
data-testid="credit-msg"
>
test-message
</div>
@@ -13,6 +14,7 @@ exports[`CreditContent component render with action snapshot 1`] = `
<Button
as="a"
className="border-gray-400"
data-testid="action-row-btn"
disabled={false}
href="test-action-href"
onClick={[MockFunction test-action-onClick]}
@@ -40,6 +42,7 @@ exports[`CreditContent component render without action snapshot 1`] = `
<Fragment>
<div
className="message-copy credit-msg"
data-testid="credit-msg"
>
test-message
</div>

6
src/containers/CourseCard/components/CourseCardBanners/EntitlementBanner.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import EntitlementBanner from './EntitlementBanner';
@@ -50,11 +50,11 @@ describe('EntitlementBanner', () => {
});
test('snapshot: no sessions available', () => {
render({ entitlement: { isFulfilled: false, hasSessions: false } });
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
test('snapshot: expiration warning', () => {
render({ entitlement: { showExpirationWarning: true } });
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
test('no display if sessions available and not displaying warning', () => {
render();

6
src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/ProgramsList.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { ProgramsList } from './ProgramsList';
@@ -16,8 +16,8 @@ describe('ProgramsList', () => {
it('renders correctly', () => {
const wrapper = shallow(<ProgramsList programs={programs} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.find('li').length).toEqual(programs.length);
expect(wrapper.instance.findByType('li').length).toEqual(programs.length);
});
});

22
src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.jsx
View File

@@ -15,16 +15,20 @@ export const RelatedProgramsBanner = ({ cardId }) => {
const programData = reduxHooks.useCardRelatedProgramsData(cardId);
if (!programData?.length) {
return null;
}
return (
programData?.length > 0 && (
<Banner
icon={Program}
className="bg-white border-top border-bottom mb-0 related-programs-banner"
>
<span className="font-weight-bolder">{formatMessage(messages.relatedPrograms)}</span>
<ProgramList programs={programData.list} />
</Banner>
)
<Banner
icon={Program}
className="bg-white border-top border-bottom mb-0 related-programs-banner"
>
<span className="font-weight-bolder">
{formatMessage(messages.relatedPrograms)}
</span>
<ProgramList programs={programData.list} />
</Banner>
);
};
RelatedProgramsBanner.propTypes = {

4
src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import RelatedProgramsBanner from '.';
@@ -37,6 +37,6 @@ describe('RelatedProgramsBanner', () => {
length: 2,
});
const el = shallow(<RelatedProgramsBanner cardId={cardId} />);
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
});

2
src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap
View File

@@ -15,7 +15,7 @@ exports[`CertificateBanner snapshot is passing and is earned but unavailable 1`]
</Banner>
`;
exports[`CertificateBanner snapshot is passing and not downloadable render empty 1`] = `""`;
exports[`CertificateBanner snapshot is passing and not downloadable render empty 1`] = `null`;
exports[`CertificateBanner snapshot is restricted 1`] = `
<Banner

6
src/containers/CourseCard/components/CourseCardBanners/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
@@ -22,11 +22,11 @@ describe('CourseCardBanners', () => {
};
test('renders default CourseCardBanners', () => {
const wrapper = shallow(<CourseCardBanners {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('render with isEnrolled false', () => {
reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false });
const wrapper = shallow(<CourseCardBanners {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});

86
src/containers/CourseCard/components/CourseCardDetails/__snapshots__/index.test.jsx.snap
View File

@@ -1,54 +1,56 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CourseCard Details component does not have change session button on regular course 1`] = `
<span
className="small"
data-testid="CourseCardDetails"
>
provider-name
•
test-course-number
• access-message
</span>
<div>
<span
class="small"
data-testid="CourseCardDetails"
>
provider-name
•
test-course-number
• access-message
</span>
</div>
`;
exports[`CourseCard Details component has change session button on entitlement course 1`] = `
<span
className="small"
data-testid="CourseCardDetails"
>
provider-name
•
test-course-number
• access-message
•
<Button
className="m-0 p-0"
onClick={[MockFunction useSelectSession.openSessionModal]}
size="inline"
variant="link"
<div>
<span
class="small"
data-testid="CourseCardDetails"
>
change-or-leave-session-message
</Button>
</span>
provider-name
•
test-course-number
• access-message
•
<button
class="m-0 p-0"
variant="link"
>
change-or-leave-session-message
</button>
</span>
</div>
`;
exports[`CourseCard Details component has change session button on entitlement course but no access message 1`] = `
<span
className="small"
data-testid="CourseCardDetails"
>
provider-name
•
test-course-number
•
<Button
className="m-0 p-0"
onClick={[MockFunction useSelectSession.openSessionModal]}
size="inline"
variant="link"
<div>
<span
class="small"
data-testid="CourseCardDetails"
>
change-or-leave-session-message
</Button>
</span>
provider-name
•
test-course-number
•
<button
class="m-0 p-0"
variant="link"
>
change-or-leave-session-message
</button>
</span>
</div>
`;

33
src/containers/CourseCard/components/CourseCardDetails/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { render } from '@testing-library/react';
import CourseCardDetails from '.';
@@ -28,27 +28,44 @@ describe('CourseCard Details component', () => {
...defaultHooks,
...hookOverrides,
});
return shallow(<CourseCardDetails cardId={cardId} />);
return render(<CourseCardDetails cardId={cardId} />);
};
const fetchSeparators = (wrapper) => {
const elements = wrapper.container.querySelectorAll('*');
let separatorsCount = 0;
elements.forEach((element) => {
// Use a regular expression to find all occurrences of '•' in the text content
const separatorMatches = element.textContent.match(/•/g);
// If matches are found, add the count to the total
if (separatorMatches) {
separatorsCount += separatorMatches.length;
}
});
return separatorsCount;
};
test('has change session button on entitlement course', () => {
const wrapper = createWrapper();
expect(wrapper).toMatchSnapshot();
expect(wrapper.container).toMatchSnapshot();
// it has 3 separator, 4 column
expect(wrapper.text().match(/•/g)).toHaveLength(3);
expect(fetchSeparators(wrapper)).toBe(3);
});
test('has change session button on entitlement course but no access message', () => {
const wrapper = createWrapper({ accessMessage: null });
expect(wrapper).toMatchSnapshot();
expect(wrapper.container).toMatchSnapshot();
// it has 2 separator, 3 column
expect(wrapper.text().match(/•/g)).toHaveLength(2);
expect(fetchSeparators(wrapper)).toBe(2);
});
test('does not have change session button on regular course', () => {
const wrapper = createWrapper({ isEntitlement: false });
expect(wrapper).toMatchSnapshot();
expect(wrapper.container).toMatchSnapshot();
// it has 2 separator, 3 column
expect(wrapper.text().match(/•/g)).toHaveLength(2);
expect(fetchSeparators(wrapper)).toBe(2);
});
});

12
src/containers/CourseCard/components/CourseCardImage.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import track from 'tracking';
@@ -36,9 +36,9 @@ describe('CourseCardImage', () => {
describe('snapshot', () => {
test('renders clickable link course Image', () => {
const wrapper = shallow(<CourseCardImage {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.type()).toBe('a');
expect(wrapper.prop('onClick')).toEqual(
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.type).toBe('a');
expect(wrapper.instance.props.onClick).toEqual(
reduxHooks.useTrackCourseEvent(
track.course.courseImageClicked,
props.cardId,
@@ -49,8 +49,8 @@ describe('CourseCardImage', () => {
test('renders disabled link', () => {
useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
const wrapper = shallow(<CourseCardImage {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.type()).toBe('div');
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.type).toBe('div');
});
});
describe('behavior', () => {

18
src/containers/CourseCard/components/CourseCardTitle.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import track from 'tracking';
@@ -34,10 +34,10 @@ describe('CourseCardTitle', () => {
describe('snapshot', () => {
test('renders clickable link course title', () => {
const wrapper = shallow(<CourseCardTitle {...props} />);
expect(wrapper).toMatchSnapshot();
const title = wrapper.find('.course-card-title');
expect(title.type()).toBe('a');
expect(title.prop('onClick')).toEqual(
expect(wrapper.snapshot).toMatchSnapshot();
const title = wrapper.instance.findByTestId('CourseCardTitle');
expect(title[0].type).toBe('a');
expect(title[0].props.onClick).toEqual(
reduxHooks.useTrackCourseEvent(
track.course.courseTitleClicked,
props.cardId,
@@ -48,10 +48,10 @@ describe('CourseCardTitle', () => {
test('renders disabled link', () => {
useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
const wrapper = shallow(<CourseCardTitle {...props} />);
expect(wrapper).toMatchSnapshot();
const title = wrapper.find('.course-card-title');
expect(title.type()).toBe('span');
expect(title.prop('onClick')).toBeUndefined();
expect(wrapper.snapshot).toMatchSnapshot();
const title = wrapper.instance.findByTestId('CourseCardTitle');
expect(title[0].type).toBe('span');
expect(title[0].props.onClick).toBeUndefined();
});
});
describe('behavior', () => {

13
src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx
View File

@@ -10,13 +10,14 @@ import useRelatedProgramsBadgeData from './hooks';
export const RelatedProgramsBadge = ({ cardId }) => {
const {
isOpen,
openModal,
closeModal,
numPrograms,
programsMessage,
isOpen, openModal, closeModal, numPrograms, programsMessage,
} = useRelatedProgramsBadgeData({ cardId });
return (numPrograms > 0) && (
if (numPrograms === 0) {
return null;
}
return (
<>
<Button
data-testid="RelatedProgramsBadge"

4
src/containers/CourseCard/components/RelatedProgramsBadge/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import useRelatedProgramsBadge from './hooks';
import RelatedProgramsBadge from '.';
@@ -25,6 +25,6 @@ describe('RelatedProgramsBadge component', () => {
});
test('snapshot: 3 programs', () => {
useRelatedProgramsBadge.mockReturnValueOnce(hookProps);
expect(shallow(<RelatedProgramsBadge cardId={cardId} />)).toMatchSnapshot();
expect(shallow(<RelatedProgramsBadge cardId={cardId} />).snapshot).toMatchSnapshot();
});
});

80
src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap
View File

@@ -15,27 +15,29 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
}
tabIndex="-1"
>
<img
alt="Course thumbnail"
className="pgn__card-image-cap show"
src="banner-img-src"
/>
<span
className="course-card-verify-ribbon-container"
title="You're enrolled as a verified student"
>
<Badge
as="div"
className="w-100"
variant="success"
>
Verified
</Badge>
<Fragment>
<img
alt="ID Verified Ribbon/Badge"
src="test-file-stub"
alt="Course thumbnail"
className="pgn__card-image-cap show"
src="banner-img-src"
/>
</span>
<span
className="course-card-verify-ribbon-container"
title="You're enrolled as a verified student"
>
<Badge
as="div"
className="w-100"
variant="success"
>
Verified
</Badge>
<img
alt="ID Verified Ribbon/Badge"
src="test-file-stub"
/>
</span>
</Fragment>
</a>
`;
@@ -43,26 +45,28 @@ exports[`CourseCardImage snapshot renders disabled link 1`] = `
<div
className="pgn__card-wrapper-image-cap overflow-visible orientation"
>
<img
alt="Course thumbnail"
className="pgn__card-image-cap show"
src="banner-img-src"
/>
<span
className="course-card-verify-ribbon-container"
title="You're enrolled as a verified student"
>
<Badge
as="div"
className="w-100"
variant="success"
>
Verified
</Badge>
<Fragment>
<img
alt="ID Verified Ribbon/Badge"
src="test-file-stub"
alt="Course thumbnail"
className="pgn__card-image-cap show"
src="banner-img-src"
/>
</span>
<span
className="course-card-verify-ribbon-container"
title="You're enrolled as a verified student"
>
<Badge
as="div"
className="w-100"
variant="success"
>
Verified
</Badge>
<img
alt="ID Verified Ribbon/Badge"
src="test-file-stub"
/>
</span>
</Fragment>
</div>
`;

6
src/containers/CourseCard/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import CourseCard from '.';
import hooks from './hooks';
@@ -20,10 +20,10 @@ const cardId = 'test-card-id';
describe('CourseCard component', () => {
test('snapshot: collapsed', () => {
hooks.useIsCollapsed.mockReturnValueOnce(true);
expect(shallow(<CourseCard cardId={cardId} />)).toMatchSnapshot();
expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
});
test('snapshot: not collapsed', () => {
hooks.useIsCollapsed.mockReturnValueOnce(false);
expect(shallow(<CourseCard cardId={cardId} />)).toMatchSnapshot();
expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
});
});

4
src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { FilterKeys } from 'data/constants/app';
import ActiveCourseFilters from './ActiveCourseFilters';
@@ -15,7 +15,7 @@ describe('ActiveCourseFilters', () => {
describe('snapshot', () => {
test('renders', () => {
const wrapper = shallow(<ActiveCourseFilters {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
});

8
src/containers/CourseFilterControls/CourseFilterControls.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { breakpoints, useWindowSize } from '@openedx/paragon';
@@ -44,21 +44,21 @@ describe('CourseFilterControls', () => {
reduxHooks.useHasCourses.mockReturnValueOnce(false);
useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
const wrapper = shallow(<CourseFilterControls {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
describe('mobile', () => {
test('snapshot', () => {
useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 });
const wrapper = shallow(<CourseFilterControls {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
describe('is not mobile', () => {
test('snapshot', () => {
useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
const wrapper = shallow(<CourseFilterControls {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
});

4
src/containers/CourseFilterControls/components/Checkbox.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { FilterKeys } from 'data/constants/app';
import Checkbox from './Checkbox';
@@ -8,7 +8,7 @@ describe('Checkbox', () => {
Object.keys(FilterKeys).forEach((filterKey) => {
it(`renders ${filterKey}`, () => {
const wrapper = shallow(<Checkbox filterKey={filterKey} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
});

4
src/containers/CourseFilterControls/components/FilterForm.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { FilterKeys } from 'data/constants/app';
import FilterForm, { filterOrder } from './FilterForm';
@@ -13,7 +13,7 @@ describe('FilterForm', () => {
describe('snapshot', () => {
test('renders', () => {
const wrapper = shallow(<FilterForm {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});

4
src/containers/CourseFilterControls/components/SortForm.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { SortKeys } from 'data/constants/app';
import SortForm from './SortForm';
@@ -13,7 +13,7 @@ describe('SortForm', () => {
describe('snapshot', () => {
test('renders', () => {
const wrapper = shallow(<SortForm {...props} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
});

4
src/containers/CourseList/NoCoursesView/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import EmptyCourse from '.';
@@ -13,6 +13,6 @@ jest.mock('hooks', () => ({
describe('NoCoursesView', () => {
test('snapshot', () => {
expect(shallow(<EmptyCourse />)).toMatchSnapshot();
expect(shallow(<EmptyCourse />).snapshot).toMatchSnapshot();
});
});

142
src/containers/CourseList/__snapshots__/index.test.jsx.snap
View File

@@ -18,34 +18,36 @@ exports[`CourseList collapsed with multiple courses and pages snapshot 1`] = `
<CourseFilterControls />
</div>
</div>
<div
id="course-list-active-filters-container"
>
<ActiveCourseFilters />
</div>
<div
className="d-flex flex-column flex-grow-1"
>
<CourseCard
cardId="foo"
key="foo"
/>
<CourseCard
cardId="bar"
key="bar"
/>
<CourseCard
cardId="baz"
key="baz"
/>
<Pagination
className="mx-auto mb-2"
onPageSelect={[MockFunction setPageNumber]}
pageCount={3}
paginationLabel="Course List"
variant="reduced"
/>
</div>
<Fragment>
<div
id="course-list-active-filters-container"
>
<ActiveCourseFilters />
</div>
<div
className="d-flex flex-column flex-grow-1"
>
<CourseCard
cardId="foo"
key="foo"
/>
<CourseCard
cardId="bar"
key="bar"
/>
<CourseCard
cardId="baz"
key="baz"
/>
<Pagination
className="mx-auto mb-2"
onPageSelect={[MockFunction setPageNumber]}
pageCount={3}
paginationLabel="Course List"
variant="reduced"
/>
</div>
</Fragment>
</div>
`;
@@ -67,9 +69,11 @@ exports[`CourseList no courses snapshot 1`] = `
<CourseFilterControls />
</div>
</div>
<div
className="d-flex flex-column flex-grow-1"
/>
<Fragment>
<div
className="d-flex flex-column flex-grow-1"
/>
</Fragment>
</div>
`;
@@ -91,9 +95,11 @@ exports[`CourseList no filters snapshot 1`] = `
<CourseFilterControls />
</div>
</div>
<div
className="d-flex flex-column flex-grow-1"
/>
<Fragment>
<div
className="d-flex flex-column flex-grow-1"
/>
</Fragment>
</div>
`;
@@ -117,16 +123,18 @@ exports[`CourseList with filters snapshot 1`] = `
/>
</div>
</div>
<div
id="course-list-active-filters-container"
>
<ActiveCourseFilters
abitary="filter"
<Fragment>
<div
id="course-list-active-filters-container"
>
<ActiveCourseFilters
abitary="filter"
/>
</div>
<div
className="d-flex flex-column flex-grow-1"
/>
</div>
<div
className="d-flex flex-column flex-grow-1"
/>
</Fragment>
</div>
`;
@@ -148,28 +156,30 @@ exports[`CourseList with multiple courses and pages snapshot 1`] = `
<CourseFilterControls />
</div>
</div>
<div
className="d-flex flex-column flex-grow-1"
>
<CourseCard
cardId="foo"
key="foo"
/>
<CourseCard
cardId="bar"
key="bar"
/>
<CourseCard
cardId="baz"
key="baz"
/>
<Pagination
className="mx-auto mb-2"
onPageSelect={[MockFunction setPageNumber]}
pageCount={3}
paginationLabel="Course List"
variant="secondary"
/>
</div>
<Fragment>
<div
className="d-flex flex-column flex-grow-1"
>
<CourseCard
cardId="foo"
key="foo"
/>
<CourseCard
cardId="bar"
key="bar"
/>
<CourseCard
cardId="baz"
key="baz"
/>
<Pagination
className="mx-auto mb-2"
onPageSelect={[MockFunction setPageNumber]}
pageCount={3}
paginationLabel="Course List"
variant="secondary"
/>
</div>
</Fragment>
</div>
`;

12
src/containers/CourseList/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import { useCourseListData, useIsCollapsed } from './hooks';
@@ -42,13 +42,13 @@ describe('CourseList', () => {
test('snapshot', () => {
reduxHooks.useHasCourses.mockReturnValue(true);
const wrapper = createWrapper();
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
describe('no filters', () => {
test('snapshot', () => {
const wrapper = createWrapper();
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
describe('with filters', () => {
@@ -57,7 +57,7 @@ describe('CourseList', () => {
filterOptions: { abitary: 'filter' },
showFilters: true,
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
describe('with multiple courses and pages', () => {
@@ -66,7 +66,7 @@ describe('CourseList', () => {
visibleList: [{ cardId: 'foo' }, { cardId: 'bar' }, { cardId: 'baz' }],
numPages: 3,
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
describe('collapsed with multiple courses and pages', () => {
@@ -77,7 +77,7 @@ describe('CourseList', () => {
numPages: 3,
showFilters: true,
});
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
});

37
src/containers/Dashboard/DashboardLayout.test.jsx
View File

@@ -1,8 +1,7 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { Col, Row } from '@openedx/paragon';
import WidgetFooter from 'containers/WidgetContainers/WidgetFooter';
import hooks from './hooks';
import DashboardLayout, { columnConfig } from './DashboardLayout';
@@ -32,43 +31,43 @@ describe('DashboardLayout', () => {
const testColumns = () => {
it('loads courseList and sidebar column layout', () => {
const columns = el.find(Row).find(Col);
const columns = el.instance.findByType(Row)[0].findByType(Col);
Object.keys(columnConfig.sidebar).forEach(size => {
expect(columns.at(1).props()[size]).toEqual(columnConfig.sidebar[size]);
expect(columns[1].props[size]).toEqual(columnConfig.sidebar[size]);
});
});
it('displays children in first column', () => {
const columns = el.find(Row).find(Col);
expect(columns.at(0).contains(children)).toEqual(true);
const columns = el.instance.findByType(Row)[0].findByType(Col);
expect(columns[0].children).not.toHaveLength(0);
});
it('displays sidebar prop in second column', () => {
const columns = el.find(Row).find(Col);
expect(columns.at(1).find(props.sidebar)).toHaveLength(1);
const columns = el.instance.findByType(Row)[0].findByType(Col);
expect(columns[1].findByType(props.sidebar)).toHaveLength(1);
});
it('displays a footer in the second row', () => {
const columns = el.find(Row).at(1).find(Col);
expect(columns.at(0).containsMatchingElement(<WidgetFooter />)).toBeTruthy();
const columns = el.instance.findByType(Row)[1].findByType(Col);
expect(columns[0].children[0].type).toEqual('WidgetFooter');
});
};
const testSidebarLayout = () => {
it('displays widthSidebar width for course list column', () => {
const columns = el.find(Row).find(Col);
const columns = el.instance.findByType(Row)[0].findByType(Col);
Object.keys(columnConfig.courseList.withSidebar).forEach(size => {
expect(columns.at(0).props()[size]).toEqual(columnConfig.courseList.withSidebar[size]);
expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]);
});
});
};
const testNoSidebarLayout = () => {
it('displays noSidebar width for course list column', () => {
const columns = el.find(Row).find(Col);
const columns = el.instance.findByType(Row)[0].findByType(Col);
Object.keys(columnConfig.courseList.noSidebar).forEach(size => {
expect(columns.at(0).props()[size]).toEqual(columnConfig.courseList.noSidebar[size]);
expect(columns[0].props[size]).toEqual(columnConfig.courseList.noSidebar[size]);
});
});
};
const testSnapshot = () => {
test('snapshot', () => {
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
};
describe('collapsed', () => {
@@ -86,17 +85,17 @@ describe('DashboardLayout', () => {
testNoSidebarLayout();
});
it('does not show spacer component above widget sidebar', () => {
const columns = el.find(Col);
expect(columns.at(1).find('h2').length).toEqual(0);
const columns = el.instance.findByType(Col);
expect(columns[1].findByType('h2').length).toEqual(0);
});
});
describe('not collapsed', () => {
const testWidgetSpacing = () => {
it('shows a blank (nbsp) h2 spacer component above widget sidebar', () => {
const columns = el.find(Col);
const columns = el.instance.findByType(Col);
// nonbreaking space equivalent
expect(columns.at(1).find('h2').text()).toEqual('\xA0');
expect(columns[1].findByType('h2')[0].children[0].el).toEqual('\xA0');
});
};
describe('sidebar showing', () => {

6
src/containers/Dashboard/LoadingView.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { Spinner } from '@openedx/paragon';
import hooks from './hooks';
@@ -14,10 +14,10 @@ describe('LoadingView', () => {
hooks.useDashboardMessages.mockReturnValueOnce({ spinnerScreenReaderText });
});
test('snapshot', () => {
expect(shallow(<LoadingView />)).toMatchSnapshot();
expect(shallow(<LoadingView />).snapshot).toMatchSnapshot();
});
it('renders spinner component with associated screen reader text', () => {
const wrapper = shallow(<LoadingView />);
expect(wrapper.find(Spinner).props().screenReaderText).toEqual(spinnerScreenReaderText);
expect(wrapper.instance.findByType(Spinner)[0].props.screenReaderText).toEqual(spinnerScreenReaderText);
});
});

11
src/containers/Dashboard/__snapshots__/index.test.jsx.snap
View File

@@ -10,8 +10,11 @@ exports[`Dashboard snapshots courses loaded, show select session modal, no avail
>
test-page-title
</h1>
<SelectSessionModal />
<Fragment>
<SelectSessionModal />
</Fragment>
<div
data-testid="dashboard-content"
id="dashboard-content"
>
<DashboardLayout
@@ -34,6 +37,7 @@ exports[`Dashboard snapshots courses still loading snapshot 1`] = `
test-page-title
</h1>
<div
data-testid="dashboard-content"
id="dashboard-content"
>
<LoadingView />
@@ -51,8 +55,11 @@ exports[`Dashboard snapshots there are no courses, there ARE available dashboard
>
test-page-title
</h1>
<EnterpriseDashboardModal />
<Fragment>
<EnterpriseDashboardModal />
</Fragment>
<div
data-testid="dashboard-content"
id="dashboard-content"
>
<DashboardLayout

2
src/containers/Dashboard/index.jsx
View File

@@ -31,7 +31,7 @@ export const Dashboard = () => {
{(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
</>
)}
<div id="dashboard-content">
<div id="dashboard-content" data-testid="dashboard-content">
{initIsPending
? (<LoadingView />)
: (

16
src/containers/Dashboard/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
@@ -58,18 +58,18 @@ describe('Dashboard', () => {
describe('snapshots', () => {
const testTitle = () => {
test('page title is displayed in sr-only h1 tag', () => {
const heading = wrapper.find('h1');
expect(heading.props().className).toEqual('sr-only');
expect(heading.text()).toEqual(pageTitle);
const heading = wrapper.instance.findByType('h1')[0];
expect(heading.props.className).toEqual('sr-only');
expect(heading.children[0].el).toEqual(pageTitle);
});
};
const testSnapshot = () => {
test('snapshot', () => {
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
};
const testContent = (el) => {
expect(wrapper.find('#dashboard-content').children()).toMatchObject(shallow(el));
expect(wrapper.instance.findByTestId('dashboard-content')[0].children[0]).toMatchObject(shallow(el));
};
const renderString = (show) => (show ? 'renders' : 'does not render');
@@ -86,11 +86,11 @@ describe('Dashboard', () => {
testContent(contentEl);
});
it(`${renderString(showEnterpriseModal)} dashbaord modal`, () => {
expect(wrapper.find(EnterpriseDashboardModal).length)
expect(wrapper.instance.findByType(EnterpriseDashboardModal).length)
.toEqual(showEnterpriseModal ? 1 : 0);
});
it(`${renderString(showSelectSessionModal)} select session modal`, () => {
expect(wrapper.find(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
});
};
describe('courses still loading', () => {

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

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import hooks from './hooks';
import EmailSettingsModal from '.';
@@ -40,18 +40,18 @@ describe('EmailSettingsModal', () => {
describe('render', () => {
test('snapshot: emails disabled, show: false', () => {
hooks.mockReturnValueOnce(hookProps);
expect(shallow(<EmailSettingsModal {...props} show={false} />)).toMatchSnapshot();
expect(shallow(<EmailSettingsModal {...props} show={false} />).snapshot).toMatchSnapshot();
});
test('snapshot: emails disabled, show: true', () => {
hooks.mockReturnValueOnce(hookProps);
expect(shallow(<EmailSettingsModal {...props} />)).toMatchSnapshot();
expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
});
test('snapshot: emails enabled, show: true', () => {
hooks.mockReturnValueOnce({
...hookProps,
isOptedOut: false,
});
expect(shallow(<EmailSettingsModal {...props} />)).toMatchSnapshot();
expect(shallow(<EmailSettingsModal {...props} />).snapshot).toMatchSnapshot();
});
});
});

2
src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EnterpriseDashboard empty snapshot 1`] = `""`;
exports[`EnterpriseDashboard empty snapshot 1`] = `null`;
exports[`EnterpriseDashboard snapshot 1`] = `
<ModalDialog

6
src/containers/EnterpriseDashboardModal/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import EnterpriseDashboard from '.';
import useEnterpriseDashboardHook from './hooks';
@@ -19,11 +19,11 @@ describe('EnterpriseDashboard', () => {
};
useEnterpriseDashboardHook.mockReturnValueOnce({ ...hookData });
const el = shallow(<EnterpriseDashboard />);
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
test('empty snapshot', () => {
useEnterpriseDashboardHook.mockReturnValueOnce({});
const el = shallow(<EnterpriseDashboard />);
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
});

10
src/containers/LearnerDashboardHeader/BrandLogo.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import BrandLogo from './BrandLogo';
@@ -15,14 +15,14 @@ describe('BrandLogo', () => {
url: 'url',
});
const wrapper = shallow(<BrandLogo />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('a').prop('href')).toEqual('url');
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.findByType('a')[0].props.href).toEqual('url');
});
test('dashboard undefined', () => {
reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null);
const wrapper = shallow(<BrandLogo />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('a').prop('href')).toEqual('/');
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.findByType('a')[0].props.href).toEqual('/');
});
});

136
src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx
View File

@@ -21,80 +21,82 @@ export const CollapseMenuBody = ({ isOpen }) => {
const dashboard = reduxHooks.useEnterpriseDashboardData();
const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
const exploreCoursesClick = findCoursesNavDropdownClicked(urls.baseAppUrl(courseSearchUrl));
const exploreCoursesClick = findCoursesNavDropdownClicked(
urls.baseAppUrl(courseSearchUrl),
);
if (!isOpen) {
return null;
}
return (
isOpen && (
<div className="d-flex flex-column shadow-sm nav-small-menu">
<Button as="a" href="/" variant="inverse-primary">
{formatMessage(messages.course)}
</Button>
<Button as="a" href={urls.programsUrl} variant="inverse-primary">
{formatMessage(messages.program)}
</Button>
<Button
as="a"
href={urls.baseAppUrl(courseSearchUrl)}
variant="inverse-primary"
onClick={exploreCoursesClick}
>
{formatMessage(messages.discoverNew)}
</Button>
<WidgetNavbar placement={COLLAPSED_NAVBAR} />
<Button as="a" href={getConfig().SUPPORT_URL} variant="inverse-primary">
{formatMessage(messages.help)}
</Button>
{authenticatedUser && (
<>
{!!dashboard && (
<Button as="a" href={dashboard.url} variant="inverse-primary">
{formatMessage(messages.dashboard)}
</Button>
)}
{!dashboard && getConfig().CAREER_LINK_URL && (
<Button href={`${getConfig().CAREER_LINK_URL}`}>
{formatMessage(messages.career)}
<Badge className="px-2 mx-2" variant="warning">
{formatMessage(messages.newAlert)}
</Badge>
</Button>
)}
<div className="d-flex flex-column shadow-sm nav-small-menu">
<Button as="a" href="/" variant="inverse-primary">
{formatMessage(messages.course)}
</Button>
<Button as="a" href={urls.programsUrl()} variant="inverse-primary">
{formatMessage(messages.program)}
</Button>
<Button
as="a"
href={urls.baseAppUrl(courseSearchUrl)}
variant="inverse-primary"
onClick={exploreCoursesClick}
>
{formatMessage(messages.discoverNew)}
</Button>
<WidgetNavbar placement={COLLAPSED_NAVBAR} />
<Button as="a" href={getConfig().SUPPORT_URL} variant="inverse-primary">
{formatMessage(messages.help)}
</Button>
{authenticatedUser && (
<>
{!!dashboard && (
<Button as="a" href={dashboard.url} variant="inverse-primary">
{formatMessage(messages.dashboard)}
</Button>
)}
{!dashboard && getConfig().CAREER_LINK_URL && (
<Button href={`${getConfig().CAREER_LINK_URL}`}>
{formatMessage(messages.career)}
<Badge className="px-2 mx-2" variant="warning">
{formatMessage(messages.newAlert)}
</Badge>
</Button>
)}
<Button
as="a"
href={`${getConfig().LMS_BASE_URL}/u/${authenticatedUser.username}`}
variant="inverse-primary"
>
{formatMessage(messages.profile)}
</Button>
<Button
as="a"
href={`${getConfig().LMS_BASE_URL}/account/settings`}
variant="inverse-primary"
>
{formatMessage(messages.account)}
</Button>
{getConfig().ORDER_HISTORY_URL && (
<Button
as="a"
href={`${getConfig().LMS_BASE_URL}/u/${
authenticatedUser.username
}`}
variant="inverse-primary"
href={getConfig().ORDER_HISTORY_URL}
>
{formatMessage(messages.profile)}
{formatMessage(messages.orderHistory)}
</Button>
<Button
as="a"
href={`${getConfig().LMS_BASE_URL}/account/settings`}
variant="inverse-primary"
>
{formatMessage(messages.account)}
</Button>
{getConfig().ORDER_HISTORY_URL && (
<Button
as="a"
variant="inverse-primary"
href={getConfig().ORDER_HISTORY_URL}
>
{formatMessage(messages.orderHistory)}
</Button>
)}
<Button
as="a"
href={getConfig().LOGOUT_URL}
variant="inverse-primary"
>
{formatMessage(messages.signOut)}
</Button>
</>
)}
</div>
)
)}
<Button
as="a"
href={getConfig().LOGOUT_URL}
variant="inverse-primary"
>
{formatMessage(messages.signOut)}
</Button>
</>
)}
</div>
);
};

8
src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { AppContext } from '@edx/frontend-platform/react';
import CollapseMenuBody from './CollapseMenuBody';
@@ -29,12 +29,12 @@ jest.mock('../hooks', () => ({
describe('CollapseMenuBody', () => {
test('render', () => {
const wrapper = shallow(<CollapseMenuBody isOpen />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('render empty if not open', () => {
const wrapper = shallow(<CollapseMenuBody isOpen={false} />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.isEmptyRender()).toBe(true);
});
@@ -42,7 +42,7 @@ describe('CollapseMenuBody', () => {
const { authenticatedUser } = AppContext;
AppContext.authenticatedUser = null;
const wrapper = shallow(<CollapseMenuBody isOpen />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
AppContext.authenticatedUser = authenticatedUser;
});
});

60
src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap
View File

@@ -36,38 +36,40 @@ exports[`CollapseMenuBody render 1`] = `
>
Help
</Button>
<Button
as="a"
href="url"
variant="inverse-primary"
>
Dashboard
</Button>
<Button
as="a"
href="http://localhost:18000/u/username"
variant="inverse-primary"
>
Profile
</Button>
<Button
as="a"
href="http://localhost:18000/account/settings"
variant="inverse-primary"
>
Account
</Button>
<Button
as="a"
href="http://localhost:18000/logout"
variant="inverse-primary"
>
Sign Out
</Button>
<Fragment>
<Button
as="a"
href="url"
variant="inverse-primary"
>
Dashboard
</Button>
<Button
as="a"
href="http://localhost:18000/u/username"
variant="inverse-primary"
>
Profile
</Button>
<Button
as="a"
href="http://localhost:18000/account/settings"
variant="inverse-primary"
>
Account
</Button>
<Button
as="a"
href="http://localhost:18000/logout"
variant="inverse-primary"
>
Sign Out
</Button>
</Fragment>
</div>
`;
exports[`CollapseMenuBody render empty if not open 1`] = `""`;
exports[`CollapseMenuBody render empty if not open 1`] = `null`;
exports[`CollapseMenuBody render unauthenticated 1`] = `
<div

2
src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/index.test.jsx.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`CollapsedHeader render nothing if not collapsed 1`] = `""`;
exports[`CollapsedHeader render nothing if not collapsed 1`] = `false`;
exports[`CollapsedHeader renders 1`] = `
<Fragment>

8
src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import CollapsedHeader from '.';
@@ -18,13 +18,13 @@ jest.mock('../hooks', () => ({
describe('CollapsedHeader', () => {
it('renders', () => {
const wrapper = shallow(<CollapsedHeader />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
it('render nothing if not collapsed', () => {
useIsCollapsed.mockReturnValueOnce(false);
const wrapper = shallow(<CollapsedHeader />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
it('renders with isOpen true', () => {
@@ -33,6 +33,6 @@ describe('CollapsedHeader', () => {
toggleIsOpen: jest.fn().mockName('toggleIsOpen'),
});
const wrapper = shallow(<CollapsedHeader />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});

4
src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap
View File

@@ -63,10 +63,10 @@ exports[`ConfirmEmailBanner snapshot Show on unverified 1`] = `
<p
className="text-center"
>
We've sent you an email to verify your acccount. Please check your inbox and click on the big red button to confirm and keep learning.
We've sent you an email to verify your account. Please check your inbox and click on the big red button to confirm and keep learning.
</p>
</MarketingModal>
</Fragment>
`;
exports[`ConfirmEmailBanner snapshot do not show on already verified 1`] = `""`;
exports[`ConfirmEmailBanner snapshot do not show on already verified 1`] = `null`;

6
src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import hooks from './hooks';
import ConfirmEmailBanner from '.';
@@ -24,12 +24,12 @@ describe('ConfirmEmailBanner', () => {
test('do not show on already verified', () => {
hooks.mockReturnValueOnce({ ...hookProps, isNeeded: false });
const el = shallow(<ConfirmEmailBanner />);
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
test('Show on unverified', () => {
hooks.mockReturnValueOnce({ ...hookProps });
const el = shallow(<ConfirmEmailBanner />);
expect(el).toMatchSnapshot();
expect(el.snapshot).toMatchSnapshot();
});
});
});

2
src/containers/LearnerDashboardHeader/ConfirmEmailBanner/messages.js
View File

@@ -24,7 +24,7 @@ const messages = defineMessages({
confirmEmailModalBody: {
id: 'leanerDashboard.confirmEmailModalBody',
description: 'text hint for confirming email modal',
defaultMessage: 'We\'ve sent you an email to verify your acccount. Please check your inbox and click on the big red button to confirm and keep learning.',
defaultMessage: 'We\'ve sent you an email to verify your account. Please check your inbox and click on the big red button to confirm and keep learning.',
},
confirmEmailImageAlt: {
id: 'leanerDashboard.confirmEmailImageAlt',

8
src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import { getConfig } from '@edx/frontend-platform';
@@ -61,7 +61,7 @@ describe('AuthenticatedUserDropdown', () => {
const { authenticatedUser } = AppContext;
AppContext.authenticatedUser = null;
const wrapper = shallow(<AuthenticatedUserDropdown />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.isEmptyRender()).toBe(true);
AppContext.authenticatedUser = authenticatedUser;
});
@@ -69,13 +69,13 @@ describe('AuthenticatedUserDropdown', () => {
reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(defaultDashboardData);
useIsCollapsed.mockReturnValueOnce(true);
const wrapper = shallow(<AuthenticatedUserDropdown />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('without enterprise dashboard and expanded', () => {
reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null);
useIsCollapsed.mockReturnValueOnce(false);
const wrapper = shallow(<AuthenticatedUserDropdown />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
});

68
src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/AuthenticatedUserDropdown.test.jsx.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AuthenticatedUserDropdown snapshots no auth render empty 1`] = `""`;
exports[`AuthenticatedUserDropdown snapshots no auth render empty 1`] = `null`;
exports[`AuthenticatedUserDropdown snapshots with enterprise dashboard 1`] = `
<Dropdown
@@ -22,26 +22,28 @@ exports[`AuthenticatedUserDropdown snapshots with enterprise dashboard 1`] = `
<Dropdown.Menu
className="dropdown-menu-right"
>
<Dropdown.Header>
SWITCH DASHBOARD
</Dropdown.Header>
<Dropdown.Item
as="a"
className="active"
href="/edx-dashboard"
>
Personal
</Dropdown.Item>
<Dropdown.Item
as="a"
href="url"
key="label"
>
label
Dashboard
</Dropdown.Item>
<Dropdown.Divider />
<Fragment>
<Dropdown.Header>
SWITCH DASHBOARD
</Dropdown.Header>
<Dropdown.Item
as="a"
className="active"
href="/edx-dashboard"
>
Personal
</Dropdown.Item>
<Dropdown.Item
as="a"
href="url"
key="label"
>
label
Dashboard
</Dropdown.Item>
<Dropdown.Divider />
</Fragment>
<Dropdown.Item
href="http://account-profile-url.test/u/username"
>
@@ -87,17 +89,19 @@ exports[`AuthenticatedUserDropdown snapshots without enterprise dashboard and ex
<Dropdown.Menu
className="dropdown-menu-right"
>
<Dropdown.Header>
SWITCH DASHBOARD
</Dropdown.Header>
<Dropdown.Item
as="a"
className="active"
href="/edx-dashboard"
>
Personal
</Dropdown.Item>
<Dropdown.Divider />
<Fragment>
<Dropdown.Header>
SWITCH DASHBOARD
</Dropdown.Header>
<Dropdown.Item
as="a"
className="active"
href="/edx-dashboard"
>
Personal
</Dropdown.Item>
<Dropdown.Divider />
</Fragment>
<Dropdown.Item
href="http://localhost:18000/career"
>

2
src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/index.test.jsx.snap
View File

@@ -52,4 +52,4 @@ exports[`ExpandedHeader render 1`] = `
</header>
`;
exports[`ExpandedHeader render empty if collapsed 1`] = `""`;
exports[`ExpandedHeader render empty if collapsed 1`] = `null`;

12
src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx
View File

@@ -19,10 +19,15 @@ export const ExpandedHeader = () => {
const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
const isCollapsed = useIsCollapsed();
const exploreCoursesClick = findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl));
const exploreCoursesClick = findCoursesNavClicked(
urls.baseAppUrl(courseSearchUrl),
);
if (isCollapsed) {
return null;
}
return (
!isCollapsed && (
<header className="d-flex shadow-sm align-items-center learner-variant-header pl-4">
<div className="flex-grow-1 d-flex align-items-center">
<BrandLogo />
@@ -37,7 +42,7 @@ export const ExpandedHeader = () => {
</Button>
<Button
as="a"
href={urls.programsUrl}
href={urls.programsUrl()}
variant="inverse-primary"
className="p-4"
>
@@ -66,7 +71,6 @@ export const ExpandedHeader = () => {
<AuthenticatedUserDropdown />
</header>
)
);
};

8
src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx
View File

@@ -1,11 +1,11 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import ExpandedHeader from '.';
import { useIsCollapsed } from '../hooks';
jest.mock('data/services/lms/urls', () => ({
programsUrl: 'programsUrl',
programsUrl: () => 'programsUrl',
baseAppUrl: url => (`http://localhost:18000${url}`),
}));
@@ -29,13 +29,13 @@ describe('ExpandedHeader', () => {
test('render', () => {
useIsCollapsed.mockReturnValueOnce(false);
const wrapper = shallow(<ExpandedHeader />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
test('render empty if collapsed', () => {
useIsCollapsed.mockReturnValueOnce(true);
const wrapper = shallow(<ExpandedHeader />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.isEmptyRender()).toBe(true);
});
});

12
src/containers/LearnerDashboardHeader/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import LearnerDashboardHeader from '.';
jest.mock('containers/MasqueradeBar', () => 'MasqueradeBar');
@@ -9,10 +9,10 @@ jest.mock('./ExpandedHeader', () => 'ExpandedHeader');
describe('LearnerDashboardHeader', () => {
test('render', () => {
const wrapper = shallow(<LearnerDashboardHeader />);
expect(wrapper).toMatchSnapshot();
expect(wrapper.find('ConfirmEmailBanner')).toHaveLength(1);
expect(wrapper.find('MasqueradeBar')).toHaveLength(1);
expect(wrapper.find('CollapsedHeader')).toHaveLength(1);
expect(wrapper.find('ExpandedHeader')).toHaveLength(1);
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.findByType('ConfirmEmailBanner')).toHaveLength(1);
expect(wrapper.instance.findByType('MasqueradeBar')).toHaveLength(1);
expect(wrapper.instance.findByType('CollapsedHeader')).toHaveLength(1);
expect(wrapper.instance.findByType('ExpandedHeader')).toHaveLength(1);
});
});

308
src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap
View File

@@ -7,39 +7,41 @@ exports[`MasqueradeBar snapshot can masquerade 1`] = `
<Form
className="masquerade-bar w-100"
>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
Object {
"default": "Submit",
<Fragment>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
Object {
"default": "Submit",
}
}
}
state="default"
type="submit"
variant="brand"
/>
state="default"
type="submit"
variant="brand"
/>
</Fragment>
</Form>
</div>
`;
@@ -51,44 +53,46 @@ exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
<Form
className="masquerade-bar w-100"
>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value="test"
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={false}
labels={
Object {
"default": "Submit",
<Fragment>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value="test"
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={false}
labels={
Object {
"default": "Submit",
}
}
}
state="default"
type="submit"
variant="brand"
/>
state="default"
type="submit"
variant="brand"
/>
</Fragment>
</Form>
</div>
`;
exports[`MasqueradeBar snapshot cannot masquerade 1`] = `""`;
exports[`MasqueradeBar snapshot cannot masquerade 1`] = `null`;
exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
<div
@@ -97,43 +101,45 @@ exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
<Form
className="masquerade-bar w-100"
>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={true}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
<FormControlFeedback
hasIcon={false}
type="invalid"
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
Object {
"default": "Submit",
<Fragment>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={true}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
<FormControlFeedback
hasIcon={false}
type="invalid"
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
Object {
"default": "Submit",
}
}
}
state="default"
type="submit"
variant="brand"
/>
state="default"
type="submit"
variant="brand"
/>
</Fragment>
</Form>
</div>
`;
@@ -145,39 +151,41 @@ exports[`MasqueradeBar snapshot is masquerading pending 1`] = `
<Form
className="masquerade-bar w-100"
>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
Object {
"default": "Submit",
<Fragment>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
Object {
"default": "Submit",
}
}
}
state="pending"
type="submit"
variant="brand"
/>
state="pending"
type="submit"
variant="brand"
/>
</Fragment>
</Form>
</div>
`;
@@ -189,22 +197,24 @@ exports[`MasqueradeBar snapshot is masquerading with input 1`] = `
<Form
className="masquerade-bar w-100"
>
<FormLabel
className="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
Viewing as:
</FormLabel>
<Chip
className="masquerade-chip"
iconAfter={[MockFunction icons.Close]}
onClick={[MockFunction handleClearMasquerade]}
>
test
</Chip>
<Fragment>
<FormLabel
className="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
Viewing as:
</FormLabel>
<Chip
className="masquerade-chip"
iconAfter={[MockFunction icons.Close]}
onClick={[MockFunction handleClearMasquerade]}
>
test
</Chip>
</Fragment>
</Form>
</div>
`;

14
src/containers/MasqueradeBar/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { formatMessage } from 'testUtils';
import MasqueradeBar from '.';
@@ -26,21 +26,21 @@ describe('MasqueradeBar', () => {
describe('snapshot', () => {
test('can masquerade', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce(masqueradeMockData);
expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
});
test('can masquerade with input', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce({
...masqueradeMockData,
masqueradeInput: 'test',
});
expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
});
test('cannot masquerade', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce({
...masqueradeMockData,
canMasquerade: false,
});
expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
});
test('is masquerading with input', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce({
@@ -48,7 +48,7 @@ describe('MasqueradeBar', () => {
isMasquerading: true,
masqueradeInput: 'test',
});
expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
});
test('is masquerading failed with error', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce({
@@ -56,14 +56,14 @@ describe('MasqueradeBar', () => {
isMasqueradingFailed: true,
masqueradeErrorMessage: 'test-error',
});
expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
});
test('is masquerading pending', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce({
...masqueradeMockData,
isMasqueradingPending: true,
});
expect(shallow(<MasqueradeBar />)).toMatchSnapshot();
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
});
});
});

4
src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import ProgramCard from './ProgramCard';
@@ -18,6 +18,6 @@ const props = {
describe('RelatedProgramsModal ProgramCard', () => {
test('snapshot', () => {
expect(shallow(<ProgramCard {...props} />)).toMatchSnapshot();
expect(shallow(<ProgramCard {...props} />).snapshot).toMatchSnapshot();
});
});

6
src/containers/RelatedProgramsModal/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { reduxHooks } from 'hooks';
import RelatedProgramsModal from '.';
@@ -50,11 +50,11 @@ describe('RelatedProgramsModal', () => {
expect(reduxHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId);
});
test('snapshot: open', () => {
expect(shallow(<RelatedProgramsModal {...props} />)).toMatchSnapshot();
expect(shallow(<RelatedProgramsModal {...props} />).snapshot).toMatchSnapshot();
});
test('snapshot: closed', () => {
expect(
shallow(<RelatedProgramsModal {...props} isOpen={false} />),
shallow(<RelatedProgramsModal {...props} isOpen={false} />).snapshot,
).toMatchSnapshot();
});
});

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

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import hooks from './hooks';
import SelectSessionModal from '.';
@@ -30,7 +30,7 @@ describe('SelectSessionModal', () => {
hooks.mockReturnValueOnce({
...hookReturn,
});
expect(shallow(<SelectSessionModal />)).toMatchSnapshot();
expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
});
test('modal with leave option ', () => {
@@ -38,7 +38,7 @@ describe('SelectSessionModal', () => {
...hookReturn,
availableSessions: [...availableSessions],
});
expect(shallow(<SelectSessionModal />)).toMatchSnapshot();
expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
});
test('modal without leave option ', () => {
@@ -47,7 +47,7 @@ describe('SelectSessionModal', () => {
availableSessions,
showLeaveOption: false,
});
expect(shallow(<SelectSessionModal />)).toMatchSnapshot();
expect(shallow(<SelectSessionModal />).snapshot).toMatchSnapshot();
});
});
});

4
src/containers/UnenrollConfirmModal/components/ConfirmPane.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { ConfirmPane } from './ConfirmPane';
@@ -9,6 +9,6 @@ describe('UnenrollConfirmModal ConfirmPane', () => {
handleClose: jest.fn().mockName('props.handleClose'),
handleConfirm: jest.fn().mockName('props.handleConfirm'),
};
expect(shallow(<ConfirmPane {...props} />)).toMatchSnapshot();
expect(shallow(<ConfirmPane {...props} />).snapshot).toMatchSnapshot();
});
});

6
src/containers/UnenrollConfirmModal/components/FinishedPane.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { FinishedPane } from './FinishedPane';
@@ -9,13 +9,13 @@ describe('UnenrollConfirmModal FinishedPane', () => {
gaveReason: true,
handleClose: jest.fn().mockName('props.handleClose'),
};
expect(shallow(<FinishedPane {...props} />)).toMatchSnapshot();
expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
});
test('snapshot: did not give reason', () => {
const props = {
gaveReason: false,
handleClose: jest.fn().mockName('props.handleClose'),
};
expect(shallow(<FinishedPane {...props} />)).toMatchSnapshot();
expect(shallow(<FinishedPane {...props} />).snapshot).toMatchSnapshot();
});
});

6
src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { ReasonPane } from './ReasonPane';
@@ -18,9 +18,9 @@ describe('UnenrollConfirmModal ReasonPane', () => {
},
};
test('snapshot', () => {
expect(shallow(<ReasonPane {...props} />)).toMatchSnapshot();
expect(shallow(<ReasonPane {...props} />).snapshot).toMatchSnapshot();
});
test('snapshot: no reason provided', () => {
expect(shallow(<ReasonPane {...props} hasReason={false} />)).toMatchSnapshot();
expect(shallow(<ReasonPane {...props} hasReason={false} />).snapshot).toMatchSnapshot();
});
});

10
src/containers/UnenrollConfirmModal/index.test.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import { UnenrollConfirmModal } from '.';
@@ -40,11 +40,11 @@ describe('UnenrollConfirmModal component', () => {
});
test('snapshot: modalStates.confirm', () => {
hooks.useUnenrollData.mockReturnValueOnce(hookProps);
expect(shallow(<UnenrollConfirmModal {...props} />)).toMatchSnapshot();
expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
});
test('snapshot: modalStates.finished, reason given', () => {
hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.finished });
expect(shallow(<UnenrollConfirmModal {...props} />)).toMatchSnapshot();
expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
});
test('snapshot: modalStates.finished, reason skipped', () => {
hooks.useUnenrollData.mockReturnValueOnce({
@@ -52,10 +52,10 @@ describe('UnenrollConfirmModal component', () => {
modalState: hooks.modalStates.finished,
isSkipped: true,
});
expect(shallow(<UnenrollConfirmModal {...props} />)).toMatchSnapshot();
expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
});
test('snapshot: modalStates.reason, should be fullscreen with no shadow', () => {
hooks.useUnenrollData.mockReturnValueOnce({ ...hookProps, modalState: hooks.modalStates.reason });
expect(shallow(<UnenrollConfirmModal {...props} />)).toMatchSnapshot();
expect(shallow(<UnenrollConfirmModal {...props} />).snapshot).toMatchSnapshot();
});
});

8
src/containers/WidgetContainers/LoadedSidebar/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import hooks from 'widgets/ProductRecommendations/hooks';
import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData';
@@ -23,7 +23,7 @@ describe('WidgetSidebar', () => {
const wrapper = shallow(<WidgetSidebar {...props} />);
expect(props.setSidebarShowing).toHaveBeenCalledWith(true);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
@@ -34,7 +34,7 @@ describe('WidgetSidebar', () => {
const wrapper = shallow(<WidgetSidebar {...props} />);
expect(props.setSidebarShowing).not.toHaveBeenCalled();
expect(wrapper.type()).toBeNull();
expect(wrapper.shallowWrapper).toBeNull();
});
test('is hidden when the has the treatment values', () => {
@@ -44,6 +44,6 @@ describe('WidgetSidebar', () => {
const wrapper = shallow(<WidgetSidebar {...props} />);
expect(props.setSidebarShowing).not.toHaveBeenCalled();
expect(wrapper.type()).toBeNull();
expect(wrapper.shallowWrapper).toBeNull();
});
});

8
src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import hooks from 'widgets/ProductRecommendations/hooks';
import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData';
@@ -23,7 +23,7 @@ describe('WidgetSidebar', () => {
const wrapper = shallow(<WidgetSidebar {...props} />);
expect(props.setSidebarShowing).toHaveBeenCalledWith(true);
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
@@ -34,7 +34,7 @@ describe('WidgetSidebar', () => {
const wrapper = shallow(<WidgetSidebar {...props} />);
expect(props.setSidebarShowing).not.toHaveBeenCalled();
expect(wrapper.type()).toBeNull();
expect(wrapper.shallowWrapper).toBeNull();
});
test('is hidden when the has the treatment values', () => {
@@ -44,6 +44,6 @@ describe('WidgetSidebar', () => {
const wrapper = shallow(<WidgetSidebar {...props} />);
expect(props.setSidebarShowing).not.toHaveBeenCalled();
expect(wrapper.type()).toBeNull();
expect(wrapper.shallowWrapper).toBeNull();
});
});

8
src/containers/WidgetContainers/WidgetFooter/index.test.jsx
View File

@@ -1,4 +1,4 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import hooks from 'widgets/ProductRecommendations/hooks';
import { mockFooterRecommendationsHook } from 'widgets/ProductRecommendations/testData';
@@ -19,7 +19,7 @@ describe('WidgetFooter', () => {
const wrapper = shallow(<WidgetFooter />);
expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
@@ -30,7 +30,7 @@ describe('WidgetFooter', () => {
const wrapper = shallow(<WidgetFooter />);
expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
expect(wrapper.type()).toBeNull();
expect(wrapper.shallowWrapper).toBeNull();
});
test('is hidden when the experiment has the control values', () => {
@@ -40,6 +40,6 @@ describe('WidgetFooter', () => {
const wrapper = shallow(<WidgetFooter />);
expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
expect(wrapper.type()).toBeNull();
expect(wrapper.shallowWrapper).toBeNull();
});
});

11
src/containers/WidgetContainers/WidgetNavbar/index.test.jsx
View File

@@ -1,10 +1,9 @@
import { shallow } from 'enzyme';
import { shallow } from '@edx/react-unit-test-utils';
import {
usePaintedDoorExperimentContext,
} from '../../../widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
import WidgetNavbar from './index';
import { EXPANDED_NAVBAR } from '../../../widgets/RecommendationsPaintedDoorBtn/constants';
import RecommendationsPaintedDoorBtn from '../../../widgets/RecommendationsPaintedDoorBtn';
jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
usePaintedDoorExperimentContext: jest.fn(),
@@ -26,7 +25,7 @@ describe('WidgetNavbar', () => {
const wrapper = shallow(<WidgetNavbar {...props} />);
expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
expect(wrapper).toMatchSnapshot();
expect(wrapper.snapshot).toMatchSnapshot();
});
});
@@ -35,7 +34,7 @@ describe('WidgetNavbar', () => {
const wrapper = shallow(<WidgetNavbar {...props} />);
expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
expect(wrapper.type()).toBe(RecommendationsPaintedDoorBtn);
expect(wrapper.instance.type).toBe('RecommendationsPaintedDoorBtn');
});
test('renders nothing if user in not in navbar variation', () => {
@@ -47,7 +46,7 @@ describe('WidgetNavbar', () => {
const wrapper = shallow(<WidgetNavbar {...props} />);
expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
expect(wrapper.type()).toBeNull();
expect(wrapper.shallowWrapper).toBeNull();
});
test('renders nothing if experiment is loading', () => {
@@ -60,6 +59,6 @@ describe('WidgetNavbar', () => {
const wrapper = shallow(<WidgetNavbar {...props} />);
expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
expect(wrapper.type()).toBeNull();
expect(wrapper.shallowWrapper).toBeNull();
});
});