diff --git a/packages/editor-ui/src/components/JsonEditor.test.ts b/packages/editor-ui/src/components/JsonEditor.test.ts index 74f5e17be7..1743a556fc 100644 --- a/packages/editor-ui/src/components/JsonEditor.test.ts +++ b/packages/editor-ui/src/components/JsonEditor.test.ts @@ -1,6 +1,8 @@ import { createTestingPinia } from '@pinia/testing'; import JsonEditor from '@/components/JsonEditor/JsonEditor.vue'; import { renderComponent } from '@/__tests__/render'; +import { waitFor } from '@testing-library/vue'; +import { userEvent } from '@testing-library/user-event'; describe('JsonEditor', () => { const renderEditor = (jsonString: string) => @@ -13,18 +15,29 @@ describe('JsonEditor', () => { it('renders simple json', async () => { const modelValue = '{ "testing": [true, 5] }'; - const result = renderEditor(modelValue); - expect(result.container.querySelector('.cm-content')?.textContent).toEqual(modelValue); + const { getByRole } = renderEditor(modelValue); + expect(getByRole('textbox').textContent).toEqual(modelValue); }); it('renders multiline json', async () => { const modelValue = '{\n\t"testing": [true, 5]\n}'; - const result = renderEditor(modelValue); - const gutter = result.container.querySelector('.cm-gutters'); + const { getByRole, container } = renderEditor(modelValue); + const gutter = container.querySelector('.cm-gutters'); expect(gutter?.querySelectorAll('.cm-lineNumbers .cm-gutterElement').length).toEqual(4); - const content = result.container.querySelector('.cm-content'); - const lines = [...content!.querySelectorAll('.cm-line').values()].map((l) => l.textContent); + const content = getByRole('textbox'); + const lines = [...content.querySelectorAll('.cm-line').values()].map((l) => l.textContent); 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 }'])); + }); }); diff --git a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue index 4b2c92d87a..6f5073bfcf 100644 --- a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue +++ b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue @@ -36,7 +36,6 @@ const emit = defineEmits<{ const jsonEditorRef = ref(); const editor = ref(null); const editorState = ref(null); -const isDirty = ref(false); const extensions = computed(() => { const extensionsToApply: Extension[] = [ @@ -66,7 +65,6 @@ const extensions = computed(() => { bracketMatching(), mappingDropCursor(), EditorView.updateListener.of((viewUpdate: ViewUpdate) => { - isDirty.value = true; if (!viewUpdate.docChanged || !editor.value) return; emit('update:modelValue', editor.value?.state.doc.toString()); }), @@ -81,7 +79,6 @@ onMounted(() => { onBeforeUnmount(() => { if (!editor.value) return; - if (isDirty.value) emit('update:modelValue', editor.value.state.doc.toString()); editor.value.destroy(); });