github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/tests/integration/components/single-select-dropdown-test.js (about)

     1  import { findAll, find, render } from '@ember/test-helpers';
     2  import { module, test } from 'qunit';
     3  import { setupRenderingTest } from 'ember-qunit';
     4  import {
     5    selectChoose,
     6    clickTrigger,
     7  } from 'ember-power-select/test-support/helpers';
     8  import sinon from 'sinon';
     9  import hbs from 'htmlbars-inline-precompile';
    10  import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
    11  
    12  module('Integration | Component | single-select dropdown', function (hooks) {
    13    setupRenderingTest(hooks);
    14  
    15    const commonProperties = () => ({
    16      label: 'Type',
    17      selection: 'nomad',
    18      options: [
    19        { key: 'consul', label: 'Consul' },
    20        { key: 'nomad', label: 'Nomad' },
    21        { key: 'terraform', label: 'Terraform' },
    22        { key: 'packer', label: 'Packer' },
    23        { key: 'vagrant', label: 'Vagrant' },
    24        { key: 'vault', label: 'Vault' },
    25      ],
    26      onSelect: sinon.spy(),
    27    });
    28  
    29    const commonTemplate = hbs`
    30      <SingleSelectDropdown
    31        @label={{this.label}}
    32        @options={{this.options}}
    33        @selection={{this.selection}}
    34        @onSelect={{this.onSelect}} />
    35    `;
    36  
    37    test('component shows label and selection in the trigger', async function (assert) {
    38      assert.expect(4);
    39  
    40      const props = commonProperties();
    41      this.setProperties(props);
    42      await render(commonTemplate);
    43  
    44      assert.ok(
    45        find('.ember-power-select-trigger').textContent.includes(props.label)
    46      );
    47      assert.ok(
    48        find('.ember-power-select-trigger').textContent.includes(
    49          props.options.findBy('key', props.selection).label
    50        )
    51      );
    52      assert.notOk(find('[data-test-dropdown-options]'));
    53  
    54      await componentA11yAudit(this.element, assert);
    55    });
    56  
    57    test('all options are shown in the dropdown', async function (assert) {
    58      assert.expect(7);
    59  
    60      const props = commonProperties();
    61      this.setProperties(props);
    62      await render(commonTemplate);
    63  
    64      await clickTrigger('[data-test-single-select-dropdown]');
    65  
    66      assert.equal(
    67        findAll('.ember-power-select-option').length,
    68        props.options.length,
    69        'All options are shown'
    70      );
    71      findAll('.ember-power-select-option').forEach((optionEl, index) => {
    72        assert.equal(
    73          optionEl.querySelector('.dropdown-label').textContent.trim(),
    74          props.options[index].label
    75        );
    76      });
    77    });
    78  
    79    test('selecting an option calls `onSelect` with the key for the selected option', async function (assert) {
    80      const props = commonProperties();
    81      this.setProperties(props);
    82      await render(commonTemplate);
    83  
    84      const option = props.options.findBy('key', 'terraform');
    85      await selectChoose('[data-test-single-select-dropdown]', option.label);
    86  
    87      assert.ok(props.onSelect.calledWith(option.key));
    88    });
    89  });