diff --git a/client/src/api/invocations.ts b/client/src/api/invocations.ts index bd2e1ec0fe1b..fe5f98d51772 100644 --- a/client/src/api/invocations.ts +++ b/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> { - const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}`); + const { data } = await invocationFetcher({ invocation_id: params.id }); return { data, } as ApiResponse; @@ -41,14 +43,14 @@ export async function fetchInvocationDetails(params: { id: string }): Promise> { - 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; } export async function fetchInvocationJobsSummary(params: { id: string }): Promise> { - const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}/jobs_summary`); + const { data } = await jobsSummaryFetcher({ invocation_id: params.id }); return { data, } as ApiResponse; diff --git a/client/src/components/Workflow/InvocationsList.test.js b/client/src/components/Workflow/InvocationsList.test.js index 6321039a1c55..cce9721b3eda 100644 --- a/client/src/components/Workflow/InvocationsList.test.js +++ b/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, }); }); diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts index 751bdc5dd32a..6c2107eb03f2 100644 --- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts +++ b/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(); }); });