ui-lit/textfield/textfield.test.js

UI Elements on LIT

import { expect } from '@esm-bundle/chai';
import './index';
const getTextfield = () => document.querySelector("lit-textfield");
describe('Test textfield', async () => {
    beforeEach(async () => {
        document.body.innerHTML = `<lit-textfield></lit-textfield>`;
    });
    it('should contain icon slot', async () => {
        const textField = getTextfield();
        expect(textField.shadowRoot.querySelector(`slot[name=icon]`)).exist;
    });
    it('should set value', async () => {
        const textField = getTextfield();
        textField.value = "test";
        await true;
        expect(textField.shadowRoot.querySelector("input").value).equal('test');
    });
    it('should possible to focus', async () => {
        const textField = getTextfield();
        textField.focus();
        expect(textField.isFocused).equal(true);
    });
    it('should autofocus', async () => {
        document.body.innerHTML = `<lit-textfield autofocus></lit-textfield>`;
        const textField = getTextfield();
        await true;
        expect(textField.isFocused).equal(true);
    });
    it('should validate minValue', async () => {
        const textField = getTextfield();
        textField.minlength = 5;
        textField.value = "test";
        await true;
        expect(textField.validationMessage).equal(`Value is too short`);
    });
    it('should validate maxValue', async () => {
        const textField = getTextfield();
        textField.maxlength = 3;
        textField.value = "test";
        await true;
        expect(textField.validationMessage).equal(`Value is too long`);
    });
    it('should validate pattern', async () => {
        const textField = getTextfield();
        textField.pattern = `/test/`;
        textField.value = "test1";
        await true;
        expect(textField.validationMessage).equal(`Pattern /test/ error`);
    });
    it('should use cancel button', async () => {
        var _a, _b;
        const textField = getTextfield();
        textField.useCancelButton = true;
        textField.value = "test";
        await true;
        (_b = (_a = textField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.cancel.icon`)) === null || _b === void 0 ? void 0 : _b.click();
        expect(textField.value).equal("");
    });
    it('should switch password visible', async () => {
        var _a, _b, _c;
        const textField = getTextfield();
        textField.type = 'password';
        await true;
        (_b = (_a = textField.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`.toggle-password`)) === null || _b === void 0 ? void 0 : _b.click();
        await true;
        expect((_c = textField.shadowRoot.querySelector(`input`)) === null || _c === void 0 ? void 0 : _c.type).equal("text");
    });
    it('should date accasable as number', async () => {
        const textField = getTextfield();
        textField.type = 'date';
        textField.value = '1970-01-01';
        await true;
        expect(textField.valueAsNumber).equal(0);
    });
    it('should date accasable as Date', async () => {
        const textField = getTextfield();
        textField.type = 'date';
        textField.value = '1970-01-01';
        await true;
        expect(textField.valueAsDate.toISOString()).equal(new Date(`1970-01-01`).toISOString());
    });
    it('should possible to set Date', async () => {
        const textField = getTextfield();
        textField.type = 'date';
        textField.valueAsDate = new Date('1970-01-01');
        await true;
        expect(textField.valueAsNumber).equal(0);
    });
    it('should trigger changed CustomEvent', async () => {
        const textField = getTextfield();
        let value = '';
        textField.addEventListener('changed', ((e) => {
            value = e.detail;
        }));
        await true;
        const input = textField.shadowRoot.querySelector('input');
        input.value = 'test';
        input.dispatchEvent(new Event('input'));
        await true;
        expect(value).equal('test');
    });
});