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