From bc327e87a816beb6834a1d79c95c94ba34651ab3 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Fri, 15 Feb 2019 20:37:02 +0900
Subject: [PATCH] Fix Completion interface and add test

---
 src/console/components/console.jsx            |   6 +-
 src/console/components/console/completion.jsx |   3 +-
 .../components/console/completion.test.jsx    | 138 ++++++++++++++++++
 3 files changed, 144 insertions(+), 3 deletions(-)
 create mode 100644 test/console/components/console/completion.test.jsx

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');
+  });
+});