mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix JsonEditor with expressions (#12739)

Browse source
This commit is contained in:
Elias Meire 2025-01-21 13:32:48 +01:00 committed by GitHub
parent 9e2a01aeaf
commit 56c93caae0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/editor-ui/src/components/JsonEditor.test.ts
View file

@ -1,6 +1,8 @@
import { createTestingPinia } from '@pinia/testing'; import { createTestingPinia } from '@pinia/testing';
import JsonEditor from '@/components/JsonEditor/JsonEditor.vue'; import JsonEditor from '@/components/JsonEditor/JsonEditor.vue';
import { renderComponent } from '@/__tests__/render'; import { renderComponent } from '@/__tests__/render';
import { waitFor } from '@testing-library/vue';
import { userEvent } from '@testing-library/user-event';
describe('JsonEditor', () => { describe('JsonEditor', () => {
const renderEditor = (jsonString: string) => const renderEditor = (jsonString: string) =>
@ -13,18 +15,29 @@ describe('JsonEditor', () => {
it('renders simple json', async () => { it('renders simple json', async () => {
const modelValue = '{ "testing": [true, 5] }'; const modelValue = '{ "testing": [true, 5] }';
const result = renderEditor(modelValue); const { getByRole } = renderEditor(modelValue);
expect(result.container.querySelector('.cm-content')?.textContent).toEqual(modelValue); expect(getByRole('textbox').textContent).toEqual(modelValue);
}); });
it('renders multiline json', async () => { it('renders multiline json', async () => {
const modelValue = '{\n\t"testing": [true, 5]\n}'; const modelValue = '{\n\t"testing": [true, 5]\n}';
const result = renderEditor(modelValue); const { getByRole, container } = renderEditor(modelValue);
const gutter = result.container.querySelector('.cm-gutters'); const gutter = container.querySelector('.cm-gutters');
expect(gutter?.querySelectorAll('.cm-lineNumbers .cm-gutterElement').length).toEqual(4); expect(gutter?.querySelectorAll('.cm-lineNumbers .cm-gutterElement').length).toEqual(4);
const content = result.container.querySelector('.cm-content'); const content = getByRole('textbox');
const lines = [...content!.querySelectorAll('.cm-line').values()].map((l) => l.textContent); const lines = [...content.querySelectorAll('.cm-line').values()].map((l) => l.textContent);
expect(lines).toEqual(['{', '\t"testing": [true, 5]', '}']); expect(lines).toEqual(['{', '\t"testing": [true, 5]', '}']);
}); });
it('emits update:model-value events', async () => {
const modelValue = '{ "test": 1 }';
const { emitted, getByRole } = renderEditor(modelValue);
const textbox = await waitFor(() => getByRole('textbox'));
await userEvent.type(textbox, 'test');
await waitFor(() => expect(emitted('update:modelValue')).toContainEqual(['test{ "test": 1 }']));
});
}); });

3
packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
View file

@ -36,7 +36,6 @@ const emit = defineEmits<{
const jsonEditorRef = ref<HTMLDivElement>(); const jsonEditorRef = ref<HTMLDivElement>();
const editor = ref<EditorView | null>(null); const editor = ref<EditorView | null>(null);
const editorState = ref<EditorState | null>(null); const editorState = ref<EditorState | null>(null);
const isDirty = ref(false);
const extensions = computed(() => { const extensions = computed(() => {
const extensionsToApply: Extension[] = [ const extensionsToApply: Extension[] = [
@ -66,7 +65,6 @@ const extensions = computed(() => {
bracketMatching(), bracketMatching(),
mappingDropCursor(), mappingDropCursor(),
EditorView.updateListener.of((viewUpdate: ViewUpdate) => { EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
isDirty.value = true;
if (!viewUpdate.docChanged || !editor.value) return; if (!viewUpdate.docChanged || !editor.value) return;
emit('update:modelValue', editor.value?.state.doc.toString()); emit('update:modelValue', editor.value?.state.doc.toString());
}), }),
@ -81,7 +79,6 @@ onMounted(() => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (!editor.value) return; if (!editor.value) return;
if (isDirty.value) emit('update:modelValue', editor.value.state.doc.toString());
editor.value.destroy(); editor.value.destroy();
}); });