github.com/hernad/nomad@v1.6.112/ui/tests/integration/components/toggle-test.js (about) 1 /** 2 * Copyright (c) HashiCorp, Inc. 3 * SPDX-License-Identifier: MPL-2.0 4 */ 5 6 import { find, render, settled } from '@ember/test-helpers'; 7 import { module, test } from 'qunit'; 8 import { setupRenderingTest } from 'ember-qunit'; 9 import hbs from 'htmlbars-inline-precompile'; 10 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 11 import sinon from 'sinon'; 12 import { create } from 'ember-cli-page-object'; 13 import togglePageObject from 'nomad-ui/tests/pages/components/toggle'; 14 15 const Toggle = create(togglePageObject()); 16 17 module('Integration | Component | toggle', function (hooks) { 18 setupRenderingTest(hooks); 19 20 const commonProperties = () => ({ 21 isActive: false, 22 isDisabled: false, 23 label: 'Label', 24 onToggle: sinon.spy(), 25 }); 26 27 const commonTemplate = hbs` 28 <Toggle 29 @isActive={{isActive}} 30 @isDisabled={{isDisabled}} 31 @onToggle={{onToggle}}> 32 {{label}} 33 </Toggle> 34 `; 35 36 test('presents as a label with an inner checkbox and display span, and text', async function (assert) { 37 assert.expect(7); 38 39 const props = commonProperties(); 40 this.setProperties(props); 41 await render(commonTemplate); 42 43 assert.equal(Toggle.label, props.label, `Label should be ${props.label}`); 44 assert.ok(Toggle.isPresent); 45 assert.notOk(Toggle.isActive); 46 assert.ok(find('[data-test-toggler]')); 47 assert.equal( 48 find('[data-test-input]').tagName.toLowerCase(), 49 'input', 50 'The input is a real HTML input' 51 ); 52 assert.equal( 53 find('[data-test-input]').getAttribute('type'), 54 'checkbox', 55 'The input type is checkbox' 56 ); 57 58 await componentA11yAudit(this.element, assert); 59 }); 60 61 test('the isActive property dictates the active state and class', async function (assert) { 62 assert.expect(5); 63 64 const props = commonProperties(); 65 this.setProperties(props); 66 await render(commonTemplate); 67 68 assert.notOk(Toggle.isActive); 69 assert.notOk(Toggle.hasActiveClass); 70 71 this.set('isActive', true); 72 await settled(); 73 74 assert.ok(Toggle.isActive); 75 assert.ok(Toggle.hasActiveClass); 76 77 await componentA11yAudit(this.element, assert); 78 }); 79 80 test('the isDisabled property dictates the disabled state and class', async function (assert) { 81 assert.expect(5); 82 83 const props = commonProperties(); 84 this.setProperties(props); 85 await render(commonTemplate); 86 87 assert.notOk(Toggle.isDisabled); 88 assert.notOk(Toggle.hasDisabledClass); 89 90 this.set('isDisabled', true); 91 await settled(); 92 93 assert.ok(Toggle.isDisabled); 94 assert.ok(Toggle.hasDisabledClass); 95 96 await componentA11yAudit(this.element, assert); 97 }); 98 99 test('toggling the input calls the onToggle action', async function (assert) { 100 const props = commonProperties(); 101 this.setProperties(props); 102 await render(commonTemplate); 103 104 await Toggle.toggle(); 105 assert.equal(props.onToggle.callCount, 1); 106 }); 107 });