279 lines
10 KiB
TypeScript
279 lines
10 KiB
TypeScript
import { ribbit, resetDOM } from './setup';
|
|
|
|
const r = ribbit();
|
|
|
|
describe('ToolbarManager', () => {
|
|
beforeEach(() => resetDOM('**bold** text'));
|
|
|
|
describe('button registration', () => {
|
|
it('registers tag buttons', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
expect(editor.toolbar.buttons.get('bold')).toBeDefined();
|
|
expect(editor.toolbar.buttons.get('italic')).toBeDefined();
|
|
expect(editor.toolbar.buttons.get('code')).toBeDefined();
|
|
});
|
|
|
|
it('registers editor actions', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
expect(editor.toolbar.buttons.get('save')).toBeDefined();
|
|
expect(editor.toolbar.buttons.get('toggle')).toBeDefined();
|
|
expect(editor.toolbar.buttons.get('markdown')).toBeDefined();
|
|
});
|
|
|
|
it('registers macro buttons', () => {
|
|
const editor = new r.Editor({
|
|
macros: [{ name: 'user', toHTML: () => 'u' }],
|
|
});
|
|
editor.run();
|
|
expect(editor.toolbar.buttons.get('macro:user')).toBeDefined();
|
|
});
|
|
|
|
it('skips macros with button: false', () => {
|
|
const editor = new r.Editor({
|
|
macros: [{ name: 'hidden', toHTML: () => '', button: false }],
|
|
});
|
|
editor.run();
|
|
expect(editor.toolbar.buttons.get('macro:hidden')).toBeUndefined();
|
|
});
|
|
|
|
it('skips tags without button', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
expect(editor.toolbar.buttons.get('paragraph')).toBeUndefined();
|
|
});
|
|
});
|
|
|
|
describe('button properties', () => {
|
|
it('bold has correct label and shortcut', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
const bold = editor.toolbar.buttons.get('bold')!;
|
|
expect(bold.label).toBe('Bold');
|
|
expect(bold.shortcut).toBe('Ctrl+B');
|
|
});
|
|
|
|
it('bold action is wrap', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
expect(editor.toolbar.buttons.get('bold')!.action).toBe('wrap');
|
|
});
|
|
|
|
it('save action is custom', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
expect(editor.toolbar.buttons.get('save')!.action).toBe('custom');
|
|
});
|
|
|
|
it('table has template', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
const table = editor.toolbar.buttons.get('table')!;
|
|
expect(table.template).toContain('Header');
|
|
expect(table.replaceSelection).toBe(false);
|
|
});
|
|
|
|
it('macro button has insert action', () => {
|
|
const editor = new r.Editor({
|
|
macros: [{ name: 'toc', toHTML: () => '' }],
|
|
});
|
|
editor.run();
|
|
const btn = editor.toolbar.buttons.get('macro:toc')!;
|
|
expect(btn.action).toBe('insert');
|
|
expect(btn.template).toBe('@toc');
|
|
});
|
|
});
|
|
|
|
describe('button.hide() and button.show()', () => {
|
|
it('hide sets visible false', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
const bold = editor.toolbar.buttons.get('bold')!;
|
|
expect(bold.visible).toBe(true);
|
|
bold.hide();
|
|
expect(bold.visible).toBe(false);
|
|
});
|
|
|
|
it('show restores visible', () => {
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
const bold = editor.toolbar.buttons.get('bold')!;
|
|
bold.hide();
|
|
bold.show();
|
|
expect(bold.visible).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('render()', () => {
|
|
it('returns an HTMLElement', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
expect(el.tagName).toBe('NAV');
|
|
expect(el.className).toBe('ribbit-toolbar');
|
|
});
|
|
|
|
it('contains buttons', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
expect(el.querySelector('.ribbit-btn-bold')).not.toBeNull();
|
|
expect(el.querySelector('.ribbit-btn-save')).not.toBeNull();
|
|
});
|
|
|
|
it('buttons have aria-label', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
const bold = el.querySelector('.ribbit-btn-bold');
|
|
expect(bold?.getAttribute('aria-label')).toBe('Bold');
|
|
});
|
|
|
|
it('buttons have title with shortcut', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
const bold = el.querySelector('.ribbit-btn-bold');
|
|
expect(bold?.getAttribute('title')).toBe('Bold (Ctrl+B)');
|
|
});
|
|
|
|
it('renders spacers', () => {
|
|
const editor = new r.Editor({
|
|
autoToolbar: false,
|
|
toolbar: ['bold', '', 'save'],
|
|
});
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
expect(el.querySelector('.spacer')).not.toBeNull();
|
|
});
|
|
|
|
it('renders dropdown groups', () => {
|
|
const editor = new r.Editor({
|
|
autoToolbar: false,
|
|
toolbar: [{ group: 'Test', items: ['bold', 'italic'] }],
|
|
});
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
expect(el.querySelector('.ribbit-dropdown')).not.toBeNull();
|
|
});
|
|
});
|
|
|
|
describe('auto-render', () => {
|
|
it('inserts toolbar before editor by default', () => {
|
|
resetDOM();
|
|
const editor = new r.Editor({});
|
|
editor.run();
|
|
const toolbar = editor.element.previousElementSibling;
|
|
expect(toolbar?.className).toBe('ribbit-toolbar');
|
|
});
|
|
|
|
it('does not insert when autoToolbar is false', () => {
|
|
resetDOM();
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
const toolbar = editor.element.previousElementSibling;
|
|
expect(toolbar?.className || '').not.toBe('ribbit-toolbar');
|
|
});
|
|
});
|
|
|
|
describe('custom layout', () => {
|
|
it('respects custom toolbar order', () => {
|
|
const editor = new r.Editor({
|
|
autoToolbar: false,
|
|
toolbar: ['save', 'bold'],
|
|
});
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
const buttons = el.querySelectorAll('button');
|
|
expect(buttons[0]?.className).toBe('ribbit-btn-save');
|
|
expect(buttons[1]?.className).toBe('ribbit-btn-bold');
|
|
});
|
|
|
|
it('auto-generates layout when not specified', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
expect(el.querySelectorAll('button').length).toBeGreaterThan(3);
|
|
});
|
|
});
|
|
|
|
describe('enable/disable', () => {
|
|
it('disable adds disabled class', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
editor.toolbar.disable();
|
|
const bold = el.querySelector('.ribbit-btn-bold');
|
|
expect(bold?.classList.contains('disabled')).toBe(true);
|
|
});
|
|
|
|
it('enable removes disabled class', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
const el = editor.toolbar.render();
|
|
editor.toolbar.disable();
|
|
editor.toolbar.enable();
|
|
const bold = el.querySelector('.ribbit-btn-bold');
|
|
expect(bold?.classList.contains('disabled')).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('updateActiveState', () => {
|
|
it('sets active class on matching buttons', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
editor.toolbar.render();
|
|
editor.toolbar.updateActiveState(['bold']);
|
|
expect(editor.toolbar.buttons.get('bold')!.element?.classList.contains('active')).toBe(true);
|
|
expect(editor.toolbar.buttons.get('italic')!.element?.classList.contains('active')).toBe(false);
|
|
});
|
|
|
|
it('clears active when not in list', () => {
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
editor.toolbar.render();
|
|
editor.toolbar.updateActiveState(['bold']);
|
|
editor.toolbar.updateActiveState([]);
|
|
expect(editor.toolbar.buttons.get('bold')!.element?.classList.contains('active')).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe('save button', () => {
|
|
it('triggers editor.save()', () => {
|
|
resetDOM();
|
|
let saved = false;
|
|
const editor = new r.Editor({
|
|
autoToolbar: false,
|
|
on: { save: () => { saved = true; } },
|
|
});
|
|
editor.run();
|
|
editor.toolbar.render();
|
|
editor.toolbar.buttons.get('save')!.click();
|
|
expect(saved).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('toggle button', () => {
|
|
it('switches from view to wysiwyg', () => {
|
|
resetDOM();
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
editor.toolbar.render();
|
|
expect(editor.getState()).toBe('view');
|
|
editor.toolbar.buttons.get('toggle')!.click();
|
|
expect(editor.getState()).toBe('wysiwyg');
|
|
});
|
|
|
|
it('switches from wysiwyg to view', () => {
|
|
resetDOM();
|
|
const editor = new r.Editor({ autoToolbar: false });
|
|
editor.run();
|
|
editor.wysiwyg();
|
|
editor.toolbar.render();
|
|
editor.toolbar.buttons.get('toggle')!.click();
|
|
expect(editor.getState()).toBe('view');
|
|
});
|
|
});
|
|
});
|