[Feature #165412893] highlight text in article

app.json

@@ -1,7 +1,11 @@
 {
   "name": "ninjas-ah-frontend",
   "scripts": {},
-  "env": {},
+  "env": {
+    "REACT_APP_URL_BACKEND": "https://ninjas-ah-backend-staging.herokuapp.com",
+    "REACT_APP_URL_FRONTEND": "https://ninjas-ah-staging.herokuapp.com",
+    "REACT_APP_IMAGE_BASE_URL": "http://res.cloudinary.com/ninjas/image/upload"
+  },
   "formation": {
     "web": {
       "quantity": 1

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "start": "react-scripts start",
+    "start:build": "serve -s ./build",
     "dev": "npm run lint && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --watchAll",

src/__mocks__/article.js

@@ -3,3 +3,61 @@ export default (Object.article = {
   description: 'description of the article: well',
   body: 'body of the article: well'
 });
+
+export const newHighlight = {
+  slug: 'slug',
+  anchorKey: 'cnu26',
+  highlightedText: 'test',
+  startIndex: 0,
+  stopIndex: 4,
+  comment: 'comment'
+};
+
+export const article = {
+  title: 'hello',
+  slug: 'slug-slug-slug',
+  description: 'description of the article',
+  body: JSON.stringify({
+    blocks: [
+      {
+        key: 'cnu26',
+        text: 'test componentWillReceiveProps failedtest componentWillReceiveProps failed',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [
+          { offset: 0, length: 74, style: 'color-rgb(36,41,46)' },
+          { offset: 0, length: 74, style: 'bgcolor-rgb(255,255,255)' },
+          { offset: 0, length: 74, style: 'fontsize-32' },
+          {
+            offset: 0,
+            length: 74,
+            style:
+              'fontfamily--apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol'
+          }
+        ],
+        entityRanges: [],
+        data: { 'text-align': 'start' }
+      },
+      {
+        key: 'emuik',
+        text: 'Okey',
+        type: 'unstyled',
+        depth: 0,
+        inlineStyleRanges: [
+          { offset: 0, length: 4, style: 'color-rgb(36,41,46)' },
+          { offset: 0, length: 4, style: 'bgcolor-rgb(255,255,255)' },
+          { offset: 0, length: 4, style: 'fontsize-32' },
+          {
+            offset: 0,
+            length: 4,
+            style:
+              'fontfamily--apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol'
+          }
+        ],
+        entityRanges: [],
+        data: {}
+      }
+    ],
+    entityMap: {}
+  })
+};

src/__mocks__/window.js

@@ -5,7 +5,29 @@ window.document.addEventListener = jest.fn((event, callback) => {
 window.addEventListener = jest.fn((event, callback) => {
   map[event] = callback;
 });
-const document = { event: jest.fn(e => map[e.name](e)) };
+window.getSelection = jest.fn(() => ({
+  toString: jest.fn(() => 'highlightedText'),
+  getRangeAt: jest.fn(() => ({
+    getBoundingClientRect: jest.fn(() => ({
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }))
+  }))
+}));
 
-export const mockWindow = { ...document };
-export default { document };
+window.document.querySelectorAll = jest.fn(() => [
+  {
+    removeEventListener: jest.fn((event, callback) => {
+      map[event] = callback;
+    }),
+    addEventListener: jest.fn((event, callback) => {
+      map[event] = callback;
+    })
+  }
+]);
+
+const event = jest.fn(e => map[e.name](e));
+export const document = { event };
+export default { ...document, document };

src/__tests__/actions/articles/deleteHighlight.test.js

@@ -0,0 +1,17 @@
+import {
+  deleteArticleHighlight,
+  clearDeleteArticleHighlightStore
+} from '../../../actions/articles';
+
+const dispatch = jest.fn(action => action);
+const highlightToDelete = {
+  slug: 'slug',
+  highlightId: 1
+};
+
+test('should delete a highlight', () => {
+  clearDeleteArticleHighlightStore()(dispatch);
+  const result = deleteArticleHighlight(highlightToDelete)(dispatch);
+  expect(result).toHaveProperty('type');
+  expect(result).toHaveProperty('payload');
+});

src/__tests__/actions/articles/getArticleHighlights.test.js

@@ -0,0 +1,10 @@
+import { getArticleHighlights, clearGetArticleHighlightsStore } from '../../../actions/articles';
+
+const dispatch = jest.fn(action => action);
+
+test('should get all highlights', () => {
+  clearGetArticleHighlightsStore()(dispatch);
+  const result = getArticleHighlights('slug')(dispatch);
+  expect(result).toHaveProperty('type');
+  expect(result).toHaveProperty('payload');
+});

src/__tests__/actions/articles/highlightArticle.test.js

@@ -0,0 +1,11 @@
+import { highlightArticle, clearHighlightArticleStore } from '../../../actions/articles';
+import { newHighlight } from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+test('should highlight text in article', () => {
+  clearHighlightArticleStore()(dispatch);
+  const result = highlightArticle(newHighlight)(dispatch);
+  expect(result).toHaveProperty('type');
+  expect(result).toHaveProperty('payload');
+});

src/__tests__/actions/rating/createRate.test.js

@@ -1,31 +1,18 @@
 import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'react-thunk';
-import { Provider } from 'react-redux';
-import { createRate } from '../../../actions/rating';
+import { createRate, clearCreateRateStore } from '../../../actions/rating';
 import { Rating as RatingComponent } from '../../../components/Articles/Article/Rating';
 import { shallow, mount } from '../../../../config/enzymeConfig';
 
 describe('<RatingComponent />', () => {
-  const props = {
-    slug: 'slug-slug',
-    rating: 1,
-    errors: { error: ['12'] },
-    createRate: jest.fn(),
-    fetchOneArticle: jest.fn()
-  };
   const rating = {
     slug: 'slug-slug',
     rating: 1
   };
-  const component = shallow(<RatingComponent {...props} />);
-  it('should render a <CreateRatingComponent /> component ', () => {
-    expect(component).toMatchSnapshot();
-  });
   const dispatch = jest.fn(action => action);
 
   describe('Create rating', () => {
     test('returns rating information', async () => {
+      clearCreateRateStore()(dispatch);
       const result = createRate(rating)(dispatch);
       expect(result).toHaveProperty('type');
       expect(result).toHaveProperty('payload');

src/__tests__/components/Article.test.js

@@ -1,12 +1,19 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { mount } from '../../../config/enzymeConfig';
-import Article from '../../components/Articles/Article/Article';
+import { mount, shallow } from '../../../config/enzymeConfig';
+import Article, { Article as ArticleComponent } from '../../components/Articles/Article/Article';
 import PreviewArticle from '../../components/Profile/Articles/PreviewArticle';
 import EditArticle from '../../components/Profile/Articles/EditArticle';
 import CreateArticle from '../../components/Profile/Articles/CreateArticle';
 import store from '../../__mocks__/store';
+import { article, newHighlight } from '../../__mocks__/article';
+
+const props = {
+  match: { params: { slug: 'slug' } },
+  fetchOneArticle: jest.fn(),
+  getArticleHighlights: jest.fn()
+};
 
 describe('<Article />', () => {
   test('Get one article', () => {
@@ -45,4 +52,15 @@ describe('<Article />', () => {
       </Provider>);
     expect(component).toHaveLength(1);
   });
+
+  test('Get one article', () => {
+    const component = shallow(<ArticleComponent {...props} />);
+    component.setProps({ article: { ...article, highlights: [newHighlight] } });
+    expect(component).toHaveLength(1);
+  });
+
+  test('not display an article', () => {
+    const component = shallow(<ArticleComponent {...props} />);
+    expect(component).toHaveLength(1);
+  });
 });

src/__tests__/components/Articles/Article.test.js

@@ -2,24 +2,31 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'react-thunk';
 import { Provider } from 'react-redux';
-import article from '../../../__mocks__/article';
+import { article, newHighlight } from '../../../__mocks__/article';
 import { Article } from '../../../components/Articles/Article/Article';
 import { shallow } from '../../../../config/enzymeConfig';
 
+const props = {
+  article: {
+    id: 1,
+    ...article
+  },
+  match: { params: { slug: 'slug-slug-slug' } },
+  fetchOneArticle: jest.fn()
+};
+
 describe('<Article />', () => {
-  const props = {
-    article: {
-      id: 1,
-      title: 'Hello John Doe',
-      description: 'John Doe, Mocker',
-      body: 'body of the article'
-    },
-    match: { params: { slug: 'slug-slug-slug' } },
-    fetchOneArticle: jest.fn()
-  };
+  it('should render a <Article /> component', () => {
+    const component = shallow(<Article {...props} />);
+    component.instance().onChange();
+    expect(component).toMatchSnapshot();
+  });
 
-  const component = shallow(<Article {...props} />);
-  it('should render a <Article /> component ', () => {
+  it('should display an article', () => {
+    const component = shallow(<Article {...props} />);
+    component.instance().displayArticle(props.article);
+    component.instance().showHighlights([], JSON.parse(article.body));
+    component.instance().showHighlights([newHighlight], JSON.parse(props.article.body));
     expect(component).toMatchSnapshot();
   });
 });