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