70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
|
import { module, test } from 'qunit';
|
||
|
|
import { setupRenderingTest } from 'ember-qunit';
|
||
|
|
import { click, render } from '@ember/test-helpers';
|
||
|
|
import hbs from 'htmlbars-inline-precompile';
|
||
|
|
|
||
|
|
module('Integration | Component | radio-button', function (hooks) {
|
||
|
|
setupRenderingTest(hooks);
|
||
|
|
|
||
|
|
test('it should spread attributes on input element', async function (assert) {
|
||
|
|
await render(
|
||
|
|
hbs(`
|
||
|
|
<RadioButton
|
||
|
|
id="foo"
|
||
|
|
name="bar"
|
||
|
|
class="radio"
|
||
|
|
@onChange={{fn (mut this.groupValue)}}
|
||
|
|
/>
|
||
|
|
`)
|
||
|
|
);
|
||
|
|
assert.dom('input').hasAttribute('id', 'foo', 'id set on input element');
|
||
|
|
assert.dom('input').hasAttribute('name', 'bar', 'name set on input element');
|
||
|
|
assert.dom('input').hasClass('radio', 'class set on input element');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('it should be checked when value and groupValue are equal', async function (assert) {
|
||
|
|
await render(
|
||
|
|
hbs(`
|
||
|
|
<RadioButton
|
||
|
|
@value="foo"
|
||
|
|
@groupValue="foo"
|
||
|
|
@onChange={{fn (mut this.groupValue)}}
|
||
|
|
/>
|
||
|
|
`)
|
||
|
|
);
|
||
|
|
assert.true(
|
||
|
|
this.element.querySelector('input').checked,
|
||
|
|
'input is checked when value matches groupValue'
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('it should send onChange action and mark correct radio as checked', async function (assert) {
|
||
|
|
await render(
|
||
|
|
hbs(`
|
||
|
|
<RadioButton
|
||
|
|
@value="foo"
|
||
|
|
@groupValue={{this.groupValue}}
|
||
|
|
@onChange={{fn (mut this.groupValue)}}
|
||
|
|
data-test-radio-1
|
||
|
|
/>
|
||
|
|
<RadioButton
|
||
|
|
@value="bar"
|
||
|
|
@groupValue={{this.groupValue}}
|
||
|
|
@onChange={{fn (mut this.groupValue)}}
|
||
|
|
data-test-radio-2
|
||
|
|
/>
|
||
|
|
`)
|
||
|
|
);
|
||
|
|
const radio1 = this.element.querySelector('[data-test-radio-1]');
|
||
|
|
const radio2 = this.element.querySelector('[data-test-radio-2]');
|
||
|
|
assert.false(radio1.checked, 'radio1 is unchecked when groupValue is undefined');
|
||
|
|
assert.false(radio2.checked, 'radio2 is unchecked when groupValue is undefined');
|
||
|
|
await click('[data-test-radio-1]');
|
||
|
|
assert.true(radio1.checked, 'radio1 is checked');
|
||
|
|
assert.false(radio2.checked, 'radio2 is unchecked');
|
||
|
|
await click('[data-test-radio-2]');
|
||
|
|
assert.false(radio1.checked, 'radio1 is unchecked');
|
||
|
|
assert.true(radio2.checked, 'radio2 is checked');
|
||
|
|
});
|
||
|
|
});
|