Add basic column sort event handling tests to grid component

galaxyproject · Nov 14, 2023 · 322b101 · 322b101
1 parent 3173f84
commit 322b101
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/client/src/components/Grid/GridList.test.js b/client/src/components/Grid/GridList.test.js
@@ -11,8 +11,8 @@ const testGrid = {
     actions: [
         {
             title: "test",
-            icon: "plus",
-            handler: () => {},
+            icon: "test-icon",
+            handler: jest.fn(),
         },
     ],
     fields: [
@@ -28,7 +28,7 @@ const testGrid = {
         },
     ],
     filtering: new Filtering({}, undefined, false, false),
-    getData: () => {
+    getData: jest.fn(() => {
         const data = [
             {
                 id: "id-1",
@@ -40,11 +40,11 @@ const testGrid = {
             },
         ];
         return [data, data.length];
-    },
+    }),
     plural: "Tests",
-    sortBy: "update_time",
+    sortBy: "id",
     sortDesc: true,
-    sortKeys: ["create_time", "title", "update_time"],
+    sortKeys: ["id"],
     title: "Test",
 };
 
@@ -68,10 +68,26 @@ describe("GridList", () => {
         expect(wrapper.find(".loading-message").text()).toBe("Loading...");
         const findAction = wrapper.find("[data-description='grid action test']");
         expect(findAction.text()).toBe("test");
+        await findAction.trigger("click");
+        expect(testGrid.actions[0].handler).toHaveBeenCalledTimes(1);
+        expect(testGrid.getData).toHaveBeenCalledTimes(1);
+        expect(testGrid.getData.mock.calls[0]).toEqual([0, 25, "", "id", true]);
+        expect(findAction.find("[icon='test-icon']").exists()).toBeTruthy();
         await wrapper.vm.$nextTick();
+        expect(wrapper.find("[data-description='grid title']").text()).toBe("Test");
         expect(wrapper.find("[data-description='grid cell 0-0']").text()).toBe("id-1");
         expect(wrapper.find("[data-description='grid cell 1-0']").text()).toBe("id-2");
         expect(wrapper.find("[data-description='grid cell 0-1'] > a").text()).toBe("link-1");
         expect(wrapper.find("[data-description='grid cell 1-1'] > a").text()).toBe("link-2");
+        const firstHeader = wrapper.find("[data-description='grid header 0']");
+        expect(firstHeader.find("a").text()).toBe("id");
+        await firstHeader.find("[data-description='grid sort asc']").trigger("click");
+        expect(testGrid.getData).toHaveBeenCalledTimes(2);
+        expect(testGrid.getData.mock.calls[1]).toEqual([0, 25, "", "id", false]);
+        expect(firstHeader.find("[data-description='grid sort asc']").exists()).toBeFalsy();
+        expect(firstHeader.find("[data-description='grid sort desc']").exists()).toBeTruthy();
+        const secondHeader = wrapper.find("[data-description='grid header 1']");
+        expect(secondHeader.find("[data-description='grid sort asc']").exists()).toBeFalsy();
+        expect(secondHeader.find("[data-description='grid sort desc']").exists()).toBeFalsy();
     });
 });
diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue
@@ -159,7 +159,7 @@ watch(operationMessage, () => {
         <BAlert v-if="!!operationMessage" :variant="operationStatus" fade show>{{ operationMessage }}</BAlert>
         <div class="grid-header d-flex justify-content-between pb-2">
             <div>
-                <h1 class="m-0">
+                <h1 class="m-0" data-description="grid title">
                     {{ config.title }}
                 </h1>
                 <FilterMenu
@@ -197,13 +197,17 @@ watch(operationMessage, () => {
         </BAlert>
         <table v-else class="grid-table">
             <thead>
-                <th v-for="(fieldEntry, fieldIndex) in config.fields" :key="fieldIndex" class="text-nowrap px-2">
+                <th
+                    v-for="(fieldEntry, fieldIndex) in config.fields"
+                    :key="fieldIndex"
+                    class="text-nowrap px-2"
+                    :data-description="`grid header ${fieldIndex}`">
                     <span v-if="config.sortKeys.includes(fieldEntry.key)">
                         <BLink @click="onSort(fieldEntry.key)">
                             <span>{{ fieldEntry.title || fieldEntry.key }}</span>
                             <span v-if="sortBy === fieldEntry.key">
-                                <Icon v-if="sortDesc" icon="caret-up" />
-                                <Icon v-else icon="caret-down" />
+                                <Icon v-if="sortDesc" icon="caret-up" data-description="grid sort asc" />
+                                <Icon v-else icon="caret-down" data-description="grid sort desc" />
                             </span>
                         </BLink>
                     </span>