fix: disable title link on homeUrl undefined

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 (
     <h3>
-      <a
-        href={homeUrl}
-        className="course-card-title"
-        data-testid="CourseCardTitle"
-        onClick={handleTitleClicked}
-        disabled={isEntitlement && !isFulfilled}
-      >
-        {courseName}
-      </a>
+      {disable ? (
+        <span className="course-card-title" data-testid="CourseCardTitle">{courseName}</span>
+      ) : (
+        <a
+          href={homeUrl}
+          className="course-card-title"
+          data-testid="CourseCardTitle"
+          onClick={handleTitleClicked}
+        >
+          {courseName}
+        </a>
+      )}
     </h3>
   );
 };

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(<CourseCardTitle {...props} />);
+      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(<CourseCardTitle {...props} />);
+      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(<CourseCardTitle {...props} />);
+      const title = wrapper.find('.course-card-title');
+      expect(title.type()).toBe('span');
+      expect(title.prop('onClick')).toBeUndefined();
+    });
+  });
+  describe('behavior', () => {
+    it('initializes', () => {
+      shallow(<CourseCardTitle {...props} />);
+      expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
+        props.cardId,
+      );
+      expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(
+        props.cardId,
+      );
+    });
+  });
+});

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`] = `
+<h3>
+  <a
+    className="course-card-title"
+    data-testid="CourseCardTitle"
+    href="home-url"
+    onClick={
+      Object {
+        "trackCourseEvent": Object {
+          "cardId": "cardId",
+          "eventName": [MockFunction segment.courseTitleClicked],
+          "upgradeUrl": "home-url",
+        },
+      }
+    }
+  >
+    course-name
+  </a>
+</h3>
+`;
+
+exports[`CourseCardTitle snapshot renders disabled link course title when learner does not have access to the course 1`] = `
+<h3>
+  <span
+    className="course-card-title"
+    data-testid="CourseCardTitle"
+  >
+    course-name
+  </span>
+</h3>
+`;