Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422// src/plugin/__tests__/views.test.tsimport { describe, it, expect, vi } from 'vitest'import { ItemView, TextFileView, MarkdownView, isReactItemView } from '../views'import type { ReactItemView } from '../views'import { EditorState } from '@codemirror/state'import { EditorView } from '@codemirror/view'import { CM6EditorAdapter } from '../cm6-editor'import { attachMarkdownViewEditor, detachMarkdownViewEditor, setMarkdownViewMode } from '../views/markdown-view'
// Mock WorkspaceLeaf for testingconst mockLeaf = {} as any
describe('ItemView', () => { it('has containerEl', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(view.containerEl).toBeInstanceOf(HTMLElement) })
it('has contentEl', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(view.contentEl).toBeInstanceOf(HTMLElement) })
it('getIcon returns default icon', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(view.getIcon()).toBe('document') })
it('onOpen returns a promise', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } openForTest() { return this.onOpen() } } const view = new TestView(mockLeaf) expect(view.openForTest()).toBeInstanceOf(Promise) })
it('onClose returns a promise', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } closeForTest() { return this.onClose() } } const view = new TestView(mockLeaf) expect(view.closeForTest()).toBeInstanceOf(Promise) })
it('addAction creates a button element', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) const callback = vi.fn() const button = view.addAction('plus', 'Add item', callback) expect(button).toBeInstanceOf(HTMLButtonElement) expect(button.className).toBe('view-action') expect(button.getAttribute('aria-label')).toBe('Add item') expect(button.title).toBe('Add item') })
it('addAction button calls callback on click', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) const callback = vi.fn() const button = view.addAction('plus', 'Add item', callback) button.click() expect(callback).toHaveBeenCalledTimes(1) expect(callback).toHaveBeenCalledWith(expect.any(MouseEvent)) })
it('addAction inserts button before contentEl', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) const button = view.addAction('plus', 'Add', vi.fn()) // Button should be a sibling before contentEl expect(button.nextSibling).toBe(view.contentEl) })
it('addAction cleanup removes event listener on unload', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) view.load() // Required to register cleanup callbacks const callback = vi.fn() const button = view.addAction('plus', 'Add', callback) // Click should work before unload button.click() expect(callback).toHaveBeenCalledTimes(1) // Unload the view view.unload() // Click after unload should NOT trigger callback (listener removed) button.click() expect(callback).toHaveBeenCalledTimes(1) // Still 1, not 2 })})
describe('TextFileView', () => { it('has data property', () => { class TestTextView extends TextFileView { getViewType() { return 'text' } getViewData() { return this.data } setViewData(data: string) { this.data = data } clear() { this.data = '' } } const view = new TestTextView(mockLeaf) view.data = 'test content' expect(view.getViewData()).toBe('test content') })
it('has file property initially null', () => { class TestTextView extends TextFileView { getViewType() { return 'text' } getViewData() { return this.data } setViewData(data: string) { this.data = data } clear() { this.data = '' } } const view = new TestTextView(mockLeaf) expect(view.file).toBe(null) })
it('getDisplayText returns file basename or default', () => { class TestTextView extends TextFileView { getViewType() { return 'text' } getViewData() { return this.data } setViewData(data: string) { this.data = data } clear() { this.data = '' } } const view = new TestTextView(mockLeaf) expect(view.getDisplayText()).toBe('No file') })})
describe('MarkdownView', () => { it('returns "markdown" for getViewType', () => { const view = new MarkdownView(mockLeaf) expect(view.getViewType()).toBe('markdown') })
it('has editor property', () => { const view = new MarkdownView(mockLeaf) expect(view.editor).toBeDefined() })
it('has file property initially null', () => { const view = new MarkdownView(mockLeaf) expect(view.file).toBe(null) })
it('getMode defaults to source', () => { const view = new MarkdownView(mockLeaf) expect(view.getMode()).toBe('source') })
it('host-only mode helper updates the view mode', () => { const view = new MarkdownView(mockLeaf) expect(view.getMode()).toBe('source') // Cast via unknown to check that setMode is not exposed expect((view as unknown as Record<string, unknown>).setMode).toBeUndefined() setMarkdownViewMode(view, 'preview') expect(view.getMode()).toBe('preview') setMarkdownViewMode(view, 'source') expect(view.getMode()).toBe('source') })
it('setViewData sets content', () => { const view = new MarkdownView(mockLeaf) view.setViewData('# Hello', false) expect(view.getViewData()).toBe('# Hello') })
it('clear resets content', () => { const view = new MarkdownView(mockLeaf) view.setViewData('content', false) view.clear() expect(view.getViewData()).toBe('') })
it('editor.getValue returns empty when no CM6 binding', () => { const view = new MarkdownView(mockLeaf) view.setViewData('test content', false) // Without a CM6 binding, editor reads from CM6 state (empty) expect(view.editor.getValue()).toBe('') // But getViewData reads from the backing store expect(view.getViewData()).toBe('test content') })})
describe('MarkdownView with CM6Editor', () => { it('editor is an Editor instance', () => { const view = new MarkdownView(mockLeaf) expect(view.editor).toBeDefined() expect(view.editor.getValue).toBeDefined() })
it('host-only helper wires CM6 instance', () => { const view = new MarkdownView(mockLeaf) const cm6View = new EditorView({ state: EditorState.create({ doc: 'hello world' }), }) const adapter = new CM6EditorAdapter() adapter.setView(cm6View) attachMarkdownViewEditor(view, adapter)
expect(view.editor.getValue()).toBe('hello world') cm6View.destroy() })
it('host-only cleanup helper clears the binding', () => { const view = new MarkdownView(mockLeaf) const cm6View = new EditorView({ state: EditorState.create({ doc: 'hello world' }), }) const adapter = new CM6EditorAdapter() adapter.setView(cm6View) attachMarkdownViewEditor(view, adapter)
detachMarkdownViewEditor(view)
expect(view.editor.getValue()).toBe('') cm6View.destroy() })
it('setViewData updates data without calling editor.setValue', () => { const view = new MarkdownView(mockLeaf) view.setViewData('test content', false) expect(view.getViewData()).toBe('test content') })
it('clear resets data', () => { const view = new MarkdownView(mockLeaf) view.setViewData('content', false) view.clear() expect(view.getViewData()).toBe('') })})
describe('isReactItemView', () => { it('returns true when view has getReactComponent method', () => { const reactView: ReactItemView = { getReactComponent: () => null, } expect(isReactItemView(reactView)).toBe(true) })
it('returns false for null', () => { expect(isReactItemView(null)).toBe(false) })
it('returns false for undefined', () => { expect(isReactItemView(undefined)).toBe(false) })
it('returns false for object without getReactComponent', () => { const plainObject = { foo: 'bar' } expect(isReactItemView(plainObject)).toBe(false) })
it('returns false when getReactComponent is not a function', () => { const invalidView = { getReactComponent: 'not a function' } expect(isReactItemView(invalidView)).toBe(false) })
it('returns false for primitives', () => { expect(isReactItemView(123)).toBe(false) expect(isReactItemView('string')).toBe(false) expect(isReactItemView(true)).toBe(false) })
it('returns true for ItemView subclass that implements ReactItemView', () => { class TestReactView extends ItemView implements ReactItemView { getViewType() { return 'test-react' } getDisplayText() { return 'Test React View' } getReactComponent() { return null } } const view = new TestReactView(mockLeaf) expect(isReactItemView(view)).toBe(true) })
it('returns false for plain ItemView without getReactComponent', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(isReactItemView(view)).toBe(false) })})
describe('ItemView constructor', () => { it('sets leaf property', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(view.leaf).toBe(mockLeaf) })
it('sets app from leaf.app if available', () => { const mockApp = { name: 'test-app' } const leafWithApp = { id: 'leaf-1', app: mockApp } as any class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(leafWithApp) expect(view.app).toBe(mockApp) })
it('sets app from leaf.app even when undefined', () => { // Upstream Obsidian types app as non-nullable App. // When leaf.app is undefined, app becomes undefined (not null). // In practice, WorkspaceLeaf always provides a valid app reference. const leafWithoutApp = { id: 'leaf-2' } as any class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(leafWithoutApp) expect(view.app).toBeUndefined() })
it('containerEl has correct class name', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(view.containerEl.className).toBe('view-content') })
it('contentEl has correct class name', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(view.contentEl.className).toBe('view-content-inner') })
it('contentEl is a child of containerEl', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(view.containerEl.contains(view.contentEl)).toBe(true) })})
describe('ItemView setState/getState', () => { it('setState is callable with state and result object', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(() => view.setState({ foo: 'bar' }, { history: false })).not.toThrow() })
it('setState is callable with result param', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(() => view.setState({ foo: 'bar' }, { history: true })).not.toThrow() })
it('getState returns empty object by default', () => { class TestView extends ItemView { getViewType() { return 'test' } getDisplayText() { return 'Test' } } const view = new TestView(mockLeaf) expect(view.getState()).toEqual({}) })
it('subclass can override setState/getState', async () => { class StatefulView extends ItemView { private state: Record<string, unknown> = {} getViewType() { return 'stateful' } getDisplayText() { return 'Stateful' } override setState(state: unknown): Promise<void> { this.state = state as Record<string, unknown> return Promise.resolve() } override getState() { return this.state } } const view = new StatefulView(mockLeaf) await view.setState({ key: 'value' }) expect(view.getState()).toEqual({ key: 'value' }) })})