mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 04:04:06 -08:00
test(editor): Add unit test for inputpanel component (#11644)
Co-authored-by: Shireen Missi <94372015+ShireenMissi@users.noreply.github.com>
This commit is contained in:
Elias Meire
GitHub
parent
600479bf36
commit
d9d01c42db
86
packages/editor-ui/src/components/InputPanel.test.ts
Normal file
86
packages/editor-ui/src/components/InputPanel.test.ts
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
import { createTestNode, createTestWorkflow, createTestWorkflowObject } from '@/__tests__/mocks';
|
||||
import { createComponentRenderer } from '@/__tests__/render';
|
||||
import InputPanel, { type Props } from '@/components/InputPanel.vue';
|
||||
import { STORES } from '@/constants';
|
||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import { NodeConnectionType, type IConnections, type INodeExecutionData } from 'n8n-workflow';
|
||||
import { setActivePinia } from 'pinia';
|
||||
import { mockedStore } from '../__tests__/utils';
|
||||
import { waitFor } from '@testing-library/vue';
|
||||
|
||||
vi.mock('vue-router', () => {
|
||||
return {
|
||||
useRouter: () => ({}),
|
||||
useRoute: () => ({ meta: {} }),
|
||||
RouterLink: vi.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const nodes = [
|
||||
createTestNode({ id: 'node1', name: 'Node 1' }),
|
||||
createTestNode({ id: 'node2', name: 'Node 2' }),
|
||||
createTestNode({ name: 'Agent' }),
|
||||
createTestNode({ name: 'Tool' }),
|
||||
];
|
||||
|
||||
const render = (props: Partial<Props> = {}, pinData?: INodeExecutionData[]) => {
|
||||
const connections: IConnections = {
|
||||
[nodes[0].name]: {
|
||||
[NodeConnectionType.Main]: [
|
||||
[{ node: nodes[1].name, type: NodeConnectionType.Main, index: 0 }],
|
||||
],
|
||||
},
|
||||
[nodes[1].name]: {
|
||||
[NodeConnectionType.Main]: [
|
||||
[{ node: nodes[2].name, type: NodeConnectionType.Main, index: 0 }],
|
||||
],
|
||||
},
|
||||
[nodes[3].name]: {
|
||||
[NodeConnectionType.AiMemory]: [
|
||||
[{ node: nodes[2].name, type: NodeConnectionType.AiMemory, index: 0 }],
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
const pinia = createTestingPinia({
|
||||
stubActions: false,
|
||||
initialState: { [STORES.NDV]: { activeNodeName: props.currentNodeName ?? nodes[1].name } },
|
||||
});
|
||||
setActivePinia(pinia);
|
||||
|
||||
const workflow = createTestWorkflow({ nodes, connections });
|
||||
useWorkflowsStore().setWorkflow(workflow);
|
||||
|
||||
if (pinData) {
|
||||
mockedStore(useWorkflowsStore).pinDataByNodeName.mockReturnValue(pinData);
|
||||
}
|
||||
|
||||
const workflowObject = createTestWorkflowObject({
|
||||
nodes,
|
||||
connections,
|
||||
});
|
||||
|
||||
return createComponentRenderer(InputPanel, {
|
||||
props: {
|
||||
pushRef: 'pushRef',
|
||||
runIndex: 0,
|
||||
currentNodeName: nodes[1].name,
|
||||
workflow: workflowObject,
|
||||
},
|
||||
global: {
|
||||
stubs: {
|
||||
InputPanelPinButton: { template: '<button data-test-id="ndv-pin-data"></button>' },
|
||||
},
|
||||
},
|
||||
})({ props });
|
||||
};
|
||||
|
||||
describe('InputPanel', () => {
|
||||
it('should render', async () => {
|
||||
const { container, queryByTestId } = render({}, [{ json: { name: 'Test' } }]);
|
||||
|
||||
await waitFor(() => expect(queryByTestId('ndv-data-size-warning')).not.toBeInTheDocument());
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -25,7 +25,7 @@ import { storeToRefs } from 'pinia';
|
|||
|
||||
type MappingMode = 'debugging' | 'mapping';
|
||||
|
||||
type Props = {
|
||||
export type Props = {
|
||||
runIndex: number;
|
||||
workflow: Workflow;
|
||||
pushRef: string;
|
||||
|
|
|
|||
|
|
@ -1522,7 +1522,11 @@ defineExpose({ enterEditMode });
|
|||
<slot name="no-output-data">xxx</slot>
|
||||
</div>
|
||||
|
||||
<div v-else-if="hasNodeRun && !showData" :class="$style.center">
|
||||
<div
|
||||
v-else-if="hasNodeRun && !showData"
|
||||
data-test-id="ndv-data-size-warning"
|
||||
:class="$style.center"
|
||||
>
|
||||
<N8nText :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</N8nText>
|
||||
<N8nText align="center" tag="div"
|
||||
><span
|
||||
|
|
|
|||
|
|
@ -0,0 +1,281 @@
|
|||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`InputPanel > should render 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="run-data container"
|
||||
data-test-id="ndv-input-panel"
|
||||
data-v-2e5cd75c=""
|
||||
>
|
||||
<div
|
||||
class="n8n-callout callout secondary round pinnedDataCallout"
|
||||
data-v-2e5cd75c=""
|
||||
role="alert"
|
||||
>
|
||||
<div
|
||||
class="messageSection"
|
||||
>
|
||||
<div
|
||||
class="icon"
|
||||
>
|
||||
<span
|
||||
class="n8n-text compact size-medium regular n8n-icon n8n-icon"
|
||||
>
|
||||
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-thumbtack fa-w-12 medium"
|
||||
data-icon="thumbtack"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
class=""
|
||||
d="M298.028 214.267L285.793 96H328c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v48c0 13.255 10.745 24 24 24h42.207L85.972 214.267C37.465 236.82 0 277.261 0 328c0 13.255 10.745 24 24 24h136v104.007c0 1.242.289 2.467.845 3.578l24 48c2.941 5.882 11.364 5.893 14.311 0l24-48a8.008 8.008 0 0 0 .845-3.578V352h136c13.255 0 24-10.745 24-24-.001-51.183-37.983-91.42-85.973-113.733z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
class="n8n-text size-small regular"
|
||||
>
|
||||
|
||||
|
||||
This data is pinned.
|
||||
<span
|
||||
class="ml-4xs"
|
||||
data-v-2e5cd75c=""
|
||||
>
|
||||
<a
|
||||
class="n8n-link"
|
||||
data-test-id="ndv-unpin-data"
|
||||
data-v-2e5cd75c=""
|
||||
target="_blank"
|
||||
>
|
||||
|
||||
<span
|
||||
class="secondary-underline"
|
||||
>
|
||||
<span
|
||||
class="n8n-text size-small bold"
|
||||
>
|
||||
|
||||
|
||||
Unpin
|
||||
|
||||
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</a>
|
||||
</span>
|
||||
|
||||
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="n8n-link"
|
||||
data-v-2e5cd75c=""
|
||||
href="https://docs.n8n.io/data/data-pinning/"
|
||||
target="_blank"
|
||||
>
|
||||
|
||||
<span
|
||||
class="secondary-underline"
|
||||
>
|
||||
<span
|
||||
class="n8n-text size-small bold"
|
||||
>
|
||||
|
||||
|
||||
Learn more
|
||||
|
||||
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<div
|
||||
class="header"
|
||||
data-v-2e5cd75c=""
|
||||
>
|
||||
|
||||
<div
|
||||
class="titleSection"
|
||||
>
|
||||
<span
|
||||
class="title"
|
||||
>
|
||||
Input
|
||||
</span>
|
||||
<div
|
||||
class="n8n-radio-buttons radioGroup"
|
||||
data-test-id="input-panel-mode"
|
||||
role="radiogroup"
|
||||
>
|
||||
|
||||
<label
|
||||
aria-checked="false"
|
||||
class="n8n-radio-button container hoverable"
|
||||
role="radio"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="button medium"
|
||||
data-test-id="radio-button-mapping"
|
||||
>
|
||||
Mapping
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
aria-checked="true"
|
||||
class="n8n-radio-button container hoverable"
|
||||
role="radio"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="button active medium"
|
||||
data-test-id="radio-button-debugging"
|
||||
>
|
||||
Debugging
|
||||
</div>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="displayModes"
|
||||
data-test-id="run-data-pane-header"
|
||||
data-v-2e5cd75c=""
|
||||
>
|
||||
<!---->
|
||||
<div
|
||||
class="n8n-radio-buttons radioGroup"
|
||||
data-test-id="ndv-run-data-display-mode"
|
||||
data-v-2e5cd75c=""
|
||||
role="radiogroup"
|
||||
>
|
||||
|
||||
<label
|
||||
aria-checked="true"
|
||||
class="n8n-radio-button container hoverable"
|
||||
role="radio"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="button active medium"
|
||||
data-test-id="radio-button-schema"
|
||||
>
|
||||
Schema
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
aria-checked="false"
|
||||
class="n8n-radio-button container hoverable"
|
||||
role="radio"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="button medium"
|
||||
data-test-id="radio-button-table"
|
||||
>
|
||||
Table
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
aria-checked="false"
|
||||
class="n8n-radio-button container hoverable"
|
||||
role="radio"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="button medium"
|
||||
data-test-id="radio-button-json"
|
||||
>
|
||||
JSON
|
||||
</div>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div
|
||||
class="editModeActions"
|
||||
data-v-2e5cd75c=""
|
||||
style="display: none;"
|
||||
>
|
||||
<button
|
||||
aria-live="polite"
|
||||
class="button button tertiary medium"
|
||||
data-v-2e5cd75c=""
|
||||
>
|
||||
<!--v-if-->
|
||||
<span>
|
||||
|
||||
Cancel
|
||||
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
aria-live="polite"
|
||||
class="button button primary medium ml-2xs ml-2xs"
|
||||
data-v-2e5cd75c=""
|
||||
>
|
||||
<!--v-if-->
|
||||
<span>
|
||||
|
||||
Save
|
||||
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
|
||||
|
||||
<!--v-if-->
|
||||
<div
|
||||
class="dataContainer"
|
||||
data-test-id="ndv-data-container"
|
||||
data-v-2e5cd75c=""
|
||||
>
|
||||
<!---->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<transition-stub
|
||||
appear="false"
|
||||
class="uiBlocker"
|
||||
css="true"
|
||||
data-v-249d9307=""
|
||||
data-v-2e5cd75c=""
|
||||
mode="out-in"
|
||||
name="fade"
|
||||
persisted="true"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="n8n-block-ui uiBlocker"
|
||||
data-v-249d9307=""
|
||||
role="dialog"
|
||||
style="display: none;"
|
||||
/>
|
||||
</transition-stub>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Reference in a new issue