Shin'ya Ueoka
5 years ago
committed by
GitHub
commit
457d954e08
42 changed files with 1758 additions and 1540 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,28 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
const CompletionItem = (props) => { |
||||
let className = 'vimvixen-console-completion-item'; |
||||
if (props.highlight) { |
||||
className += ' vimvixen-completion-selected'; |
||||
} |
||||
return <li |
||||
className={className} |
||||
style={{ backgroundImage: 'url(' + props.icon + ')' }} |
||||
> |
||||
<span |
||||
className='vimvixen-console-completion-item-caption' |
||||
>{props.caption}</span> |
||||
<span |
||||
className='vimvixen-console-completion-item-url' |
||||
>{props.url}</span> |
||||
</li>; |
||||
}; |
||||
|
||||
CompletionItem.propTypes = { |
||||
highlight: PropTypes.bool, |
||||
caption: PropTypes.string, |
||||
url: PropTypes.string, |
||||
}; |
||||
|
||||
export default CompletionItem; |
||||
@ -0,0 +1,14 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
|
||||
const CompletionTitle = (props) => { |
||||
return <li className='vimvixen-console-completion-title'> |
||||
{props.title} |
||||
</li>; |
||||
}; |
||||
|
||||
CompletionTitle.propTypes = { |
||||
title: PropTypes.string, |
||||
}; |
||||
|
||||
export default CompletionTitle; |
||||
@ -0,0 +1,51 @@ |
||||
import './KeymapsForm.scss'; |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import Input from '../ui/Input'; |
||||
import keymaps from '../../keymaps'; |
||||
|
||||
class KeymapsForm extends React.Component { |
||||
|
||||
render() { |
||||
return <div className='form-keymaps-form'> |
||||
{ |
||||
keymaps.fields.map((group, index) => { |
||||
return <div key={index} className='form-keymaps-form-field-group'> |
||||
{ |
||||
group.map((field) => { |
||||
let name = field[0]; |
||||
let label = field[1]; |
||||
let value = this.props.value[name] || ''; |
||||
return <Input |
||||
type='text' id={name} name={name} key={name} |
||||
label={label} value={value} |
||||
onChange={this.bindValue.bind(this)} |
||||
onBlur={this.props.onBlur} |
||||
/>; |
||||
}) |
||||
} |
||||
</div>; |
||||
}) |
||||
} |
||||
</div>; |
||||
} |
||||
|
||||
bindValue(e) { |
||||
let next = { ...this.props.value }; |
||||
next[e.target.name] = e.target.value; |
||||
|
||||
this.props.onChange(next); |
||||
} |
||||
} |
||||
|
||||
KeymapsForm.propTypes = { |
||||
value: PropTypes.objectOf(PropTypes.string), |
||||
onChange: PropTypes.func, |
||||
}; |
||||
|
||||
KeymapsForm.defaultProps = { |
||||
value: {}, |
||||
onChange: () => {}, |
||||
}; |
||||
|
||||
export default KeymapsForm; |
||||
@ -1,7 +1,7 @@ |
||||
import './add-button.scss'; |
||||
import { h, Component } from 'preact'; |
||||
import './AddButton.scss'; |
||||
import React from 'react'; |
||||
|
||||
class AddButton extends Component { |
||||
class AddButton extends React.Component { |
||||
render() { |
||||
return <input |
||||
className='ui-add-button' type='button' value='✚' |
||||
@ -1,7 +1,7 @@ |
||||
import './delete-button.scss'; |
||||
import { h, Component } from 'preact'; |
||||
import './DeleteButton.scss'; |
||||
import React from 'react'; |
||||
|
||||
class DeleteButton extends Component { |
||||
class DeleteButton extends React.Component { |
||||
render() { |
||||
return <input |
||||
className='ui-delete-button' type='button' value='✖' |
||||
@ -0,0 +1,168 @@ |
||||
import React from 'react'; |
||||
import Completion from 'console/components/console/Completion' |
||||
import ReactTestRenderer from 'react-test-renderer'; |
||||
|
||||
describe("console/components/console/completion", () => { |
||||
let completions = [{ |
||||
name: "Fruit", |
||||
items: [{ caption: "apple" }, { caption: "banana" }, { caption: "cherry" }], |
||||
}, { |
||||
name: "Element", |
||||
items: [{ caption: "argon" }, { caption: "boron" }, { caption: "carbon" }], |
||||
}]; |
||||
|
||||
it('renders Completion component', () => { |
||||
let root = ReactTestRenderer.create(<Completion |
||||
completions={completions} |
||||
size={30} |
||||
/>).root; |
||||
|
||||
expect(root.children).to.have.lengthOf(1); |
||||
|
||||
let children = root.children[0].children; |
||||
expect(children).to.have.lengthOf(8); |
||||
expect(children[0].props.title).to.equal('Fruit'); |
||||
expect(children[1].props.caption).to.equal('apple'); |
||||
expect(children[2].props.caption).to.equal('banana'); |
||||
expect(children[3].props.caption).to.equal('cherry'); |
||||
expect(children[4].props.title).to.equal('Element'); |
||||
expect(children[5].props.caption).to.equal('argon'); |
||||
expect(children[6].props.caption).to.equal('boron'); |
||||
expect(children[7].props.caption).to.equal('carbon'); |
||||
}); |
||||
|
||||
it('highlight current item', () => { |
||||
let root = ReactTestRenderer.create(<Completion |
||||
completions={completions} |
||||
size={30} |
||||
select={3} |
||||
/>).root; |
||||
|
||||
let children = root.children[0].children; |
||||
expect(children[5].props.highlight).to.be.true; |
||||
}); |
||||
|
||||
it('does not highlight any items', () => { |
||||
let root = ReactTestRenderer.create(<Completion |
||||
completions={completions} |
||||
size={30} |
||||
select={-1} |
||||
/>).root; |
||||
|
||||
let children = root.children[0].children; |
||||
for (let li of children[0].children) { |
||||
expect(li.props.highlight).not.to.be.ok; |
||||
} |
||||
}); |
||||
|
||||
it('limits completion items', () => { |
||||
let root = ReactTestRenderer.create(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={-1} |
||||
/>).root; |
||||
|
||||
let children = root.children[0].children; |
||||
expect(children).to.have.lengthOf(3); |
||||
|
||||
expect(children[0].props.title).to.equal('Fruit'); |
||||
expect(children[1].props.caption).to.equal('apple'); |
||||
expect(children[2].props.caption).to.equal('banana'); |
||||
|
||||
root = ReactTestRenderer.create(<Completion |
||||
completions={completions} |
||||
size={3} select={0} |
||||
/>).root; |
||||
|
||||
children = root.children[0].children; |
||||
expect(children[1].props.highlight).to.be.true; |
||||
}) |
||||
|
||||
it('scrolls up to down with select', () => { |
||||
let component = ReactTestRenderer.create(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={1} |
||||
/>); |
||||
let instance = component.getInstance(); |
||||
let root = component.root; |
||||
|
||||
let children = root.children[0].children; |
||||
expect(children).to.have.lengthOf(3); |
||||
expect(children[0].props.title).to.equal('Fruit'); |
||||
expect(children[1].props.caption).to.equal('apple'); |
||||
expect(children[2].props.caption).to.equal('banana'); |
||||
|
||||
component.update(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={2} |
||||
/>); |
||||
|
||||
children = root.children[0].children; |
||||
expect(children).to.have.lengthOf(3); |
||||
expect(children[0].props.caption).to.equal('apple'); |
||||
expect(children[1].props.caption).to.equal('banana'); |
||||
expect(children[2].props.caption).to.equal('cherry'); |
||||
expect(children[2].props.highlight).to.be.true; |
||||
|
||||
component.update(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={3} |
||||
/>); |
||||
|
||||
children = root.children[0].children; |
||||
expect(children).to.have.lengthOf(3); |
||||
expect(children[0].props.caption).to.equal('cherry'); |
||||
expect(children[1].props.title).to.equal('Element'); |
||||
expect(children[2].props.caption).to.equal('argon'); |
||||
expect(children[2].props.highlight).to.be.true; |
||||
}); |
||||
|
||||
it('scrolls down to up with select', () => { |
||||
let component = ReactTestRenderer.create(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={5} |
||||
/>); |
||||
let root = component.root; |
||||
let instance = component.getInstance(); |
||||
|
||||
let children = root.children[0].children; |
||||
expect(children).to.have.lengthOf(3); |
||||
expect(children[0].props.caption).to.equal('argon'); |
||||
expect(children[1].props.caption).to.equal('boron'); |
||||
expect(children[2].props.caption).to.equal('carbon'); |
||||
|
||||
component.update(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={4} |
||||
/>); |
||||
|
||||
children = root.children[0].children; |
||||
expect(children[1].props.highlight).to.be.true; |
||||
|
||||
component.update(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={3} |
||||
/>); |
||||
|
||||
children = root.children[0].children; |
||||
expect(children[0].props.highlight).to.be.true; |
||||
|
||||
component.update(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={2} |
||||
/>); |
||||
|
||||
children = root.children[0].children; |
||||
expect(children[0].props.caption).to.equal('cherry'); |
||||
expect(children[1].props.title).to.equal('Element'); |
||||
expect(children[2].props.caption).to.equal('argon'); |
||||
expect(children[0].props.highlight).to.be.true; |
||||
}); |
||||
}); |
||||
@ -1,138 +0,0 @@ |
||||
import { h, render } from 'preact'; |
||||
import Completion from 'console/components/console/completion' |
||||
|
||||
describe("console/components/console/completion", () => { |
||||
let completions = [{ |
||||
name: "Fruit", |
||||
items: [{ caption: "apple" }, { caption: "banana" }, { caption: "cherry" }], |
||||
}, { |
||||
name: "Element", |
||||
items: [{ caption: "argon" }, { caption: "boron" }, { caption: "carbon" }], |
||||
}]; |
||||
|
||||
beforeEach(() => { |
||||
document.body.innerHTML = ''; |
||||
}); |
||||
|
||||
it('renders Completion component', () => { |
||||
let ul = render(<Completion |
||||
completions={completions} |
||||
size={30} |
||||
/>, document.body); |
||||
|
||||
expect(ul.children).to.have.lengthOf(8); |
||||
expect(ul.children[0].textContent).to.equal('Fruit'); |
||||
expect(ul.children[1].textContent).to.equal('apple'); |
||||
expect(ul.children[2].textContent).to.equal('banana'); |
||||
expect(ul.children[3].textContent).to.equal('cherry'); |
||||
expect(ul.children[4].textContent).to.equal('Element'); |
||||
expect(ul.children[5].textContent).to.equal('argon'); |
||||
expect(ul.children[6].textContent).to.equal('boron'); |
||||
expect(ul.children[7].textContent).to.equal('carbon'); |
||||
}); |
||||
|
||||
it('highlight current item', () => { |
||||
let ul = render(<Completion |
||||
completions={completions} |
||||
size={30} |
||||
select={3} |
||||
/>, document.body); |
||||
expect(ul.children[5].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
}); |
||||
|
||||
it('does not highlight any items', () => { |
||||
let ul = render(<Completion |
||||
completions={completions} |
||||
size={30} |
||||
select={-1} |
||||
/>, document.body); |
||||
for (let li of ul.children) { |
||||
expect(li.className.split(' ')).not.to.include('vimvixen-completion-selected'); |
||||
} |
||||
}); |
||||
|
||||
|
||||
it('limits completion items', () => { |
||||
let ul = render(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={-1} |
||||
/>, document.body); |
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['Fruit', 'apple', 'banana']); |
||||
|
||||
ul = render(<Completion |
||||
completions={completions} |
||||
size={3} select={0} |
||||
/>, document.body, ul); |
||||
|
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['Fruit', 'apple', 'banana']); |
||||
expect(ul.children[1].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
}) |
||||
|
||||
it('scrolls up to down with select', () => { |
||||
let ul = render(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={1} |
||||
/>, document.body); |
||||
|
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['Fruit', 'apple', 'banana']); |
||||
expect(ul.children[2].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
|
||||
ul = render(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={2} |
||||
/>, document.body, ul); |
||||
|
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['apple', 'banana', 'cherry']); |
||||
expect(ul.children[2].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
|
||||
ul = render(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={3} |
||||
/>, document.body, ul); |
||||
|
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['cherry', 'Element', 'argon']); |
||||
expect(ul.children[2].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
}); |
||||
|
||||
it('scrolls up to down with select', () => { |
||||
let ul = render(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={5} |
||||
/>, document.body); |
||||
|
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['argon', 'boron', 'carbon']); |
||||
expect(ul.children[2].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
|
||||
ul = render(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={4} |
||||
/>, document.body, ul); |
||||
|
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['argon', 'boron', 'carbon']); |
||||
expect(ul.children[1].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
|
||||
ul = render(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={3} |
||||
/>, document.body, ul); |
||||
|
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['argon', 'boron', 'carbon']); |
||||
expect(ul.children[0].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
|
||||
ul = render(<Completion |
||||
completions={completions} |
||||
size={3} |
||||
select={2} |
||||
/>, document.body, ul); |
||||
|
||||
expect(Array.from(ul.children).map(e => e.textContent)).to.deep.equal(['cherry', 'Element', 'argon']); |
||||
expect(ul.children[0].className.split(' ')).to.include('vimvixen-completion-selected'); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,92 @@ |
||||
import React from 'react'; |
||||
import ReactDOM from 'react-dom'; |
||||
import ReactTestRenderer from 'react-test-renderer'; |
||||
import ReactTestUtils from 'react-dom/test-utils'; |
||||
import BlacklistForm from 'settings/components/form/BlacklistForm' |
||||
|
||||
describe("settings/form/BlacklistForm", () => { |
||||
describe('render', () => { |
||||
it('renders BlacklistForm', () => { |
||||
let root = ReactTestRenderer.create( |
||||
<BlacklistForm value={['*.slack.com', 'www.google.com/maps']} />, |
||||
).root; |
||||
|
||||
let 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'); |
||||
}); |
||||
|
||||
it('renders blank value', () => { |
||||
let root = ReactTestRenderer.create(<BlacklistForm />).root; |
||||
|
||||
let children = root.children[0].children; |
||||
expect(children).to.have.lengthOf(1); |
||||
expect(children[0].props.name).to.equal('add'); |
||||
}); |
||||
}); |
||||
|
||||
describe('onChange', () => { |
||||
let container; |
||||
|
||||
beforeEach(() => { |
||||
container = document.createElement('div'); |
||||
document.body.appendChild(container); |
||||
}); |
||||
|
||||
afterEach(() => { |
||||
document.body.removeChild(container); |
||||
container = null; |
||||
}); |
||||
|
||||
it('invokes onChange event on edit', (done) => { |
||||
ReactTestUtils.act(() => { |
||||
ReactDOM.render(<BlacklistForm |
||||
value={['*.slack.com', 'www.google.com/maps*']} |
||||
onChange={value => { |
||||
expect(value).to.have.lengthOf(2); |
||||
expect(value).to.have.members(['gitter.im', 'www.google.com/maps*']); |
||||
done(); |
||||
}} |
||||
/>, container) |
||||
}); |
||||
|
||||
let input = document.querySelectorAll('input[type=text]')[0]; |
||||
input.value = 'gitter.im'; |
||||
ReactTestUtils.Simulate.change(input); |
||||
}); |
||||
|
||||
it('invokes onChange event on delete', (done) => { |
||||
ReactTestUtils.act(() => { |
||||
ReactDOM.render(<BlacklistForm |
||||
value={['*.slack.com', 'www.google.com/maps*']} |
||||
onChange={value => { |
||||
expect(value).to.have.lengthOf(1); |
||||
expect(value).to.have.members(['www.google.com/maps*']); |
||||
done(); |
||||
}} |
||||
/>, container) |
||||
}); |
||||
|
||||
let button = document.querySelectorAll('input[type=button]')[0]; |
||||
ReactTestUtils.Simulate.click(button); |
||||
}); |
||||
|
||||
it('invokes onChange event on add', (done) => { |
||||
ReactTestUtils.act(() => { |
||||
ReactDOM.render(<BlacklistForm |
||||
value={['*.slack.com']} |
||||
onChange={value => { |
||||
expect(value).to.have.lengthOf(2); |
||||
expect(value).to.have.members(['*.slack.com', '']); |
||||
done(); |
||||
}} |
||||
/>, container); |
||||
}); |
||||
|
||||
let button = document.querySelector('input[type=button].ui-add-button'); |
||||
ReactTestUtils.Simulate.click(button); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,64 @@ |
||||
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 'settings/components/form/KeymapsForm' |
||||
|
||||
describe("settings/form/KeymapsForm", () => { |
||||
describe('render', () => { |
||||
it('renders keymap fields', () => { |
||||
let root = ReactTestRenderer.create(<KeymapsForm value={{ |
||||
'scroll.vertically?{"count":1}': 'j', |
||||
'scroll.vertically?{"count":-1}': 'k', |
||||
}} />).root |
||||
|
||||
let inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' }); |
||||
let inputk = root.findByProps({ id: 'scroll.vertically?{"count":-1}' }); |
||||
|
||||
expect(inputj.props.value).to.equal('j'); |
||||
expect(inputk.props.value).to.equal('k'); |
||||
}); |
||||
|
||||
it('renders blank value', () => { |
||||
let root = ReactTestRenderer.create(<KeymapsForm />).root; |
||||
|
||||
let inputj = root.findByProps({ id: 'scroll.vertically?{"count":1}' }); |
||||
let inputk = root.findByProps({ id: 'scroll.vertically?{"count":-1}' }); |
||||
|
||||
expect(inputj.props.value).to.be.empty; |
||||
expect(inputk.props.value).to.be.empty; |
||||
}); |
||||
}); |
||||
|
||||
describe('onChange event', () => { |
||||
let container; |
||||
|
||||
beforeEach(() => { |
||||
container = document.createElement('div'); |
||||
document.body.appendChild(container); |
||||
}); |
||||
|
||||
afterEach(() => { |
||||
document.body.removeChild(container); |
||||
container = null; |
||||
}); |
||||
|
||||
it('invokes onChange event on edit', (done) => { |
||||
ReactTestUtils.act(() => { |
||||
ReactDOM.render(<KeymapsForm |
||||
value={{ |
||||
'scroll.vertically?{"count":1}': 'j', |
||||
'scroll.vertically?{"count":-1}': 'k', |
||||
}} |
||||
onChange={value => { |
||||
expect(value['scroll.vertically?{"count":1}']).to.equal('jjj'); |
||||
done(); |
||||
}} />, container); |
||||
}); |
||||
|
||||
let input = document.getElementById('scroll.vertically?{"count":1}'); |
||||
input.value = 'jjj'; |
||||
ReactTestUtils.Simulate.change(input); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,104 @@ |
||||
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' |
||||
|
||||
describe("settings/form/PropertiesForm", () => { |
||||
describe('render', () => { |
||||
it('renders PropertiesForm', () => { |
||||
let types = { |
||||
mystr: 'string', |
||||
mynum: 'number', |
||||
mybool: 'boolean', |
||||
empty: 'string', |
||||
} |
||||
let value = { |
||||
mystr: 'abc', |
||||
mynum: 123, |
||||
mybool: true, |
||||
}; |
||||
|
||||
let root = ReactTestRenderer.create( |
||||
<PropertiesForm types={types} value={value} />, |
||||
).root |
||||
|
||||
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'); |
||||
expect(input.props.value).to.equal(123); |
||||
|
||||
input = root.findByProps({ name: 'mybool' }); |
||||
expect(input.props.type).to.equals('checkbox'); |
||||
expect(input.props.value).to.equal(true); |
||||
}); |
||||
}); |
||||
|
||||
describe('onChange', () => { |
||||
let container; |
||||
|
||||
beforeEach(() => { |
||||
container = document.createElement('div'); |
||||
document.body.appendChild(container); |
||||
}); |
||||
|
||||
afterEach(() => { |
||||
document.body.removeChild(container); |
||||
container = null; |
||||
}); |
||||
|
||||
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); |
||||
}); |
||||
|
||||
let input = document.querySelector('input[name=myvalue]'); |
||||
input.value = 'abcd' |
||||
ReactTestUtils.Simulate.change(input); |
||||
}); |
||||
|
||||
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); |
||||
}); |
||||
|
||||
let input = document.querySelector('input[name=myvalue]'); |
||||
input.value = '1234' |
||||
ReactTestUtils.Simulate.change(input); |
||||
}); |
||||
|
||||
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); |
||||
}); |
||||
|
||||
let input = document.querySelector('input[name=myvalue]'); |
||||
input.checked = true; |
||||
ReactTestUtils.Simulate.change(input); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,128 @@ |
||||
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' |
||||
|
||||
describe("settings/form/SearchForm", () => { |
||||
describe('render', () => { |
||||
it('renders SearchForm', () => { |
||||
let root = ReactTestRenderer.create(<SearchForm value={{ |
||||
default: 'google', |
||||
engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']], |
||||
}} />).root; |
||||
|
||||
let 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'); |
||||
|
||||
let 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'); |
||||
}); |
||||
|
||||
it('renders blank value', () => { |
||||
let root = ReactTestRenderer.create(<SearchForm />).root; |
||||
|
||||
let names = root.findAllByProps({ name: 'name' }); |
||||
expect(names).to.be.empty; |
||||
|
||||
let urls = root.findAllByProps({ name: 'url' }); |
||||
expect(urls).to.be.empty; |
||||
}); |
||||
|
||||
it('renders blank engines', () => { |
||||
let root = ReactTestRenderer.create( |
||||
<SearchForm value={{ default: 'google' }} />, |
||||
).root; |
||||
|
||||
let names = root.findAllByProps({ name: 'name' }); |
||||
expect(names).to.be.empty; |
||||
|
||||
let urls = root.findAllByProps({ name: 'url' }); |
||||
expect(urls).to.be.empty; |
||||
}); |
||||
}); |
||||
|
||||
describe('onChange event', () => { |
||||
let container; |
||||
|
||||
beforeEach(() => { |
||||
container = document.createElement('div'); |
||||
document.body.appendChild(container); |
||||
}); |
||||
|
||||
afterEach(() => { |
||||
document.body.removeChild(container); |
||||
container = null; |
||||
}); |
||||
|
||||
it('invokes onChange event on edit', (done) => { |
||||
ReactTestUtils.act(() => { |
||||
ReactDOM.render(<SearchForm |
||||
value={{ |
||||
default: 'google', |
||||
engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']] |
||||
}} |
||||
onChange={value => { |
||||
expect(value.default).to.equal('louvre'); |
||||
expect(value.engines).to.have.lengthOf(2) |
||||
expect(value.engines).to.have.deep.members( |
||||
[['louvre', 'google.com'], ['yahoo', 'yahoo.com']] |
||||
); |
||||
done(); |
||||
}} />, container); |
||||
}); |
||||
|
||||
let radio = document.querySelectorAll('input[type=radio]'); |
||||
radio.checked = true; |
||||
|
||||
let name = document.querySelector('input[name=name]'); |
||||
name.value = 'louvre'; |
||||
|
||||
ReactTestUtils.Simulate.change(name); |
||||
}); |
||||
|
||||
it('invokes onChange event on delete', (done) => { |
||||
ReactTestUtils.act(() => { |
||||
ReactDOM.render(<SearchForm value={{ |
||||
default: 'yahoo', |
||||
engines: [['louvre', 'google.com'], ['yahoo', 'yahoo.com']] |
||||
}} |
||||
onChange={value => { |
||||
expect(value.default).to.equal('yahoo'); |
||||
expect(value.engines).to.have.lengthOf(1) |
||||
expect(value.engines).to.have.deep.members( |
||||
[['yahoo', 'yahoo.com']] |
||||
); |
||||
done(); |
||||
}} />, container); |
||||
}); |
||||
|
||||
let button = document.querySelector('input[type=button]'); |
||||
ReactTestUtils.Simulate.click(button); |
||||
}); |
||||
|
||||
it('invokes onChange event on add', (done) => { |
||||
ReactTestUtils.act(() => { |
||||
ReactDOM.render(<SearchForm value={{ |
||||
default: 'yahoo', |
||||
engines: [['google', 'google.com']] |
||||
}} |
||||
onChange={value => { |
||||
expect(value.default).to.equal('yahoo'); |
||||
expect(value.engines).to.have.lengthOf(2) |
||||
expect(value.engines).to.have.deep.members( |
||||
[['google', 'google.com'], ['', '']], |
||||
); |
||||
done(); |
||||
}} />, container); |
||||
}); |
||||
|
||||
let button = document.querySelector('input[type=button].ui-add-button'); |
||||
ReactTestUtils.Simulate.click(button); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,81 +0,0 @@ |
||||
import { h, render } from 'preact'; |
||||
import BlacklistForm from 'settings/components/form/blacklist-form' |
||||
|
||||
describe("settings/form/BlacklistForm", () => { |
||||
beforeEach(() => { |
||||
document.body.innerHTML = ''; |
||||
}); |
||||
|
||||
describe('render', () => { |
||||
it('renders BlacklistForm', () => { |
||||
render(<BlacklistForm value={['*.slack.com', 'www.google.com/maps']} />, document.body); |
||||
|
||||
let inputs = document.querySelectorAll('input[type=text]'); |
||||
expect(inputs).to.have.lengthOf(2); |
||||
expect(inputs[0].value).to.equal('*.slack.com'); |
||||
expect(inputs[1].value).to.equal('www.google.com/maps'); |
||||
}); |
||||
|
||||
it('renders blank value', () => { |
||||
render(<BlacklistForm />, document.body); |
||||
|
||||
let inputs = document.querySelectorAll('input[type=text]'); |
||||
expect(inputs).to.be.empty; |
||||
}); |
||||
|
||||
it('renders blank value', () => { |
||||
render(<BlacklistForm />, document.body); |
||||
|
||||
let inputs = document.querySelectorAll('input[type=text]'); |
||||
expect(inputs).to.be.empty; |
||||
}); |
||||
}); |
||||
|
||||
describe('onChange', () => { |
||||
it('invokes onChange event on edit', (done) => { |
||||
render(<BlacklistForm |
||||
value={['*.slack.com', 'www.google.com/maps*']} |
||||
onChange={value => { |
||||
expect(value).to.have.lengthOf(2) |
||||
.and.have.members(['gitter.im', 'www.google.com/maps*']); |
||||
|
||||
done(); |
||||
}} |
||||
/>, document.body); |
||||
|
||||
let input = document.querySelectorAll('input[type=text]')[0]; |
||||
input.value = 'gitter.im'; |
||||
input.dispatchEvent(new Event('change')) |
||||
}); |
||||
|
||||
it('invokes onChange event on delete', (done) => { |
||||
render(<BlacklistForm |
||||
value={['*.slack.com', 'www.google.com/maps*']} |
||||
onChange={value => { |
||||
expect(value).to.have.lengthOf(1) |
||||
.and.have.members(['www.google.com/maps*']); |
||||
|
||||
done(); |
||||
}} |
||||
/>, document.body); |
||||
|
||||
let button = document.querySelectorAll('input[type=button]')[0]; |
||||
button.click(); |
||||
}); |
||||
|
||||
it('invokes onChange event on add', (done) => { |
||||
render(<BlacklistForm |
||||
value={['*.slack.com']} |
||||
onChange={value => { |
||||
expect(value).to.have.lengthOf(2) |
||||
.and.have.members(['*.slack.com', '']); |
||||
|
||||
done(); |
||||
}} |
||||
/>, document.body); |
||||
|
||||
let button = document.querySelector('input[type=button].ui-add-button'); |
||||
button.click(); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,52 +0,0 @@ |
||||
import { h, render } from 'preact'; |
||||
import KeymapsForm from 'settings/components/form/keymaps-form' |
||||
|
||||
describe("settings/form/KeymapsForm", () => { |
||||
beforeEach(() => { |
||||
document.body.innerHTML = ''; |
||||
}); |
||||
|
||||
describe('render', () => { |
||||
it('renders KeymapsForm', () => { |
||||
render(<KeymapsForm value={{ |
||||
'scroll.vertically?{"count":1}': 'j', |
||||
'scroll.vertically?{"count":-1}': 'k', |
||||
}} />, document.body); |
||||
|
||||
let inputj = document.getElementById('scroll.vertically?{"count":1}'); |
||||
let inputk = document.getElementById('scroll.vertically?{"count":-1}'); |
||||
|
||||
expect(inputj.value).to.equal('j'); |
||||
expect(inputk.value).to.equal('k'); |
||||
}); |
||||
|
||||
it('renders blank value', () => { |
||||
render(<KeymapsForm />, document.body); |
||||
|
||||
let inputj = document.getElementById('scroll.vertically?{"count":1}'); |
||||
let inputk = document.getElementById('scroll.vertically?{"count":-1}'); |
||||
|
||||
expect(inputj.value).to.be.empty; |
||||
expect(inputk.value).to.be.empty; |
||||
}); |
||||
}); |
||||
|
||||
describe('onChange event', () => { |
||||
it('invokes onChange event on edit', (done) => { |
||||
render(<KeymapsForm |
||||
value={{ |
||||
'scroll.vertically?{"count":1}': 'j', |
||||
'scroll.vertically?{"count":-1}': 'k', |
||||
}} |
||||
onChange={value => { |
||||
expect(value['scroll.vertically?{"count":1}']).to.equal('jjj'); |
||||
|
||||
done(); |
||||
}} />, document.body); |
||||
|
||||
let input = document.getElementById('scroll.vertically?{"count":1}'); |
||||
input.value = 'jjj'; |
||||
input.dispatchEvent(new Event('change')) |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,85 +0,0 @@ |
||||
import { h, render } from 'preact'; |
||||
import PropertiesForm from 'settings/components/form/properties-form' |
||||
|
||||
describe("settings/form/PropertiesForm", () => { |
||||
beforeEach(() => { |
||||
document.body.innerHTML = ''; |
||||
}); |
||||
|
||||
describe('render', () => { |
||||
it('renders PropertiesForm', () => { |
||||
let types = { |
||||
mystr: 'string', |
||||
mynum: 'number', |
||||
mybool: 'boolean', |
||||
empty: 'string', |
||||
} |
||||
let value = { |
||||
mystr: 'abc', |
||||
mynum: 123, |
||||
mybool: true, |
||||
}; |
||||
render(<PropertiesForm types={types} value={value} />, document.body); |
||||
|
||||
let strInput = document.querySelector('input[name=mystr]'); |
||||
let numInput = document.querySelector('input[name=mynum]'); |
||||
let boolInput = document.querySelector('input[name=mybool]'); |
||||
let emptyInput = document.querySelector('input[name=empty]'); |
||||
|
||||
expect(strInput.type).to.equals('text'); |
||||
expect(strInput.value).to.equal('abc'); |
||||
expect(numInput.type).to.equals('number'); |
||||
expect(numInput.value).to.equal('123'); |
||||
expect(boolInput.type).to.equals('checkbox'); |
||||
expect(boolInput.checked).to.be.true; |
||||
expect(emptyInput.type).to.equals('text'); |
||||
expect(emptyInput.value).to.be.empty; |
||||
}); |
||||
}); |
||||
|
||||
describe('onChange', () => { |
||||
it('invokes onChange event on text changed', (done) => { |
||||
render(<PropertiesForm |
||||
types={{ 'myvalue': 'string' }} |
||||
value={{ 'myvalue': 'abc' }} |
||||
onChange={value => { |
||||
expect(value).to.have.property('myvalue', 'abcd'); |
||||
done(); |
||||
}} |
||||
/>, document.body); |
||||
|
||||
let input = document.querySelector('input[name=myvalue]'); |
||||
input.value = 'abcd' |
||||
input.dispatchEvent(new Event('change')) |
||||
}); |
||||
|
||||
it('invokes onChange event on number changeed', (done) => { |
||||
render(<PropertiesForm |
||||
types={{ 'myvalue': 'number' }} |
||||
value={{ '': 123 }} |
||||
onChange={value => { |
||||
expect(value).to.have.property('myvalue', 1234); |
||||
done(); |
||||
}} |
||||
/>, document.body); |
||||
|
||||
let input = document.querySelector('input[name=myvalue]'); |
||||
input.value = '1234' |
||||
input.dispatchEvent(new Event('change')) |
||||
}); |
||||
|
||||
it('invokes onChange event on checkbox changed', (done) => { |
||||
render(<PropertiesForm |
||||
types={{ 'myvalue': 'boolean' }} |
||||
value={{ 'myvalue': false }} |
||||
onChange={value => { |
||||
expect(value).to.have.property('myvalue', true); |
||||
done(); |
||||
}} |
||||
/>, document.body); |
||||
|
||||
let input = document.querySelector('input[name=myvalue]'); |
||||
input.click(); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,103 +0,0 @@ |
||||
import { h, render } from 'preact'; |
||||
import SearchForm from 'settings/components/form/search-form' |
||||
|
||||
describe("settings/form/SearchForm", () => { |
||||
beforeEach(() => { |
||||
document.body.innerHTML = ''; |
||||
}); |
||||
|
||||
describe('render', () => { |
||||
it('renders SearchForm', () => { |
||||
render(<SearchForm value={{ |
||||
default: 'google', |
||||
engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']], |
||||
}} />, document.body); |
||||
|
||||
let names = document.querySelectorAll('input[name=name]'); |
||||
expect(names).to.have.lengthOf(2); |
||||
expect(names[0].value).to.equal('google'); |
||||
expect(names[1].value).to.equal('yahoo'); |
||||
|
||||
let urls = document.querySelectorAll('input[name=url]'); |
||||
expect(urls).to.have.lengthOf(2); |
||||
expect(urls[0].value).to.equal('google.com'); |
||||
expect(urls[1].value).to.equal('yahoo.com'); |
||||
}); |
||||
|
||||
it('renders blank value', () => { |
||||
render(<SearchForm />, document.body); |
||||
|
||||
let names = document.querySelectorAll('input[name=name]'); |
||||
let urls = document.querySelectorAll('input[name=url]'); |
||||
expect(names).to.have.lengthOf(0); |
||||
expect(urls).to.have.lengthOf(0); |
||||
}); |
||||
|
||||
it('renders blank engines', () => { |
||||
render(<SearchForm value={{ default: 'google' }} />, document.body); |
||||
|
||||
let names = document.querySelectorAll('input[name=name]'); |
||||
let urls = document.querySelectorAll('input[name=url]'); |
||||
expect(names).to.have.lengthOf(0); |
||||
expect(urls).to.have.lengthOf(0); |
||||
}); |
||||
}); |
||||
|
||||
describe('onChange event', () => { |
||||
it('invokes onChange event on edit', (done) => { |
||||
render(<SearchForm |
||||
value={{ |
||||
default: 'google', |
||||
engines: [['google', 'google.com'], ['yahoo', 'yahoo.com']] |
||||
}} |
||||
onChange={value => { |
||||
expect(value.default).to.equal('louvre'); |
||||
expect(value.engines).to.have.lengthOf(2) |
||||
.and.have.deep.members([['louvre', 'google.com'], ['yahoo', 'yahoo.com']]) |
||||
|
||||
done(); |
||||
}} />, document.body); |
||||
|
||||
let radio = document.querySelectorAll('input[type=radio]'); |
||||
radio.checked = true; |
||||
|
||||
let name = document.querySelector('input[name=name]'); |
||||
name.value = 'louvre'; |
||||
name.dispatchEvent(new Event('change')) |
||||
}); |
||||
|
||||
it('invokes onChange event on delete', (done) => { |
||||
render(<SearchForm value={{ |
||||
default: 'yahoo', |
||||
engines: [['louvre', 'google.com'], ['yahoo', 'yahoo.com']] |
||||
}} |
||||
onChange={value => { |
||||
expect(value.default).to.equal('yahoo'); |
||||
expect(value.engines).to.have.lengthOf(1) |
||||
.and.have.deep.members([['yahoo', 'yahoo.com']]) |
||||
|
||||
done(); |
||||
}} />, document.body); |
||||
|
||||
let button = document.querySelector('input[type=button]'); |
||||
button.click(); |
||||
}); |
||||
|
||||
it('invokes onChange event on add', (done) => { |
||||
render(<SearchForm value={{ |
||||
default: 'yahoo', |
||||
engines: [['google', 'google.com']] |
||||
}} |
||||
onChange={value => { |
||||
expect(value.default).to.equal('yahoo'); |
||||
expect(value.engines).to.have.lengthOf(2) |
||||
.and.have.deep.members([['google', 'google.com'], ['', '']]) |
||||
|
||||
done(); |
||||
}} />, document.body); |
||||
|
||||
let button = document.querySelector('input[type=button].ui-add-button'); |
||||
button.click(); |
||||
}); |
||||
}); |
||||
}); |
||||
Reference in new issue