github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/toggle-test.js (about) 1 import { find, 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 const props = commonProperties(); 33 this.setProperties(props); 34 await this.render(commonTemplate); 35 36 assert.equal(Toggle.label, props.label, `Label should be ${props.label}`); 37 assert.ok(Toggle.isPresent); 38 assert.notOk(Toggle.isActive); 39 assert.ok(find('[data-test-toggler]')); 40 assert.equal( 41 find('[data-test-input]').tagName.toLowerCase(), 42 'input', 43 'The input is a real HTML input' 44 ); 45 assert.equal( 46 find('[data-test-input]').getAttribute('type'), 47 'checkbox', 48 'The input type is checkbox' 49 ); 50 51 await componentA11yAudit(this.element, assert); 52 }); 53 54 test('the isActive property dictates the active state and class', async function(assert) { 55 const props = commonProperties(); 56 this.setProperties(props); 57 await this.render(commonTemplate); 58 59 assert.notOk(Toggle.isActive); 60 assert.notOk(Toggle.hasActiveClass); 61 62 this.set('isActive', true); 63 await settled(); 64 65 assert.ok(Toggle.isActive); 66 assert.ok(Toggle.hasActiveClass); 67 68 await componentA11yAudit(this.element, assert); 69 }); 70 71 test('the isDisabled property dictates the disabled state and class', async function(assert) { 72 const props = commonProperties(); 73 this.setProperties(props); 74 await this.render(commonTemplate); 75 76 assert.notOk(Toggle.isDisabled); 77 assert.notOk(Toggle.hasDisabledClass); 78 79 this.set('isDisabled', true); 80 await settled(); 81 82 assert.ok(Toggle.isDisabled); 83 assert.ok(Toggle.hasDisabledClass); 84 85 await componentA11yAudit(this.element, assert); 86 }); 87 88 test('toggling the input calls the onToggle action', async function(assert) { 89 const props = commonProperties(); 90 this.setProperties(props); 91 await this.render(commonTemplate); 92 93 await Toggle.toggle(); 94 assert.equal(props.onToggle.callCount, 1); 95 }); 96 });