jab2870/Vim-Vixen
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix React Component tests

Browse source
This commit is contained in:
Shin'ya Ueoka 2019-04-30 09:03:01 +09:00
parent 4bac47249b
commit 808344eecf
15 changed files with 620 additions and 494 deletions
Download patch file Download diff file Expand all files Collapse all files

168
test/console/components/console/Completion.test.jsx Normal file
View file

@ -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;
});
});

138
test/console/components/console/completion.test.jsx
View file

@ -1,138 +0,0 @@
import { render } from 'react';
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');
});
});