Increase test coverage for DiskUsageSummary

client/src/components/User/DiskUsage/DiskUsageSummary.test.ts

@@ -4,11 +4,15 @@ import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
 import { mockFetcher } from "@/schema/__mocks__";
+import { getCurrentUser } from "@/stores/users/queries";
 import { useUserStore } from "@/stores/userStore";
 
+import { UserQuotaUsageData } from "./Quota/model";
+
 import DiskUsageSummary from "./DiskUsageSummary.vue";
 
 jest.mock("@/schema");
+jest.mock("@/stores/users/queries");
 
 const localVue = getLocalVue();
 
@@ -20,17 +24,38 @@ const fakeUserWithQuota = {
     email: "fakeUserEmail",
     tags_used: [],
     isAnonymous: false,
-    total_disk_usage: 1054068,
-    quota_bytes: 1000000000,
-    quota_percent: 0.1,
+    total_disk_usage: 1048576,
+    quota_bytes: 104857600,
+    quota_percent: 1,
     quota_source_label: "Default",
 };
 
+// TODO: Replace this with a mockFetcher when #16608 is merged
+const mockGetCurrentUser = getCurrentUser as jest.Mock;
+mockGetCurrentUser.mockImplementation(() => Promise.resolve(fakeUserWithQuota));
+
+const fakeQuotaUsages: UserQuotaUsageData[] = [
+    {
+        quota_source_label: "Default",
+        quota_bytes: 104857600,
+        total_disk_usage: 1048576,
+    },
+];
+
+const fakeTaskId = "fakeTaskId";
+
 async function mountDiskUsageSummaryWrapper(enableQuotas: boolean) {
     mockFetcher
         .path("/api/configuration")
         .method("get")
         .mock({ data: { enable_quotas: enableQuotas } });
+    mockFetcher.path("/api/users/{user_id}/usage").method("get").mock({ data: fakeQuotaUsages });
+    mockFetcher
+        .path("/api/users/current/recalculate_disk_usage")
+        .method("put")
+        .mock({ status: 200, data: { id: fakeTaskId } });
+    mockFetcher.path("/api/tasks/{task_id}/state").method("get").mock({ data: "SUCCESS" });
+
     const pinia = createPinia();
     const wrapper = mount(DiskUsageSummary, {
         localVue,
@@ -58,4 +83,36 @@ describe("DiskUsageSummary.vue", () => {
         const quotaUsages = wrapper.findAll(quotaUsageClassSelector);
         expect(quotaUsages.length).toBe(1);
     });
+
+    it("should display the correct quota usage", async () => {
+        const enableQuotasInConfig = true;
+        const wrapper = await mountDiskUsageSummaryWrapper(enableQuotasInConfig);
+        const quotaUsage = wrapper.find(quotaUsageClassSelector);
+        expect(quotaUsage.text()).toContain("1 MB");
+    });
+
+    it("should refresh the quota usage when the user clicks the refresh button", async () => {
+        const enableQuotasInConfig = true;
+        const wrapper = await mountDiskUsageSummaryWrapper(enableQuotasInConfig);
+        const quotaUsage = wrapper.find(quotaUsageClassSelector);
+        expect(quotaUsage.text()).toContain("1 MB");
+        const updatedFakeQuotaUsages: UserQuotaUsageData[] = [
+            {
+                quota_source_label: "Default",
+                quota_bytes: 104857600,
+                total_disk_usage: 2097152,
+            },
+        ];
+        mockFetcher.path("/api/users/{user_id}/usage").method("get").mock({ data: updatedFakeQuotaUsages });
+        await wrapper.find("#refresh-disk-usage").trigger("click");
+        await flushPromises();
+        const refreshingAlert = wrapper.find(".refreshing-alert");
+        expect(refreshingAlert.exists()).toBe(true);
+        // Make sure the refresh has finished before checking the quota usage
+        await flushPromises();
+        await flushPromises();
+        // The refreshing alert should disappear and the quota usage should be updated
+        expect(refreshingAlert.exists()).toBe(false);
+        expect(quotaUsage.text()).toContain("2 MB");
+    });
 });

client/src/components/User/DiskUsage/DiskUsageSummary.vue

@@ -105,6 +105,7 @@ onMounted(async () => {
         </b-container>
         <b-container class="text-center mb-5 w-75">
             <button
+                id="refresh-disk-usage"
                 title="Recalculate disk usage"
                 :disabled="isRefreshing"
                 variant="outline-secondary"
@@ -114,7 +115,7 @@ onMounted(async () => {
                 <b-spinner v-if="isRefreshing" small />
                 <span v-else>Refresh</span>
             </button>
-            <b-alert v-if="isRefreshing" class="mt-2" variant="info" show dismissible fade>
+            <b-alert v-if="isRefreshing" class="refreshing-alert mt-2" variant="info" show dismissible fade>
                 Recalculating disk usage... this may take some time, please check back later.
             </b-alert>
         </b-container>