103 lines
3 KiB
JavaScript
103 lines
3 KiB
JavaScript
import { expect, fixture, html, defineCE, unsafeStatic, nextFrame } from '@open-wc/testing';
|
|
import sinon from 'sinon';
|
|
import { SlotMixin } from '@lion/core';
|
|
import { LionLitElement } from '@lion/core/src/LionLitElement.js';
|
|
|
|
import { FormControlMixin } from '../src/FormControlMixin.js';
|
|
|
|
describe('FormControlMixin', () => {
|
|
const inputSlot = '<input slot="input" />';
|
|
let elem;
|
|
let tag;
|
|
|
|
before(async () => {
|
|
const FormControlMixinClass = class extends FormControlMixin(SlotMixin(LionLitElement)) {
|
|
static get properties() {
|
|
return {
|
|
...super.properties,
|
|
modelValue: {
|
|
type: String,
|
|
},
|
|
};
|
|
}
|
|
};
|
|
|
|
elem = defineCE(FormControlMixinClass);
|
|
tag = unsafeStatic(elem);
|
|
});
|
|
|
|
it('dispatches event to register in Light DOM', async () => {
|
|
const registerSpy = sinon.spy();
|
|
await fixture(html`
|
|
<div @form-element-register=${registerSpy}>
|
|
<${tag}></${tag}>
|
|
</div>
|
|
`);
|
|
await nextFrame();
|
|
expect(registerSpy.callCount).to.equal(1);
|
|
});
|
|
|
|
it('can by caught by listening in the appropriate dom', async () => {
|
|
const registerSpy = sinon.spy();
|
|
const testTag = unsafeStatic(
|
|
defineCE(
|
|
class extends LionLitElement {
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.shadowRoot.addEventListener('form-element-register', registerSpy);
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<${tag}></${tag}>
|
|
`;
|
|
}
|
|
},
|
|
),
|
|
);
|
|
await fixture(html`
|
|
<${testTag}></${testTag}>
|
|
`);
|
|
await nextFrame();
|
|
expect(registerSpy.callCount).to.equal(1);
|
|
});
|
|
|
|
it('has the capability to override the help text', async () => {
|
|
const lionFieldAttr = await fixture(html`
|
|
<${tag} help-text="This email address is already taken">${inputSlot}</${tag}>
|
|
`);
|
|
expect(lionFieldAttr.$$slot('help-text').textContent).to.contain(
|
|
'This email address is already taken',
|
|
);
|
|
const lionFieldProp = await fixture(html`
|
|
<${tag}
|
|
.helpText=${'This email address is already taken'}
|
|
>${inputSlot}
|
|
</${tag}>`);
|
|
|
|
expect(lionFieldProp.$$slot('help-text').textContent).to.contain(
|
|
'This email address is already taken',
|
|
);
|
|
});
|
|
|
|
it('does not duplicate aria-describedby and aria-labelledby ids', async () => {
|
|
const lionField = await fixture(`
|
|
<${elem} help-text="This element will be disconnected/reconnected">${inputSlot}</${elem}>
|
|
`);
|
|
|
|
const wrapper = await fixture(`<div></div>`);
|
|
lionField.parentElement.appendChild(wrapper);
|
|
wrapper.appendChild(lionField);
|
|
await wrapper.updateComplete;
|
|
|
|
['aria-describedby', 'aria-labelledby'].forEach(ariaAttributeName => {
|
|
const ariaAttribute = lionField
|
|
.$$slot('input')
|
|
.getAttribute(ariaAttributeName)
|
|
.trim()
|
|
.split(' ');
|
|
const hasDuplicate = !!ariaAttribute.find((el, i) => ariaAttribute.indexOf(el) !== i);
|
|
expect(hasDuplicate).to.be.false;
|
|
});
|
|
});
|
|
});
|