github.com/aminovpavel/nomad@v0.11.8/ui/tests/integration/popover-menu-test.js (about) 1 import { click } from '@ember/test-helpers'; 2 import { module, test } from 'qunit'; 3 import { setupRenderingTest } from 'ember-qunit'; 4 import hbs from 'htmlbars-inline-precompile'; 5 import { create } from 'ember-cli-page-object'; 6 import popoverMenuPageObject from 'nomad-ui/tests/pages/components/popover-menu'; 7 8 const PopoverMenu = create(popoverMenuPageObject()); 9 10 module('Integration | Component | popover-menu', function(hooks) { 11 setupRenderingTest(hooks); 12 13 const commonProperties = overrides => 14 Object.assign( 15 { 16 triggerClass: '', 17 label: 'Trigger Label', 18 }, 19 overrides 20 ); 21 22 const commonTemplate = hbs` 23 {{#popover-menu 24 isOpen=isOpen 25 label=label 26 triggerClass=triggerClass as |m|}} 27 <h1>This is a heading</h1> 28 <label>This is an input: <input id="mock-input-for-test" type="text" /></label> 29 <button id="mock-button-for-test" type="button" onclick={{action m.actions.close}}>Close Button</button> 30 {{/popover-menu}} 31 `; 32 33 test('presents as a button with a chevron-down icon', async function(assert) { 34 const props = commonProperties(); 35 this.setProperties(props); 36 await this.render(commonTemplate); 37 38 assert.ok(PopoverMenu.isPresent); 39 assert.ok(PopoverMenu.labelHasIcon); 40 assert.notOk(PopoverMenu.menu.isOpen); 41 assert.equal(PopoverMenu.label, props.label); 42 }); 43 44 test('clicking the trigger button toggles the popover menu', async function(assert) { 45 const props = commonProperties(); 46 this.setProperties(props); 47 await this.render(commonTemplate); 48 assert.notOk(PopoverMenu.menu.isOpen); 49 50 await PopoverMenu.toggle(); 51 52 assert.ok(PopoverMenu.menu.isOpen); 53 }); 54 55 test('the trigger gets the triggerClass prop assigned as a class', async function(assert) { 56 const specialClass = 'is-special'; 57 const props = commonProperties({ triggerClass: specialClass }); 58 this.setProperties(props); 59 await this.render(commonTemplate); 60 61 assert.dom('[data-test-popover-trigger]').hasClass('is-special'); 62 }); 63 64 test('pressing DOWN ARROW when the trigger is focused opens the popover menu', async function(assert) { 65 const props = commonProperties(); 66 this.setProperties(props); 67 await this.render(commonTemplate); 68 assert.notOk(PopoverMenu.menu.isOpen); 69 70 await PopoverMenu.focus(); 71 await PopoverMenu.downArrow(); 72 73 assert.ok(PopoverMenu.menu.isOpen); 74 }); 75 76 test('pressing TAB when the trigger button is focused and the menu is open focuses the first focusable element in the popover menu', async function(assert) { 77 const props = commonProperties(); 78 this.setProperties(props); 79 await this.render(commonTemplate); 80 81 await PopoverMenu.focus(); 82 await PopoverMenu.downArrow(); 83 84 assert.dom('[data-test-popover-trigger]').isFocused(); 85 86 await PopoverMenu.focusNext(); 87 88 assert.dom('#mock-input-for-test').isFocused(); 89 }); 90 91 test('pressing ESC when the popover menu is open closes the menu and returns focus to the trigger button', async function(assert) { 92 const props = commonProperties(); 93 this.setProperties(props); 94 await this.render(commonTemplate); 95 96 await PopoverMenu.toggle(); 97 assert.ok(PopoverMenu.menu.isOpen); 98 99 await PopoverMenu.esc(); 100 101 assert.notOk(PopoverMenu.menu.isOpen); 102 }); 103 104 test('the ember-basic-dropdown object is yielded as context, including the close action', async function(assert) { 105 const props = commonProperties(); 106 this.setProperties(props); 107 await this.render(commonTemplate); 108 109 await PopoverMenu.toggle(); 110 assert.ok(PopoverMenu.menu.isOpen); 111 112 await click('#mock-button-for-test'); 113 assert.notOk(PopoverMenu.menu.isOpen); 114 }); 115 });