diff options
Diffstat (limited to 'spec/frontend/content_editor/components/editor_state_observer_spec.js')
-rw-r--r-- | spec/frontend/content_editor/components/editor_state_observer_spec.js | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/spec/frontend/content_editor/components/editor_state_observer_spec.js b/spec/frontend/content_editor/components/editor_state_observer_spec.js new file mode 100644 index 00000000000..5e4bb348e1f --- /dev/null +++ b/spec/frontend/content_editor/components/editor_state_observer_spec.js @@ -0,0 +1,75 @@ +import { shallowMount } from '@vue/test-utils'; +import { each } from 'lodash'; +import EditorStateObserver, { + tiptapToComponentMap, +} from '~/content_editor/components/editor_state_observer.vue'; +import { createTestEditor } from '../test_utils'; + +describe('content_editor/components/editor_state_observer', () => { + let tiptapEditor; + let wrapper; + let onDocUpdateListener; + let onSelectionUpdateListener; + let onTransactionListener; + + const buildEditor = () => { + tiptapEditor = createTestEditor(); + jest.spyOn(tiptapEditor, 'on'); + }; + + const buildWrapper = () => { + wrapper = shallowMount(EditorStateObserver, { + provide: { tiptapEditor }, + listeners: { + docUpdate: onDocUpdateListener, + selectionUpdate: onSelectionUpdateListener, + transaction: onTransactionListener, + }, + }); + }; + + beforeEach(() => { + onDocUpdateListener = jest.fn(); + onSelectionUpdateListener = jest.fn(); + onTransactionListener = jest.fn(); + buildEditor(); + buildWrapper(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('when editor content changes', () => { + it('emits update, selectionUpdate, and transaction events', () => { + const content = '<p>My paragraph</p>'; + + tiptapEditor.commands.insertContent(content); + + expect(onDocUpdateListener).toHaveBeenCalledWith( + expect.objectContaining({ editor: tiptapEditor }), + ); + expect(onSelectionUpdateListener).toHaveBeenCalledWith( + expect.objectContaining({ editor: tiptapEditor }), + ); + expect(onSelectionUpdateListener).toHaveBeenCalledWith( + expect.objectContaining({ editor: tiptapEditor }), + ); + }); + }); + + describe('when component is destroyed', () => { + it('removes onTiptapDocUpdate and onTiptapSelectionUpdate hooks', () => { + jest.spyOn(tiptapEditor, 'off'); + + wrapper.destroy(); + + each(tiptapToComponentMap, (_, tiptapEvent) => { + expect(tiptapEditor.off).toHaveBeenCalledWith( + tiptapEvent, + tiptapEditor.on.mock.calls.find(([eventName]) => eventName === tiptapEvent)[1], + ); + }); + }); + }); +}); |