diff options
Diffstat (limited to 'src/api/menu/MenuAPISpec.js')
| -rw-r--r-- | src/api/menu/MenuAPISpec.js | 180 |
1 files changed, 99 insertions, 81 deletions
diff --git a/src/api/menu/MenuAPISpec.js b/src/api/menu/MenuAPISpec.js index 354254b8b..00a55f873 100644 --- a/src/api/menu/MenuAPISpec.js +++ b/src/api/menu/MenuAPISpec.js @@ -1,5 +1,5 @@ /***************************************************************************** - * Open MCT, Copyright (c) 2014-2021, United States Government + * Open MCT, Copyright (c) 2014-2022, United States Government * as represented by the Administrator of the National Aeronautics and Space * Administration. All rights reserved. * @@ -26,29 +26,31 @@ import { createOpenMct, createMouseEvent, resetApplicationState } from '../../ut describe ('The Menu API', () => { let openmct; - let element; + let appHolder; let menuAPI; let actionsArray; - let x; - let y; let result; - let onDestroy; + let menuElement; + + const x = 8; + const y = 16; + + const menuOptions = { + onDestroy: () => { + console.log('default onDestroy'); + } + }; beforeEach((done) => { - const appHolder = document.createElement('div'); + appHolder = document.createElement('div'); appHolder.style.display = 'block'; appHolder.style.width = '1920px'; appHolder.style.height = '1080px'; openmct = createOpenMct(); - element = document.createElement('div'); - element.style.display = 'block'; - element.style.width = '1920px'; - element.style.height = '1080px'; - openmct.on('start', done); - openmct.startHeadless(appHolder); + openmct.startHeadless(); menuAPI = new MenuAPI(openmct); actionsArray = [ @@ -56,7 +58,7 @@ describe ('The Menu API', () => { key: 'test-css-class-1', name: 'Test Action 1', cssClass: 'icon-clock', - description: 'This is a test action', + description: 'This is a test action 1', onItemClicked: () => { result = 'Test Action 1 Invoked'; } @@ -65,149 +67,165 @@ describe ('The Menu API', () => { key: 'test-css-class-2', name: 'Test Action 2', cssClass: 'icon-clock', - description: 'This is a test action', + description: 'This is a test action 2', onItemClicked: () => { result = 'Test Action 2 Invoked'; } } ]; - x = 8; - y = 16; }); afterEach(() => { return resetApplicationState(openmct); }); - describe("showMenu method", () => { - it("creates an instance of Menu when invoked", () => { - menuAPI.showMenu(x, y, actionsArray); - - expect(menuAPI.menuComponent).toBeInstanceOf(Menu); + describe('showMenu method', () => { + beforeAll(() => { + spyOn(menuOptions, 'onDestroy').and.callThrough(); }); - describe("creates a menu component", () => { - let menuComponent; - let vueComponent; + it('creates an instance of Menu when invoked', (done) => { + menuOptions.onDestroy = done; - beforeEach(() => { - onDestroy = jasmine.createSpy('onDestroy'); + menuAPI.showMenu(x, y, actionsArray, menuOptions); - const menuOptions = { - onDestroy - }; + expect(menuAPI.menuComponent).toBeInstanceOf(Menu); + document.body.click(); + }); - menuAPI.showMenu(x, y, actionsArray, menuOptions); - vueComponent = menuAPI.menuComponent.component; - menuComponent = document.querySelector(".c-menu"); + describe('creates a menu component', () => { + it('with all the actions passed in', (done) => { + menuOptions.onDestroy = done; - spyOn(vueComponent, '$destroy'); - }); + menuAPI.showMenu(x, y, actionsArray, menuOptions); + menuElement = document.querySelector('.c-menu'); + expect(menuElement).toBeDefined(); - it("renders a menu component in the expected x and y coordinates", () => { - let boundingClientRect = menuComponent.getBoundingClientRect(); - let left = boundingClientRect.left; - let top = boundingClientRect.top; + const listItems = menuElement.children[0].children; - expect(left).toEqual(x); - expect(top).toEqual(y); + expect(listItems.length).toEqual(actionsArray.length); + document.body.click(); }); - it("with all the actions passed in", () => { - expect(menuComponent).toBeDefined(); + it('with click-able menu items, that will invoke the correct callBack', (done) => { + menuOptions.onDestroy = done; - let listItems = menuComponent.children[0].children; - - expect(listItems.length).toEqual(actionsArray.length); - }); + menuAPI.showMenu(x, y, actionsArray, menuOptions); - it("with click-able menu items, that will invoke the correct callBacks", () => { - let listItem1 = menuComponent.children[0].children[0]; + menuElement = document.querySelector('.c-menu'); + const listItem1 = menuElement.children[0].children[0]; listItem1.click(); - expect(result).toEqual("Test Action 1 Invoked"); + expect(result).toEqual('Test Action 1 Invoked'); }); - it("dismisses the menu when action is clicked on", () => { - let listItem1 = menuComponent.children[0].children[0]; + it('dismisses the menu when action is clicked on', (done) => { + menuOptions.onDestroy = done; + menuAPI.showMenu(x, y, actionsArray, menuOptions); + + menuElement = document.querySelector('.c-menu'); + const listItem1 = menuElement.children[0].children[0]; listItem1.click(); - let menu = document.querySelector('.c-menu'); + menuElement = document.querySelector('.c-menu'); - expect(menu).toBeNull(); + expect(menuElement).toBeNull(); }); - it("invokes the destroy method when menu is dismissed", () => { + it('invokes the destroy method when menu is dismissed', (done) => { + menuOptions.onDestroy = done; + + menuAPI.showMenu(x, y, actionsArray, menuOptions); + + const vueComponent = menuAPI.menuComponent.component; + spyOn(vueComponent, '$destroy'); + document.body.click(); expect(vueComponent.$destroy).toHaveBeenCalled(); }); - it("invokes the onDestroy callback if passed in", () => { - document.body.click(); + it('invokes the onDestroy callback if passed in', (done) => { + let count = 0; + menuOptions.onDestroy = () => { + count++; + expect(count).toEqual(1); + done(); + }; - expect(onDestroy).toHaveBeenCalled(); + menuAPI.showMenu(x, y, actionsArray, menuOptions); + + document.body.click(); }); }); }); - describe("superMenu method", () => { - it("creates a superMenu", () => { - menuAPI.showSuperMenu(x, y, actionsArray); + describe('superMenu method', () => { + it('creates a superMenu', (done) => { + menuOptions.onDestroy = done; - const superMenu = document.querySelector('.c-super-menu__menu'); + menuAPI.showSuperMenu(x, y, actionsArray, menuOptions); + menuElement = document.querySelector('.c-super-menu__menu'); - expect(superMenu).not.toBeNull(); + expect(menuElement).not.toBeNull(); + document.body.click(); }); - it("Mouse over a superMenu shows correct description", (done) => { - menuAPI.showSuperMenu(x, y, actionsArray); + it('Mouse over a superMenu shows correct description', (done) => { + menuOptions.onDestroy = done; + + menuAPI.showSuperMenu(x, y, actionsArray, menuOptions); + menuElement = document.querySelector('.c-super-menu__menu'); - const superMenu = document.querySelector('.c-super-menu__menu'); - const superMenuItem = superMenu.querySelector('li'); + const superMenuItem = menuElement.querySelector('li'); const mouseOverEvent = createMouseEvent('mouseover'); superMenuItem.dispatchEvent(mouseOverEvent); const itemDescription = document.querySelector('.l-item-description__description'); - setTimeout(() => { + menuAPI.menuComponent.component.$nextTick(() => { + expect(menuElement).not.toBeNull(); expect(itemDescription.innerText).toEqual(actionsArray[0].description); - expect(superMenu).not.toBeNull(); - done(); - }, 300); + + document.body.click(); + }); }); }); - describe("Menu Placements", () => { - it("default menu position BOTTOM_RIGHT", () => { - menuAPI.showMenu(x, y, actionsArray); + describe('Menu Placements', () => { + it('default menu position BOTTOM_RIGHT', (done) => { + menuOptions.onDestroy = done; - const menu = document.querySelector('.c-menu'); + menuAPI.showMenu(x, y, actionsArray, menuOptions); + menuElement = document.querySelector('.c-menu'); - const boundingClientRect = menu.getBoundingClientRect(); + const boundingClientRect = menuElement.getBoundingClientRect(); const left = boundingClientRect.left; const top = boundingClientRect.top; expect(left).toEqual(x); expect(top).toEqual(y); + + document.body.click(); }); - it("menu position BOTTOM_RIGHT", () => { - const menuOptions = { - placement: openmct.menus.menuPlacement.BOTTOM_RIGHT - }; + it('menu position BOTTOM_RIGHT', (done) => { + menuOptions.onDestroy = done; + menuOptions.placement = openmct.menus.menuPlacement.BOTTOM_RIGHT; menuAPI.showMenu(x, y, actionsArray, menuOptions); + menuElement = document.querySelector('.c-menu'); - const menu = document.querySelector('.c-menu'); - const boundingClientRect = menu.getBoundingClientRect(); + const boundingClientRect = menuElement.getBoundingClientRect(); const left = boundingClientRect.left; const top = boundingClientRect.top; expect(left).toEqual(x); expect(top).toEqual(y); + + document.body.click(); }); }); }); |