2022-03-08 22:34:17 +00:00
|
|
|
import { expect, fixture, html, waitUntil } from '@open-wc/testing';
|
|
|
|
import sinon from 'sinon';
|
|
|
|
// eslint-disable-next-line no-restricted-imports
|
|
|
|
import { serialize } from '../../utilities/form';
|
2021-06-25 23:02:34 +00:00
|
|
|
import type SlTextarea from './textarea';
|
|
|
|
|
|
|
|
describe('<sl-textarea>', () => {
|
2022-03-08 22:34:17 +00:00
|
|
|
it('should pass accessibility tests', async () => {
|
|
|
|
const el = await fixture<SlTextarea>(html` <sl-textarea label="Name"></sl-textarea> `);
|
|
|
|
await expect(el).to.be.accessible();
|
|
|
|
});
|
|
|
|
|
2021-06-25 23:02:34 +00:00
|
|
|
it('should be disabled with the disabled attribute', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTextarea>(html` <sl-textarea disabled></sl-textarea> `);
|
2022-01-16 05:47:14 +00:00
|
|
|
const textarea = el.shadowRoot!.querySelector<HTMLTextAreaElement>('[part="textarea"]')!;
|
2021-06-25 23:02:34 +00:00
|
|
|
|
|
|
|
expect(textarea.disabled).to.be.true;
|
|
|
|
});
|
|
|
|
|
2022-03-08 22:34:17 +00:00
|
|
|
it('should focus the textarea when clicking on the label', async () => {
|
|
|
|
const el = await fixture<SlTextarea>(html` <sl-textarea label="Name"></sl-textarea> `);
|
|
|
|
const label = el.shadowRoot!.querySelector('[part="label"]')!;
|
|
|
|
const submitHandler = sinon.spy();
|
|
|
|
|
|
|
|
el.addEventListener('sl-focus', submitHandler);
|
|
|
|
(label as HTMLLabelElement).click();
|
|
|
|
await waitUntil(() => submitHandler.calledOnce);
|
|
|
|
|
|
|
|
expect(submitHandler).to.have.been.calledOnce;
|
|
|
|
});
|
|
|
|
|
2021-06-25 23:02:34 +00:00
|
|
|
it('should be valid by default', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTextarea>(html` <sl-textarea></sl-textarea> `);
|
2021-06-25 23:02:34 +00:00
|
|
|
|
|
|
|
expect(el.invalid).to.be.false;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should be invalid when required and empty', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTextarea>(html` <sl-textarea required></sl-textarea> `);
|
2021-06-25 23:02:34 +00:00
|
|
|
|
|
|
|
expect(el.invalid).to.be.true;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should be invalid when required and after removing disabled ', async () => {
|
2021-08-10 21:11:07 +00:00
|
|
|
const el = await fixture<SlTextarea>(html` <sl-textarea disabled required></sl-textarea> `);
|
2021-06-25 23:02:34 +00:00
|
|
|
|
|
|
|
el.disabled = false;
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
expect(el.invalid).to.be.true;
|
|
|
|
});
|
2022-03-08 22:34:17 +00:00
|
|
|
|
|
|
|
it('should be invalid when required and disabled is removed', async () => {
|
|
|
|
const el = await fixture<SlTextarea>(html` <sl-textarea disabled required></sl-textarea> `);
|
|
|
|
el.disabled = false;
|
|
|
|
await el.updateComplete;
|
|
|
|
expect(el.invalid).to.be.true;
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should serialize its name and value with FormData', async () => {
|
|
|
|
const form = await fixture<HTMLFormElement>(html` <form><sl-textarea name="a" value="1"></sl-textarea></form> `);
|
|
|
|
const formData = new FormData(form);
|
|
|
|
expect(formData.get('a')).to.equal('1');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should serialize its name and value with JSON', async () => {
|
|
|
|
const form = await fixture<HTMLFormElement>(html` <form><sl-textarea name="a" value="1"></sl-textarea></form> `);
|
|
|
|
const json = serialize(form);
|
|
|
|
expect(json.a).to.equal('1');
|
|
|
|
});
|
2021-06-25 23:02:34 +00:00
|
|
|
});
|