action.spec.js

/**
 * @author NHN Ent. FE Development Team <dl_javascript@nhnent.com>
 * @fileoverview Test cases of "src/js/action.js"
 */
import snippet from 'tui-code-snippet';
import Promise from 'core-js/library/es6/promise';
import ImageEditor from '../src/js/imageEditor';
import action from '../src/js/action';

describe('Ui', () => {
    let actions;
    let imageEditorMock;

    beforeEach(() => {
        action.mixin(ImageEditor);
        imageEditorMock = new ImageEditor(document.createElement('div'), {
            includeUI: {
                loadImage: false,
                initMenu: 'flip',
                menuBarPosition: 'bottom',
                applyCropSelectionStyle: true
            }
        });
        actions = imageEditorMock.getActions();

        spyOn(snippet, 'imagePing');
    });

    afterEach(() => {
        imageEditorMock.destroy();
    });

    describe('mainAction', () => {
        let mainAction;
        beforeEach(() => {
            mainAction = actions.main;
        });

        it('LoadImageFromURL() API should be executed When the initLoadImage action occurs', done => {
            const promise = new Promise(resolve => {
                resolve(300);
            });
            spyOn(imageEditorMock, 'loadImageFromURL').and.returnValue(promise);
            spyOn(imageEditorMock, 'clearUndoStack');
            spyOn(imageEditorMock.ui, 'resizeEditor');

            mainAction.initLoadImage('path', 'imageName').then(() => {
                expect(imageEditorMock.clearUndoStack).toHaveBeenCalled();
                expect(imageEditorMock.ui.resizeEditor).toHaveBeenCalled();
                expect(imageEditorMock.loadImageFromURL).toHaveBeenCalled();
                done();
            });
        });

        it('Undo() API should be executed When the undo action occurs', () => {
            spyOn(imageEditorMock, 'isEmptyUndoStack').and.returnValue(false);
            spyOn(imageEditorMock, 'undo');

            mainAction.undo();

            expect(imageEditorMock.undo).toHaveBeenCalled();
        });

        it('Redo() API should be executed When the redo action occurs', () => {
            spyOn(imageEditorMock, 'isEmptyRedoStack').and.returnValue(false);
            spyOn(imageEditorMock, 'redo');

            mainAction.redo();

            expect(imageEditorMock.redo).toHaveBeenCalled();
        });

        it('removeObject() API should be executed When the delete action occurs', () => {
            imageEditorMock.activeObjectId = 10;
            spyOn(imageEditorMock, 'removeActiveObject');

            mainAction['delete']();

            expect(imageEditorMock.removeActiveObject).toHaveBeenCalled();
            expect(imageEditorMock.activeObjectId).toBe(null);
        });

        it('clearObjects() API should be run and the enabled state should be changed When the deleteAll action occurs', () => {
            spyOn(imageEditorMock, 'clearObjects');
            spyOn(imageEditorMock.ui, 'changeDeleteButtonEnabled');
            spyOn(imageEditorMock.ui, 'changeDeleteAllButtonEnabled');

            mainAction.deleteAll();
            expect(imageEditorMock.clearObjects).toHaveBeenCalled();
            expect(imageEditorMock.ui.changeDeleteButtonEnabled).toHaveBeenCalled();
            expect(imageEditorMock.ui.changeDeleteAllButtonEnabled).toHaveBeenCalled();
        });

        it('loadImageFromFile() API should be executed When the load action occurs', done => {
            const promise = new Promise(resolve => {
                resolve();
            });
            spyOn(imageEditorMock, 'loadImageFromFile').and.returnValue(promise);
            spyOn(imageEditorMock, 'clearUndoStack');
            spyOn(imageEditorMock.ui, 'resizeEditor');
            window.URL = {
                createObjectURL: jasmine.createSpy('URL')
            };

            mainAction.load();

            promise.then(() => {
                expect(imageEditorMock.loadImageFromFile).toHaveBeenCalled();
                expect(imageEditorMock.clearUndoStack).toHaveBeenCalled();
                expect(imageEditorMock.ui.resizeEditor).toHaveBeenCalled();
                done();
            });
        });
    });

    describe('shapeAction', () => {
        let shapeAction;
        beforeEach(() => {
            shapeAction = actions.shape;
        });
        it('changeShape() API should be executed When the changeShape action occurs', () => {
            imageEditorMock.activeObjectId = 10;
            spyOn(imageEditorMock, 'changeShape');

            shapeAction.changeShape({
                strokeWidth: '#000000'
            });
            expect(imageEditorMock.changeShape).toHaveBeenCalled();
        });

        it('setDrawingShape() API should be executed When the setDrawingShape action occurs', () => {
            spyOn(imageEditorMock, 'setDrawingShape');

            shapeAction.setDrawingShape();
            expect(imageEditorMock.setDrawingShape).toHaveBeenCalled();
        });
    });

    describe('cropAction', () => {
        let cropAction;
        beforeEach(() => {
            cropAction = actions.crop;
        });
        it('getCropzoneRect(), stopDrawingMode(), ui.resizeEditor(), ui.changeMenu() API should be executed When the crop action occurs', done => {
            const promise = new Promise(resolve => {
                resolve();
            });
            spyOn(imageEditorMock, 'crop').and.returnValue(promise);
            spyOn(imageEditorMock, 'getCropzoneRect').and.returnValue(true);
            spyOn(imageEditorMock, 'stopDrawingMode');
            spyOn(imageEditorMock.ui, 'resizeEditor');
            spyOn(imageEditorMock.ui, 'changeMenu');

            cropAction.crop();

            expect(imageEditorMock.getCropzoneRect).toHaveBeenCalled();
            expect(imageEditorMock.crop).toHaveBeenCalled();
            promise.then(() => {
                expect(imageEditorMock.stopDrawingMode).toHaveBeenCalled();
                expect(imageEditorMock.ui.resizeEditor).toHaveBeenCalled();
                expect(imageEditorMock.ui.changeMenu).toHaveBeenCalled();
                done();
            });
        });

        it('stopDrawingMode() API should be executed When the cancel action occurs', () => {
            spyOn(imageEditorMock, 'stopDrawingMode');
            spyOn(imageEditorMock.ui, 'changeMenu');

            cropAction.cancel();
            expect(imageEditorMock.stopDrawingMode).toHaveBeenCalled();
            expect(imageEditorMock.ui.changeMenu).toHaveBeenCalled();
        });
    });

    describe('flipAction', () => {
        let flipAction;
        beforeEach(() => {
            flipAction = actions.flip;
        });
        it('{flipType}() API should be executed When the flip(fliptype) action occurs', () => {
            spyOn(imageEditorMock, 'flipX');
            spyOn(imageEditorMock, 'flipY');

            flipAction.flip('flipX');
            expect(imageEditorMock.flipX).toHaveBeenCalled();

            flipAction.flip('flipY');
            expect(imageEditorMock.flipY).toHaveBeenCalled();
        });
    });

    describe('rotateAction', () => {
        let rotateAction;
        beforeEach(() => {
            rotateAction = actions.rotate;
        });

        it('rotate() API should be executed When the rotate action occurs', () => {
            spyOn(imageEditorMock, 'rotate');
            spyOn(imageEditorMock.ui, 'resizeEditor');

            rotateAction.rotate(30);
            expect(imageEditorMock.rotate).toHaveBeenCalled();
            expect(imageEditorMock.ui.resizeEditor).toHaveBeenCalled();
        });

        it('setAngle() API should be executed When the setAngle action occurs', () => {
            spyOn(imageEditorMock, 'setAngle');
            spyOn(imageEditorMock.ui, 'resizeEditor');

            rotateAction.setAngle(30);
            expect(imageEditorMock.setAngle).toHaveBeenCalled();
            expect(imageEditorMock.ui.resizeEditor).toHaveBeenCalled();
        });
    });

    describe('textAction', () => {
        let textAction;
        beforeEach(() => {
            textAction = actions.text;
        });

        it('changeTextStyle() API should be executed When the changeTextStyle action occurs', () => {
            imageEditorMock.activeObjectId = 10;
            spyOn(imageEditorMock, 'changeTextStyle');

            textAction.changeTextStyle({fontSize: 10});
            expect(imageEditorMock.changeTextStyle.calls.mostRecent().args[0]).toBe(10);
            expect(imageEditorMock.changeTextStyle.calls.mostRecent().args[1]).toEqual({fontSize: 10});
        });
    });

    describe('maskAction', () => {
        let maskAction;
        beforeEach(() => {
            maskAction = actions.mask;
        });

        it('applyFilter() API should be executed When the applyFilter action occurs', () => {
            imageEditorMock.activeObjectId = 10;
            spyOn(imageEditorMock, 'applyFilter');

            maskAction.applyFilter();
            expect(imageEditorMock.applyFilter.calls.mostRecent().args[1]).toEqual({maskObjId: 10});
        });
    });

    describe('drawAction', () => {
        let drawAction, expected;
        beforeEach(() => {
            drawAction = actions.draw;
        });

        it('startDrawingMode("FREE_DRAWING") API should be executed When the setDrawMode("free") action occurs', () => {
            spyOn(imageEditorMock, 'startDrawingMode');
            drawAction.setDrawMode('free');

            expected = imageEditorMock.startDrawingMode.calls.mostRecent().args[0];
            expect(expected).toBe('FREE_DRAWING');
        });

        it('setBrush() API should be executed When the setColor() action occurs', () => {
            spyOn(imageEditorMock, 'setBrush');
            drawAction.setColor('#000000');

            expected = imageEditorMock.setBrush.calls.mostRecent().args[0].color;
            expect(expected).toBe('#000000');
        });
    });

    describe('iconAction', () => {
        let iconAction, expected;
        beforeEach(() => {
            iconAction = actions.icon;
        });

        it('add once event mousedown should be executed When the addIcon action occurs', () => {
            const promise = new Promise(resolve => {
                resolve(300);
            });

            spyOn(imageEditorMock, 'changeCursor');
            spyOn(imageEditorMock, 'addIcon').and.returnValue(promise);

            iconAction.addIcon('iconTypeA');
            expect(imageEditorMock.changeCursor).toHaveBeenCalled();

            imageEditorMock.fire('mousedown', null, {
                x: 10,
                y: 10
            });
            expected = imageEditorMock.addIcon.calls.mostRecent().args[0];
            expect(expected).toBe('iconTypeA');
        });
    });

    describe('filterAction', () => {
        let filterAction;
        beforeEach(() => {
            filterAction = actions.filter;
        });

        it('removeFilter() API should be executed When the type of applyFilter is false', () => {
            spyOn(imageEditorMock, 'removeFilter');
            spyOn(imageEditorMock, 'hasFilter').and.returnValue(true);
            filterAction.applyFilter(false, {});

            expect(imageEditorMock.removeFilter).toHaveBeenCalled();
        });

        it('applyFilter() API should be executed When the type of applyFilter is true', () => {
            spyOn(imageEditorMock, 'applyFilter');
            filterAction.applyFilter(true, {});

            expect(imageEditorMock.applyFilter).toHaveBeenCalled();
        });
    });

    describe('commonAction', () => {
        it('Each action returned to the getActions method must contain commonAction.', () => {
            const submenus = ['shape', 'crop', 'flip', 'rotate', 'text', 'mask', 'draw', 'icon', 'filter'];
            snippet.forEach(submenus, submenu => {
                expect(actions[submenu].modeChange).toBeDefined();
                expect(actions[submenu].deactivateAll).toBeDefined();
                expect(actions[submenu].changeSelectableAll).toBeDefined();
                expect(actions[submenu].discardSelection).toBeDefined();
                expect(actions[submenu].stopDrawingMode).toBeDefined();
            });
        });

        describe('modeChange()', () => {
            let commonAction;
            beforeEach(() => {
                commonAction = actions.main;
            });

            it('_changeActivateMode("TEXT") API should be executed When the modeChange("text") action occurs', () => {
                spyOn(imageEditorMock, '_changeActivateMode');

                commonAction.modeChange('text');
                expect(imageEditorMock._changeActivateMode).toHaveBeenCalled();
            });

            it('startDrawingMode() API should be executed When the modeChange("crop") action occurs', () => {
                spyOn(imageEditorMock, 'startDrawingMode');

                commonAction.modeChange('crop');
                expect(imageEditorMock.startDrawingMode).toHaveBeenCalled();
            });

            it('stopDrawingMode(), setDrawingShape(), _changeActivateMode()  API should be executed When the modeChange("shape") action occurs', () => {
                spyOn(imageEditorMock, 'setDrawingShape');
                spyOn(imageEditorMock, '_changeActivateMode');

                commonAction.modeChange('shape');
                expect(imageEditorMock.setDrawingShape).toHaveBeenCalled();
                expect(imageEditorMock._changeActivateMode).toHaveBeenCalled();
            });
        });
    });

    describe('reAction', () => {
        beforeEach(() => {
            imageEditorMock.setReAction();
        });

        describe('undoStackChanged', () => {
            it('If the undo stack has a length greater than zero, the state of changeUndoButtonStatus, changeResetButtonStatus should be true.', () => {
                spyOn(imageEditorMock.ui, 'changeUndoButtonStatus');
                spyOn(imageEditorMock.ui, 'changeResetButtonStatus');
                imageEditorMock.fire('undoStackChanged', 1);

                expect(imageEditorMock.ui.changeUndoButtonStatus.calls.mostRecent().args[0]).toBe(true);
                expect(imageEditorMock.ui.changeResetButtonStatus.calls.mostRecent().args[0]).toBe(true);
            });

            it('If the undo stack has a length of 0, the state of changeUndoButtonStatus, changeResetButtonStatus should be false.', () => {
                spyOn(imageEditorMock.ui, 'changeUndoButtonStatus');
                spyOn(imageEditorMock.ui, 'changeResetButtonStatus');
                imageEditorMock.fire('undoStackChanged', 0);

                expect(imageEditorMock.ui.changeUndoButtonStatus.calls.mostRecent().args[0]).toBe(false);
                expect(imageEditorMock.ui.changeResetButtonStatus.calls.mostRecent().args[0]).toBe(false);
            });
        });

        describe('redoStackChanged', () => {
            it('If the redo stack is greater than zero length, the state of changeRedoButtonStatus should be true.', () => {
                spyOn(imageEditorMock.ui, 'changeRedoButtonStatus');
                imageEditorMock.fire('redoStackChanged', 1);
                expect(imageEditorMock.ui.changeRedoButtonStatus.calls.mostRecent().args[0]).toBe(true);
            });

            it('If the redo stack has a length of zero, the state of changeRedoButtonStatus should be false.', () => {
                spyOn(imageEditorMock.ui, 'changeRedoButtonStatus');
                imageEditorMock.fire('redoStackChanged', 0);
                expect(imageEditorMock.ui.changeRedoButtonStatus.calls.mostRecent().args[0]).toBe(false);
            });
        });

        describe('objectActivated', () => {
            it('When objectActivated occurs, the state of the delete button should be enabled.', () => {
                spyOn(imageEditorMock.ui, 'changeDeleteButtonEnabled');
                spyOn(imageEditorMock.ui, 'changeDeleteAllButtonEnabled');
                imageEditorMock.fire('objectActivated', {id: 1});
                expect(imageEditorMock.ui.changeDeleteButtonEnabled.calls.mostRecent().args[0]).toBe(true);
                expect(imageEditorMock.ui.changeDeleteAllButtonEnabled.calls.mostRecent().args[0]).toBe(true);
            });

            it('When objectActivated\'s target is cropzone, changeApplyButtonStatus should be enabled.', () => {
                spyOn(imageEditorMock.ui.crop, 'changeApplyButtonStatus');
                imageEditorMock.fire('objectActivated', {
                    id: 1,
                    type: 'cropzone'
                });
                expect(imageEditorMock.ui.crop.changeApplyButtonStatus.calls.mostRecent().args[0]).toBe(true);
            });

            it('If the target of objectActivated is shape and the existing menu is not shpe, the menu should be changed to shape.', () => {
                imageEditorMock.ui.submenu = 'crop';
                spyOn(imageEditorMock.ui, 'changeMenu');
                spyOn(imageEditorMock.ui.shape, 'setShapeStatus');
                spyOn(imageEditorMock.ui.shape, 'setMaxStrokeValue');
                imageEditorMock.fire('objectActivated', {
                    id: 1,
                    type: 'circle'
                });

                expect(imageEditorMock.ui.changeMenu.calls.mostRecent().args[0]).toBe('shape');
                expect(imageEditorMock.ui.shape.setMaxStrokeValue).toHaveBeenCalled();
            });

            it('If the target of objectActivated is text and the existing menu is not text, the menu should be changed to text.', () => {
                imageEditorMock.ui.submenu = 'crop';
                spyOn(imageEditorMock.ui, 'changeMenu');
                imageEditorMock.fire('objectActivated', {
                    id: 1,
                    type: 'i-text'
                });

                expect(imageEditorMock.ui.changeMenu.calls.mostRecent().args[0]).toBe('text');
            });

            it('If the target of objectActivated is icon and the existing menu is not icon, the menu should be changed to icon.', () => {
                imageEditorMock.ui.submenu = 'crop';
                spyOn(imageEditorMock.ui, 'changeMenu');
                spyOn(imageEditorMock.ui.icon, 'setIconPickerColor');
                imageEditorMock.fire('objectActivated', {
                    id: 1,
                    type: 'icon'
                });

                expect(imageEditorMock.ui.changeMenu.calls.mostRecent().args[0]).toBe('icon');
                expect(imageEditorMock.ui.icon.setIconPickerColor).toHaveBeenCalled();
            });
        });

        describe('addObjectAfter', () => {
            it('When addObjectAfter occurs, the shape\'s maxStrokeValue should be changed to match the size of the added object.', () => {
                spyOn(imageEditorMock.ui.shape, 'setMaxStrokeValue');
                spyOn(imageEditorMock.ui.shape, 'changeStandbyMode');
                imageEditorMock.fire('addObjectAfter', {
                    type: 'circle',
                    width: 100,
                    height: 200
                });

                expect(imageEditorMock.ui.shape.setMaxStrokeValue.calls.mostRecent().args[0]).toBe(100);
                expect(imageEditorMock.ui.shape.changeStandbyMode).toHaveBeenCalled();
            });
        });

        describe('objectScaled', () => {
            it('If objectScaled occurs on an object of type text, fontSize must be changed.', () => {
                imageEditorMock.ui.text.fontSize = 0;
                imageEditorMock.fire('objectScaled', {
                    type: 'i-text',
                    fontSize: 20
                });

                expect(imageEditorMock.ui.text.fontSize).toBe(20);
            });

            it('If objectScaled is for a shape type object and strokeValue is greater than the size of the object, the value should change.', () => {
                spyOn(imageEditorMock.ui.shape, 'getStrokeValue').and.returnValue(20);
                spyOn(imageEditorMock.ui.shape, 'setStrokeValue');
                imageEditorMock.fire('objectScaled', {
                    type: 'rect',
                    width: 10,
                    height: 10
                });
                expect(imageEditorMock.ui.shape.setStrokeValue.calls.mostRecent().args[0]).toBe(10);
            });
        });

        describe('selectionCleared', () => {
            it('If selectionCleared occurs in the text menu state, the menu should be closed.', () => {
                imageEditorMock.ui.submenu = 'text';
                spyOn(imageEditorMock.ui, 'changeMenu');

                imageEditorMock.fire('selectionCleared');
                expect(imageEditorMock.ui.changeMenu.calls.mostRecent().args[0]).toBe('text');
            });
        });
    });
});