ribbit/test/vim.test.ts

import { ribbit, resetDOM } from './setup';

const r = ribbit();

describe('VimHandler', () => {
    beforeEach(() => resetDOM('hello world'));

    it('starts in insert mode', () => {
        const editor = new r.Editor({ currentTheme: 'vim', themes: [{ name: 'vim', features: { sourceMode: true, vim: true }, tags: r.defaultTags }] });
        editor.run();
        editor.edit();
        expect(editor.element.classList.contains('vim-insert')).toBe(true);
    });

    it('Esc enters normal mode', () => {
        const editor = new r.Editor({ currentTheme: 'vim', themes: [{ name: 'vim', features: { sourceMode: true, vim: true }, tags: r.defaultTags }] });
        editor.run();
        editor.edit();
        editor.element.dispatchEvent(new r.window.KeyboardEvent('keydown', { key: 'Escape' }));
        expect(editor.element.classList.contains('vim-normal')).toBe(true);
        expect(editor.element.classList.contains('vim-insert')).toBe(false);
    });

    it('i returns to insert mode', () => {
        const editor = new r.Editor({ currentTheme: 'vim', themes: [{ name: 'vim', features: { sourceMode: true, vim: true }, tags: r.defaultTags }] });
        editor.run();
        editor.edit();
        // Enter normal mode
        editor.element.dispatchEvent(new r.window.KeyboardEvent('keydown', { key: 'Escape' }));
        // Back to insert
        editor.element.dispatchEvent(new r.window.KeyboardEvent('keydown', { key: 'i' }));
        expect(editor.element.classList.contains('vim-insert')).toBe(true);
        expect(editor.element.classList.contains('vim-normal')).toBe(false);
    });

    it('disables toolbar in normal mode', () => {
        const editor = new r.Editor({ autoToolbar: false, currentTheme: 'vim', themes: [{ name: 'vim', features: { sourceMode: true, vim: true }, tags: r.defaultTags }] });
        editor.run();
        editor.toolbar.render();
        editor.edit();
        editor.toolbar.enable();
        editor.element.dispatchEvent(new r.window.KeyboardEvent('keydown', { key: 'Escape' }));
        const bold = editor.toolbar.buttons.get('bold');
        expect(bold?.element?.classList.contains('disabled')).toBe(true);
    });

    it('re-enables toolbar in insert mode', () => {
        const editor = new r.Editor({ autoToolbar: false, currentTheme: 'vim', themes: [{ name: 'vim', features: { sourceMode: true, vim: true }, tags: r.defaultTags }] });
        editor.run();
        editor.toolbar.render();
        editor.edit();
        editor.element.dispatchEvent(new r.window.KeyboardEvent('keydown', { key: 'Escape' }));
        editor.element.dispatchEvent(new r.window.KeyboardEvent('keydown', { key: 'i' }));
        const bold = editor.toolbar.buttons.get('bold');
        expect(bold?.element?.classList.contains('disabled')).toBe(false);
    });

    it('detaches when leaving edit mode', () => {
        const editor = new r.Editor({ currentTheme: 'vim', themes: [{ name: 'vim', features: { sourceMode: true, vim: true }, tags: r.defaultTags }] });
        editor.run();
        editor.edit();
        editor.element.dispatchEvent(new r.window.KeyboardEvent('keydown', { key: 'Escape' }));
        expect(editor.element.classList.contains('vim-normal')).toBe(true);
        editor.wysiwyg();
        // vim classes should be gone after mode switch
        expect(editor.element.classList.contains('vim-normal')).toBe(false);
        expect(editor.element.classList.contains('vim-insert')).toBe(false);
    });

    it('only activates in edit mode', () => {
        const editor = new r.Editor({ currentTheme: 'vim', themes: [{ name: 'vim', features: { sourceMode: true, vim: true }, tags: r.defaultTags }] });
        editor.run();
        editor.wysiwyg();
        // Esc in wysiwyg should not add vim classes
        editor.element.dispatchEvent(new r.window.KeyboardEvent('keydown', { key: 'Escape' }));
        expect(editor.element.classList.contains('vim-normal')).toBe(false);
    });
});