material-web/switch/switch_test.ts
Elizabeth Mitchell 99ec9e25eb fix(switch): pressing enter toggles the switch
PiperOrigin-RevId: 638508692
2024-05-29 21:04:36 -07:00

194 lines
5.7 KiB
TypeScript

/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
// import 'jasmine'; (google3-only)
import {html} from 'lit';
import {Environment} from '../testing/environment.js';
import {createFormTests} from '../testing/forms.js';
import {createTokenTests} from '../testing/tokens.js';
import {SwitchHarness} from './harness.js';
import {MdSwitch} from './switch.js';
describe('<md-switch>', () => {
const env = new Environment();
describe('.styles', () => {
createTokenTests(MdSwitch.styles);
});
describe('forms', () => {
createFormTests({
queryControl: (root) => root.querySelector('md-switch'),
valueTests: [
{
name: 'unnamed',
render: () => html`<md-switch selected></md-switch>`,
assertValue(formData) {
expect(formData)
.withContext('should not add anything to form without a name')
.toHaveSize(0);
},
},
{
name: 'unselected',
render: () => html`<md-switch name="switch"></md-switch>`,
assertValue(formData) {
expect(formData)
.withContext('should not add anything to form when unselected')
.toHaveSize(0);
},
},
{
name: 'selected default value',
render: () => html`<md-switch name="switch" selected></md-switch>`,
assertValue(formData) {
expect(formData.get('switch')).toBe('on');
},
},
{
name: 'selected custom value',
render: () =>
html`<md-switch
name="switch"
selected
value="Custom value"></md-switch>`,
assertValue(formData) {
expect(formData.get('switch')).toBe('Custom value');
},
},
{
name: 'disabled',
render: () =>
html`<md-switch name="switch" selected disabled></md-switch>`,
assertValue(formData) {
expect(formData)
.withContext('should not add anything to form when disabled')
.toHaveSize(0);
},
},
],
resetTests: [
{
name: 'reset to unselected',
render: () => html`<md-switch name="switch"></md-switch>`,
change(control) {
control.selected = true;
},
assertReset(control) {
expect(control.selected)
.withContext('control.selected after reset')
.toBeFalse();
},
},
{
name: 'reset to selected',
render: () => html`<md-switch name="switch" selected></md-switch>`,
change(control) {
control.selected = false;
},
assertReset(control) {
expect(control.selected)
.withContext('control.selected after reset')
.toBeTrue();
},
},
],
restoreTests: [
{
name: 'restore unselected',
render: () => html`<md-switch name="switch"></md-switch>`,
assertRestored(control) {
expect(control.selected)
.withContext('control.selected after restore')
.toBeFalse();
},
},
{
name: 'restore selected',
render: () => html`<md-switch name="switch" selected></md-switch>`,
assertRestored(control) {
expect(control.selected)
.withContext('control.selected after restore')
.toBeTrue();
},
},
],
});
});
describe('enter key activation', () => {
// Don't use harness.clickWithKeyboard() since it simulates a click event.
// The underlying `<input type="checkbox">` will not dispatch click events
// in response to the Enter key.
it('should toggle the switch on', async () => {
// Arrange
const root = env.render(html`<md-switch></md-switch>`);
const harness = new SwitchHarness(root.querySelector('md-switch')!);
// Act
await harness.keypress('Enter');
await harness.element.updateComplete;
// Assert
expect(harness.element.selected)
.withContext('switch is selected after Enter')
.toBeTrue();
});
it('should toggle the switch off', async () => {
// Arrange
const root = env.render(html`<md-switch selected></md-switch>`);
const harness = new SwitchHarness(root.querySelector('md-switch')!);
// Act
await harness.keypress('Enter');
await harness.element.updateComplete;
// Assert
expect(harness.element.selected)
.withContext('switch is unselected after Enter')
.toBeFalse();
});
it('should not toggle the switch when disabled', async () => {
// Arrange
const root = env.render(html`<md-switch disabled></md-switch>`);
const harness = new SwitchHarness(root.querySelector('md-switch')!);
// Act
await harness.keypress('Enter');
await harness.element.updateComplete;
// Assert
expect(harness.element.selected)
.withContext('disabled switch is not selected after Enter')
.toBeFalse();
});
it('should not toggle the switch when keydown event is canceled', async () => {
// Arrange
const root = env.render(html`<md-switch></md-switch>`);
const harness = new SwitchHarness(root.querySelector('md-switch')!);
harness.element.addEventListener('keydown', (event) => {
event.preventDefault();
});
// Act
await harness.keypress('Enter');
await harness.element.updateComplete;
// Assert
expect(harness.element.selected)
.withContext('switch is not selected when Enter is canceled')
.toBeFalse();
});
});
});