Fix React Component tests

2 files changed, 168 insertions, 138 deletions

diff --git a/test/console/components/console/Completion.test.jsx b/test/console/components/console/Completion.test.jsx
new file mode 100644
index 0000000..16bf11a
--- /dev/null
+++ b/test/console/components/console/Completion.test.jsx
@@ -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;
+  });
+});
diff --git a/test/console/components/console/completion.test.jsx b/test/console/components/console/completion.test.jsx
deleted file mode 100644
index 8d81ce8..0000000
--- a/test/console/components/console/completion.test.jsx
+++ /dev/null
@@ -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');
-  });
-});