Special Exams allowances (#146)

* feat: allowances

* fix: add examtype to querykey

Author: diana-villalvazo-wgu

src/components/SpecifyLearnerField.test.tsx

@@ -15,23 +15,51 @@ const mockLearnerData = {
   fullName: 'Test User',
   email: 'test@email.com',
   isEnrolled: true,
+  progressUrl: 'http://example.com/progress',
 };
 
 describe('SpecifyLearnerField', () => {
-  describe('when learner is found', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    (useCourseInfo as jest.Mock).mockReturnValue({ data: { permissions: { admin: true, dataResearcher: false } } });
+  });
+
+  describe('when learner is provided', () => {
     beforeEach(() => {
-      jest.resetAllMocks();
-      (useCourseInfo as jest.Mock).mockReturnValue({ data: { permissions: { admin: true, dataResearcher: false } } });
       (useLearner as jest.Mock).mockReturnValue({
         data: mockLearnerData,
         refetch: jest.fn().mockResolvedValue({ data: mockLearnerData }),
         error: null,
       });
     });
-    it('renders label and input', () => {
-      renderWithIntl(<SpecifyLearnerField onClickSelect={jest.fn()} />);
-      expect(screen.getByText(messages.specifyLearner.defaultMessage)).toBeInTheDocument();
-      expect(screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage)).toBeInTheDocument();
+
+    it('renders selected learner label when learner is provided', () => {
+      renderWithIntl(<SpecifyLearnerField learner={mockLearnerData} onClickSelect={jest.fn()} />);
+      expect(screen.getByText(messages.selectedLearner.defaultMessage)).toBeInTheDocument();
+      expect(screen.queryByText(messages.specifyLearner.defaultMessage)).not.toBeInTheDocument();
+    });
+
+    it('shows learner details when learner is provided', () => {
+      renderWithIntl(<SpecifyLearnerField learner={mockLearnerData} onClickSelect={jest.fn()} />);
+      expect(screen.getByText(mockLearnerData.username)).toBeInTheDocument();
+      expect(screen.getByText(mockLearnerData.fullName)).toBeInTheDocument();
+      expect(screen.getByText(mockLearnerData.email)).toBeInTheDocument();
+    });
+
+    it('hides input field when learner is shown', () => {
+      renderWithIntl(<SpecifyLearnerField learner={mockLearnerData} onClickSelect={jest.fn()} />);
+      const input = screen.queryByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);
+      expect(input?.parentNode).toHaveClass('d-none');
+    });
+  });
+
+  describe('when learner is found after search', () => {
+    beforeEach(() => {
+      (useLearner as jest.Mock).mockReturnValue({
+        data: null,
+        refetch: jest.fn().mockResolvedValue({ data: mockLearnerData }),
+        error: null,
+      });
     });
 
     it('renders select button', () => {
@@ -50,6 +78,43 @@ describe('SpecifyLearnerField', () => {
       expect(handleClick).toHaveBeenCalledWith(mockLearnerData.username);
     });
 
+    it('changes to selected learner label after selection', async () => {
+      const handleClick = jest.fn();
+      renderWithIntl(<SpecifyLearnerField onClickSelect={handleClick} />);
+
+      // Initially shows default label
+      expect(screen.getByText(messages.specifyLearner.defaultMessage)).toBeInTheDocument();
+
+      // After learner is found and has username, should show selected label
+      renderWithIntl(<SpecifyLearnerField learner={mockLearnerData} onClickSelect={handleClick} />);
+      expect(screen.getByText(messages.selectedLearner.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  describe('when no learner is provided', () => {
+    beforeEach(() => {
+      (useLearner as jest.Mock).mockReturnValue({
+        data: mockLearnerData,
+        refetch: jest.fn().mockResolvedValue({ data: mockLearnerData }),
+        error: null,
+      });
+    });
+
+    it('renders default label', () => {
+      (useLearner as jest.Mock).mockReturnValue({
+        data: null,
+        refetch: jest.fn().mockResolvedValue({ data: mockLearnerData }),
+        error: null,
+      });
+      renderWithIntl(<SpecifyLearnerField onClickSelect={jest.fn()} />);
+      expect(screen.getByText(messages.specifyLearner.defaultMessage)).toBeInTheDocument();
+    });
+
+    it('renders input field and placeholder', () => {
+      renderWithIntl(<SpecifyLearnerField onClickSelect={jest.fn()} />);
+      expect(screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage)).toBeInTheDocument();
+    });
+
     it('input has correct name attribute', () => {
       renderWithIntl(<SpecifyLearnerField onClickSelect={jest.fn()} />);
       const input = screen.getByPlaceholderText(messages.specifyLearnerPlaceholder.defaultMessage);

src/components/SpecifyLearnerField.tsx

@@ -18,18 +18,25 @@ interface SpecifyLearnerFieldRef {
   reset: () => void,
 }
 
+const initialLearnerState = {
+  username: '',
+  fullName: '',
+  email: '',
+  isEnrolled: false,
+};
+
 const SpecifyLearnerField = forwardRef<SpecifyLearnerFieldRef, SpecifyLearnerFieldProps>(({ learner, onClickSelect }, ref) => {
   const intl = useIntl();
   const { courseId = '' } = useParams<{ courseId: string }>();
   const [identifier, setIdentifier] = useState('');
-  const [showLearner, enableShowLearner, disableShowLearner] = useToggle(false);
+  const [showLearner, enableShowLearner, disableShowLearner] = useToggle(!!learner);
   const { data: courseInfo } = useCourseInfo(courseId);
   const permissions = courseInfo?.permissions || { admin: false, dataResearcher: false };
   const { inputValue, handleChange, resetFilter } = useDebouncedFilter({
     filterValue: identifier,
     setFilter: setIdentifier,
   });
-  const { data = { email: '', fullName: '', username: '', isEnrolled: false }, refetch, error } = useLearner(courseId, inputValue);
+  const { data, refetch, error } = useLearner(courseId, inputValue);
 
   const resetState = () => {
     resetFilter();
@@ -41,7 +48,7 @@ const SpecifyLearnerField = forwardRef<SpecifyLearnerFieldRef, SpecifyLearnerFie
     reset: resetState,
   }));
 
-  const selectedLearner = learner || data;
+  const selectedLearner = learner || data || initialLearnerState;
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     handleChange(event.target.value);
@@ -65,7 +72,7 @@ const SpecifyLearnerField = forwardRef<SpecifyLearnerFieldRef, SpecifyLearnerFie
 
   return (
     <FormGroup className="mb-0" size="sm">
-      <FormLabel className="text-primary-500 d-flex">{intl.formatMessage(messages.specifyLearner)}</FormLabel>
+      <FormLabel className="text-primary-500 d-flex">{selectedLearner.username ? intl.formatMessage(messages.selectedLearner) : intl.formatMessage(messages.specifyLearner)}</FormLabel>
       <div className="d-flex align-items-center">
         <FormControl
           className={`mr-2 ${selectedLearner.username && showLearner ? 'd-none' : ''}`}

src/components/messages.ts

@@ -150,7 +150,12 @@ const messages = defineMessages({
     id: 'instruct.specifyLearner.learnerNotEnrolled',
     defaultMessage: '{identifier} is not enrolled in this course',
     description: 'Error message displayed when a learner is found based on the provided identifier (email or username) but is not enrolled in the course',
-  }
+  },
+  selectedLearner: {
+    id: 'instruct.specifyLearner.selectedLearner',
+    defaultMessage: 'Selected Learner:',
+    description: 'Label for specify learner field when a learner has been selected',
+  },
 });
 
 export default messages;

src/dateExtensions/components/AddExtensionModal.test.tsx

@@ -37,7 +37,7 @@ describe('AddExtensionModal', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     (useLearner as jest.Mock).mockReturnValue({
-      data: mockLearnerData,
+      data: null,
       refetch: jest.fn().mockResolvedValue({ data: mockLearnerData }),
       error: null,
     });
@@ -75,6 +75,13 @@ describe('AddExtensionModal', () => {
     const selectButton = screen.getByRole('button', { name: /select/i });
     await waitFor(() => expect(selectButton).not.toBeDisabled());
     await user.click(selectButton);
+
+    (useLearner as jest.Mock).mockReturnValue({
+      data: mockLearnerData,
+      refetch: jest.fn().mockResolvedValue({ data: mockLearnerData }),
+      error: null,
+    });
+
     await user.selectOptions(blockInput, 'sub1');
     await user.type(dueDateInput, '2024-12-31');
     await user.type(dueTimeInput, '23:59');

src/specialExams/SpecialExamsPage.tsx

@@ -5,20 +5,33 @@ import messages from './messages';
 import Allowances from './components/Allowances';
 import AttemptsList from './components/AttemptsList';
 
+const SPECIAL_EXAMS_TAB = {
+  ATTEMPTS: 'attempts',
+  ALLOWANCES: 'allowances',
+};
+
 const SpecialExamsPage = () => {
   const intl = useIntl();
-  const [selectedTab, setSelectedTab] = useState<'attempts' | 'allowances'>('attempts');
+  const [selectedTab, setSelectedTab] = useState<(typeof SPECIAL_EXAMS_TAB)[keyof typeof SPECIAL_EXAMS_TAB]>(SPECIAL_EXAMS_TAB.ATTEMPTS);
 
   return (
     <>
       <h3 className="text-primary-700">{intl.formatMessage(messages.specialExamsTitle)}</h3>
       <Card className="bg-light-200 mt-4.5">
         <ButtonGroup className="d-block mx-4 mt-4">
-          <Button variant={selectedTab === 'attempts' ? 'primary' : 'outline-primary'} onClick={() => setSelectedTab('attempts')}>{intl.formatMessage(messages.examAttempts)}</Button>
-          <Button variant={selectedTab === 'allowances' ? 'primary' : 'outline-primary'} onClick={() => setSelectedTab('allowances')}>{intl.formatMessage(messages.allowances)}</Button>
+          <Button
+            variant={selectedTab === SPECIAL_EXAMS_TAB.ATTEMPTS ? 'primary' : 'outline-primary'}
+            onClick={() => setSelectedTab(SPECIAL_EXAMS_TAB.ATTEMPTS)}
+          >{intl.formatMessage(messages.examAttempts)}
+          </Button>
+          <Button
+            variant={selectedTab === SPECIAL_EXAMS_TAB.ALLOWANCES ? 'primary' : 'outline-primary'}
+            onClick={() => setSelectedTab(SPECIAL_EXAMS_TAB.ALLOWANCES)}
+          >{intl.formatMessage(messages.allowances)}
+          </Button>
         </ButtonGroup>
         {
-          selectedTab === 'attempts' ? <AttemptsList /> : <Allowances />
+          selectedTab === SPECIAL_EXAMS_TAB.ATTEMPTS ? <AttemptsList /> : <Allowances />
         }
       </Card>
     </>