import { expect } from 'chai'; import { h, render } from 'preact'; import Input from 'settings/components/ui/input' describe("settings/ui/Input", () => { beforeEach(() => { document.body.innerHTML = ''; }); context("type=text", () => { it('renders text input', () => { render(, document.body) let label = document.querySelector('label'); let input = document.querySelector('input'); expect(label.textContent).to.contain('myfield'); expect(input.type).to.contain('text'); expect(input.name).to.contain('myname'); expect(input.value).to.contain('myvalue'); }); it('invoke onChange', (done) => { render( { expect(e.target.value).to.equal('newvalue'); done(); }}/>, document.body); let input = document.querySelector('input'); input.value = 'newvalue'; input.dispatchEvent(new Event('change')) }); }); context("type=radio", () => { it('renders radio button', () => { render(, document.body) let label = document.querySelector('label'); let input = document.querySelector('input'); expect(label.textContent).to.contain('myfield'); expect(input.type).to.contain('radio'); expect(input.name).to.contain('myname'); expect(input.value).to.contain('myvalue'); }); it('invoke onChange', (done) => { render( { expect(e.target.checked).to.be.true; done(); }}/>, document.body); let input = document.querySelector('input'); input.checked = true; input.dispatchEvent(new Event('change')) }); }); context("type=textarea", () => { it('renders textarea button', () => { render(, document.body) let label = document.querySelector('label'); let textarea = document.querySelector('textarea'); let error = document.querySelector('.settings-ui-input-error'); expect(label.textContent).to.contain('myfield'); expect(textarea.nodeName).to.contain('TEXTAREA'); expect(textarea.name).to.contain('myname'); expect(textarea.value).to.contain('myvalue'); expect(error.textContent).to.contain('myerror'); }); it('invoke onChange', (done) => { render( { expect(e.target.value).to.equal('newvalue'); done(); }}/>, document.body); let input = document.querySelector('textarea'); input.value = 'newvalue' input.dispatchEvent(new Event('change')) }); }); });