80 lines
2.8 KiB
JavaScript
80 lines
2.8 KiB
JavaScript
import { LionField } from '@lion/form-core';
|
|
import { getFormControlMembers } from '@lion/form-core/test-helpers';
|
|
import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
|
|
import { Required } from '../../src/validate/validators/Required.js';
|
|
|
|
/**
|
|
* @typedef {import('../../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
|
|
* @typedef {import('../../types/FormControlMixinTypes.js').HTMLElementWithValue} HTMLElementWithValue
|
|
*/
|
|
|
|
/** @type {HTMLElementWithValue} */
|
|
let inputNodeTag;
|
|
class RequiredElement extends LionField {
|
|
connectedCallback() {
|
|
const inputNode = document.createElement('input');
|
|
inputNode.slot = 'input';
|
|
this.appendChild(inputNode);
|
|
super.connectedCallback();
|
|
}
|
|
|
|
/** @protected */
|
|
get _inputNode() {
|
|
return inputNodeTag || super._inputNode;
|
|
}
|
|
}
|
|
|
|
const tagString = defineCE(RequiredElement);
|
|
const tag = unsafeStatic(tagString);
|
|
|
|
describe('Required validation', async () => {
|
|
const validator = new Required();
|
|
|
|
it('get aria-required attribute if element is part of the right tag names', async () => {
|
|
const el = /** @type {FormControlHost & HTMLElement} */ (
|
|
await fixture(html`<${tag}></${tag}>`)
|
|
);
|
|
|
|
Required._compatibleTags.forEach(tagName => {
|
|
inputNodeTag = /** @type {HTMLElementWithValue} */ (document.createElement(tagName));
|
|
|
|
validator.onFormControlConnect(el);
|
|
const { _inputNode } = getFormControlMembers(el);
|
|
expect(_inputNode).to.have.attribute('aria-required', 'true');
|
|
});
|
|
|
|
// When incompatible tags are used, aria-required will not be added
|
|
|
|
// @ts-ignore
|
|
inputNodeTag = /** @type {HTMLDivElementWithValue} */ (document.createElement('div'));
|
|
|
|
validator.onFormControlConnect(el);
|
|
const { _inputNode } = getFormControlMembers(el);
|
|
expect(_inputNode).to.not.have.attribute('aria-required');
|
|
});
|
|
it('get aria-required attribute if element is part of the right roles', async () => {
|
|
const el = /** @type {FormControlHost & HTMLElement} */ (
|
|
await fixture(html`<${tag}></${tag}>`)
|
|
);
|
|
|
|
Required._compatibleRoles.forEach(role => {
|
|
// @ts-ignore
|
|
inputNodeTag = /** @type {HTMLElementWithValue} */ (document.createElement('div'));
|
|
inputNodeTag.setAttribute('role', role);
|
|
|
|
validator.onFormControlConnect(el);
|
|
const { _inputNode } = getFormControlMembers(el);
|
|
expect(_inputNode).to.have.attribute('aria-required', 'true');
|
|
});
|
|
|
|
// When incompatible roles are used, aria-required will not be added
|
|
|
|
// @ts-ignore
|
|
inputNodeTag = /** @type {HTMLElementWithValue} */ (document.createElement('div'));
|
|
inputNodeTag.setAttribute('role', 'group');
|
|
|
|
validator.onFormControlConnect(el);
|
|
const { _inputNode } = getFormControlMembers(el);
|
|
expect(_inputNode).to.not.have.attribute('aria-required');
|
|
});
|
|
});
|