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