2022-07-12 23:17:59 +03:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright 2019 Google LLC
|
|
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
|
|
*/
|
|
|
|
|
|
|
|
import {html} from 'lit';
|
|
|
|
|
2022-10-03 21:57:50 +03:00
|
|
|
import {Environment} from '../testing/environment.js';
|
2023-01-05 02:00:49 +03:00
|
|
|
import {createTokenTests} from '../testing/tokens.js';
|
2022-10-03 21:57:50 +03:00
|
|
|
|
2022-08-24 21:00:50 +03:00
|
|
|
import {RadioHarness} from './harness.js';
|
|
|
|
import {MdRadio} from './radio.js';
|
2022-07-12 23:17:59 +03:00
|
|
|
|
|
|
|
const defaultRadio = html`<md-radio></md-radio>`;
|
|
|
|
|
|
|
|
const radioGroup = html`
|
2022-12-21 22:46:47 +03:00
|
|
|
<md-radio id="a1" name="a"></md-radio>
|
|
|
|
<md-radio id="a2" name="a"></md-radio>
|
|
|
|
<md-radio id="b1" name="b"></md-radio>
|
|
|
|
`;
|
2022-07-12 23:17:59 +03:00
|
|
|
|
|
|
|
const radioGroupDisabled = html`
|
2022-12-21 22:46:47 +03:00
|
|
|
<md-radio id="a1" name="a" disabled></md-radio>
|
|
|
|
<md-radio id="a2" name="a" disabled checked></md-radio>
|
|
|
|
`;
|
2022-07-12 23:17:59 +03:00
|
|
|
|
|
|
|
const radioGroupPreSelected = html`
|
2022-12-21 22:46:47 +03:00
|
|
|
<md-radio id="a1" name="a"></md-radio>
|
|
|
|
<md-radio id="a2" name="a" checked></md-radio>
|
|
|
|
<md-radio id="a3" name="a"></md-radio>
|
|
|
|
<md-radio id="b1" name="b"></md-radio>
|
|
|
|
`;
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2023-01-05 02:00:49 +03:00
|
|
|
describe('<md-radio>', () => {
|
2022-10-03 21:57:50 +03:00
|
|
|
const env = new Environment();
|
|
|
|
|
2022-12-21 04:19:18 +03:00
|
|
|
// Note, this would be better in the harness, but waiting in the test setup
|
|
|
|
// can be flakey without access to the test `env`.
|
|
|
|
async function simulateKeyDown(element: HTMLElement, key: string) {
|
|
|
|
const event = new KeyboardEvent('keydown', {key, bubbles: true});
|
|
|
|
element.dispatchEvent(event);
|
|
|
|
// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
|
|
|
|
// Remove delay when issue addressed.
|
|
|
|
await env.waitForStability();
|
|
|
|
}
|
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
async function setupTest(template = defaultRadio) {
|
|
|
|
const root = env.render(template);
|
|
|
|
await env.waitForStability();
|
|
|
|
const radios = Array.from(root.querySelectorAll('md-radio'));
|
|
|
|
const harnesses = radios.map(radio => new RadioHarness(radio));
|
|
|
|
return {harnesses, root};
|
|
|
|
}
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2023-01-05 02:00:49 +03:00
|
|
|
describe('.styles', () => {
|
|
|
|
createTokenTests(MdRadio.styles);
|
|
|
|
});
|
|
|
|
|
2022-07-12 23:17:59 +03:00
|
|
|
describe('basic', () => {
|
|
|
|
it('initializes as an md-radio', async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses} = await setupTest();
|
|
|
|
expect(harnesses[0].element).toBeInstanceOf(MdRadio);
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('clicking a radio should select it', async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses} = await setupTest(radioGroup);
|
|
|
|
const unselected = harnesses[1];
|
|
|
|
expect(unselected.element.checked)
|
|
|
|
.withContext('unselected checked')
|
|
|
|
.toBeFalse();
|
|
|
|
|
|
|
|
await unselected.clickWithMouse();
|
|
|
|
expect(unselected.element.checked)
|
|
|
|
.withContext('after clicking checked')
|
|
|
|
.toBeTrue();
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('clicking a radio should unselect other radio which is already selected',
|
|
|
|
async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses} = await setupTest(radioGroupPreSelected);
|
|
|
|
const [, a2, a3] = harnesses;
|
|
|
|
expect(a2.element.checked).withContext('already checked').toBeTrue();
|
|
|
|
|
|
|
|
await a3.clickWithMouse();
|
|
|
|
expect(a3.element.checked).withContext('new radio checked').toBeTrue();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('previous radio checked')
|
|
|
|
.toBeFalse();
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('disabled radio should not be selected when clicked', async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses} = await setupTest(radioGroupDisabled);
|
|
|
|
const [a1, a2] = harnesses;
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
expect(a1.element.checked).withContext('unchecked radio').toBeFalse();
|
|
|
|
expect(a2.element.checked).withContext('checked radio').toBeTrue();
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
await a1.clickWithMouse();
|
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('still unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
|
|
|
|
await a2.clickWithMouse();
|
|
|
|
expect(a2.element.checked).withContext('still checked radio').toBeTrue();
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('events', () => {
|
|
|
|
it('Should trigger change event when a radio is selected', async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses, root} = await setupTest(radioGroupPreSelected);
|
2022-07-12 23:17:59 +03:00
|
|
|
const changeHandler = jasmine.createSpy('changeHandler');
|
2022-10-03 21:57:50 +03:00
|
|
|
root.addEventListener('change', changeHandler);
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
const a3 = harnesses[2];
|
|
|
|
await a3.clickWithMouse();
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
expect(a3.element.checked)
|
|
|
|
.withContext('clicked radio checked')
|
|
|
|
.toBeTrue();
|
2022-07-12 23:17:59 +03:00
|
|
|
expect(changeHandler).toHaveBeenCalledTimes(1);
|
|
|
|
expect(changeHandler).toHaveBeenCalledWith(jasmine.any(Event));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('navigation', () => {
|
|
|
|
it('Using arrow right should select the next radio button', async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses} = await setupTest(radioGroupPreSelected);
|
|
|
|
const [, a2, a3] = harnesses;
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('default checked radio')
|
|
|
|
.toBeTrue();
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
await simulateKeyDown(a2.element, 'ArrowRight');
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
expect(a3.element.checked).withContext('next radio checked').toBeTrue();
|
|
|
|
expect(a2.element.checked).withContext('prev radio checked').toBeFalse();
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('Using arrow right on the last radio should select the first radio in that group',
|
|
|
|
async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses} = await setupTest(radioGroupPreSelected);
|
|
|
|
const [a1, a2, a3, b1] = harnesses;
|
|
|
|
|
|
|
|
expect(a2.element.checked).toBeTrue();
|
|
|
|
|
|
|
|
await simulateKeyDown(a2.element, 'ArrowRight');
|
|
|
|
await simulateKeyDown(a3.element, 'ArrowRight');
|
|
|
|
|
|
|
|
expect(a3.element.checked)
|
|
|
|
.withContext('last radio checked')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('first radio checked')
|
|
|
|
.toBeTrue();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated radio checked')
|
|
|
|
.toBeFalse();
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('manages selection groups', () => {
|
|
|
|
it('synchronously', async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses} = await setupTest(radioGroup);
|
|
|
|
const [a1, a2, b1] = harnesses;
|
|
|
|
|
|
|
|
expect(a1.element.checked).withContext('initially unchecked').toBeFalse();
|
|
|
|
expect(a2.element.checked).withContext('initially unchecked').toBeFalse();
|
|
|
|
expect(b1.element.checked).withContext('initially unchecked').toBeFalse();
|
|
|
|
|
|
|
|
// Should uncheck previously checked radio
|
|
|
|
a2.element.checked = true;
|
|
|
|
a1.element.checked = true;
|
|
|
|
|
|
|
|
expect(a1.element.checked).withContext('last radio checked').toBeTrue();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('unchecked by last radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated radio unchecked')
|
|
|
|
.toBeFalse();
|
|
|
|
|
|
|
|
// Should re-check radio
|
|
|
|
a2.element.checked = true;
|
|
|
|
a1.element.checked = true;
|
|
|
|
a2.element.checked = true;
|
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('unchecked by second radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(a2.element.checked).withContext('last radio checked').toBeTrue();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated radio unchecked')
|
|
|
|
.toBeFalse();
|
|
|
|
|
|
|
|
// Should ignore unrelated radios
|
|
|
|
a1.element.checked = true;
|
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('related checked radio')
|
|
|
|
.toBeTrue();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('related unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
|
|
|
|
b1.element.checked = true;
|
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('related checked radio')
|
|
|
|
.toBeTrue();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('related unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated checked radio')
|
|
|
|
.toBeTrue();
|
|
|
|
|
|
|
|
a1.element.checked = false;
|
|
|
|
b1.element.checked = false;
|
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('related unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('related unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated unchecked radio')
|
|
|
|
.toBeFalse();
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('after updates settle', async () => {
|
2022-12-21 22:46:47 +03:00
|
|
|
const {harnesses} = await setupTest(radioGroup);
|
|
|
|
const [a1, a2, b1] = harnesses;
|
|
|
|
const allUpdatesComplete = () => Promise.all(
|
|
|
|
harnesses.map((harness) => harness.element.updateComplete));
|
2022-07-12 23:17:59 +03:00
|
|
|
|
|
|
|
await allUpdatesComplete();
|
2022-12-21 22:46:47 +03:00
|
|
|
expect(a1.element.checked).withContext('initially unchecked').toBeFalse();
|
|
|
|
expect(a2.element.checked).withContext('initially unchecked').toBeFalse();
|
|
|
|
expect(b1.element.checked).withContext('initially unchecked').toBeFalse();
|
2022-07-12 23:17:59 +03:00
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
// Should uncheck previously checked radio
|
|
|
|
a2.element.checked = true;
|
|
|
|
a1.element.checked = true;
|
2022-07-12 23:17:59 +03:00
|
|
|
await allUpdatesComplete();
|
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
expect(a1.element.checked).withContext('last radio checked').toBeTrue();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('unchecked by last radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated radio unchecked')
|
|
|
|
.toBeFalse();
|
|
|
|
|
|
|
|
// Should re-check radio
|
|
|
|
a2.element.checked = true;
|
|
|
|
a1.element.checked = true;
|
|
|
|
a2.element.checked = true;
|
2022-07-12 23:17:59 +03:00
|
|
|
await allUpdatesComplete();
|
2022-12-21 22:46:47 +03:00
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('unchecked by second radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(a2.element.checked).withContext('last radio checked').toBeTrue();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated radio unchecked')
|
|
|
|
.toBeFalse();
|
|
|
|
|
|
|
|
// Should ignore unrelated radios
|
|
|
|
a1.element.checked = true;
|
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('related checked radio')
|
|
|
|
.toBeTrue();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('related unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
|
|
|
|
b1.element.checked = true;
|
2022-07-12 23:17:59 +03:00
|
|
|
await allUpdatesComplete();
|
2022-12-21 22:46:47 +03:00
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('related checked radio')
|
|
|
|
.toBeTrue();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('related unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated checked radio')
|
|
|
|
.toBeTrue();
|
|
|
|
|
|
|
|
a1.element.checked = false;
|
|
|
|
b1.element.checked = false;
|
2022-07-12 23:17:59 +03:00
|
|
|
await allUpdatesComplete();
|
2022-12-21 22:46:47 +03:00
|
|
|
expect(a1.element.checked)
|
|
|
|
.withContext('related unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(a2.element.checked)
|
|
|
|
.withContext('related unchecked radio')
|
|
|
|
.toBeFalse();
|
|
|
|
expect(b1.element.checked)
|
|
|
|
.withContext('unrelated unchecked radio')
|
|
|
|
.toBeFalse();
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('when checked before connected', async () => {
|
2022-10-03 21:57:50 +03:00
|
|
|
const root = env.render(html`<main></main>`);
|
|
|
|
const container = root.querySelector('main')!;
|
2022-07-12 23:17:59 +03:00
|
|
|
|
|
|
|
const r1 = document.createElement('md-radio');
|
2022-12-21 22:46:47 +03:00
|
|
|
r1.setAttribute('name', 'a');
|
2022-07-12 23:17:59 +03:00
|
|
|
const r2 = document.createElement('md-radio');
|
2022-12-21 22:46:47 +03:00
|
|
|
r2.setAttribute('name', 'a');
|
2022-07-12 23:17:59 +03:00
|
|
|
const r3 = document.createElement('md-radio');
|
2022-12-21 22:46:47 +03:00
|
|
|
r3.setAttribute('name', 'a');
|
2022-07-12 23:17:59 +03:00
|
|
|
|
|
|
|
// r1 and r2 should both be checked, because even though they have the
|
|
|
|
// same name, they aren't yet connected to a root. Groups are scoped to
|
|
|
|
// roots, and we can't know which root a radio belongs to until it is
|
|
|
|
// connected to one. This matches native <input type="radio"> behavior.
|
|
|
|
r1.checked = true;
|
|
|
|
r2.checked = true;
|
|
|
|
expect(r1.checked).toBeTrue();
|
|
|
|
expect(r2.checked).toBeTrue();
|
|
|
|
expect(r3.checked).toBeFalse();
|
|
|
|
|
|
|
|
// Connecting r1 shouldn't change anything, since it's the only one in the
|
|
|
|
// group.
|
|
|
|
container.appendChild(r1);
|
|
|
|
expect(r1.checked).toBeTrue();
|
|
|
|
expect(r2.checked).toBeTrue();
|
|
|
|
expect(r3.checked).toBeFalse();
|
|
|
|
|
2022-12-21 22:46:47 +03:00
|
|
|
// Appending r2 should uncheck r1, because when a new checked radio is
|
2022-07-12 23:17:59 +03:00
|
|
|
// connected, it wins (this matches native input behavior).
|
|
|
|
container.appendChild(r2);
|
|
|
|
expect(r1.checked).toBeFalse();
|
|
|
|
expect(r2.checked).toBeTrue();
|
|
|
|
expect(r3.checked).toBeFalse();
|
|
|
|
|
|
|
|
// Appending r3 shouldn't change anything, because it's not checked.
|
|
|
|
container.appendChild(r3);
|
|
|
|
expect(r1.checked).toBeFalse();
|
|
|
|
expect(r2.checked).toBeTrue();
|
|
|
|
expect(r3.checked).toBeFalse();
|
|
|
|
|
|
|
|
// Checking r3 should uncheck r2 because it's now in the same group.
|
|
|
|
r3.checked = true;
|
|
|
|
expect(r1.checked).toBeFalse();
|
|
|
|
expect(r2.checked).toBeFalse();
|
|
|
|
expect(r3.checked).toBeTrue();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('in a lit repeat', async () => {
|
|
|
|
const values = ['a1', 'a2'];
|
2022-12-21 22:46:47 +03:00
|
|
|
const repeated = values.map(
|
|
|
|
(value) => html`<md-radio value=${value} name="a"></md-radio>`);
|
|
|
|
const root = env.render(html`${repeated}`);
|
2022-10-03 21:57:50 +03:00
|
|
|
await env.waitForStability();
|
|
|
|
const [a1, a2] = root.querySelectorAll('md-radio');
|
2022-07-12 23:17:59 +03:00
|
|
|
|
|
|
|
expect(a1.checked).toBeFalse();
|
|
|
|
expect(a2.checked).toBeFalse();
|
|
|
|
expect(a1.value).toEqual(values[0]);
|
|
|
|
expect(a2.value).toEqual(values[1]);
|
|
|
|
|
|
|
|
a1.checked = true;
|
|
|
|
expect(a1.checked).toBeTrue();
|
|
|
|
expect(a2.checked).toBeFalse();
|
|
|
|
|
|
|
|
a2.checked = true;
|
|
|
|
expect(a1.checked).toBeFalse();
|
|
|
|
expect(a2.checked).toBeTrue();
|
|
|
|
|
|
|
|
a2.checked = false;
|
|
|
|
expect(a1.checked).toBeFalse();
|
|
|
|
expect(a2.checked).toBeFalse();
|
|
|
|
});
|
|
|
|
});
|
2022-12-21 04:19:18 +03:00
|
|
|
|
|
|
|
describe('form submission', () => {
|
|
|
|
async function setupFormTest() {
|
|
|
|
const root = env.render(html`
|
|
|
|
<form>
|
|
|
|
<md-radio id="first" name="a" value="first"></md-radio>
|
|
|
|
<md-radio id="disabled" name="a" value="disabled" disabled></md-radio>
|
|
|
|
<md-radio id="unNamed" value="unnamed"></md-radio>
|
|
|
|
<md-radio id="ownGroup" name="b" value="ownGroup"></md-radio>
|
|
|
|
<md-radio id="last" name="a" value="last"></md-radio>
|
|
|
|
</form>`);
|
|
|
|
await env.waitForStability();
|
|
|
|
const harnesses = new Map<string, RadioHarness>();
|
|
|
|
Array.from(root.querySelectorAll('md-radio')).forEach((el: MdRadio) => {
|
|
|
|
harnesses.set(el.id, new RadioHarness(el));
|
|
|
|
});
|
|
|
|
return harnesses;
|
|
|
|
}
|
|
|
|
|
|
|
|
it('does not submit if not checked', async () => {
|
|
|
|
const harness = (await setupFormTest()).get('first')!;
|
|
|
|
const formData = await harness.submitForm();
|
|
|
|
const keys = Array.from(formData.keys());
|
|
|
|
expect(keys.length).toEqual(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not submit if disabled', async () => {
|
|
|
|
const harness = (await setupFormTest()).get('disabled')!;
|
|
|
|
expect(harness.element.disabled).toBeTrue();
|
|
|
|
harness.element.checked = true;
|
|
|
|
const formData = await harness.submitForm();
|
|
|
|
const keys = Array.from(formData.keys());
|
|
|
|
expect(keys.length).toEqual(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not submit if name is not provided', async () => {
|
|
|
|
const harness = (await setupFormTest()).get('unNamed')!;
|
|
|
|
expect(harness.element.name).toBe('');
|
|
|
|
const formData = await harness.submitForm();
|
|
|
|
const keys = Array.from(formData.keys());
|
|
|
|
expect(keys.length).toEqual(0);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('submits under correct conditions', async () => {
|
|
|
|
const harness = (await setupFormTest()).get('first')!;
|
|
|
|
harness.element.checked = true;
|
|
|
|
const formData = await harness.submitForm();
|
|
|
|
const {name, value} = harness.element;
|
|
|
|
const keys = Array.from(formData.keys());
|
|
|
|
expect(keys.length).toEqual(1);
|
|
|
|
expect(formData.get(name)).toEqual(value);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('submits changes to group value under correct conditions', async () => {
|
|
|
|
const harnesses = await setupFormTest();
|
|
|
|
const first = harnesses.get('first')!;
|
|
|
|
const last = harnesses.get('last')!;
|
|
|
|
const ownGroup = harnesses.get('ownGroup')!;
|
|
|
|
|
|
|
|
// check first and submit
|
|
|
|
first.element.checked = true;
|
|
|
|
let formData = await first.submitForm();
|
|
|
|
expect(Array.from(formData.keys()).length).toEqual(1);
|
|
|
|
expect(formData.get(first.element.name)).toEqual(first.element.value);
|
|
|
|
|
|
|
|
// check last and submit
|
|
|
|
last.element.checked = true;
|
|
|
|
formData = await last.submitForm();
|
|
|
|
expect(Array.from(formData.keys()).length).toEqual(1);
|
|
|
|
expect(formData.get(last.element.name)).toEqual(last.element.value);
|
|
|
|
|
|
|
|
// check ownGroup and submit
|
|
|
|
ownGroup.element.checked = true;
|
|
|
|
formData = await ownGroup.submitForm();
|
|
|
|
expect(Array.from(formData.keys()).length).toEqual(2);
|
|
|
|
expect(formData.get(last.element.name)).toEqual(last.element.value);
|
|
|
|
expect(formData.get(ownGroup.element.name))
|
|
|
|
.toEqual(ownGroup.element.value);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('label activation', () => {
|
|
|
|
async function setupLabelTest() {
|
|
|
|
const root = env.render(html`
|
|
|
|
<label> <md-radio name="a"></md-radio></label>
|
|
|
|
<label> <md-radio name="a"></md-radio></label>
|
|
|
|
`);
|
|
|
|
await env.waitForStability();
|
|
|
|
// [[label, radio]]
|
|
|
|
return Array.from(root.querySelectorAll('label'))
|
|
|
|
.map(el => ([el, el.firstElementChild as MdRadio] as const));
|
|
|
|
}
|
|
|
|
|
|
|
|
it('toggles when label is clicked', async () => {
|
|
|
|
const [[label1, radio1], [label2, radio2], ] = await setupLabelTest();
|
|
|
|
|
|
|
|
label1.click();
|
|
|
|
await env.waitForStability();
|
|
|
|
expect(radio1.checked).toBeTrue();
|
|
|
|
expect(radio2.checked).toBeFalse();
|
|
|
|
|
|
|
|
label2.click();
|
|
|
|
await env.waitForStability();
|
|
|
|
expect(radio1.checked).toBeFalse();
|
|
|
|
expect(radio2.checked).toBeTrue();
|
|
|
|
});
|
|
|
|
});
|
2022-07-12 23:17:59 +03:00
|
|
|
});
|