ribbit/test/vim.test.ts

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

const lib = ribbit();

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

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

    it('Esc enters normal mode', () => {
        const editor = new lib.Editor({
            currentTheme: 'vim',
            themes: [{
                name: 'vim',
                features: {
                    sourceMode: true,
                    vim: true,
                },
                tags: lib.defaultTags,
            }],
        });
        editor.run();
        editor.edit();
        editor.element.dispatchEvent(new lib.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 lib.Editor({
            currentTheme: 'vim',
            themes: [{
                name: 'vim',
                features: {
                    sourceMode: true,
                    vim: true,
                },
                tags: lib.defaultTags,
            }],
        });
        editor.run();
        editor.edit();
        // Enter normal mode
        editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
        // Back to insert
        editor.element.dispatchEvent(new lib.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 lib.Editor({
            autoToolbar: false,
            currentTheme: 'vim',
            themes: [{
                name: 'vim',
                features: {
                    sourceMode: true,
                    vim: true,
                },
                tags: lib.defaultTags,
            }],
        });
        editor.run();
        editor.toolbar.render();
        editor.edit();
        editor.toolbar.enable();
        editor.element.dispatchEvent(new lib.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 lib.Editor({
            autoToolbar: false,
            currentTheme: 'vim',
            themes: [{
                name: 'vim',
                features: {
                    sourceMode: true,
                    vim: true,
                },
                tags: lib.defaultTags,
            }],
        });
        editor.run();
        editor.toolbar.render();
        editor.edit();
        editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
        editor.element.dispatchEvent(new lib.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 lib.Editor({
            currentTheme: 'vim',
            themes: [{
                name: 'vim',
                features: {
                    sourceMode: true,
                    vim: true,
                },
                tags: lib.defaultTags,
            }],
        });
        editor.run();
        editor.edit();
        editor.element.dispatchEvent(new lib.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 lib.Editor({
            currentTheme: 'vim',
            themes: [{
                name: 'vim',
                features: {
                    sourceMode: true,
                    vim: true,
                },
                tags: lib.defaultTags,
            }],
        });
        editor.run();
        editor.wysiwyg();
        // Esc in wysiwyg should not add vim classes
        editor.element.dispatchEvent(new lib.window.KeyboardEvent('keydown', { key: 'Escape' }));
        expect(editor.element.classList.contains('vim-normal')).toBe(false);
    });
});