A fork of https://github.com/ueokande/vim-vixen
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
5.0 KiB
169 lines
5.0 KiB
5 years ago
|
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;
|
||
|
});
|
||
|
});
|