Spaces:
Running
Running
File size: 4,794 Bytes
b456468 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | import UI from '@/ui';
import { HELP_MENUS } from '@/consts';
describe('UI', () => {
let ui, options;
beforeEach(() => {
options = {
loadImage: { path: 'mockImagePath', name: '' },
menu: ['resize', 'crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
initMenu: 'shape',
menuBarPosition: 'bottom',
};
ui = new UI(document.createElement('div'), options, {});
});
describe('Destroy()', () => {
it('should be executed for all menu instances', () => {
const spies = [];
options.menu.forEach((menu) => {
spies.push(jest.spyOn(ui[menu], 'destroy'));
});
ui._destroyAllMenu();
spies.forEach((spy) => {
expect(spy).toHaveBeenCalled();
});
});
it('should execute "removeEventListener" for all menus', () => {
const allUiButtonElementName = [...options.menu, ...HELP_MENUS];
allUiButtonElementName.forEach((element) => {
jest.spyOn(ui._buttonElements[element], 'removeEventListener');
});
ui._removeUiEvent();
allUiButtonElementName.forEach((element) => {
expect(ui._buttonElements[element].removeEventListener).toHaveBeenCalled();
});
});
});
describe('_changeMenu()', () => {
it('should execute when the menu changes', () => {
ui.submenu = 'shape';
jest.spyOn(ui, 'resizeEditor');
ui.shape.changeStandbyMode = jest.fn();
jest.spyOn(ui.filter, 'changeStartMode');
ui._actions.main = { changeSelectableAll: jest.fn() };
ui.resizeEditor = jest.fn();
ui._changeMenu('filter', false, false);
expect(ui.shape.changeStandbyMode).toHaveBeenCalled();
expect(ui.filter.changeStartMode).toHaveBeenCalled();
});
});
describe('_makeSubMenu()', () => {
it('should execute for the number of menus specified in the option.', () => {
const makeMenuElementSpy = jest.spyOn(ui, '_makeMenuElement');
ui._makeSubMenu();
expect(makeMenuElementSpy).toHaveBeenCalledTimes(options.menu.length);
});
it('should create instance of the menu specified in the option', () => {
jest.spyOn(ui, '_makeMenuElement');
const getConstructorName = (constructor) => constructor.toString().match(/^class (.+?) /)[1];
ui._makeSubMenu();
options.menu.forEach((menu) => {
const constructorNameOfInstance = getConstructorName(ui[menu].constructor);
const expected = menu.replace(/^[a-z]/, ($0) => $0.toUpperCase());
expect(constructorNameOfInstance).toBe(expected);
});
});
});
describe('initCanvas()', () => {
beforeEach(() => {
ui._editorElement = {
querySelector: jest.fn(() => document.createElement('div')),
};
ui._actions.main = {
initLoadImage: jest.fn(() => Promise.resolve()),
};
});
it('should be run as required when initCanvas is executed', async () => {
ui.activeMenuEvent = jest.fn();
const addLoadEventSpy = jest.spyOn(ui, '_addLoadEvent');
await ui.initCanvas();
expect(addLoadEventSpy).toHaveBeenCalled();
});
it('should not be run when has not image path', () => {
jest.spyOn(ui, '_getLoadImage').mockReturnValue({ path: '' });
ui.initCanvas();
expect(ui._actions.main.initLoadImage).not.toHaveBeenCalled();
});
it('should be executed even if there is no image path', () => {
jest.spyOn(ui, '_getLoadImage').mockReturnValue({ path: '' });
jest.spyOn(ui, '_addLoadEvent');
ui.initCanvas();
expect(ui._addLoadEvent).toHaveBeenCalled();
});
});
describe('_setEditorPosition()', () => {
beforeEach(() => {
ui._editorElement = document.createElement('div');
jest.spyOn(ui, '_getCanvasMaxDimension').mockReturnValue({ width: 300, height: 300 });
});
it('should be reflected in the bottom of the editor position', () => {
ui.submenu = true;
ui._setEditorPosition('bottom');
expect(ui._editorElement.style).toMatchObject({ top: '150px', left: '0px' });
});
it('should be reflected in the top of the editor position', () => {
ui.submenu = true;
ui._setEditorPosition('top');
expect(ui._editorElement.style).toMatchObject({ top: '-150px', left: '0px' });
});
it('should be reflected in the left, right of the editor position', () => {
ui.submenu = true;
ui._setEditorPosition('left');
expect(ui._editorElement.style).toMatchObject({ top: '0px', left: '-150px' });
});
it('should be reflected in the right of the editor position', () => {
ui.submenu = true;
ui._setEditorPosition('right');
expect(ui._editorElement.style).toMatchObject({ top: '0px', left: '150px' });
});
});
});
|