diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 26471ffe390a4..f390012568875 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/packages/editor-ui/src/components/RunData.vue @@ -250,7 +250,7 @@ /> { - it('renders json schema properly', () => { - const { container } = render(RunDataJsonSchema, { - pinia: createTestingPinia({ - initialState: { - [STORES.SETTINGS]: { - settings: { - templates: { - enabled: true, - host: 'https://api.n8n.io/api/', - }, - }, + const renderOptions = { + pinia: createTestingPinia({ + initialState: { + [STORES.SETTINGS]: { + settings: { + templates: { + enabled: true, + host: 'https://api.n8n.io/api/', }, }, - }), - stubs: ['font-awesome-icon'], - props: { - mappingEnabled: true, - distanceFromActive: 1, - runIndex: 1, - totalRuns: 2, - node: { - parameters: { - keepOnlySet: false, - values: {}, - options: {}, - }, - id: '820ea733-d8a6-4379-8e73-88a2347ea003', - name: 'Set', - type: 'n8n-nodes-base.set', - typeVersion: 1, - position: [ - 380, - 1060, - ], - disabled: false, - }, - data: [{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }], }, - mocks: { - $locale: { - baseText() { - return ''; - }, - }, - $store: { - getters: {}, - }, + }, + }), + stubs: ['font-awesome-icon'], + props: { + mappingEnabled: true, + distanceFromActive: 1, + runIndex: 1, + totalRuns: 2, + node: { + parameters: { + keepOnlySet: false, + values: {}, + options: {}, + }, + id: '820ea733-d8a6-4379-8e73-88a2347ea003', + name: 'Set', + type: 'n8n-nodes-base.set', + typeVersion: 1, + position: [ + 380, + 1060, + ], + disabled: false, + }, + data: [{}], + }, + mocks: { + $locale: { + baseText() { + return ''; }, }, + }, + }; + + beforeEach(cleanup); + + it('renders schema for empty data', () => { + const { container } = render(RunDataJsonSchema, renderOptions, + vue => { + vue.use(PiniaVuePlugin); + }); + expect(container).toMatchSnapshot(); + }); + + it('renders schema for data', () => { + renderOptions.props.data = [{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] }, { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] }]; + const { container } = render(RunDataJsonSchema, renderOptions, vue => { vue.use(PiniaVuePlugin); }); diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue index 3321669c9fac6..8010a748424c7 100644 --- a/packages/editor-ui/src/components/RunDataSchema.vue +++ b/packages/editor-ui/src/components/RunDataSchema.vue @@ -8,7 +8,7 @@ import { useWebhooksStore } from "@/stores/webhooks"; import { runExternalHook } from "@/mixins/externalHooks"; import { telemetry } from "@/plugins/telemetry"; import { IDataObject } from "n8n-workflow"; -import { getSchema, mergeDeep } from "@/utils"; +import { getSchema, isEmpty, mergeDeep } from "@/utils"; type Props = { data: IDataObject[] @@ -32,6 +32,10 @@ const schema = computed(() => { return getSchema(mergeDeep([head, ...tail, head])); }); +const isDataEmpty = computed(() => { + return isEmpty(props.data); +}); + const onDragStart = (el: HTMLElement) => { if (el && el.dataset?.path) { draggingPath.value = el.dataset.path; @@ -67,7 +71,9 @@ const onDragEnd = (el: HTMLElement) => {