feat: [AA-906] Cleanup and add some Unit tests

src/course-home/outline-tab/OutlineTab.jsx

@@ -32,7 +32,7 @@ import AccountActivationAlert from '../../alerts/logistration-alert/AccountActiv
 
 /** [MM-P2P] Experiment */
 import { initHomeMMP2P, MMP2PFlyover } from '../../experiments/mm-p2p';
-import WeeklyLearningGoal from './widgets/WeeklyLearningGoalCard';
+import WeeklyLearningGoalCard from './widgets/WeeklyLearningGoalCard';
 
 function OutlineTab({ intl }) {
   const {
@@ -211,7 +211,7 @@ function OutlineTab({ intl }) {
               />
             )}
             {weeklyLearningGoalEnabled && (
-              <WeeklyLearningGoal
+              <WeeklyLearningGoalCard
                 daysPerWeek={selectedGoal && 'daysPerWeek' in selectedGoal ? selectedGoal.daysPerWeek : null}
                 subscribedToReminders={selectedGoal && 'subscribedToReminders' in selectedGoal ? selectedGoal.subscribedToReminders : false}
                 courseId={courseId}

src/course-home/outline-tab/OutlineTab.test.jsx

@@ -6,6 +6,7 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import MockAdapter from 'axios-mock-adapter';
 import Cookies from 'js-cookie';
 import userEvent from '@testing-library/user-event';
+import messages from './messages';
 
 import { buildMinimalCourseBlocks } from '../../shared/data/__factories__/courseBlocks.factory';
 import {
@@ -413,6 +414,55 @@ describe('Outline Tab', () => {
     });
   });
 
+  describe('Weekly Learning Goals', () => {
+    it('does not render weekly learning goal if weeklyLearningGoalEnabled is false', async () => {
+      await fetchAndRender();
+      expect(screen.queryByTestId('weekly-learning-goal-card')).not.toBeInTheDocument();
+    });
+
+    describe('weekly learning goal is not set', () => {
+      beforeEach(async () => {
+        setTabData({
+          course_goals: {
+            weekly_learning_goal_enabled: true,
+          },
+        });
+        await fetchAndRender();
+      });
+
+      it('renders weekly learning goal card', async () => {
+        expect(screen.queryByTestId('weekly-learning-goal-card')).toBeInTheDocument();
+      });
+
+      it('renders startOrResumeCourseCard', async () => {
+        expect(screen.queryByTestId('start-resume-card')).toBeInTheDocument();
+      });
+
+      it('disables the subscribe button if no goal is set', async () => {
+        expect(screen.getByLabelText(messages.setGoalReminder.defaultMessage)).toBeDisabled();
+      });
+
+      // Does this need more setup to test frontend backend mismatch?
+      it('does not show the previous goal setting card', async () => {
+        expect(screen.getByTestId('course-goal-card')).not.toBeInTheDocument();
+      });
+
+      it('calls the API when a button is clicked', async () => {
+        expect(screen.queryByText(messages.casualGoalButtonText.defaultMessage)).toBeInTheDocument();
+        expect(screen.getByText(messages.casualGoalButtonText.defaultMessage).closest('button')).toBeInTheDocument();
+
+        const button = await screen.getByText(messages.casualGoalButtonText.defaultMessage).closest('button');
+        fireEvent.click(button);
+        // Verify the request was made
+        await waitFor(() => {
+          expect(axiosMock.history.post[0].url).toMatch(goalUrl);
+          expect(axiosMock.history.post[0].data).toMatch(`{"course_id":"${courseId}","days_per_week":3,"subscribed_to_reminders":false}`);
+        });
+        expect(screen.getByLabelText(messages.setGoalReminder.defaultMessage)).toBeEnabled();
+      });
+    });
+  });
+
   describe('Course Handouts', () => {
     it('renders title when handouts are available', async () => {
       await fetchAndRender();

src/course-home/outline-tab/widgets/FlagButton.jsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 function FlagButton({
-  icon,
+  ButtonIcon,
   srText,
   title,
   text,
@@ -22,7 +22,7 @@ function FlagButton({
       onClick={() => handleSelect()}
     >
       <div className=" justify-content-center">
-        {icon}
+        {ButtonIcon}
       </div>
       <span className="sr-only sr-only-focusable">{srText}</span>
       <div className="text-center small">
@@ -36,7 +36,7 @@ function FlagButton({
 }
 
 FlagButton.propTypes = {
-  icon: PropTypes.node.isRequired,
+  ButtonIcon: PropTypes.element.isRequired,
   srText: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
   text: PropTypes.string,

src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx

@@ -38,7 +38,7 @@ function StartOrResumeCourseCard({ intl }) {
   };
 
   return (
-    <Card className="mb-3" data-testid="start-resume-panel">
+    <Card className="mb-3" data-testid="start-resume-card">
       <Card.Body>
         <div className="row w-100 m-0 ">
           <h2 className="h4 col-auto flex-grow-1">{intl.formatMessage(messages.startBlurb)}</h2>

src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx

@@ -42,7 +42,7 @@ function WeeklyLearningGoalCard({
 
   return (
     <div className="row w-100 m-0 p-0">
-      <Card className="mb-3" data-testid="course-goal-card">
+      <Card className="mb-3" data-testid="weekly-learning-goal-card">
         <Card.Body>
           <Card.Title>
             <h4 className="m-0">{intl.formatMessage(messages.setWeeklyGoal)}</h4>
@@ -53,7 +53,7 @@ function WeeklyLearningGoalCard({
           <div className="row w-100 m-0 p-0 justify-content-around">
             <div className="col-auto col-md-12 col-xl-auto m-0 p-0 pb-md-3 pb-xl-0">
               <FlagButton
-                icon={<FlagCasualIcon />}
+                ButtonIcon={<FlagCasualIcon />}
                 srText={intl.formatMessage(messages.setLearningGoalButtonScreenReaderText)}
                 title={intl.formatMessage(messages.casualGoalButtonTitle)}
                 text={intl.formatMessage(messages.casualGoalButtonText)}
@@ -63,7 +63,7 @@ function WeeklyLearningGoalCard({
             </div>
             <div className="col-auto col-md-12 col-xl-auto m-0 p-0 pb-md-3 pb-xl-0">
               <FlagButton
-                icon={<FlagRegularIcon />}
+                ButtonIcon={<FlagRegularIcon />}
                 srText={intl.formatMessage(messages.setLearningGoalButtonScreenReaderText)}
                 title={intl.formatMessage(messages.regularGoalButtonTitle)}
                 text={intl.formatMessage(messages.regularGoalButtonText)}
@@ -73,7 +73,7 @@ function WeeklyLearningGoalCard({
             </div>
             <div className="col-auto col-md-12 col-xl-auto m-0 p-0 pb-md-3 pb-xl-0">
               <FlagButton
-                icon={<FlagIntenseIcon />}
+                ButtonIcon={<FlagIntenseIcon />}
                 srText={intl.formatMessage(messages.setLearningGoalButtonScreenReaderText)}
                 title={intl.formatMessage(messages.intenseGoalButtonTitle)}
                 text={intl.formatMessage(messages.intenseGoalButtonText)}