From 044bf0f45a539f4e12cf4ddd7ccef963a7f88afa Mon Sep 17 00:00:00 2001
From: Ben Warzeski <bwarzeski@edx.org>
Date: Wed, 21 Dec 2022 10:47:43 -0500
Subject: [PATCH] fix: disable reason select if no reason selected (#101)

---
 .../SelectSessionModal/hooks.test.js          | 18 ++++
 .../components/ReasonPane.jsx                 |  3 +-
 .../components/ReasonPane.test.jsx            |  4 +
 .../__snapshots__/ReasonPane.test.jsx.snap    | 92 +++++++++++++++++++
 .../UnenrollConfirmModal/hooks/reasons.js     |  2 +
 .../hooks/reasons.test.js                     | 24 +++++
 6 files changed, 142 insertions(+), 1 deletion(-)

diff --git a/src/containers/SelectSessionModal/hooks.test.js b/src/containers/SelectSessionModal/hooks.test.js
index 1cb53e7..136c0cb 100644
--- a/src/containers/SelectSessionModal/hooks.test.js
+++ b/src/containers/SelectSessionModal/hooks.test.js
@@ -4,11 +4,19 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { MockUseState } from 'testUtils';
 import { hooks as appHooks, thunkActions } from 'data/redux';
+import track from 'tracking';
 
 import { LEAVE_OPTION } from './constants';
 import messages from './messages';
 import * as hooks from './hooks';
 
+jest.mock('tracking', () => ({
+  entitlements: {
+    newSession: jest.fn(),
+    switchSession: jest.fn(),
+    leaveSession: jest.fn(),
+  },
+}));
 jest.mock('data/redux', () => ({
   hooks: {
     useCardCourseData: jest.fn(),
@@ -57,6 +65,13 @@ const testValue = 'test-value';
 const courseId = 'test-course-id';
 appHooks.useCardCourseRunData.mockReturnValue({ courseId });
 
+const newSession = jest.fn();
+const switchSession = jest.fn();
+const leaveSession = jest.fn();
+track.entitlements.newSession.mockReturnValue(newSession);
+track.entitlements.switchSession.mockReturnValue(switchSession);
+track.entitlements.leaveSession.mockReturnValue(leaveSession);
+
 describe('SelectSessionModal hooks', () => {
   let out;
 
@@ -116,6 +131,7 @@ describe('SelectSessionModal hooks', () => {
             state.mockVal(state.keys.selectedSession, LEAVE_OPTION);
             runHook({});
             out.handleSubmit();
+            expect(leaveSession).toHaveBeenCalledWith();
             expect(dispatch).toHaveBeenCalledWith(
               thunkActions.app.leaveEntitlementSession(selectedCardId),
             );
@@ -126,6 +142,7 @@ describe('SelectSessionModal hooks', () => {
             state.mockVal(state.keys.selectedSession, testValue);
             runHook({});
             out.handleSubmit();
+            expect(newSession).toHaveBeenCalledWith();
             expect(dispatch).toHaveBeenCalledWith(
               thunkActions.app.newEntitlementEnrollment(selectedCardId, testValue),
             );
@@ -136,6 +153,7 @@ describe('SelectSessionModal hooks', () => {
             state.mockVal(state.keys.selectedSession, testValue);
             runHook({ enrollment: { isEnrolled: true } });
             out.handleSubmit();
+            expect(switchSession).toHaveBeenCalledWith();
             expect(dispatch).toHaveBeenCalledWith(
               thunkActions.app.switchEntitlementEnrollment(selectedCardId, testValue),
             );
diff --git a/src/containers/UnenrollConfirmModal/components/ReasonPane.jsx b/src/containers/UnenrollConfirmModal/components/ReasonPane.jsx
index 843767a..9e7054c 100644
--- a/src/containers/UnenrollConfirmModal/components/ReasonPane.jsx
+++ b/src/containers/UnenrollConfirmModal/components/ReasonPane.jsx
@@ -40,7 +40,7 @@ export const ReasonPane = ({
         <Button variant="tertiary" onClick={reason.handleSkip}>
           {formatMessage(messages.reasonSkip)}
         </Button>
-        <Button onClick={reason.handleSubmit}>
+        <Button disabled={!reason.hasReason} onClick={reason.handleSubmit}>
           {formatMessage(messages.reasonSubmit)}
         </Button>
       </ActionRow>
@@ -51,6 +51,7 @@ ReasonPane.propTypes = {
   reason: PropTypes.shape({
     value: PropTypes.string,
     handleSkip: PropTypes.func,
+    hasReason: PropTypes.bool,
     selectOption: PropTypes.func,
     customOption: PropTypes.shape({
       value: PropTypes.string,
diff --git a/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx b/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx
index ddb5033..4c05895 100644
--- a/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx
+++ b/src/containers/UnenrollConfirmModal/components/ReasonPane.test.jsx
@@ -14,9 +14,13 @@ describe('UnenrollConfirmModal ReasonPane', () => {
       },
       selected: 'props.reason.selected',
       handleSubmit: jest.fn().mockName('props.reason.handleSubmit'),
+      hasReason: true,
     },
   };
   test('snapshot', () => {
     expect(shallow(<ReasonPane {...props} />)).toMatchSnapshot();
   });
+  test('snapshot: no reason provided', () => {
+    expect(shallow(<ReasonPane {...props} hasReason={false} />)).toMatchSnapshot();
+  });
 });
diff --git a/src/containers/UnenrollConfirmModal/components/__snapshots__/ReasonPane.test.jsx.snap b/src/containers/UnenrollConfirmModal/components/__snapshots__/ReasonPane.test.jsx.snap
index 98a2fe9..3e2bec8 100644
--- a/src/containers/UnenrollConfirmModal/components/__snapshots__/ReasonPane.test.jsx.snap
+++ b/src/containers/UnenrollConfirmModal/components/__snapshots__/ReasonPane.test.jsx.snap
@@ -82,6 +82,98 @@ exports[`UnenrollConfirmModal ReasonPane snapshot 1`] = `
       Skip survey
     </Button>
     <Button
+      disabled={false}
+      onClick={[MockFunction props.reason.handleSubmit]}
+    >
+      Submit reason
+    </Button>
+  </ActionRow>
+</Fragment>
+`;
+
+exports[`UnenrollConfirmModal ReasonPane snapshot: no reason provided 1`] = `
+<Fragment>
+  <h4>
+    What's your main reason for unenrolling?
+  </h4>
+  <Form.RadioSet
+    name="unenrollReason"
+    onChange={[MockFunction props.reason.selectOption]}
+    value="props.reason.selected"
+  >
+    <Form.Radio
+      key="prereqs"
+      value="prereqs"
+    >
+      I don't have the academic or language prerequisites
+    </Form.Radio>
+    <Form.Radio
+      key="difficulty"
+      value="difficulty"
+    >
+      The course material was too hard
+    </Form.Radio>
+    <Form.Radio
+      key="goals"
+      value="goals"
+    >
+      This won't help me reach my goals
+    </Form.Radio>
+    <Form.Radio
+      key="broken"
+      value="broken"
+    >
+      Something was broken
+    </Form.Radio>
+    <Form.Radio
+      key="time"
+      value="time"
+    >
+      I don't have the time
+    </Form.Radio>
+    <Form.Radio
+      key="browse"
+      value="browse"
+    >
+      I just wanted to browse the material
+    </Form.Radio>
+    <Form.Radio
+      key="support"
+      value="support"
+    >
+      I don't have enough support
+    </Form.Radio>
+    <Form.Radio
+      key="quality"
+      value="quality"
+    >
+      I am not happy with the quality of the content
+    </Form.Radio>
+    <Form.Radio
+      key="easy"
+      value="easy"
+    >
+      The course material was too easy
+    </Form.Radio>
+    <Form.Radio
+      value="custom"
+    >
+      <Form.Control
+        onChange={[MockFunction props.reason.customOption.onChange]}
+        placeholder="Other"
+        value="props.reason.customOption.value"
+      />
+    </Form.Radio>
+  </Form.RadioSet>
+  <ActionRow>
+    <Button
+      onClick={[MockFunction props.reason.handleSkip]}
+      variant="tertiary"
+    >
+      Skip survey
+    </Button>
+    <Button
+      disabled={false}
       onClick={[MockFunction props.reason.handleSubmit]}
     >
       Submit reason
diff --git a/src/containers/UnenrollConfirmModal/hooks/reasons.js b/src/containers/UnenrollConfirmModal/hooks/reasons.js
index 725b53f..720b893 100644
--- a/src/containers/UnenrollConfirmModal/hooks/reasons.js
+++ b/src/containers/UnenrollConfirmModal/hooks/reasons.js
@@ -39,6 +39,7 @@ export const useUnenrollReasons = ({
   const [isSubmitted, setIsSubmitted] = module.state.isSubmitted(false);
 
   const submittedReason = selectedReason === 'custom' ? customOption : selectedReason;
+  const hasReason = ![null, ''].includes(submittedReason);
 
   const handleTrackReasons = module.useTrackUnenrollReasons({ cardId, submittedReason });
 
@@ -65,6 +66,7 @@ export const useUnenrollReasons = ({
     handleClear,
     handleSkip,
     handleSubmit,
+    hasReason,
     isSkipped,
     isSubmitted,
     selectOption: useValueCallback(setSelectedReason),
diff --git a/src/containers/UnenrollConfirmModal/hooks/reasons.test.js b/src/containers/UnenrollConfirmModal/hooks/reasons.test.js
index e8d3135..cfed357 100644
--- a/src/containers/UnenrollConfirmModal/hooks/reasons.test.js
+++ b/src/containers/UnenrollConfirmModal/hooks/reasons.test.js
@@ -104,6 +104,30 @@ describe('UnenrollConfirmModal reasons hooks', () => {
         expect(dispatch).toHaveBeenCalledWith(thunkActions.app.unenrollFromCourse(cardId));
       });
     });
+    describe('hasReason', () => {
+      it('returns true if an option is selected other than custom', () => {
+        state.mockVal(state.keys.selectedReason, testValue);
+        out = createUseUnenrollReasons();
+        expect(out.hasReason).toEqual(true);
+      });
+      it('returns true if custom option is selected and provided', () => {
+        state.mockVal(state.keys.selectedReason, 'custom');
+        state.mockVal(state.keys.customOption, testValue2);
+        out = createUseUnenrollReasons();
+        expect(out.hasReason).toEqual(true);
+      });
+      it('returns false if no option is selected', () => {
+        state.mockVal(state.keys.selectedReason, null);
+        out = createUseUnenrollReasons();
+        expect(out.hasReason).toEqual(false);
+      });
+      it('returns false if custom option is selcted but not provided', () => {
+        state.mockVal(state.keys.selectedReason, 'custom');
+        state.mockVal(state.keys.customOption, '');
+        out = createUseUnenrollReasons();
+        expect(out.hasReason).toEqual(false);
+      });
+    });
     test('isSkipped returns state value', () => {
       state.mockVal(state.keys.isSkipped, testValue);
       expect(createUseUnenrollReasons().isSkipped).toEqual(testValue);