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  });