Ensure active assignments are rendered as selected ones (#6566)

hypothesis · Aug 14, 2024 · 51337fa · 51337fa
1 parent e019551
commit 51337fa
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 39 deletions.
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/DashboardActivityFilters.tsx b/lms/static/scripts/frontend_apps/components/dashboard/DashboardActivityFilters.tsx
@@ -68,6 +68,22 @@ function elementScrollIsAtBottom(element: HTMLElement, offset = 20): boolean {
 /** Get first item from an array, if any */
 const firstItem = <T,>(array: T[]) => array[0] as T | undefined;
 
+/**
+ * Represents a `Select.Option` for a specific assignment
+ */
+function AssignmentOption({ assignment }: { assignment: Assignment }) {
+  return (
+    <Select.Option value={`${assignment.id}`}>
+      <div className="flex flex-col gap-0.5">
+        {assignment.title}
+        <div className="text-grey-6 text-xs">
+          {formatDateTime(assignment.created)}
+        </div>
+      </div>
+    </Select.Option>
+  );
+}
+
 /**
  * Renders drop-downs to select courses, assignments and/or students, used to
  * filter dashboard activity metrics.
@@ -253,23 +269,11 @@ export default function DashboardActivityFilters({
       >
         <Select.Option value={undefined}>All assignments</Select.Option>
         {activeAssignment ? (
-          <Select.Option
-            key={activeAssignment.id}
-            value={`${activeAssignment.id}`}
-          >
-            {activeAssignment.title}
-          </Select.Option>
+          <AssignmentOption assignment={activeAssignment} />
         ) : (
           <>
             {assignmentsResults.data?.map(assignment => (
-              <Select.Option key={assignment.id} value={`${assignment.id}`}>
-                <div className="flex flex-col gap-0.5">
-                  {assignment.title}
-                  <div className="text-grey-6 text-xs">
-                    {formatDateTime(assignment.created)}
-                  </div>
-                </div>
-              </Select.Option>
+              <AssignmentOption key={assignment.id} assignment={assignment} />
             ))}
             {assignmentsResults.isLoading &&
               !assignmentsResults.isLoadingFirstPage && (

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/DashboardActivityFilters-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/DashboardActivityFilters-test.js
@@ -472,10 +472,12 @@ describe('DashboardActivityFilters', () => {
       selectedIds: [],
       onChange: sinon.stub(),
     };
+    const created = '2024-06-10T09:55:44.701550';
     const activeItem = {
       activeItem: {
         id: 123,
         title: 'The active title',
+        created,
       },
       onClear: sinon.stub(),
     };
@@ -490,6 +492,7 @@ describe('DashboardActivityFilters', () => {
         selectId: 'courses-select',
         allOption: 'All courses',
         skippedAPIFetchIndex: 0,
+        expectedOptionTitle: 'The active title',
       },
       {
         props: {
@@ -500,36 +503,45 @@ describe('DashboardActivityFilters', () => {
         selectId: 'assignments-select',
         allOption: 'All assignments',
         skippedAPIFetchIndex: 1,
+        expectedOptionTitle: `The active title${formatDateTime(created)}`,
       },
-    ].forEach(({ props, selectId, allOption, skippedAPIFetchIndex }) => {
-      it('displays active item', () => {
-        const wrapper = createComponentWithProps(props);
-        const select = getSelectContent(wrapper, selectId);
-
-        assert.equal(select, 'The active title');
-      });
+    ].forEach(
+      ({
+        props,
+        selectId,
+        allOption,
+        skippedAPIFetchIndex,
+        expectedOptionTitle,
+      }) => {
+        it('displays active item', () => {
+          const wrapper = createComponentWithProps(props);
+          const select = getSelectContent(wrapper, selectId);
+
+          assert.equal(select, 'The active title');
+        });
 
-      it('displays only two options in select', () => {
-        const wrapper = createComponentWithProps(props);
-        const select = getSelect(wrapper, selectId);
-        const options = select.find(Select.Option);
+        it('displays only two options in select', () => {
+          const wrapper = createComponentWithProps(props);
+          const select = getSelect(wrapper, selectId);
+          const options = select.find(Select.Option);
 
-        assert.equal(options.length, 2);
-        assert.equal(options.at(0).text(), allOption);
-        assert.equal(options.at(1).text(), 'The active title');
-      });
+          assert.equal(options.length, 2);
+          assert.equal(options.at(0).text(), allOption);
+          assert.equal(options.at(1).text(), expectedOptionTitle);
+        });
 
-      it('does not load list of items', () => {
-        createComponentWithProps(props);
+        it('does not load list of items', () => {
+          createComponentWithProps(props);
 
-        assert.calledWith(
-          fakeUsePaginatedAPIFetch.getCall(skippedAPIFetchIndex),
-          sinon.match.string,
-          null, // The path should be null
-          sinon.match.any,
-        );
-      });
-    });
+          assert.calledWith(
+            fakeUsePaginatedAPIFetch.getCall(skippedAPIFetchIndex),
+            sinon.match.string,
+            null, // The path should be null
+            sinon.match.any,
+          );
+        });
+      },
+    );
   });
 
   it(