diff options
Diffstat (limited to 'test/settings/components')
| -rw-r--r-- | test/settings/components/form/BlacklistForm.test.tsx | 134 | ||||
| -rw-r--r-- | test/settings/components/form/KeymapsForm.test.tsx | 75 | ||||
| -rw-r--r-- | test/settings/components/form/PropertiesForm.test.tsx | 131 | ||||
| -rw-r--r-- | test/settings/components/form/SearchEngineForm.test.tsx | 177 | ||||
| -rw-r--r-- | test/settings/components/ui/input.test.tsx | 149 |
5 files changed, 395 insertions, 271 deletions
diff --git a/test/settings/components/form/BlacklistForm.test.tsx b/test/settings/components/form/BlacklistForm.test.tsx index 6c329ff..e34802a 100644 --- a/test/settings/components/form/BlacklistForm.test.tsx +++ b/test/settings/components/form/BlacklistForm.test.tsx @@ -1,94 +1,120 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ReactTestRenderer from 'react-test-renderer'; -import ReactTestUtils from 'react-dom/test-utils'; -import { expect } from 'chai' +import React from "react"; +import ReactDOM from "react-dom"; +import ReactTestRenderer from "react-test-renderer"; +import ReactTestUtils from "react-dom/test-utils"; +import { expect } from "chai"; -import BlacklistForm from '../../../../src/settings/components/form/BlacklistForm' -import Blacklist from '../../../../src/shared/settings/Blacklist'; +import BlacklistForm from "../../../../src/settings/components/form/BlacklistForm"; +import Blacklist from "../../../../src/shared/settings/Blacklist"; +import AddButton from "../../../../src/settings/components/ui/AddButton"; describe("settings/form/BlacklistForm", () => { - describe('render', () => { - it('renders BlacklistForm', () => { + describe("render", () => { + it("renders BlacklistForm", () => { const root = ReactTestRenderer.create( - <BlacklistForm value={Blacklist.fromJSON(['*.slack.com', 'www.google.com/maps'])} />, + <BlacklistForm + value={Blacklist.fromJSON(["*.slack.com", "www.google.com/maps"])} + /> ).root; - const children = root.children[0].children; - expect(children).to.have.lengthOf(3); - expect(children[0].children[0].props.value).to.equal('*.slack.com'); - expect(children[1].children[0].props.value).to.equal('www.google.com/maps'); - expect(children[2].props.name).to.equal('add'); + const rows = root.findAllByProps({ + className: "form-blacklist-form-row", + }); + expect(rows).to.have.lengthOf(2); + expect( + rows[0].findByProps({ className: "column-url" }).props.value + ).to.equal("*.slack.com"); + expect( + rows[1].findByProps({ className: "column-url" }).props.value + ).to.equal("www.google.com/maps"); + + expect(() => root.findByType(AddButton)).not.throw(); }); - it('renders blank value', () => { + it("renders blank value", () => { const root = ReactTestRenderer.create(<BlacklistForm />).root; - const children = root.children[0].children; - expect(children).to.have.lengthOf(1); - expect(children[0].props.name).to.equal('add'); + const rows = root.findAllByProps({ + className: "form-blacklist-form-row", + }); + expect(rows).to.be.empty; }); }); - describe('onChange', () => { - let container; + describe("onChange", () => { + let container: HTMLDivElement; beforeEach(() => { - container = document.createElement('div'); + container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { document.body.removeChild(container); - container = null; }); - it('invokes onChange event on edit', (done) => { + it("invokes onChange event on edit", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<BlacklistForm - value={Blacklist.fromJSON(['*.slack.com', 'www.google.com/maps*'])} - onChange={value => { - const urls = value.items.map(item => item.pattern); - expect(urls).to.have.members(['gitter.im', 'www.google.com/maps*']); - done(); - }} - />, container) + ReactDOM.render( + <BlacklistForm + value={Blacklist.fromJSON(["*.slack.com", "www.google.com/maps*"])} + onChange={(value) => { + const urls = value.items.map((item) => item.pattern); + expect(urls).to.have.members([ + "gitter.im", + "www.google.com/maps*", + ]); + done(); + }} + />, + container + ); }); - const input = document.querySelectorAll('input[type=text]')[0]; - input.value = 'gitter.im'; + const input = document.querySelectorAll( + "input[type=text]" + )[0] as HTMLInputElement; + input.value = "gitter.im"; ReactTestUtils.Simulate.change(input); }); - it('invokes onChange event on delete', (done) => { + it("invokes onChange event on delete", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<BlacklistForm - value={Blacklist.fromJSON(['*.slack.com', 'www.google.com/maps*'])} - onChange={value => { - const urls = value.items.map(item => item.pattern); - expect(urls).to.have.members(['www.google.com/maps*']); - done(); - }} - />, container) + ReactDOM.render( + <BlacklistForm + value={Blacklist.fromJSON(["*.slack.com", "www.google.com/maps*"])} + onChange={(value) => { + const urls = value.items.map((item) => item.pattern); + expect(urls).to.have.members(["www.google.com/maps*"]); + done(); + }} + />, + container + ); }); - const button = document.querySelectorAll('input[type=button]')[0]; + const button = document.querySelectorAll("input[type=button]")[0]; ReactTestUtils.Simulate.click(button); }); - it('invokes onChange event on add', (done) => { + it("invokes onChange event on add", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<BlacklistForm - value={Blacklist.fromJSON(['*.slack.com'])} - onChange={value => { - const urls = value.items.map(item => item.pattern); - expect(urls).to.have.members(['*.slack.com', '']); - done(); - }} - />, container); + ReactDOM.render( + <BlacklistForm + value={Blacklist.fromJSON(["*.slack.com"])} + onChange={(value) => { + const urls = value.items.map((item) => item.pattern); + expect(urls).to.have.members(["*.slack.com", ""]); + done(); + }} + />, + container + ); }); - const button = document.querySelector('input[type=button].ui-add-button'); + const button = document.querySelector( + "input[type=button].ui-add-button" + ) as HTMLButtonElement; ReactTestUtils.Simulate.click(button); }); }); diff --git a/test/settings/components/form/KeymapsForm.test.tsx b/test/settings/components/form/KeymapsForm.test.tsx index ccc772c..1cec889 100644 --- a/test/settings/components/form/KeymapsForm.test.tsx +++ b/test/settings/components/form/KeymapsForm.test.tsx @@ -1,27 +1,31 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ReactTestRenderer from 'react-test-renderer'; -import ReactTestUtils from 'react-dom/test-utils'; -import KeymapsForm from '../../../../src/settings/components/form/KeymapsForm' -import { FormKeymaps } from 'shared/SettingData'; -import { expect } from 'chai'; +import React from "react"; +import ReactDOM from "react-dom"; +import ReactTestRenderer from "react-test-renderer"; +import ReactTestUtils from "react-dom/test-utils"; +import KeymapsForm from "../../../../src/settings/components/form/KeymapsForm"; +import { FormKeymaps } from "../../../../src/shared/SettingData"; +import { expect } from "chai"; describe("settings/form/KeymapsForm", () => { - describe('render', () => { - it('renders keymap fields', () => { - const root = ReactTestRenderer.create(<KeymapsForm value={FormKeymaps.fromJSON({ - 'scroll.vertically?{"count":1}': 'j', - 'scroll.vertically?{"count":-1}': 'k', - })} />).root + describe("render", () => { + it("renders keymap fields", () => { + const root = ReactTestRenderer.create( + <KeymapsForm + value={FormKeymaps.fromJSON({ + 'scroll.vertically?{"count":1}': "j", + 'scroll.vertically?{"count":-1}': "k", + })} + /> + ).root; const inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' }); const inputk = root.findByProps({ id: 'scroll.vertically?{"count":-1}' }); - expect(inputj.props.value).to.equal('j'); - expect(inputk.props.value).to.equal('k'); + expect(inputj.props.value).to.equal("j"); + expect(inputk.props.value).to.equal("k"); }); - it('renders blank value', () => { + it("renders blank value", () => { const root = ReactTestRenderer.create(<KeymapsForm />).root; const inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' }); @@ -32,34 +36,41 @@ describe("settings/form/KeymapsForm", () => { }); }); - describe('onChange event', () => { - let container; + describe("onChange event", () => { + let container: HTMLDivElement; beforeEach(() => { - container = document.createElement('div'); + container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { document.body.removeChild(container); - container = null; }); - it('invokes onChange event on edit', (done) => { + it("invokes onChange event on edit", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<KeymapsForm - value={FormKeymaps.fromJSON({ - 'scroll.vertically?{"count":1}': 'j', - 'scroll.vertically?{"count":-1}': 'k', - })} - onChange={value => { - expect(value.toJSON()['scroll.vertically?{"count":1}']).to.equal('jjj'); - done(); - }} />, container); + ReactDOM.render( + <KeymapsForm + value={FormKeymaps.fromJSON({ + 'scroll.vertically?{"count":1}': "j", + 'scroll.vertically?{"count":-1}': "k", + })} + onChange={(value) => { + expect(value.toJSON()['scroll.vertically?{"count":1}']).to.equal( + "jjj" + ); + done(); + }} + />, + container + ); }); - const input = document.getElementById('scroll.vertically?{"count":1}'); - input.value = 'jjj'; + const input = document.getElementById( + 'scroll.vertically?{"count":1}' + ) as HTMLInputElement; + input.value = "jjj"; ReactTestUtils.Simulate.change(input); }); }); diff --git a/test/settings/components/form/PropertiesForm.test.tsx b/test/settings/components/form/PropertiesForm.test.tsx index 4a0e25a..acf02b8 100644 --- a/test/settings/components/form/PropertiesForm.test.tsx +++ b/test/settings/components/form/PropertiesForm.test.tsx @@ -1,102 +1,117 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ReactTestRenderer from 'react-test-renderer'; -import ReactTestUtils from 'react-dom/test-utils'; -import PropertiesForm from 'settings/components/form/PropertiesForm' +import React from "react"; +import ReactDOM from "react-dom"; +import ReactTestRenderer from "react-test-renderer"; +import ReactTestUtils from "react-dom/test-utils"; +import PropertiesForm from "../../../../src/settings/components/form/PropertiesForm"; +import { expect } from "chai"; describe("settings/form/PropertiesForm", () => { - describe('render', () => { - it('renders PropertiesForm', () => { + describe("render", () => { + it("renders PropertiesForm", () => { const types = { - mystr: 'string', - mynum: 'number', - mybool: 'boolean', - empty: 'string', - } + mystr: "string", + mynum: "number", + mybool: "boolean", + empty: "string", + }; const values = { - mystr: 'abc', + mystr: "abc", mynum: 123, mybool: true, }; const root = ReactTestRenderer.create( - <PropertiesForm types={types} value={values} />, - ).root + <PropertiesForm types={types} value={values} /> + ).root; - let input = root.findByProps({ name: 'mystr' }); - expect(input.props.type).to.equals('text'); - expect(input.props.value).to.equal('abc'); + let input = root.findByProps({ name: "mystr" }); + expect(input.props.type).to.equals("text"); + expect(input.props.value).to.equal("abc"); - input = root.findByProps({ name: 'mynum' }); - expect(input.props.type).to.equals('number'); + input = root.findByProps({ name: "mynum" }); + expect(input.props.type).to.equals("number"); expect(input.props.value).to.equal(123); - input = root.findByProps({ name: 'mybool' }); - expect(input.props.type).to.equals('checkbox'); + input = root.findByProps({ name: "mybool" }); + expect(input.props.type).to.equals("checkbox"); expect(input.props.value).to.equal(true); }); }); - describe('onChange', () => { - let container; + describe("onChange", () => { + let container: HTMLDivElement; beforeEach(() => { - container = document.createElement('div'); + container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { document.body.removeChild(container); - container = null; }); - it('invokes onChange event on text changed', (done) => { + it("invokes onChange event on text changed", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<PropertiesForm - types={{ 'myvalue': 'string' }} - value={{ 'myvalue': 'abc' }} - onChange={value => { - expect(value).to.have.property('myvalue', 'abcd'); - done(); - }} - />, container); + ReactDOM.render( + <PropertiesForm + types={{ myvalue: "string" }} + value={{ myvalue: "abc" }} + onChange={(value) => { + expect(value).to.have.property("myvalue", "abcd"); + done(); + }} + />, + container + ); }); - const input = document.querySelector('input[name=myvalue]'); - input.value = 'abcd' + const input = document.querySelector( + "input[name=myvalue]" + ) as HTMLInputElement; + input.value = "abcd"; ReactTestUtils.Simulate.change(input); }); - it('invokes onChange event on number changeed', (done) => { + it("invokes onChange event on number changeed", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<PropertiesForm - types={{ 'myvalue': 'number' }} - value={{ '': 123 }} - onChange={value => { - expect(value).to.have.property('myvalue', 1234); - done(); - }} - />, container); + ReactDOM.render( + <PropertiesForm + types={{ myvalue: "number" }} + value={{ "": 123 }} + onChange={(value) => { + expect(value).to.have.property("myvalue", 1234); + done(); + }} + />, + container + ); }); - const input = document.querySelector('input[name=myvalue]'); - input.value = '1234' + const input = document.querySelector( + "input[name=myvalue]" + ) as HTMLInputElement; + input.value = "1234"; ReactTestUtils.Simulate.change(input); }); - it('invokes onChange event on checkbox changed', (done) => { + it("invokes onChange event on checkbox changed", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<PropertiesForm - types={{ 'myvalue': 'boolean' }} - value={{ 'myvalue': false }} - onChange={value => { - expect(value).to.have.property('myvalue', true); - done(); - }} - />, container); + ReactDOM.render( + <PropertiesForm + types={{ myvalue: "boolean" }} + value={{ myvalue: false }} + onChange={(value) => { + expect(value).to.have.property("myvalue", true); + done(); + }} + />, + container + ); }); - const input = document.querySelector('input[name=myvalue]'); + const input = document.querySelector( + "input[name=myvalue]" + ) as HTMLInputElement; input.checked = true; ReactTestUtils.Simulate.change(input); }); diff --git a/test/settings/components/form/SearchEngineForm.test.tsx b/test/settings/components/form/SearchEngineForm.test.tsx index b918203..5f835cc 100644 --- a/test/settings/components/form/SearchEngineForm.test.tsx +++ b/test/settings/components/form/SearchEngineForm.test.tsx @@ -1,109 +1,146 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ReactTestRenderer from 'react-test-renderer'; -import ReactTestUtils from 'react-dom/test-utils'; -import SearchForm from 'settings/components/form/SearchForm' -import { FormSearch } from 'shared/SettingData'; +import React from "react"; +import ReactDOM from "react-dom"; +import ReactTestRenderer from "react-test-renderer"; +import ReactTestUtils from "react-dom/test-utils"; +import SearchForm from "../../../../src/settings/components/form/SearchForm"; +import { FormSearch } from "../../../../src/shared/SettingData"; +import { expect } from "chai"; describe("settings/form/SearchForm", () => { - describe('render', () => { - it('renders SearchForm', () => { - const root = ReactTestRenderer.create(<SearchForm value={FormSearch.fromJSON({ - default: 'google', - engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']], - })} />).root; + describe("render", () => { + it("renders SearchForm", () => { + const root = ReactTestRenderer.create( + <SearchForm + value={FormSearch.fromJSON({ + default: "google", + engines: [ + ["google", "google.com"], + ["yahoo", "yahoo.com"], + ], + })} + /> + ).root; - const names = root.findAllByProps({ name: 'name' }); + const names = root.findAllByProps({ name: "name" }); expect(names).to.have.lengthOf(2); - expect(names[0].props.value).to.equal('google'); - expect(names[1].props.value).to.equal('yahoo'); + expect(names[0].props.value).to.equal("google"); + expect(names[1].props.value).to.equal("yahoo"); - const urls = root.findAllByProps({ name: 'url' }); + const urls = root.findAllByProps({ name: "url" }); expect(urls).to.have.lengthOf(2); - expect(urls[0].props.value).to.equal('google.com'); - expect(urls[1].props.value).to.equal('yahoo.com'); + expect(urls[0].props.value).to.equal("google.com"); + expect(urls[1].props.value).to.equal("yahoo.com"); }); }); - describe('onChange event', () => { - let container; + describe("onChange event", () => { + let container: HTMLDivElement; beforeEach(() => { - container = document.createElement('div'); + container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { document.body.removeChild(container); - container = null; }); - it('invokes onChange event on edit', (done) => { + it("invokes onChange event on edit", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<SearchForm - value={FormSearch.fromJSON({ - default: 'google', - engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']] - })} - onChange={value => { - const json = value.toJSON(); - expect(json.default).to.equal('louvre'); - expect(json.engines).to.have.lengthOf(2) - expect(json.engines).to.have.deep.members( - [['louvre', 'google.com'], ['yahoo', 'yahoo.com']] - ); - done(); - }} />, container); + ReactDOM.render( + <SearchForm + value={FormSearch.fromJSON({ + default: "google", + engines: [ + ["google", "google.com"], + ["yahoo", "yahoo.com"], + ], + })} + onChange={(value) => { + const json = value.toJSON(); + expect(json.default).to.equal("louvre"); + expect(json.engines).to.have.lengthOf(2); + expect(json.engines).to.have.deep.members([ + ["louvre", "google.com"], + ["yahoo", "yahoo.com"], + ]); + done(); + }} + />, + container + ); }); - const radio = document.querySelectorAll('input[type=radio]'); + const radio = document.querySelector( + "input[type=radio]" + ) as HTMLInputElement; radio.checked = true; - const name = document.querySelector('input[name=name]'); - name.value = 'louvre'; + const name = document.querySelector( + "input[name=name]" + ) as HTMLInputElement; + name.value = "louvre"; ReactTestUtils.Simulate.change(name); }); - it('invokes onChange event on delete', (done) => { + it("invokes onChange event on delete", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<SearchForm value={FormSearch.fromJSON({ - default: 'yahoo', - engines: [['louvre', 'google.com'], ['yahoo', 'yahoo.com']] - })} - onChange={value => { - const json = value.toJSON(); - expect(json.default).to.equal('yahoo'); - expect(json.engines).to.have.lengthOf(1) - expect(json.engines).to.have.deep.members( - [['yahoo', 'yahoo.com']] - ); - done(); - }} />, container); + ReactDOM.render( + <SearchForm + value={FormSearch.fromJSON({ + default: "yahoo", + engines: [ + ["louvre", "google.com"], + ["yahoo", "yahoo.com"], + ], + })} + onChange={(value) => { + const json = value.toJSON(); + expect(json.default).to.equal("yahoo"); + expect(json.engines).to.have.lengthOf(1); + expect(json.engines).to.have.deep.members([ + ["yahoo", "yahoo.com"], + ]); + done(); + }} + />, + container + ); }); - const button = document.querySelector('input[type=button]'); + const button = document.querySelector( + "input[type=button]" + ) as HTMLInputElement; ReactTestUtils.Simulate.click(button); }); - it('invokes onChange event on add', (done) => { + it("invokes onChange event on add", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<SearchForm value={FormSearch.fromJSON({ - default: 'yahoo', - engines: [['google', 'google.com']] - })} - onChange={value => { - const json = value.toJSON(); - expect(json.default).to.equal('yahoo'); - expect(json.engines).to.have.lengthOf(2) - expect(json.engines).to.have.deep.members( - [['google', 'google.com'], ['', '']], - ); - done(); - }} />, container); + ReactDOM.render( + <SearchForm + value={FormSearch.fromJSON({ + default: "yahoo", + engines: [["google", "google.com"]], + })} + onChange={(value) => { + const json = value.toJSON(); + expect(json.default).to.equal("yahoo"); + expect(json.engines).to.have.lengthOf(2); + expect(json.engines).to.have.deep.members([ + ["google", "google.com"], + ["", ""], + ]); + done(); + }} + />, + container + ); }); - const button = document.querySelector('input[type=button].ui-add-button'); + const button = document.querySelector( + "input[type=button].ui-add-button" + ) as HTMLInputElement; ReactTestUtils.Simulate.click(button); }); }); diff --git a/test/settings/components/ui/input.test.tsx b/test/settings/components/ui/input.test.tsx index a3e7ff4..191bfed 100644 --- a/test/settings/components/ui/input.test.tsx +++ b/test/settings/components/ui/input.test.tsx @@ -1,110 +1,145 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import ReactTestUtils from 'react-dom/test-utils'; -import Input from 'settings/components/ui/Input' +import React from "react"; +import ReactDOM from "react-dom"; +import ReactTestUtils from "react-dom/test-utils"; +import Input from "../../../../src/settings/components/ui/Input"; +import { expect } from "chai"; describe("settings/ui/Input", () => { - let container; + let container: HTMLDivElement; beforeEach(() => { - container = document.createElement('div'); + container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { document.body.removeChild(container); - container = null; }); context("type=text", () => { - it('renders text input', () => { + it("renders text input", () => { ReactTestUtils.act(() => { ReactDOM.render( - <Input type='text' name='myname' label='myfield' value='myvalue'/>, - container); + <Input type="text" name="myname" label="myfield" value="myvalue" />, + container + ); }); - const label = document.querySelector('label'); - const 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'); + const label = document.querySelector("label")!!; + const 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) => { + it("invoke onChange", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<Input type='text' name='myname' label='myfield' value='myvalue' onChange={(e) => { - expect(e.target.value).to.equal('newvalue'); - done(); - }}/>, container); + ReactDOM.render( + <Input + type="text" + name="myname" + label="myfield" + value="myvalue" + onChange={(e) => { + expect((e.target as HTMLInputElement).value).to.equal("newvalue"); + done(); + }} + />, + container + ); }); - const input = document.querySelector('input'); - input.value = 'newvalue'; + const input = document.querySelector("input")!!; + input.value = "newvalue"; ReactTestUtils.Simulate.change(input); }); }); context("type=radio", () => { - it('renders radio button', () => { + it("renders radio button", () => { ReactTestUtils.act(() => { ReactDOM.render( - <Input type='radio' name='myname' label='myfield' value='myvalue'/>, - container); + <Input type="radio" name="myname" label="myfield" value="myvalue" />, + container + ); }); - const label = document.querySelector('label'); - const 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'); + const label = document.querySelector("label")!!; + const 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) => { + it("invoke onChange", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<Input type='text' name='radio' label='myfield' value='myvalue' onChange={(e) => { - expect(e.target.checked).to.be.true; - done(); - }}/>, - container); + ReactDOM.render( + <Input + type="text" + name="radio" + label="myfield" + value="myvalue" + onChange={(e) => { + expect((e.target as HTMLInputElement).checked).to.be.true; + done(); + }} + />, + container + ); }); - const input = document.querySelector('input'); + const input = document.querySelector("input") as HTMLInputElement; input.checked = true; ReactTestUtils.Simulate.change(input); }); }); context("type=textarea", () => { - it('renders textarea button', () => { + it("renders textarea button", () => { ReactTestUtils.act(() => { ReactDOM.render( - <Input type='textarea' name='myname' label='myfield' value='myvalue' error='myerror' />, - container); + <Input + type="textarea" + name="myname" + label="myfield" + value="myvalue" + error="myerror" + />, + container + ); }); - const label = document.querySelector('label'); - const textarea = document.querySelector('textarea'); - const 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'); + const label = document.querySelector("label")!!; + const textarea = document.querySelector("textarea")!!; + const 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) => { + it("invoke onChange", (done) => { ReactTestUtils.act(() => { - ReactDOM.render(<Input type='textarea' name='myname' label='myfield' value='myvalue' onChange={(e) => { - expect(e.target.value).to.equal('newvalue'); - done(); - }}/>, container); + ReactDOM.render( + <Input + type="textarea" + name="myname" + label="myfield" + value="myvalue" + onChange={(e) => { + expect((e.target as HTMLInputElement).value).to.equal("newvalue"); + done(); + }} + />, + container + ); }); - const input = document.querySelector('textarea'); - input.value = 'newvalue' + const input = document.querySelector("textarea")!!; + input.value = "newvalue"; ReactTestUtils.Simulate.change(input); }); }); |