Merge branch 'master' into ahtesham/VAN-1601/design

openedx · Aug 16, 2023 · 0c7079b · 0c7079b
2 parents 6cecc38 + ce269e8
commit 0c7079b
Show file tree

Hide file tree

Showing 25 changed files with 1,805 additions and 1,669 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "@edx/frontend-enterprise-hotjar": "^1.2.0",
     "@edx/frontend-platform": "^4.2.0",
     "@edx/paragon": "^20.32.0",
+    "@edx/react-unit-test-utils": "^1.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -53,6 +54,7 @@
     "history": "5.0.1",
     "html-react-parser": "^1.3.0",
     "jest": "^26.6.3",
+    "jest-when": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "prop-types": "15.7.2",

diff --git a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
@@ -8,20 +8,17 @@ import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
-import { useEnterpriseDashboardData } from '../../../../data/redux/hooks/app';
 
 export const BeginCourseButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
   const { disableBeginCourse } = useActionDisabledState(cardId);
 
-  const { authOrgId } = useEnterpriseDashboardData();
-  const { isExecutiveEd2uCourse } = useActionDisabledState(cardId);
-  const execEdURLParam = `?org_id=${authOrgId}`;
   const handleClick = reduxHooks.useTrackCourseEvent(
     track.course.enterCourseClicked,
     cardId,
-    homeUrl + ((isExecutiveEd2uCourse && authOrgId) ? execEdURLParam : ''),
+    homeUrl + execEdTrackingParam,
   );
   return (
     <ActionButton

diff --git a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
@@ -14,17 +14,22 @@ jest.mock('tracking', () => ({
 
 jest.mock('hooks', () => ({
   reduxHooks: {
-    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'home-url' })),
-    useTrackCourseEvent: jest.fn(
-      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
-    ),
+    useCardCourseRunData: jest.fn(),
+    useCardExecEdTrackingParam: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
   },
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableBeginCourse: false })));
 jest.mock('./ActionButton', () => 'ActionButton');
 
 let wrapper;
-const { homeUrl } = reduxHooks.useCardCourseRunData();
+const homeUrl = 'home-url';
+reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
+const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
+reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
+reduxHooks.useTrackCourseEvent.mockImplementation(
+  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+);
 
 describe('BeginCourseButton', () => {
   const props = {
@@ -33,27 +38,50 @@ describe('BeginCourseButton', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  describe('snapshot', () => {
-    test('renders default button when learner has access to the course', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
-      expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
-        track.course.enterCourseClicked,
-        props.cardId,
-        homeUrl,
-      ));
-    });
-  });
   describe('behavior', () => {
     it('initializes course run data with cardId', () => {
       wrapper = shallow(<BeginCourseButton {...props} />);
       expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
     });
-    test('disabled states', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
+    it('loads exec education path param', () => {
+      wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads disabled states for begin action from action hooks', () => {
       wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
+    });
+  });
+  describe('snapshot', () => {
+    describe('disabled', () => {
+      beforeEach(() => {
+        useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
+        wrapper = shallow(<BeginCourseButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+      it('should be disabled', () => {
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      });
+    });
+    describe('enabled', () => {
+      beforeEach(() => {
+        wrapper = shallow(<BeginCourseButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+      it('should be enabled', () => {
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+      });
+      it('should track enter course clicked event on click, with exec ed param', () => {
+        expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+          track.course.enterCourseClicked,
+          props.cardId,
+          homeUrl + execEdPath(props.cardId),
+        ));
+      });
     });
   });
 });
diff --git a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
@@ -8,20 +8,17 @@ import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
-import { useEnterpriseDashboardData } from '../../../../data/redux/hooks/app';
 
 export const ResumeButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const { resumeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
   const { disableResumeCourse } = useActionDisabledState(cardId);
 
-  const { authOrgId } = useEnterpriseDashboardData();
-  const { isExecutiveEd2uCourse } = useActionDisabledState(cardId);
-  const execEdURLParam = `?org_id=${authOrgId}`;
   const handleClick = reduxHooks.useTrackCourseEvent(
     track.course.enterCourseClicked,
     cardId,
-    resumeUrl + ((isExecutiveEd2uCourse && authOrgId) ? execEdURLParam : ''),
+    resumeUrl + execEdTrackingParam,
   );
   return (
     <ActionButton

diff --git a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
@@ -6,52 +6,80 @@ import track from 'tracking';
 import useActionDisabledState from '../hooks';
 import ResumeButton from './ResumeButton';
 
+jest.mock('tracking', () => ({
+  course: {
+    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
+  },
+}));
+
 jest.mock('hooks', () => ({
   reduxHooks: {
-    useCardCourseRunData: jest.fn(() => ({ resumeUrl: 'resumeUrl' })),
-    useTrackCourseEvent: (eventName, cardId, url) => jest
-      .fn()
-      .mockName(`useTrackCourseEvent('${eventName}', '${cardId}', '${url}')`),
+    useCardCourseRunData: jest.fn(),
+    useCardExecEdTrackingParam: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
   },
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableResumeCourse: false })));
-jest.mock('tracking', () => ({
-  course: {
-    enterCourseClicked: 'enterCourseClicked',
-  },
-}));
 jest.mock('./ActionButton', () => 'ActionButton');
 
-const { resumeUrl } = reduxHooks.useCardCourseRunData();
+const resumeUrl = 'resume-url';
+reduxHooks.useCardCourseRunData.mockReturnValue({ resumeUrl });
+const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
+reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
+reduxHooks.useTrackCourseEvent.mockImplementation(
+  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+);
+
+let wrapper;
 
 describe('ResumeButton', () => {
   const props = {
     cardId: 'cardId',
   };
-  describe('snapshot', () => {
-    test('renders default button when learner has access to the course', () => {
-      const wrapper = shallow(<ResumeButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
-      expect(wrapper.prop(htmlProps.onClick).getMockName()).toContain(
-        'useTrackCourseEvent',
-        track.course.enterCourseClicked,
-        props.cardId,
-        resumeUrl,
-      );
+  describe('behavior', () => {
+    it('initializes course run data with cardId', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads exec education path param', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
+      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads disabled states for resume action from action hooks', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
+      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
     });
   });
-  describe('behavior', () => {
-    it('initializes course run data based on cardId', () => {
-      shallow(<ResumeButton {...props} />);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
-        props.cardId,
-      );
+  describe('snapshot', () => {
+    describe('disabled', () => {
+      beforeEach(() => {
+        useActionDisabledState.mockReturnValueOnce({ disableResumeCourse: true });
+        wrapper = shallow(<ResumeButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+      it('should be disabled', () => {
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      });
     });
-    test('disabled states', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableResumeCourse: true });
-      const wrapper = shallow(<ResumeButton {...props} />);
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    describe('enabled', () => {
+      beforeEach(() => {
+        wrapper = shallow(<ResumeButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+      it('should be enabled', () => {
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+      });
+      it('should track enter course clicked event on click, with exec ed param', () => {
+        expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+          track.course.enterCourseClicked,
+          props.cardId,
+          resumeUrl + execEdPath(props.cardId),
+        ));
+      });
     });
   });
 });
diff --git a/...ers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap b/...ers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap
@@ -1,6 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BeginCourseButton snapshot renders default button when learner has access to the course 1`] = `
+exports[`BeginCourseButton snapshot disabled snapshot 1`] = `
+<ActionButton
+  as="a"
+  disabled={true}
+  href="#"
+  onClick={
+    Object {
+      "trackCourseEvent": Object {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
+      },
+    }
+  }
+>
+  Begin Course
+</ActionButton>
+`;
+
+exports[`BeginCourseButton snapshot enabled snapshot 1`] = `
 <ActionButton
   as="a"
   disabled={false}
@@ -10,7 +29,7 @@ exports[`BeginCourseButton snapshot renders default button when learner has acce
       "trackCourseEvent": Object {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "home-url",
+        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
       },
     }
   }

diff --git a/...ntainers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap b/...ntainers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap
@@ -1,11 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ResumeButton snapshot renders default button when learner has access to the course 1`] = `
+exports[`ResumeButton snapshot disabled snapshot 1`] = `
+<ActionButton
+  as="a"
+  disabled={true}
+  href="#"
+  onClick={
+    Object {
+      "trackCourseEvent": Object {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
+      },
+    }
+  }
+>
+  Resume
+</ActionButton>
+`;
+
+exports[`ResumeButton snapshot enabled snapshot 1`] = `
 <ActionButton
   as="a"
   disabled={false}
   href="#"
-  onClick={[MockFunction useTrackCourseEvent('enterCourseClicked', 'cardId', 'resumeUrl')]}
+  onClick={
+    Object {
+      "trackCourseEvent": Object {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
+      },
+    }
+  }
 >
   Resume
 </ActionButton>

diff --git a/src/containers/CourseCard/components/CourseCardActions/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/components/CourseCardActions/__snapshots__/index.test.jsx.snap