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