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