Merge pull request #538 from ueokande/scroll-console

Scroll console

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

test/console/reducers/console.test.js

@@ -8,8 +8,7 @@ describe("console reducer", () => {
     expect(state).to.have.property('messageText', '');
     expect(state).to.have.property('consoleText', '');
     expect(state).to.have.deep.property('completions', []);
-    expect(state).to.have.property('groupSelection', -1);
-    expect(state).to.have.property('itemSelection', -1);
+    expect(state).to.have.property('select', -1);
   });
 
   it('return next state for CONSOLE_HIDE', () => {
@@ -60,8 +59,7 @@ describe("console reducer", () => {
 
   it ('return next state for CONSOLE_SET_COMPLETIONS', () => {
     let state = {
-      groupSelection: 0,
-      itemSelection: 0,
+      select: 0,
       completions: [],
     }
     let action = {
@@ -76,15 +74,13 @@ describe("console reducer", () => {
     }
     state = reducer(state, action);
     expect(state).to.have.property('completions', action.completions);
-    expect(state).to.have.property('groupSelection', -1);
-    expect(state).to.have.property('itemSelection', -1);
+    expect(state).to.have.property('select', -1);
   });
 
   it ('return next state for CONSOLE_COMPLETION_NEXT', () => {
     let action = { type: actions.CONSOLE_COMPLETION_NEXT };
     let state = {
-      groupSelection: -1,
-      itemSelection: -1,
+      select: -1,
       completions: [{
         name: 'Apple',
         items: [1, 2]
@@ -95,24 +91,22 @@ describe("console reducer", () => {
     };
 
     state = reducer(state, action);
-    expect(state).to.have.property('groupSelection', 0);
-    expect(state).to.have.property('itemSelection', 0);
+    expect(state).to.have.property('select', 0);
 
     state = reducer(state, action);
-    expect(state).to.have.property('groupSelection', 0);
-    expect(state).to.have.property('itemSelection', 1);
+    expect(state).to.have.property('select', 1);
 
     state = reducer(state, action);
+    expect(state).to.have.property('select', 2);
+
     state = reducer(state, action);
-    expect(state).to.have.property('groupSelection', -1);
-    expect(state).to.have.property('itemSelection', -1);
+    expect(state).to.have.property('select', -1);
   });
 
   it ('return next state for CONSOLE_COMPLETION_PREV', () => {
     let action = { type: actions.CONSOLE_COMPLETION_PREV };
     let state = {
-      groupSelection: -1,
-      itemSelection: -1,
+      select: -1,
       completions: [{
         name: 'Apple',
         items: [1, 2]
@@ -123,17 +117,15 @@ describe("console reducer", () => {
     };
 
     state = reducer(state, action);
-    expect(state).to.have.property('groupSelection', 1);
-    expect(state).to.have.property('itemSelection', 0);
+    expect(state).to.have.property('select', 2);
 
     state = reducer(state, action);
-    expect(state).to.have.property('groupSelection', 0);
-    expect(state).to.have.property('itemSelection', 1);
+    expect(state).to.have.property('select', 1);
 
     state = reducer(state, action);
+    expect(state).to.have.property('select', 0);
+
     state = reducer(state, action);
-    expect(state).to.have.property('groupSelection', -1);
-    expect(state).to.have.property('itemSelection', -1);
+    expect(state).to.have.property('select', -1);
   });
-
 });