github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/tests/integration/components/popover-menu-test.js (about) 1 import { click, render } 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 assert.expect(5); 36 37 const props = commonProperties(); 38 this.setProperties(props); 39 await render(commonTemplate); 40 41 assert.ok(PopoverMenu.isPresent); 42 assert.ok(PopoverMenu.labelHasIcon); 43 assert.notOk(PopoverMenu.menu.isOpen); 44 assert.equal(PopoverMenu.label, props.label); 45 await componentA11yAudit(this.element, assert); 46 }); 47 48 test('clicking the trigger button toggles the popover menu', async function (assert) { 49 assert.expect(3); 50 51 const props = commonProperties(); 52 this.setProperties(props); 53 await render(commonTemplate); 54 assert.notOk(PopoverMenu.menu.isOpen); 55 56 await PopoverMenu.toggle(); 57 58 assert.ok(PopoverMenu.menu.isOpen); 59 await componentA11yAudit(this.element, assert); 60 }); 61 62 test('the trigger gets the triggerClass prop assigned as a class', async function (assert) { 63 const specialClass = 'is-special'; 64 const props = commonProperties({ triggerClass: specialClass }); 65 this.setProperties(props); 66 await render(commonTemplate); 67 68 assert.dom('[data-test-popover-trigger]').hasClass('is-special'); 69 }); 70 71 test('pressing DOWN ARROW when the trigger is focused opens the popover menu', async function (assert) { 72 const props = commonProperties(); 73 this.setProperties(props); 74 await render(commonTemplate); 75 assert.notOk(PopoverMenu.menu.isOpen); 76 77 await PopoverMenu.focus(); 78 await PopoverMenu.downArrow(); 79 80 assert.ok(PopoverMenu.menu.isOpen); 81 }); 82 83 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) { 84 const props = commonProperties(); 85 this.setProperties(props); 86 await render(commonTemplate); 87 88 await PopoverMenu.focus(); 89 await PopoverMenu.downArrow(); 90 91 assert.dom('[data-test-popover-trigger]').isFocused(); 92 93 await PopoverMenu.focusNext(); 94 95 assert.dom('#mock-input-for-test').isFocused(); 96 }); 97 98 test('pressing ESC when the popover menu is open closes the menu and returns focus to the trigger button', async function (assert) { 99 const props = commonProperties(); 100 this.setProperties(props); 101 await render(commonTemplate); 102 103 await PopoverMenu.toggle(); 104 assert.ok(PopoverMenu.menu.isOpen); 105 106 await PopoverMenu.esc(); 107 108 assert.notOk(PopoverMenu.menu.isOpen); 109 }); 110 111 test('the ember-basic-dropdown object is yielded as context, including the close action', async function (assert) { 112 const props = commonProperties(); 113 this.setProperties(props); 114 await render(commonTemplate); 115 116 await PopoverMenu.toggle(); 117 assert.ok(PopoverMenu.menu.isOpen); 118 119 await click('#mock-button-for-test'); 120 assert.notOk(PopoverMenu.menu.isOpen); 121 }); 122 });