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