test(editor): Add unit test for inputpanel component (#11644)

Co-authored-by: Shireen Missi <94372015+ShireenMissi@users.noreply.github.com>

packages/editor-ui/src/components/InputPanel.test.ts

@@ -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();
+	});
+});

packages/editor-ui/src/components/InputPanel.vue

@@ -25,7 +25,7 @@ import { storeToRefs } from 'pinia';
 
 type MappingMode = 'debugging' | 'mapping';
 
-type Props = {
+export type Props = {
 	runIndex: number;
 	workflow: Workflow;
 	pushRef: string;

packages/editor-ui/src/components/RunData.vue

@@ -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

packages/editor-ui/src/components/__snapshots__/InputPanel.test.ts.snap

@@ -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>
+`;