@zipify/wysiwyg 1.0.0-dev.1

package/lib/components/toolbar/controls/__tests__/BackgroundColorControl.test.js

@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import { h, ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { ColorPicker } from '../../../base';
+import BackgroundColorControl from '../BackgroundColorControl';
+
+const createEditor = ({ backgroundColor } = {}) => ({
+    commands: {
+        getBackgroundColor: () => ref(backgroundColor),
+        focus: jest.fn().mockReturnThis(),
+        applyBackgroundColor: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(BackgroundColorControl, {
+        stubs: {
+            ColorPicker: {
+                name: 'ColorPicker',
+                props: ['value'],
+
+                render() {
+                    const children = this.$scopedSlots.activator({
+                        toggle: jest.fn(),
+                        isOpened: false
+                    });
+
+                    return h('div', null, children);
+                }
+            }
+        },
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ backgroundColor: 'red' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(ColorPicker);
+
+        expect(dropdownWrapper.props('value')).toBe('red');
+    });
+
+    test('should apply new value', () => {
+        const editor = createEditor({ backgroundColor: 'red' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(ColorPicker);
+
+        dropdownWrapper.vm.$emit('change', 'green');
+
+        expect(editor.commands.applyBackgroundColor).toHaveBeenCalledWith('green');
+    });
+});

package/lib/components/toolbar/controls/__tests__/CaseStyleControl.test.js

@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils';
+import { h } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Dropdown } from '../../../base';
+import CaseStyleControl from '../CaseStyleControl';
+import { CaseStyles } from '../../../../enums';
+
+const createEditor = () => ({
+    commands: {
+        focus: jest.fn().mockReturnThis(),
+        applyCaseStyle: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(CaseStyleControl, {
+        stubs: {
+            Dropdown: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        },
+
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should apply new style', () => {
+        const editor = createEditor();
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', CaseStyles.UPPERCASE);
+
+        expect(editor.commands.applyCaseStyle).toHaveBeenCalledWith(CaseStyles.UPPERCASE);
+    });
+});

package/lib/components/toolbar/controls/__tests__/FontColorControl.test.js

@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import { h, ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { ColorPicker } from '../../../base';
+import FontColorControl from '../FontColorControl';
+
+const createEditor = ({ fontColor } = {}) => ({
+    commands: {
+        getFontColor: () => ref(fontColor),
+        focus: jest.fn().mockReturnThis(),
+        applyFontColor: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(FontColorControl, {
+        stubs: {
+            ColorPicker: {
+                name: 'ColorPicker',
+                props: ['value'],
+
+                render() {
+                    const children = this.$scopedSlots.activator({
+                        toggle: jest.fn(),
+                        isOpened: false
+                    });
+
+                    return h('div', null, children);
+                }
+            }
+        },
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ fontColor: 'red' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(ColorPicker);
+
+        expect(dropdownWrapper.props('value')).toBe('red');
+    });
+
+    test('should apply new value', () => {
+        const editor = createEditor({ fontColor: 'red' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(ColorPicker);
+
+        dropdownWrapper.vm.$emit('change', 'green');
+
+        expect(editor.commands.applyFontColor).toHaveBeenCalledWith('green');
+    });
+});

package/lib/components/toolbar/controls/__tests__/FontFamilyControl.test.js

@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import { h, ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Dropdown } from '../../../base';
+import FontFamilyControl from '../FontFamilyControl';
+
+const createEditor = ({ fontFamily } = {}) => ({
+    commands: {
+        getFontFamily: () => ref(fontFamily),
+        focus: jest.fn().mockReturnThis(),
+        applyFontFamily: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(FontFamilyControl, {
+        stubs: {
+            Dropdown: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        },
+        provide: {
+            [InjectionTokens.EDITOR]: editor,
+            [InjectionTokens.FONTS]: [
+                { name: 'Lato', category: 'test' },
+                { name: 'Bungee', category: 'test' }
+            ],
+            [InjectionTokens.LOCAL_STORAGE]: localStorage
+        }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ fontFamily: 'Bungee' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        expect(dropdownWrapper.props('value')).toBe('Bungee');
+    });
+
+    test('should apply new font family', () => {
+        const editor = createEditor({ fontFamily: 'Lato' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', 'Bungee');
+
+        expect(editor.commands.applyFontFamily).toHaveBeenCalledWith('Bungee');
+    });
+});

package/lib/components/toolbar/controls/__tests__/FontSizeControl.test.js

@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Dropdown } from '../../../base';
+import FontSizeControl from '../FontSizeControl';
+
+const createEditor = ({ fontSize } = {}) => ({
+    commands: {
+        getFontSize: () => ref(fontSize),
+        focus: jest.fn().mockReturnThis(),
+        applyFontSize: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(FontSizeControl, {
+        provide: {
+            [InjectionTokens.EDITOR]: editor,
+            [InjectionTokens.FONT_SIZES]: ['12', '23']
+        }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ fontSize: '12' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        expect(dropdownWrapper.props('value')).toBe('12');
+    });
+
+    test('should apply new font size', () => {
+        const editor = createEditor({ fontSize: '12' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', '14');
+
+        expect(editor.commands.applyFontSize).toHaveBeenCalledWith('14');
+    });
+});

package/lib/components/toolbar/controls/__tests__/FontWeightControl.test.js

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Dropdown } from '../../../base';
+import FontWeightControl from '../FontWeightControl';
+
+const createEditor = ({ fontWeight, fontWeightList } = {}) => ({
+    commands: {
+        getFontWeight: () => ref(fontWeight ?? '400'),
+        getFont: () => ref({ weights: fontWeightList ?? ['400', '700'] }),
+        focus: jest.fn().mockReturnThis(),
+        applyFontWeight: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(FontWeightControl, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ fontWeight: '400' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        expect(dropdownWrapper.props('value')).toBe('400');
+    });
+
+    test('should apply new font weight', () => {
+        const editor = createEditor({ fontWeight: '400' });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', '700');
+
+        expect(editor.commands.applyFontWeight).toHaveBeenCalledWith('700');
+    });
+});

package/lib/components/toolbar/controls/__tests__/ItalicControl.test.js

@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Button } from '../../../base';
+import ItalicControl from '../ItalicControl';
+
+const createEditor = ({ isItalic, isItalicAvailable } = {}) => ({
+    commands: {
+        isItalic: () => ref(isItalic),
+        isItalicAvailable: () => ref(isItalicAvailable ?? true),
+        focus: jest.fn().mockReturnThis(),
+        toggleItalic: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(ItalicControl, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('rendering', () => {
+    test('should enable if italic available', () => {
+        const editor = createEditor({ isItalicAvailable: true });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('disabled')).toBe(false);
+    });
+
+    test('should disabled if italic not available', () => {
+        const editor = createEditor({ isItalicAvailable: false });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('disabled')).toBe(true);
+    });
+});
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ isItalic: true });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('active')).toBe(true);
+    });
+
+    test('should apply new value', () => {
+        const editor = createEditor({ isItalic: false });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(editor.commands.toggleItalic).toHaveBeenCalled();
+    });
+});

package/lib/components/toolbar/controls/__tests__/LineHeightControl.test.js

@@ -0,0 +1,120 @@
+import { shallowMount } from '@vue/test-utils';
+import { h, nextTick, ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Button, Modal, NumberField, Range } from '../../../base';
+import LineHeightControl from '../LineHeightControl';
+
+const createEditor = ({ height } = {}) => {
+    const heightRef = ref(height ?? '1.2');
+
+    return {
+        commands: {
+            getLineHeight: () => heightRef,
+            applyLineHeight: jest.fn(function (value) {
+                heightRef.value = value;
+                return this;
+            }),
+            focus: jest.fn().mockReturnThis(),
+            storeSelection: jest.fn(),
+            restoreSelection: jest.fn(),
+            run: jest.fn()
+        },
+
+        chain() {
+            return this.commands;
+        }
+    };
+};
+
+function createComponent({ editor } = {}) {
+    return shallowMount(LineHeightControl, {
+        stubs: {
+            Modal: {
+                render() {
+                    return h('div', null, this.$slots.default);
+                },
+                props: ['toggler']
+            }
+        },
+        provide: { [InjectionTokens.EDITOR]: editor ?? createEditor() }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ height: '1.2' });
+        const wrapper = createComponent({ editor });
+        const rangeWrapper = wrapper.findComponent(Range);
+        const fieldWrapper = wrapper.findComponent(NumberField);
+
+        expect(rangeWrapper.props('value')).toBe('1.2');
+        expect(fieldWrapper.props('value')).toBe('1.2');
+    });
+
+    test('should apply new value by range', () => {
+        const editor = createEditor({ height: '1.2' });
+        const wrapper = createComponent({ editor });
+        const rangeWrapper = wrapper.findComponent(Range);
+
+        rangeWrapper.vm.$emit('input', '1.3');
+
+        expect(editor.commands.applyLineHeight).toHaveBeenCalledWith('1.3');
+    });
+
+    test('should apply new value by field', () => {
+        const editor = createEditor({ height: '1.2' });
+        const wrapper = createComponent({ editor });
+        const fieldWrapper = wrapper.findComponent(NumberField);
+
+        fieldWrapper.vm.$emit('input', '1.3');
+
+        expect(editor.commands.applyLineHeight).toHaveBeenCalledWith('1.3');
+    });
+
+    test('should sync field on range input', async () => {
+        const editor = createEditor({ height: '1.2' });
+        const wrapper = createComponent({ editor });
+        const rangeWrapper = wrapper.findComponent(Range);
+        const fieldWrapper = wrapper.findComponent(NumberField);
+
+        rangeWrapper.vm.$emit('input', '1.3');
+        await nextTick();
+
+        expect(fieldWrapper.props('value')).toBe('1.3');
+    });
+
+    test('should sync field on field input', async () => {
+        const editor = createEditor({ height: '1.2' });
+        const wrapper = createComponent({ editor });
+        const rangeWrapper = wrapper.findComponent(Range);
+        const fieldWrapper = wrapper.findComponent(NumberField);
+
+        fieldWrapper.vm.$emit('input', '1.21');
+        await nextTick();
+
+        expect(rangeWrapper.props('value')).toBe('1.21');
+    });
+});
+
+describe('rendering', () => {
+    test('should render closed state', async () => {
+        const wrapper = createComponent();
+        const buttonWrapper = wrapper.findComponent(Button);
+        const modalWrapper = wrapper.findComponent(Modal);
+
+        expect(buttonWrapper.props('active')).toBe(false);
+        expect(modalWrapper.props('toggler').isOpened.value).toBe(false);
+    });
+
+    test('should open modal', async () => {
+        const wrapper = createComponent();
+        const buttonWrapper = wrapper.findComponent(Button);
+        const modalWrapper = wrapper.findComponent(Modal);
+
+        buttonWrapper.vm.$emit('click');
+        await nextTick();
+
+        expect(buttonWrapper.props('active')).toBe(true);
+        expect(modalWrapper.props('toggler').isOpened.value).toBe(true);
+    });
+});

package/lib/components/toolbar/controls/__tests__/ListControl.test.js

@@ -0,0 +1,82 @@
+import { shallowMount } from '@vue/test-utils';
+import { h, ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Dropdown, Icon } from '../../../base';
+import ListControl from '../ListControl';
+import { ListTypes } from '../../../../enums';
+
+const createEditor = ({ listType } = {}) => ({
+    commands: {
+        getListType: () => ref(listType),
+        focus: jest.fn().mockReturnThis(),
+        applyList: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(ListControl, {
+        stubs: {
+            Dropdown: {
+                render() {
+                    const activator = this.$scopedSlots.activator({
+                        open: jest.fn(),
+                        isOpened: false
+                    });
+
+                    return h('div', null, [activator]);
+                },
+                props: ['value']
+            }
+        },
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should pass none type', () => {
+        const editor = createEditor({ listType: null });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        expect(dropdownWrapper.props('value')).toBe('none');
+    });
+
+    test('should pass type from selection', () => {
+        const editor = createEditor({ listType: ListTypes.LATIN });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        expect(dropdownWrapper.props('value')).toBe(ListTypes.LATIN);
+    });
+
+    test('should render none icon', () => {
+        const editor = createEditor({ listType: null });
+        const wrapper = createComponent({ editor });
+        const iconWrapper = wrapper.findComponent(Icon);
+
+        expect(iconWrapper.props('name')).toBe('list-disc');
+    });
+
+    test('should render type icon', () => {
+        const editor = createEditor({ listType: ListTypes.DECIMAL });
+        const wrapper = createComponent({ editor });
+        const iconWrapper = wrapper.findComponent(Icon);
+
+        expect(iconWrapper.props('name')).toBe('list-decimal');
+    });
+
+    test('should apply list', () => {
+        const editor = createEditor({ listType: ListTypes.LATIN });
+        const wrapper = createComponent({ editor });
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', ListTypes.LATIN);
+
+        expect(editor.commands.applyList).toHaveBeenCalledWith(ListTypes.LATIN);
+    });
+});

package/lib/components/toolbar/controls/__tests__/RemoveFormatControl.test.js

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import RemoveFormatControl from '../RemoveFormatControl';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Button } from '../../../base';
+
+const createEditor = () => ({
+    commands: {
+        focus: jest.fn().mockReturnThis(),
+        removeFormat: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(RemoveFormatControl, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('remove formatting', () => {
+    test('should remove text formatting', () => {
+        const editor = createEditor();
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(editor.commands.removeFormat).toHaveBeenCalled();
+    });
+});

package/lib/components/toolbar/controls/__tests__/StrikeThroughControl.test.js

@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { ref } from '@vue/composition-api';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Button } from '../../../base';
+import StrikeThroughControl from '../StrikeThroughControl';
+
+const createEditor = ({ isStrikeThrough } = {}) => ({
+    commands: {
+        isStrikeThrough: () => ref(isStrikeThrough),
+        focus: jest.fn().mockReturnThis(),
+        toggleStrikeThrough: jest.fn().mockReturnThis(),
+        run: jest.fn()
+    },
+
+    chain() {
+        return this.commands;
+    }
+});
+
+function createComponent({ editor }) {
+    return shallowMount(StrikeThroughControl, {
+        provide: { [InjectionTokens.EDITOR]: editor }
+    });
+}
+
+describe('selection value', () => {
+    test('should render value from selection', () => {
+        const editor = createEditor({ isStrikeThrough: true });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        expect(buttonWrapper.props('active')).toBe(true);
+    });
+
+    test('should apply new value', () => {
+        const editor = createEditor({ isStrikeThrough: false });
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(editor.commands.toggleStrikeThrough).toHaveBeenCalled();
+    });
+});