From e25610c66ebdf38c1dec3f599f99c0fd4787875e Mon Sep 17 00:00:00 2001
From: Leangseu Kim <lkim@edx.org>
Date: Wed, 22 Mar 2023 13:12:36 -0400
Subject: [PATCH] fix: disable title link on homeUrl undefined

---
 .../CourseCard/components/CourseCardTitle.jsx | 29 ++++---
 .../components/CourseCardTitle.test.jsx       | 81 +++++++++++++++++++
 .../CourseCardTitle.test.jsx.snap             | 33 ++++++++
 3 files changed, 133 insertions(+), 10 deletions(-)
 create mode 100644 src/containers/CourseCard/components/CourseCardTitle.test.jsx
 create mode 100644 src/containers/CourseCard/components/__snapshots__/CourseCardTitle.test.jsx.snap

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 (
     <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>
   );
 };
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(<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,
+      );
+    });
+  });
+});
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`] = `
+<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>
+`;