diff options
| -rw-r--r-- | src/console/components/console.jsx | 6 | ||||
| -rw-r--r-- | src/console/components/console/completion.jsx | 3 | ||||
| -rw-r--r-- | test/console/components/console/completion.test.jsx | 138 |
3 files changed, 144 insertions, 3 deletions
diff --git a/src/console/components/console.jsx b/src/console/components/console.jsx index f8213db..7994f78 100644 --- a/src/console/components/console.jsx +++ b/src/console/components/console.jsx @@ -107,7 +107,11 @@ class ConsoleComponent extends Component { case 'command': case 'find': return <div className='vimvixen-console-command-wrapper'> - <Completion size={COMPLETION_MAX_ITEMS} /> + <Completion + size={COMPLETION_MAX_ITEMS} + completions={this.props.completions} + select={this.props.select} + /> <Input ref={(c) => { this.input = c; }} mode={this.props.mode} diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx index ae081e6..be6b93f 100644 --- a/src/console/components/console/completion.jsx +++ b/src/console/components/console/completion.jsx @@ -87,5 +87,4 @@ class CompletionComponent extends Component { } } -const mapStateToProps = state => state; -export default connect(mapStateToProps)(CompletionComponent); +export default CompletionComponent; diff --git a/test/console/components/console/completion.test.jsx b/test/console/components/console/completion.test.jsx new file mode 100644 index 0000000..0b48fe2 --- /dev/null +++ b/test/console/components/console/completion.test.jsx @@ -0,0 +1,138 @@ +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'); + }); +}); |