test: fix failing test in courseOutline.test.jsx

open-craft · Dec 25, 2023 · 3f67649 · 3f67649
1 parent cc90031
commit 3f67649
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 33 deletions.
diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
@@ -556,12 +556,14 @@ describe('<CourseOutline />', () => {
     const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
     fireEvent.click(configureBtn);
 
-    const releaseDatePicker = await findByTestId('release-date-picker');
+    expect(await findByText(newGraderType)).toBeInTheDocument();
+    const releaseDateStack = await findByTestId('release-date-stack');
+    const releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
     expect(releaseDatePicker).toHaveValue('08/10/2025');
-    const dueDatePicker = await findByTestId('release-date-picker');
+    const dueDateStack = await findByTestId('due-date-stack');
+    const dueDatePicker = await within(dueDateStack).findByPlaceholderText('MM/DD/YYYY');
     expect(dueDatePicker).toHaveValue('09/10/2025');
 
-    expect(await findByText(newGraderType)).toBeInTheDocument();
     const advancedTab = await findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
     fireEvent.click(advancedTab);
     const radioButtons = await findAllByRole('radio');

diff --git a/src/course-outline/configure-modal/BasicTab.jsx b/src/course-outline/configure-modal/BasicTab.jsx
@@ -28,21 +28,22 @@ const BasicTab = ({
       <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.releaseDateAndTime} /></h5>
       <hr />
       <Stack className="mt-3" direction="horizontal" gap={5}>
-        <DatepickerControl
-          type={DATEPICKER_TYPES.date}
-          value={releaseDate}
-          label={intl.formatMessage(messages.releaseDate)}
-          controlName="state-date"
-          onChange={setReleaseDate}
-          data-testid="release-date-picker"
-        />
-        <DatepickerControl
-          type={DATEPICKER_TYPES.time}
-          value={releaseDate}
-          label={intl.formatMessage(messages.releaseTimeUTC)}
-          controlName="start-time"
-          onChange={setReleaseDate}
-        />
+        <div data-testid="release-date-stack">
+          <DatepickerControl
+            type={DATEPICKER_TYPES.date}
+            value={releaseDate}
+            label={intl.formatMessage(messages.releaseDate)}
+            controlName="state-date"
+            onChange={setReleaseDate}
+          />
+          <DatepickerControl
+            type={DATEPICKER_TYPES.time}
+            value={releaseDate}
+            label={intl.formatMessage(messages.releaseTimeUTC)}
+            controlName="start-time"
+            onChange={setReleaseDate}
+          />
+        </div>
       </Stack>
       {
         isSubsection && (
@@ -60,21 +61,23 @@ const BasicTab = ({
               {createOptions()}
             </Form.Control>
             <Stack className="mt-3" direction="horizontal" gap={5}>
-              <DatepickerControl
-                type={DATEPICKER_TYPES.date}
-                value={dueDate}
-                label={intl.formatMessage(messages.dueDate)}
-                controlName="state-date"
-                onChange={setDueDate}
-                data-testid="due-date-picker"
-              />
-              <DatepickerControl
-                type={DATEPICKER_TYPES.time}
-                value={dueDate}
-                label={intl.formatMessage(messages.dueTimeUTC)}
-                controlName="start-time"
-                onChange={setDueDate}
-              />
+              <div data-testid="due-date-stack">
+                <DatepickerControl
+                  type={DATEPICKER_TYPES.date}
+                  value={dueDate}
+                  label={intl.formatMessage(messages.dueDate)}
+                  controlName="state-date"
+                  onChange={setDueDate}
+                  data-testid="due-date-picker"
+                />
+                <DatepickerControl
+                  type={DATEPICKER_TYPES.time}
+                  value={dueDate}
+                  label={intl.formatMessage(messages.dueTimeUTC)}
+                  controlName="start-time"
+                  onChange={setDueDate}
+                />
+              </div>
             </Stack>
           </div>
         )