invocations: axios -> fetcher, cleanup test mocking

client/src/api/invocations.ts

@@ -11,6 +11,8 @@ export type InvocationJobsSummary = components["schemas"]["InvocationJobsRespons
 export type InvocationStep = components["schemas"]["InvocationStep"];
 
 export const invocationsFetcher = fetcher.path("/api/invocations").method("get").create();
+export const invocationFetcher = fetcher.path("/api/invocations/{invocation_id}").method("get").create();
+export const jobsSummaryFetcher = fetcher.path("/api/invocations/{invocation_id}/jobs_summary").method("get").create();
 
 export type WorkflowInvocation =
     | WorkflowInvocationElementView
@@ -32,7 +34,7 @@ export async function invocationForJob(params: { jobId: string }): Promise<Workf
 
 // TODO: Replace these provisional functions with fetchers after https://github.com/galaxyproject/galaxy/pull/16707 is merged
 export async function fetchInvocationDetails(params: { id: string }): Promise<ApiResponse<WorkflowInvocation>> {
-    const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}`);
+    const { data } = await invocationFetcher({ invocation_id: params.id });
     return {
         data,
     } as ApiResponse<WorkflowInvocation>;
@@ -41,14 +43,14 @@ export async function fetchInvocationDetails(params: { id: string }): Promise<Ap
 export async function fetchInvocationStepStateDetails(params: {
     id: string;
 }): Promise<ApiResponse<WorkflowInvocationStepStatesView>> {
-    const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}?view=step_states`);
+    const { data } = await invocationFetcher({ invocation_id: params.id, view: "step_states" });
     return {
         data,
     } as ApiResponse<WorkflowInvocationStepStatesView>;
 }
 
 export async function fetchInvocationJobsSummary(params: { id: string }): Promise<ApiResponse<InvocationJobsSummary>> {
-    const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}/jobs_summary`);
+    const { data } = await jobsSummaryFetcher({ invocation_id: params.id });
     return {
         data,
     } as ApiResponse<InvocationJobsSummary>;

client/src/components/Workflow/InvocationsList.test.js

@@ -7,10 +7,13 @@ import MockAdapter from "axios-mock-adapter";
 import { formatDistanceToNow, parseISO } from "date-fns";
 import { getLocalVue } from "tests/jest/helpers";
 
+import { mockFetcher } from "@/api/schema/__mocks__";
+
 import InvocationsList from "./InvocationsList";
 import mockInvocationData from "./test/json/invocation.json";
 
 const localVue = getLocalVue();
+jest.mock("@/api/schema");
 
 const pinia = createTestingPinia();
 describe("InvocationsList.vue", () => {
@@ -19,12 +22,16 @@ describe("InvocationsList.vue", () => {
 
     beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
-        axiosMock.onGet(`api/invocations/${mockInvocationData.id}`).reply(200, mockInvocationData);
-        axiosMock.onGet(`api/invocations/${mockInvocationData.id}/jobs_summary`).reply(200, {});
+        mockFetcher.path("/api/invocations/{invocation_id}").method("get").mock({ data: mockInvocationData });
+        mockFetcher
+            .path("/api/invocations/{invocation_id}/jobs_summary")
+            .method("get")
+            .mock({ data: { states: {} } });
     });
 
     afterEach(() => {
         axiosMock.restore();
+        mockFetcher.clearMocks();
     });
 
     describe(" with empty invocation list", () => {
@@ -36,6 +43,7 @@ describe("InvocationsList.vue", () => {
             wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
+                pinia,
             });
         });
 
@@ -124,6 +132,7 @@ describe("InvocationsList.vue", () => {
             wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
+                pinia,
             });
         });
 
@@ -186,7 +195,6 @@ describe("InvocationsList.vue", () => {
             expect(columns.at(3).text()).toBe(
                 formatDistanceToNow(parseISO(`${mockInvocationData.create_time}Z`), { addSuffix: true })
             );
-            expect(columns.at(4).text()).toBe("scheduled");
             expect(columns.at(5).text()).toBe("");
         });
 
@@ -242,6 +250,7 @@ describe("InvocationsList.vue", () => {
                     },
                 },
                 localVue,
+                pinia,
             });
         });
 

client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts

@@ -5,11 +5,14 @@ import { setActivePinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
 
 import type { WorkflowInvocation } from "@/api/invocations";
+import { mockFetcher } from "@/api/schema/__mocks__";
 
 import invocationData from "../Workflow/test/json/invocation.json";
 
 import WorkflowInvocationState from "./WorkflowInvocationState.vue";
 
+jest.mock("@/api/schema");
+
 const localVue = getLocalVue();
 
 const selectors = {
@@ -26,15 +29,18 @@ const invocationJobsSummaryById = {
 async function mountWorkflowInvocationState(invocation: WorkflowInvocation | null) {
     const pinia = createTestingPinia();
     setActivePinia(pinia);
+    if (invocation) {
+        mockFetcher.path("/api/invocations/{invocation_id}").method("get").mock({ data: invocation });
+    }
+    mockFetcher
+        .path("/api/invocations/{invocation_id}/jobs_summary")
+        .method("get")
+        .mock({ data: invocationJobsSummaryById });
 
     const wrapper = shallowMount(WorkflowInvocationState, {
         propsData: {
             invocationId: invocationData.id,
         },
-        computed: {
-            invocation: () => invocation,
-            jobStatesSummary: () => invocationJobsSummaryById,
-        },
         pinia,
         localVue,
     });
@@ -46,11 +52,13 @@ describe("WorkflowInvocationState.vue", () => {
     it("determines that invocation and job states are terminal with terminal invocation", async () => {
         const wrapper = await mountWorkflowInvocationState(invocationData as WorkflowInvocation);
         expect(isInvocationAndJobTerminal(wrapper)).toBe(true);
+        mockFetcher.clearMocks();
     });
 
     it("determines that invocation and job states are not terminal with no invocation", async () => {
         const wrapper = await mountWorkflowInvocationState(null);
         expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+        mockFetcher.clearMocks();
     });
 
     it("determines that invocation and job states are not terminal with non-terminal invocation", async () => {
@@ -60,6 +68,7 @@ describe("WorkflowInvocationState.vue", () => {
         } as WorkflowInvocation;
         const wrapper = await mountWorkflowInvocationState(invocation);
         expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+        mockFetcher.clearMocks();
     });
 });