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