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