@openedx/frontend-app-learner-dashboard 1.0.0-alpha.0

package/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx

@@ -0,0 +1,214 @@
+import { when } from 'jest-when';
+
+import { Dropdown } from '@openedx/paragon';
+import { shallow } from '@edx/react-unit-test-utils';
+import { useIntl } from '@openedx/frontend-base';
+
+import EmailSettingsModal from 'containers/EmailSettingsModal';
+import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
+import { reduxHooks } from 'hooks';
+import SocialShareMenu from './SocialShareMenu';
+import * as hooks from './hooks';
+import CourseCardMenu, { testIds } from '.';
+
+jest.mock('@openedx/frontend-base', () => ({
+  ...jest.requireActual('@openedx/frontend-base'),
+  useIntl: jest.fn().mockReturnValue({
+    formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage,
+  }),
+}));
+jest.mock('hooks', () => ({
+  reduxHooks: { useMasqueradeData: jest.fn(), useCardEnrollmentData: jest.fn() },
+}));
+jest.mock('./SocialShareMenu', () => 'SocialShareMenu');
+jest.mock('./hooks', () => ({
+  useEmailSettings: jest.fn(),
+  useUnenrollData: jest.fn(),
+  useHandleToggleDropdown: jest.fn(),
+  useOptionVisibility: jest.fn(),
+}));
+
+const props = {
+  cardId: 'test-card-id',
+};
+
+const emailSettings = {
+  isVisible: false,
+  show: jest.fn().mockName('emailSettingShow'),
+  hide: jest.fn().mockName('emailSettingHide'),
+};
+
+const unenrollData = {
+  isVisible: false,
+  show: jest.fn().mockName('unenrollShow'),
+  hide: jest.fn().mockName('unenrollHide'),
+};
+
+let el;
+
+const mockHook = (fn, returnValue, options = {}) => {
+  if (options.isCardHook) {
+    when(fn).calledWith(props.cardId).mockReturnValueOnce(returnValue);
+  } else {
+    when(fn).calledWith().mockReturnValueOnce(returnValue);
+  }
+};
+
+const handleToggleDropdown = jest.fn().mockName('hooks.handleToggleDropdown');
+
+const mockHooks = (returnVals = {}) => {
+  mockHook(
+    hooks.useEmailSettings,
+    returnVals.emailSettings ? returnVals.emailSettings : emailSettings,
+  );
+  mockHook(
+    hooks.useUnenrollData,
+    returnVals.unenrollData ? returnVals.unenrollData : unenrollData,
+  );
+  mockHook(hooks.useHandleToggleDropdown, handleToggleDropdown, { isCardHook: true });
+  mockHook(
+    hooks.useOptionVisibility,
+    {
+      shouldShowUnenrollItem: !!returnVals.shouldShowUnenrollItem,
+      shouldShowDropdown: !!returnVals.shouldShowDropdown,
+    },
+    { isCardHook: true },
+  );
+  mockHook(reduxHooks.useMasqueradeData, { isMasquerading: !!returnVals.isMasquerading });
+  mockHook(
+    reduxHooks.useCardEnrollmentData,
+    { isEmailEnabled: !!returnVals.isEmailEnabled },
+    { isCardHook: true },
+  );
+};
+
+const render = () => {
+  el = shallow(<CourseCardMenu {...props} />);
+};
+
+describe('CourseCardMenu', () => {
+  describe('behavior', () => {
+    beforeEach(() => {
+      mockHooks();
+      render();
+    });
+    it('initializes intl hook', () => {
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+    it('initializes local hooks', () => {
+      when(hooks.useEmailSettings).expectCalledWith();
+      when(hooks.useUnenrollData).expectCalledWith();
+      when(hooks.useHandleToggleDropdown).expectCalledWith(props.cardId);
+      when(hooks.useOptionVisibility).expectCalledWith(props.cardId);
+    });
+    it('initializes redux hook data ', () => {
+      when(reduxHooks.useMasqueradeData).expectCalledWith();
+      when(reduxHooks.useCardEnrollmentData).expectCalledWith(props.cardId);
+    });
+  });
+  describe('render', () => {
+    it('renders null if showDropdown is false', () => {
+      mockHooks();
+      render();
+      expect(el.isEmptyRender()).toEqual(true);
+    });
+    const testHandleToggle = () => {
+      it('displays Dropdown with onToggle=handleToggleDropdown', () => {
+        expect(el.instance.findByType(Dropdown)[0].props.onToggle).toEqual(handleToggleDropdown);
+      });
+    };
+    const testUnenrollConfirmModal = () => {
+      it('displays UnenrollConfirmModal with cardId and unenrollModal data', () => {
+        const modal = el.instance.findByType(UnenrollConfirmModal)[0];
+        expect(modal.props.show).toEqual(unenrollData.isVisible);
+        expect(modal.props.closeModal).toEqual(unenrollData.hide);
+        expect(modal.props.cardId).toEqual(props.cardId);
+      });
+    };
+    const testSocialShareMenu = () => {
+      it('displays SocialShareMenu with cardID and emailSettings', () => {
+        const menu = el.instance.findByType(SocialShareMenu)[0];
+        expect(menu.props.cardId).toEqual(props.cardId);
+        expect(menu.props.emailSettings).toEqual(emailSettings);
+      });
+    };
+    describe('show dropdown', () => {
+      describe('hide unenroll item and disable email', () => {
+        beforeEach(() => {
+          mockHooks({ shouldShowDropdown: true });
+          render();
+        });
+        test('snapshot', () => {
+          expect(el.snapshot).toMatchSnapshot();
+        });
+        testHandleToggle();
+        testSocialShareMenu();
+        it('does not render unenroll modal toggle', () => {
+          expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(0);
+        });
+        it('does not render EmailSettingsModal', () => {
+          expect(el.instance.findByType(EmailSettingsModal).length).toEqual(0);
+        });
+        testUnenrollConfirmModal();
+      });
+      describe('show unenroll and enable email', () => {
+        const hookProps = {
+          shouldShowDropdown: true,
+          isEmailEnabled: true,
+          shouldShowUnenrollItem: true,
+        };
+        beforeEach(() => {
+          mockHooks(hookProps);
+          render();
+        });
+        test('snapshot', () => {
+          expect(el.snapshot).toMatchSnapshot();
+        });
+        testHandleToggle();
+        testSocialShareMenu();
+        describe('unenroll modal toggle', () => {
+          let toggle;
+          describe('not masquerading', () => {
+            beforeEach(() => {
+              mockHooks(hookProps);
+              render();
+              [toggle] = el.instance.findByTestId(testIds.unenrollModalToggle);
+            });
+            it('renders unenroll modal toggle', () => {
+              expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(1);
+            });
+            test('onClick from unenroll modal hook', () => {
+              expect(toggle.props.onClick).toEqual(unenrollData.show);
+            });
+            test('disabled', () => {
+              expect(toggle.props.disabled).toEqual(false);
+            });
+          });
+          describe('masquerading', () => {
+            beforeEach(() => {
+              mockHooks({ ...hookProps, isMasquerading: true });
+              render();
+              [toggle] = el.instance.findByTestId(testIds.unenrollModalToggle);
+            });
+            it('renders', () => {
+              expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(1);
+            });
+            test('onClick from unenroll modal hook', () => {
+              expect(toggle.props.onClick).toEqual(unenrollData.show);
+            });
+            test('disabled', () => {
+              expect(toggle.props.disabled).toEqual(true);
+            });
+          });
+        });
+        testUnenrollConfirmModal();
+        it('displays EmaiSettingsModal with cardId and emailSettingsModal data', () => {
+          const modal = el.instance.findByType(EmailSettingsModal)[0];
+          expect(modal.props.show).toEqual(emailSettings.isVisible);
+          expect(modal.props.closeModal).toEqual(emailSettings.hide);
+          expect(modal.props.cardId).toEqual(props.cardId);
+        });
+      });
+    });
+  });
+});

package/src/containers/CourseCard/components/CourseCardMenu/messages.js

@@ -0,0 +1,36 @@
+import { defineMessages } from '@openedx/frontend-base';
+
+const messages = defineMessages({
+  unenroll: {
+    id: 'learner-dash.courseCardMenu.unenroll',
+    description: 'Course unenroll menu button',
+    defaultMessage: 'Unenroll',
+  },
+  dropdownAlt: {
+    id: 'learner-dash.courseCardMenu.dropdownAlt',
+    description: 'Course action menu alt-text',
+    defaultMessage: 'Course actions dropdown',
+  },
+  emailSettings: {
+    id: 'learner-dash.courseCardMenu.emailSettings',
+    description: 'Course email settings menu button',
+    defaultMessage: 'Email settings',
+  },
+  shareToFacebook: {
+    id: 'learner-dash.courseCardMenu.shareToFacebook',
+    description: 'Course Facebook Sharing button',
+    defaultMessage: 'Share to Facebook',
+  },
+  shareToTwitter: {
+    id: 'learner-dash.courseCardMenu.shareToTwitter',
+    description: 'Course Twitter Sharing button',
+    defaultMessage: 'Share to Twitter',
+  },
+  shareQuote: {
+    id: 'learner-dash.courseCardMenu.shareQuote',
+    description: 'Social sharing quote',
+    defaultMessage: 'I\'m taking {courseName} online with {socialBrand}.  Check it out!',
+  },
+});
+
+export default messages;

package/src/containers/CourseCard/components/CourseCardTitle.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import track from '../../../tracking';
+import { reduxHooks } from '../../../hooks';
+import useActionDisabledState from './hooks';
+
+const { courseTitleClicked } = track.course;
+
+export const CourseCardTitle = ({ cardId }) => {
+  const { courseName } = reduxHooks.useCardCourseData(cardId);
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const handleTitleClicked = reduxHooks.useTrackCourseEvent(
+    courseTitleClicked,
+    cardId,
+    homeUrl,
+  );
+  const { disableCourseTitle } = useActionDisabledState(cardId);
+  return (
+    <h3>
+      {disableCourseTitle ? (
+        <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>
+  );
+};
+
+CourseCardTitle.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+CourseCardTitle.defaultProps = {};
+
+export default CourseCardTitle;

package/src/containers/CourseCard/components/CourseCardTitle.test.jsx

@@ -0,0 +1,67 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+import useActionDisabledState from './hooks';
+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 })),
+    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
+      trackCourseEvent: { eventName, cardId, url },
+    })),
+  },
+}));
+jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
+
+describe('CourseCardTitle', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('snapshot', () => {
+    test('renders clickable link course title', () => {
+      const wrapper = shallow(<CourseCardTitle {...props} />);
+      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,
+          homeUrl,
+        ),
+      );
+    });
+    test('renders disabled link', () => {
+      useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
+      const wrapper = shallow(<CourseCardTitle {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      const title = wrapper.instance.findByTestId('CourseCardTitle');
+      expect(title[0].type).toBe('span');
+      expect(title[0].props.onClick).toBeUndefined();
+    });
+  });
+  describe('behavior', () => {
+    it('initializes', () => {
+      shallow(<CourseCardTitle {...props} />);
+      expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
+        props.cardId,
+      );
+      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
+    });
+  });
+});

package/src/containers/CourseCard/components/RelatedProgramsBadge/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RelatedProgramsBadge component snapshot: 3 programs 1`] = `
+<Fragment>
+  <Button
+    className="pl-0 mr-0 justify-content-start align-self-start flex-shrink-1"
+    data-testid="RelatedProgramsBadge"
+    onClick={[MockFunction useRelatedProgramsBadge.openModal]}
+    size="sm"
+    variant="tertiary"
+  >
+    <Icon
+      className="mr-2 pr-0"
+      src={[MockFunction icons.Program]}
+    />
+     
+    useRelatedProgramsBadge.programsMessage
+  </Button>
+  <RelatedProgramsModal
+    cardId="test-course-number"
+    closeModal={[MockFunction useRelatedProgramsBadge.closeModal]}
+    isOpen={true}
+  />
+</Fragment>
+`;

package/src/containers/CourseCard/components/RelatedProgramsBadge/hooks.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useIntl } from '@openedx/frontend-base';
+
+import { StrictDict } from 'utils';
+import { reduxHooks } from 'hooks';
+
+import messages from './messages';
+import * as module from './hooks';
+
+export const state = StrictDict({
+  isOpen: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useRelatedProgramsBadgeData = ({ cardId }) => {
+  const [isOpen, setIsOpen] = module.state.isOpen(false);
+  const { formatMessage } = useIntl();
+  const numPrograms = reduxHooks.useCardRelatedProgramsData(cardId).length;
+  let programsMessage = '';
+  if (numPrograms) {
+    programsMessage = formatMessage(
+      numPrograms === 1 ? messages.badgeLabelSingular : messages.badgeLabelPlural,
+      { numPrograms },
+    );
+  }
+
+  return {
+    numPrograms,
+    programsMessage,
+    isOpen,
+    openModal: () => setIsOpen(true),
+    closeModal: () => setIsOpen(false),
+  };
+};
+
+export default useRelatedProgramsBadgeData;

package/src/containers/CourseCard/components/RelatedProgramsBadge/hooks.test.js

@@ -0,0 +1,76 @@
+import { useIntl } from '@openedx/frontend-base';
+
+import { MockUseState } from 'testUtils';
+import { reduxHooks } from 'hooks';
+
+import * as hooks from './hooks';
+import messages from './messages';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardRelatedProgramsData: jest.fn(),
+  },
+}));
+
+const cardId = 'test-card-id';
+
+const state = new MockUseState(hooks);
+const numPrograms = 27;
+
+describe('RelatedProgramsBadge hooks', () => {
+  const { formatMessage } = useIntl();
+  let out;
+  describe('state values', () => {
+    state.testGetter(state.keys.isOpen);
+  });
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('useRelatedProgramsBadgeData', () => {
+    beforeEach(() => {
+      state.mock();
+      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({
+        length: numPrograms,
+      });
+      out = hooks.useRelatedProgramsBadgeData({ cardId });
+    });
+    afterEach(state.restore);
+
+    test('openModal sets isOpen to true as useCallback', () => {
+      out.openModal();
+      expect(state.setState.isOpen).toHaveBeenCalledWith(true);
+    });
+
+    test('closeModal sets isOpen to false as useCallback', () => {
+      out.closeModal();
+      expect(state.setState.isOpen).toHaveBeenCalledWith(false);
+    });
+
+    test('isOpen returns state value for isOpen', () => {
+      expect(out.isOpen).toEqual(state.stateVals.isOpen);
+    });
+
+    test('forwards numPrograms from relatedPrograms.length for the cardId', () => {
+      expect(out.numPrograms).toEqual(numPrograms);
+    });
+    test('returns empty programsMessage if no programs', () => {
+      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({ length: 0 });
+      out = hooks.useRelatedProgramsBadgeData({ cardId });
+      expect(out.programsMessage).toEqual('');
+    });
+    test('returns badgeLabelSingular programsMessage if 1 programs', () => {
+      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({ length: 1 });
+      out = hooks.useRelatedProgramsBadgeData({ cardId });
+      expect(out.programsMessage).toEqual(formatMessage(
+        messages.badgeLabelSingular,
+        { numPrograms: 1 },
+      ));
+    });
+    test('returns badgeLabelSingular programsMessage if multiple programs', () => {
+      expect(out.programsMessage).toEqual(formatMessage(
+        messages.badgeLabelPlural,
+        { numPrograms },
+      ));
+    });
+  });
+});

package/src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx

@@ -0,0 +1,39 @@
+/* eslint-disable quotes */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Icon } from '@openedx/paragon';
+import { Program } from '@openedx/paragon/icons';
+
+import RelatedProgramsBadgeModal from 'containers/RelatedProgramsModal';
+import useRelatedProgramsBadgeData from './hooks';
+
+export const RelatedProgramsBadge = ({ cardId }) => {
+  const {
+    isOpen, openModal, closeModal, numPrograms, programsMessage,
+  } = useRelatedProgramsBadgeData({ cardId });
+
+  if (numPrograms === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <Button
+        data-testid="RelatedProgramsBadge"
+        className="pl-0 mr-0 justify-content-start align-self-start flex-shrink-1"
+        variant="tertiary"
+        size="sm"
+        onClick={openModal}
+      >
+        <Icon src={Program} className="mr-2 pr-0" /> {programsMessage}
+      </Button>
+      <RelatedProgramsBadgeModal {...{ isOpen, closeModal, cardId }} />
+    </>
+  );
+};
+RelatedProgramsBadge.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default RelatedProgramsBadge;

package/src/containers/CourseCard/components/RelatedProgramsBadge/index.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import useRelatedProgramsBadge from './hooks';
+import RelatedProgramsBadge from '.';
+
+jest.mock('containers/RelatedProgramsModal', () => 'RelatedProgramsModal');
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+  isOpen: true,
+  openModal: jest.fn().mockName('useRelatedProgramsBadge.openModal'),
+  closeModal: jest.fn().mockName('useRelatedProgramsBadge.closeModal'),
+  numPrograms: 3,
+  programsMessage: 'useRelatedProgramsBadge.programsMessage',
+};
+
+const cardId = 'test-course-number';
+
+describe('RelatedProgramsBadge component', () => {
+  test('empty render: no programs', () => {
+    useRelatedProgramsBadge.mockReturnValueOnce({ ...hookProps, numPrograms: 0 });
+    const el = shallow(<RelatedProgramsBadge cardId={cardId} />);
+    expect(el.isEmptyRender()).toEqual(true);
+  });
+  test('snapshot: 3 programs', () => {
+    useRelatedProgramsBadge.mockReturnValueOnce(hookProps);
+    expect(shallow(<RelatedProgramsBadge cardId={cardId} />).snapshot).toMatchSnapshot();
+  });
+});

package/src/containers/CourseCard/components/RelatedProgramsBadge/messages.js

@@ -0,0 +1,13 @@
+export const messages = {
+  badgeLabelPlural: {
+    id: 'learner-dash.courseCard.relatedProgramsBadge.label.plural',
+    description: 'Label test indicating number of related programs for a course card',
+    defaultMessage: '{numPrograms} Related Programs',
+  },
+  badgeLabelSingular: {
+    id: 'learner-dash.courseCard.relatedProgramsBadge.label.singular',
+    description: 'Label test indicating a single related program for a course card',
+    defaultMessage: '{numPrograms} Related Program',
+  },
+};
+export default messages;

package/src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap

@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
+<a
+  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
+  href="home-url"
+  onClick={
+    {
+      "trackCourseEvent": {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.courseImageClicked],
+        "url": "home-url",
+      },
+    }
+  }
+  tabIndex="-1"
+>
+  <Fragment>
+    <img
+      alt="Course thumbnail"
+      className="pgn__card-image-cap w-100 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>
+      <img
+        alt="ID Verified Ribbon/Badge"
+        src="test-file-stub"
+      />
+    </span>
+  </Fragment>
+</a>
+`;
+
+exports[`CourseCardImage snapshot renders disabled link 1`] = `
+<div
+  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
+>
+  <Fragment>
+    <img
+      alt="Course thumbnail"
+      className="pgn__card-image-cap w-100 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>
+      <img
+        alt="ID Verified Ribbon/Badge"
+        src="test-file-stub"
+      />
+    </span>
+  </Fragment>
+</div>
+`;

package/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={
+      {
+        "trackCourseEvent": {
+          "cardId": "cardId",
+          "eventName": [MockFunction segment.courseTitleClicked],
+          "url": "home-url",
+        },
+      }
+    }
+  >
+    course-name
+  </a>
+</h3>
+`;
+
+exports[`CourseCardTitle snapshot renders disabled link 1`] = `
+<h3>
+  <span
+    className="course-card-title"
+    data-testid="CourseCardTitle"
+  >
+    course-name
+  </span>
+</h3>
+`;