github.com/hernad/nomad@v1.6.112/ui/tests/integration/components/single-select-dropdown-test.js (about)

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