[Feature #163518664] add components tests

- Add test case for highlighting text on read article component
- Add test for comment model and HighlightPopover
- Adjust the padding and margin for close button

[Starts #163518664]

src/__tests__/__components__/PopOvers/CommentModel.test.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { shallow } from "enzyme";
+import toJson from "enzyme-to-json";
+import { CommentModel } from "../../../components/PopOvers/CommentModel";
+import Button from "../../../components/common/Buttons/FormButton";
+
+const onClose = jest.fn();
+const props = {
+  isOpen: false,
+  onClose,
+  id: "the-comment-model"
+};
+const component = shallow(<CommentModel {...props} />);
+describe("Comment PopUp Model", () => {
+  const instance = component.instance();
+  beforeEach(() => {
+    jest.spyOn(instance, "componentWillReceiveProps");
+    jest.spyOn(component.instance(), "closeModel");
+  });
+  afterEach(() => {
+    instance.componentWillReceiveProps.mockClear();
+    instance.closeModel.mockClear();
+  });
+  test("should match the snapshot", () => {
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  test("should render button and text area input", () => {
+    expect(component.find(Button).length).toBe(1);
+    expect(component.find(`[data-test="comment-model-input"]`).length).toBe(1);
+  });
+  test("should not update the state on opening model", () => {
+    component.setProps({
+      isOpen: true
+    });
+    component.update();
+    expect(instance.componentWillReceiveProps).toBeCalled();
+    expect(instance.closeModel).not.toBeCalled();
+  });
+  test("should update state on text input change", () => {
+    component.setProps({
+      isOpen: true
+    });
+    const input = component.find(`[data-test="comment-model-input"]`).at(0);
+    const event = {
+      target: {
+        value: `I don't know who I am, but it working in my favor!!`
+      }
+    };
+    input.simulate("change", event);
+    expect(component.state().comment).toEqual(event.target.value);
+  });
+  test("should close model and update the comment", () => {
+    const closeBtn = component.find(`[data-test="close-btn"]`).at(0);
+    closeBtn.simulate("click");
+    expect(onClose).toBeCalled();
+    component.setProps({
+      isOpen: false
+    });
+    component.update();
+    expect(component.state().comment).toBe("");
+  });
+});

src/__tests__/__components__/PopOvers/HighlightPopOver.test.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { shallow } from "enzyme";
+import toJson from "enzyme-to-json";
+import HighlighPopover from "../../../components/PopOvers/HighlighPopover";
+
+const onClick = jest.fn();
+const props = {
+  onClick
+};
+const component = shallow(<HighlighPopover {...props} />);
+describe("Highlight Popover", () => {
+  test("should match the snapshot", () => {
+    expect(toJson(component)).toMatchSnapshot();
+  });
+  test("should response on click", () => {
+    component
+      .find(`[data-test="button-set"]`)
+      .at(0)
+      .simulate("click");
+    expect(onClick).toBeCalled();
+  });
+});

src/__tests__/__views__/HighlighComment.test.js

@@ -0,0 +1,38 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { props1 } from "../__mocks__/testData";
+import { Article } from "../../views/ReadArticle";
+import HighlighPopover from "../../components/PopOvers/HighlighPopover";
+
+const component = shallow(<Article {...props1} />);
+describe("Text highligh and comment", () => {
+  let instance;
+  beforeEach(() => {
+    instance = component.instance();
+    window.getSelection = jest.fn().mockReturnValue({
+      getRangeAt: () => ({
+        getBoundingClientRect: () => ({
+          top: 244,
+          left: 178
+        })
+      })
+    });
+
+    instance.setArticleBodyRef({ contains: jest.fn() });
+  });
+
+  test("should render highlight popover", () => {
+    expect(component.find(HighlighPopover).length).toEqual(1);
+  });
+
+  test("should trigger highlight handler on mouse move", () => {
+    const { top, left, highlightedText } = component.state();
+    instance.articleBodyRef.contains.mockReturnValue(true);
+    const articleBody = component.find(`[test-data="article-body"]`);
+    articleBody.simulate("mouseup", { target: "hello world" });
+    expect(window.getSelection).toBeCalled();
+    expect(component.state().top).not.toBe(top);
+    expect(component.state().left).not.toBe(left);
+    expect(component.state().highlightedText).not.toBe(highlightedText);
+  });
+});

src/components/PopOvers/CommentModel.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import Button from "../common/Buttons/FormButton";
 
-class CommentModel extends Component {
+export class CommentModel extends Component {
   state = {
     comment: ""
   };
@@ -31,6 +31,7 @@ class CommentModel extends Component {
             className="close"
             onClick={onClose}
             onKeyDown={onClose}
+            data-test="close-btn"
           >
             ×
           </button>
@@ -41,6 +42,7 @@ class CommentModel extends Component {
             spellCheck="true"
             value={comment}
             onChange={e => this.setState({ comment: e.target.value })}
+            data-test="comment-model-input"
           />
           <Button value="Submit" />
         </div>

src/components/PopOvers/HighlighPopover.js

@@ -8,7 +8,12 @@ const HighlighPopover = ({ top, left, onClick }) => (
     style={{ left: `${left}px`, top: `${top}px` }}
   >
     <div className="highlightMenu-inner">
-      <button type="button" className="button-set" onClick={onClick}>
+      <button
+        type="button"
+        className="button-set"
+        data-test="button-set"
+        onClick={onClick}
+      >
         <img src={CommentIcon} alt="icon" />
       </button>
     </div>

src/styles/base/_comment_model.scss

@@ -18,12 +18,14 @@
     background-color: #fefefe;
     margin: auto;
     padding: 20px;
+    padding-top: 10px;
     border: 1px solid #888;
     width: 50%;
     border-radius: 10px;
   }
   button.close {
     color: $color-primary;
+    margin-bottom: 10px;
     float: right;
     font-size: 28px;
     font-weight: bold;

src/views/ReadArticle.js

@@ -66,7 +66,6 @@ export class Article extends Component {
 
     this.setState({ slug });
     fetchOneArticle(slug);
-    document.addEventListener("select", this.handleHighlight);
   };
 
   componentWillReceiveProps = nextProps => {
@@ -318,6 +317,7 @@ export class Article extends Component {
                   onMouseMove={this.handleHighlight}
                   ref={this.setArticleBodyRef}
                   id="article-body"
+                  test-data="article-body"
                 >
                   {stringToHtmlElement(body).body}
                   <HighlighPopover