3350f3fb11
Async tests should use in integrations tests. Acceptance tests are using Mirage and can't use since we can't know the number of assertions.
103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
import { find, render, settled } from '@ember/test-helpers';
|
|
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
|
|
import sinon from 'sinon';
|
|
import { create } from 'ember-cli-page-object';
|
|
import togglePageObject from 'nomad-ui/tests/pages/components/toggle';
|
|
|
|
const Toggle = create(togglePageObject());
|
|
|
|
module('Integration | Component | toggle', function (hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
const commonProperties = () => ({
|
|
isActive: false,
|
|
isDisabled: false,
|
|
label: 'Label',
|
|
onToggle: sinon.spy(),
|
|
});
|
|
|
|
const commonTemplate = hbs`
|
|
<Toggle
|
|
@isActive={{isActive}}
|
|
@isDisabled={{isDisabled}}
|
|
@onToggle={{onToggle}}>
|
|
{{label}}
|
|
</Toggle>
|
|
`;
|
|
|
|
test('presents as a label with an inner checkbox and display span, and text', async function (assert) {
|
|
assert.expect(7);
|
|
|
|
const props = commonProperties();
|
|
this.setProperties(props);
|
|
await render(commonTemplate);
|
|
|
|
assert.equal(Toggle.label, props.label, `Label should be ${props.label}`);
|
|
assert.ok(Toggle.isPresent);
|
|
assert.notOk(Toggle.isActive);
|
|
assert.ok(find('[data-test-toggler]'));
|
|
assert.equal(
|
|
find('[data-test-input]').tagName.toLowerCase(),
|
|
'input',
|
|
'The input is a real HTML input'
|
|
);
|
|
assert.equal(
|
|
find('[data-test-input]').getAttribute('type'),
|
|
'checkbox',
|
|
'The input type is checkbox'
|
|
);
|
|
|
|
await componentA11yAudit(this.element, assert);
|
|
});
|
|
|
|
test('the isActive property dictates the active state and class', async function (assert) {
|
|
assert.expect(5);
|
|
|
|
const props = commonProperties();
|
|
this.setProperties(props);
|
|
await render(commonTemplate);
|
|
|
|
assert.notOk(Toggle.isActive);
|
|
assert.notOk(Toggle.hasActiveClass);
|
|
|
|
this.set('isActive', true);
|
|
await settled();
|
|
|
|
assert.ok(Toggle.isActive);
|
|
assert.ok(Toggle.hasActiveClass);
|
|
|
|
await componentA11yAudit(this.element, assert);
|
|
});
|
|
|
|
test('the isDisabled property dictates the disabled state and class', async function (assert) {
|
|
assert.expect(5);
|
|
|
|
const props = commonProperties();
|
|
this.setProperties(props);
|
|
await render(commonTemplate);
|
|
|
|
assert.notOk(Toggle.isDisabled);
|
|
assert.notOk(Toggle.hasDisabledClass);
|
|
|
|
this.set('isDisabled', true);
|
|
await settled();
|
|
|
|
assert.ok(Toggle.isDisabled);
|
|
assert.ok(Toggle.hasDisabledClass);
|
|
|
|
await componentA11yAudit(this.element, assert);
|
|
});
|
|
|
|
test('toggling the input calls the onToggle action', async function (assert) {
|
|
const props = commonProperties();
|
|
this.setProperties(props);
|
|
await render(commonTemplate);
|
|
|
|
await Toggle.toggle();
|
|
assert.equal(props.onToggle.callCount, 1);
|
|
});
|
|
});
|