diff --git a/src/containers/CourseCard/components/CourseCardTitle.jsx b/src/containers/CourseCard/components/CourseCardTitle.jsx
index 717af8f..6f96a09 100644
--- a/src/containers/CourseCard/components/CourseCardTitle.jsx
+++ b/src/containers/CourseCard/components/CourseCardTitle.jsx
@@ -10,18 +10,27 @@ export const CourseCardTitle = ({ cardId }) => {
const { courseName } = reduxHooks.useCardCourseData(cardId);
const { isEntitlement, isFulfilled } = reduxHooks.useCardEntitlementData(cardId);
const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
- const handleTitleClicked = reduxHooks.useTrackCourseEvent(courseTitleClicked, cardId, homeUrl);
+ const handleTitleClicked = reduxHooks.useTrackCourseEvent(
+ courseTitleClicked,
+ cardId,
+ homeUrl,
+ );
+ // disable on home url is not defined or entitlements that are not fulfilled
+ const disable = !homeUrl || (isEntitlement && !isFulfilled);
return (
);
};
diff --git a/src/containers/CourseCard/components/CourseCardTitle.test.jsx b/src/containers/CourseCard/components/CourseCardTitle.test.jsx
new file mode 100644
index 0000000..f4ede8d
--- /dev/null
+++ b/src/containers/CourseCard/components/CourseCardTitle.test.jsx
@@ -0,0 +1,81 @@
+import { shallow } from 'enzyme';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+import CourseCardTitle from './CourseCardTitle';
+
+const homeUrl = 'home-url';
+
+jest.mock('tracking', () => ({
+ course: {
+ courseTitleClicked: jest.fn().mockName('segment.courseTitleClicked'),
+ },
+}));
+
+jest.mock('hooks', () => ({
+ reduxHooks: {
+ useCardCourseData: jest.fn(() => ({ courseName: 'course-name' })),
+ useCardCourseRunData: jest.fn(() => ({ homeUrl })),
+ useCardEntitlementData: jest.fn(() => ({
+ isEntitlement: false,
+ isFulfilled: false,
+ })),
+ useTrackCourseEvent: jest.fn((eventName, cardId, upgradeUrl) => ({
+ trackCourseEvent: { eventName, cardId, upgradeUrl },
+ })),
+ },
+}));
+
+describe('CourseCardTitle', () => {
+ const props = {
+ cardId: 'cardId',
+ };
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+ describe('snapshot', () => {
+ test('renders clickable link course title', () => {
+ const wrapper = shallow();
+ expect(wrapper).toMatchSnapshot();
+ const title = wrapper.find('.course-card-title');
+ expect(title.type()).toBe('a');
+ expect(title.prop('onClick')).toEqual(
+ reduxHooks.useTrackCourseEvent(
+ track.course.courseTitleClicked,
+ props.cardId,
+ homeUrl,
+ ),
+ );
+ });
+ test('renders disabled link course title when learner does not have access to the course', () => {
+ reduxHooks.useCardEntitlementData.mockReturnValueOnce({
+ isEntitlement: true,
+ isFulfilled: false,
+ });
+ const wrapper = shallow();
+ expect(wrapper).toMatchSnapshot();
+ const title = wrapper.find('.course-card-title');
+ expect(title.type()).toBe('span');
+ expect(title.prop('onClick')).toBeUndefined();
+ });
+ test('renders disabled link course title when homeUrl is not available', () => {
+ reduxHooks.useCardCourseRunData.mockReturnValueOnce({ homeUrl: null });
+ const wrapper = shallow();
+ const title = wrapper.find('.course-card-title');
+ expect(title.type()).toBe('span');
+ expect(title.prop('onClick')).toBeUndefined();
+ });
+ });
+ describe('behavior', () => {
+ it('initializes', () => {
+ shallow();
+ expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
+ expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
+ props.cardId,
+ );
+ expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(
+ props.cardId,
+ );
+ });
+ });
+});
diff --git a/src/containers/CourseCard/components/__snapshots__/CourseCardTitle.test.jsx.snap b/src/containers/CourseCard/components/__snapshots__/CourseCardTitle.test.jsx.snap
new file mode 100644
index 0000000..8598ba6
--- /dev/null
+++ b/src/containers/CourseCard/components/__snapshots__/CourseCardTitle.test.jsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCardTitle snapshot renders clickable link course title 1`] = `
+
+`;
+
+exports[`CourseCardTitle snapshot renders disabled link course title when learner does not have access to the course 1`] = `
+
+
+ course-name
+
+
+`;