mirror of
https://github.com/material-components/material-web.git
synced 2024-10-26 21:56:56 +03:00
99ec9e25eb
PiperOrigin-RevId: 638508692
194 lines
5.7 KiB
TypeScript
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();
|
|
});
|
|
});
|
|
});
|