mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 21:57:41 +03:00
c390291687
PiperOrigin-RevId: 576601342
168 lines
5.2 KiB
TypeScript
168 lines
5.2 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright 2022 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
// import 'jasmine'; (google3-only)
|
|
import './filled-text-field.js';
|
|
|
|
import {html} from 'lit';
|
|
|
|
import {Environment} from '../testing/environment.js';
|
|
import {Harness} from '../testing/harness.js';
|
|
|
|
import {TextFieldHarness} from './harness.js';
|
|
|
|
describe('TextFieldHarness', () => {
|
|
const env = new Environment();
|
|
|
|
async function setupTest() {
|
|
const root = env.render(
|
|
html`<md-filled-text-field></md-filled-text-field>`,
|
|
);
|
|
const instance = root.querySelector('md-filled-text-field');
|
|
if (!instance) {
|
|
throw new Error('Failed to query md-filled-text-field.');
|
|
}
|
|
|
|
await env.waitForStability();
|
|
return new TextFieldHarness(instance);
|
|
}
|
|
|
|
describe('inputValue()', () => {
|
|
it('should emit key events for each character typed', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
const keydownHandler = jasmine.createSpy('keydownHandler');
|
|
harness.element.addEventListener('keydown', keydownHandler);
|
|
// Test case.
|
|
await harness.inputValue('abc');
|
|
// Assertion.
|
|
expect(keydownHandler).toHaveBeenCalledTimes(3);
|
|
expect(keydownHandler).toHaveBeenCalledWith(jasmine.any(KeyboardEvent));
|
|
expect(keydownHandler.calls.allArgs()).toEqual([
|
|
[jasmine.objectContaining({key: 'a'})],
|
|
[jasmine.objectContaining({key: 'b'})],
|
|
[jasmine.objectContaining({key: 'c'})],
|
|
]);
|
|
});
|
|
|
|
it('should emit input events for each character typed', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
const inputHandler = jasmine.createSpy('inputHandler');
|
|
harness.element.addEventListener('input', inputHandler);
|
|
// Test case.
|
|
await harness.inputValue('abc');
|
|
// Assertion.
|
|
expect(inputHandler).toHaveBeenCalledTimes(3);
|
|
expect(inputHandler).toHaveBeenCalledWith(jasmine.any(InputEvent));
|
|
});
|
|
});
|
|
|
|
describe('deleteValue()', () => {
|
|
it('should press the Backspace key', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
const keydownHandler = jasmine.createSpy('keydownHandler');
|
|
harness.element.addEventListener('keydown', keydownHandler);
|
|
harness.element.value = 'Value';
|
|
// Test case.
|
|
await harness.deleteValue();
|
|
// Assertion.
|
|
expect(keydownHandler).toHaveBeenCalledTimes(1);
|
|
expect(keydownHandler).toHaveBeenCalledWith(jasmine.any(KeyboardEvent));
|
|
expect(keydownHandler).toHaveBeenCalledWith(
|
|
jasmine.objectContaining({
|
|
key: 'Backspace',
|
|
}),
|
|
);
|
|
});
|
|
|
|
it('should delete the entire value by default', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
harness.element.value = 'Value';
|
|
// Test case.
|
|
await harness.deleteValue();
|
|
// Assertion.
|
|
expect(harness.element.value).toBe('');
|
|
});
|
|
|
|
it('should allow deleting part of the value', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
harness.element.value = 'Value';
|
|
// Test case.
|
|
await harness.deleteValue(1, 4);
|
|
// Assertion.
|
|
expect(harness.element.value).toBe('Ve');
|
|
});
|
|
});
|
|
|
|
describe('reset()', () => {
|
|
it('should set the value to an empty string', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
harness.element.value = 'Value';
|
|
// Test case.
|
|
await harness.reset();
|
|
// Assertion.
|
|
expect(harness.element.value).toBe('');
|
|
});
|
|
|
|
it('should call super.reset()', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
spyOn(Harness.prototype, 'reset');
|
|
// Test case.
|
|
await harness.reset();
|
|
// Assertion.
|
|
expect(Harness.prototype.reset).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|
|
|
|
describe('simulating change events', () => {
|
|
it('should dispatch change if value changes after focus and blur', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
const changeHandler = jasmine.createSpy('changeHandler');
|
|
harness.element.addEventListener('change', changeHandler);
|
|
// Test case.
|
|
await harness.focusWithKeyboard();
|
|
await harness.inputValue('value');
|
|
await harness.blur();
|
|
// Assertion.
|
|
expect(changeHandler).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it('should not dispatch change if value does not change', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
const changeHandler = jasmine.createSpy('changeHandler');
|
|
harness.element.value = 'value';
|
|
harness.element.addEventListener('change', changeHandler);
|
|
// Test case.
|
|
await harness.focusWithKeyboard();
|
|
await harness.blur();
|
|
// Assertion.
|
|
expect(changeHandler).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it('should not dispatch change if reset', async () => {
|
|
// Setup.
|
|
const harness = await setupTest();
|
|
const changeHandler = jasmine.createSpy('changeHandler');
|
|
await harness.focusWithKeyboard();
|
|
await harness.inputValue('value');
|
|
harness.element.addEventListener('change', changeHandler);
|
|
// Test case.
|
|
await harness.reset();
|
|
await harness.blur();
|
|
// Assertion.
|
|
expect(changeHandler).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
});
|