|
| 1 | +import { createTestingPinia } from "@pinia/testing"; |
| 2 | +import { mount, type Wrapper } from "@vue/test-utils"; |
| 3 | +import flushPromises from "flush-promises"; |
| 4 | + |
| 5 | +import { HttpResponse, useServerMock } from "@/api/client/__mocks__"; |
| 6 | +import type { WorkflowInvocationElementView } from "@/api/invocations"; |
| 7 | + |
| 8 | +import invocationData from "../Workflow/test/json/invocation.json"; |
| 9 | + |
| 10 | +import WorkflowInvocationInputOutputTabs from "./WorkflowInvocationInputOutputTabs.vue"; |
| 11 | + |
| 12 | +const { server, http } = useServerMock(); |
| 13 | + |
| 14 | +const selectors = { |
| 15 | + parametersTable: "[data-description='input parameters table']", |
| 16 | + terminalInvocationOutput: "[data-description='terminal invocation output']", |
| 17 | + terminalInvocationOutputItem: "[data-description='terminal invocation output item']", |
| 18 | + nonTerminalInvocationOutput: "[data-description='non-terminal invocation output']", |
| 19 | + nonTerminalInvocationOutputLoading: "[data-description='non-terminal invocation output loading']", |
| 20 | +}; |
| 21 | + |
| 22 | +// Mock the workflow store to return a workflow for `getStoredWorkflowByInstanceId` |
| 23 | +jest.mock("@/stores/workflowStore", () => { |
| 24 | + const originalModule = jest.requireActual("@/stores/workflowStore"); |
| 25 | + return { |
| 26 | + ...originalModule, |
| 27 | + useWorkflowStore: () => ({ |
| 28 | + ...originalModule.useWorkflowStore(), |
| 29 | + getStoredWorkflowByInstanceId: jest.fn().mockImplementation(() => { |
| 30 | + return { |
| 31 | + id: "workflow-id", |
| 32 | + name: "Test Workflow", |
| 33 | + version: 0, |
| 34 | + }; |
| 35 | + }), |
| 36 | + getFullWorkflowCached: jest.fn().mockImplementation(() => { |
| 37 | + /** The actual outputs of the workflow invocation */ |
| 38 | + const testDatasetOutputLabels = Object.keys(invocationData.outputs); |
| 39 | + const testCollectionOutputsLabels = Object.keys(invocationData.output_collections); |
| 40 | + |
| 41 | + return { |
| 42 | + id: "workflow-id", |
| 43 | + name: "Test Workflow", |
| 44 | + version: 0, |
| 45 | + steps: { |
| 46 | + "0": { |
| 47 | + workflow_outputs: testDatasetOutputLabels.map((label) => ({ |
| 48 | + output_name: `output`, |
| 49 | + label, |
| 50 | + uuid: `uuid`, |
| 51 | + })), |
| 52 | + }, |
| 53 | + "1": { |
| 54 | + workflow_outputs: testCollectionOutputsLabels.map((label) => ({ |
| 55 | + output_name: `output`, |
| 56 | + label, |
| 57 | + uuid: `uuid`, |
| 58 | + })), |
| 59 | + }, |
| 60 | + }, |
| 61 | + }; |
| 62 | + }), |
| 63 | + }), |
| 64 | + }; |
| 65 | +}); |
| 66 | + |
| 67 | +/** Mount the WorkflowInvocationInputOutputTabs component with the given invocation |
| 68 | + * @param invocation The invocation data to be used |
| 69 | + * @param terminal Whether the invocation is terminal |
| 70 | + * @returns The mounted wrapper |
| 71 | + */ |
| 72 | +async function mountWorkflowInvocationInputOutputTabs(invocation: WorkflowInvocationElementView, terminal = true) { |
| 73 | + server.use( |
| 74 | + http.get("/api/datasets/{dataset_id}", ({ response, params }) => { |
| 75 | + // We need to use untyped here because this endpoint is not |
| 76 | + // described in the OpenAPI spec due to its complexity for now. |
| 77 | + return response.untyped( |
| 78 | + HttpResponse.json({ |
| 79 | + id: params.dataset_id, |
| 80 | + }) |
| 81 | + ); |
| 82 | + }), |
| 83 | + http.get("/api/dataset_collections/{hdca_id}", ({ response, params }) => { |
| 84 | + // We need to use untyped here because this endpoint is not |
| 85 | + // described in the OpenAPI spec due to its complexity for now. |
| 86 | + return response.untyped( |
| 87 | + HttpResponse.json({ |
| 88 | + id: params.hdca_id, |
| 89 | + }) |
| 90 | + ); |
| 91 | + }) |
| 92 | + ); |
| 93 | + |
| 94 | + const wrapper = mount(WorkflowInvocationInputOutputTabs as object, { |
| 95 | + propsData: { |
| 96 | + invocation, |
| 97 | + terminal, |
| 98 | + }, |
| 99 | + stubs: { |
| 100 | + ContentItem: true, |
| 101 | + ParameterStep: true, |
| 102 | + }, |
| 103 | + pinia: createTestingPinia(), |
| 104 | + }); |
| 105 | + await flushPromises(); |
| 106 | + return wrapper; |
| 107 | +} |
| 108 | + |
| 109 | +describe("WorkflowInvocationInputOutputTabs", () => { |
| 110 | + it("shows invocation inputs", async () => { |
| 111 | + const wrapper = await mountWorkflowInvocationInputOutputTabs(invocationData as WorkflowInvocationElementView); |
| 112 | + |
| 113 | + /** The actual parameters are in the input_step_parameters field of the invocation data */ |
| 114 | + const testParameters = Object.values(invocationData.input_step_parameters); |
| 115 | + |
| 116 | + // Test that the parameters table is displayed |
| 117 | + const parametersTable = wrapper.find(selectors.parametersTable); |
| 118 | + expect(parametersTable.exists()).toBe(true); |
| 119 | + |
| 120 | + // Test that the parameters table has the correct number of rows |
| 121 | + const tableParamValues = parametersTable.findAll("tbody tr"); |
| 122 | + expect(tableParamValues.length).toEqual(testParameters.length); |
| 123 | + |
| 124 | + // Test that the parameters are displayed correctly |
| 125 | + for (let i = 0; i < testParameters.length; i++) { |
| 126 | + const testParameter = testParameters[i]; |
| 127 | + const tableRow = tableParamValues.at(i); |
| 128 | + expect(tableRow.find("td").text()).toEqual(testParameter?.label); |
| 129 | + expect(tableRow.findAll("td").at(1).text()).toEqual(testParameter?.parameter_value.toString()); |
| 130 | + } |
| 131 | + |
| 132 | + /** The actual inputs of the workflow invocation */ |
| 133 | + const testInputs = Object.values(invocationData.inputs); |
| 134 | + |
| 135 | + // Test that the inputs are displayed |
| 136 | + for (let i = 0; i < testInputs.length; i++) { |
| 137 | + const testInput = testInputs[i]; |
| 138 | + expect(wrapper.find(`[data-label='${testInput?.label}']`).exists()).toBe(true); |
| 139 | + } |
| 140 | + }); |
| 141 | + |
| 142 | + it("shows invocation outputs when invocation is terminal", async () => { |
| 143 | + const wrapper = await mountWorkflowInvocationInputOutputTabs(invocationData as WorkflowInvocationElementView); |
| 144 | + |
| 145 | + testOutputsDisplayed(wrapper); |
| 146 | + }); |
| 147 | + |
| 148 | + it("shows workflow output labels when invocation is not terminal", async () => { |
| 149 | + const nonTerminalInvocation = { |
| 150 | + ...invocationData, |
| 151 | + outputs: {}, |
| 152 | + output_collections: {}, |
| 153 | + } as WorkflowInvocationElementView; |
| 154 | + const wrapper = await mountWorkflowInvocationInputOutputTabs(nonTerminalInvocation, false); |
| 155 | + |
| 156 | + testOutputsDisplayed(wrapper, false); |
| 157 | + }); |
| 158 | + |
| 159 | + function testOutputsDisplayed(wrapper: Wrapper<Vue>, terminal = true) { |
| 160 | + /** The actual outputs of the workflow invocation */ |
| 161 | + const testDatasetOutputLabels = Object.keys(invocationData.outputs); |
| 162 | + const testCollectionOutputsLabels = Object.keys(invocationData.output_collections); |
| 163 | + const expectedLabels = [...testDatasetOutputLabels, ...testCollectionOutputsLabels]; |
| 164 | + |
| 165 | + // Test that the invocation outputs are displayed |
| 166 | + const invocationOutputs = wrapper.findAll( |
| 167 | + terminal ? selectors.terminalInvocationOutput : selectors.nonTerminalInvocationOutput |
| 168 | + ); |
| 169 | + expect(invocationOutputs.length).toEqual(expectedLabels.length); |
| 170 | + |
| 171 | + // Test that the output labels are shown |
| 172 | + for (let i = 0; i < invocationOutputs.length; i++) { |
| 173 | + const testOutput = invocationOutputs.at(i); |
| 174 | + const testLabel = expectedLabels[i]; |
| 175 | + expect(testOutput.text()).toContain(testLabel); |
| 176 | + expect(testOutput.find(selectors.terminalInvocationOutputItem).exists()).toBe(terminal); |
| 177 | + expect(testOutput.find(selectors.nonTerminalInvocationOutputLoading).exists()).toBe(!terminal); |
| 178 | + } |
| 179 | + } |
| 180 | +}); |
0 commit comments