Merge pull request #19 from andela/ft-article-crud-165412877

#165412877 Article CRUD
andela · Jul 19, 2019 · a0dee88 · a0dee88
2 parents 050983a + 0001d37
commit a0dee88
Show file tree

Hide file tree

Showing 117 changed files with 3,387 additions and 148 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,18 +23,31 @@
     "axios": "^0.19.0",
     "check-prop-types": "^1.1.2",
     "dotenv": "^8.0.0",
+    "draft-convert": "^2.1.5",
+    "draft-js": "^0.10.5",
+    "draft-js-export-html": "^1.3.3",
+    "draft-js-import-html": "^1.3.3",
+    "draftjs-to-html": "^0.8.4",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
+    "html-to-draftjs": "^1.4.0",
     "joi-browser": "^13.4.0",
     "moxios": "^0.4.0",
     "node-sass": "^4.12.0",
     "nyc": "^14.1.1",
     "prop-types": "^15.7.2",
     "query-string": "^6.8.1",
     "react": "^16.8.6",
+    "react-autosize-textarea": "^7.0.0",
     "react-dom": "^16.8.6",
+    "react-draft-wysiwyg": "^1.13.2",
+    "react-html-parser": "^2.0.2",
+    "react-json-to-html": "0.0.3",
+    "react-lazyload": "^2.6.1",
+    "react-meta-tags": "^0.7.4",
     "react-redux": "^7.1.0",
+    "react-responsive-modal": "^4.0.1",
     "react-router-dom": "^5.0.1",
     "react-router-redux": "^4.0.8",
     "react-scripts": "^3.0.1",

diff --git a/public/index.html b/public/index.html
@@ -1,18 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="shortcut icon" href="%PUBLIC_URL%/ico.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <title>Authors Haven</title>
-</head>
-
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-</body>
-
-</html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/ico.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Authors Haven</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/__mocks__/URL.js b/src/__mocks__/URL.js
@@ -0,0 +1,2 @@
+URL.createObjectURL = jest.fn(file => file);
+export default URL;
diff --git a/src/__mocks__/article.js b/src/__mocks__/article.js
@@ -0,0 +1,5 @@
+export default (Object.article = {
+  title: 'my title well done',
+  description: 'description of the article: well',
+  body: 'body of the article: well'
+});
diff --git a/src/__mocks__/articleMessage.js b/src/__mocks__/articleMessage.js
@@ -0,0 +1 @@
+export default (Object.message = { message: 'article message' });
diff --git a/src/__mocks__/articles.js b/src/__mocks__/articles.js
@@ -0,0 +1,22 @@
+export default (Object.articles = [
+  {
+    author: { username: 'nivelo', bio: null, image: null },
+    body: 'body',
+    coverUrl: 'v1562366643/ninjas/ezzmjn0ak9b5gyzuzo6j.png',
+    createdAt: '2019-07-05T22:43:57.384Z',
+    description: 'ijihjhj',
+    dislikes: null,
+    favorited: false,
+    favoritesCount: 0,
+    id: 3,
+    likes: null,
+    rating: 0,
+    readTime: '0',
+    slug: 'how-to-conditionally-build-an-object-in-javascript-with-es6-m5mjxqor8sh',
+    status: 'published',
+    tagList: null,
+    title: 'How to conditionally build an object in JavaScript with ES6',
+    updatedAt: '2019-07-09T12:36:34.033Z',
+    userId: 1
+  }
+]);
diff --git a/src/__mocks__/axios.js b/src/__mocks__/axios.js
@@ -20,7 +20,7 @@ export const rejectedRequest = {
 
 export default {
   get: jest.fn(() => Promise.resolve({ ...resolvedRequest })),
-  post: jest.fn(() => Promise.resolve({ ...resolvedRequest })),
+  post: jest.fn(() => Promise.resolve({ ...resolvedRequest, status: 201 })),
   put: jest.fn(() => Promise.resolve({ ...resolvedRequest })),
   delete: jest.fn(() => Promise.resolve({ ...resolvedRequest })),
   patch: jest.fn(() => Promise.resolve({ ...resolvedRequest })),

diff --git a/src/__mocks__/errors.js b/src/__mocks__/errors.js
@@ -0,0 +1 @@
+export default (Object.errors = { message: 'can not updated article' });
diff --git a/src/__mocks__/fileMocks.js b/src/__mocks__/fileMocks.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/src/__mocks__/image.js b/src/__mocks__/image.js
@@ -0,0 +1 @@
+export default (Object.image = ['/img/image.jpg']);
diff --git a/src/__mocks__/imageErrors.js b/src/__mocks__/imageErrors.js
@@ -0,0 +1 @@
+export default (Object.imageErrors = { imageErrors: 'can not upload image' });
diff --git a/src/__mocks__/store.js b/src/__mocks__/store.js
@@ -7,4 +7,4 @@ export { initialState };
 export const middlewares = [thunk, apiMiddleware];
 export const mockStore = configureMockStore(middlewares);
 
-export default mockStore(initialState);
+export default mockStore({ ...initialState, user: { ...initialState.user, isAuth: true } });
diff --git a/src/__tests__/actions/articles/__snapshots__/articles.test.js.snap b/src/__tests__/actions/articles/__snapshots__/articles.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ArticleComponent /> should render a <CreateArticleComponent /> component  1`] = `ShallowWrapper {}`;
diff --git a/src/__tests__/actions/articles/articles.test.js b/src/__tests__/actions/articles/articles.test.js
@@ -0,0 +1,24 @@
+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 as ArticleComponent } from '../../../components/Articles/Article/Article';
+import { shallow, mount } from '../../../../config/enzymeConfig';
+
+describe('<ArticleComponent />', () => {
+  const props = {
+    errors: { error: ['12'] },
+    article: {
+      title: 'Hello John Doe',
+      description: 'John Doe, Mocker',
+      body: 'body of the article'
+    },
+    fetchOneArticle: jest.fn()
+  };
+
+  const component = shallow(<ArticleComponent {...props} />);
+  it('should render a <CreateArticleComponent /> component ', () => {
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/__tests__/actions/articles/createArticle.test.js b/src/__tests__/actions/articles/createArticle.test.js
@@ -0,0 +1,13 @@
+import { createPost } from '../../../actions/articles';
+import article from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('Create article', () => {
+  test('returns article information', async () => {
+    const result = createPost(article)(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+    expect(result.payload.data).toEqual(article);
+  });
+});
diff --git a/src/__tests__/actions/articles/deleteArticle.test.js b/src/__tests__/actions/articles/deleteArticle.test.js
@@ -0,0 +1,12 @@
+import { deleteArticle } from '../../../actions/articles';
+import article from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('delete article', () => {
+  it('returns delete article information', async () => {
+    const result = deleteArticle({ slug: 'slug-slug' })(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+  });
+});
diff --git a/src/__tests__/actions/articles/editArticle.test.js b/src/__tests__/actions/articles/editArticle.test.js
@@ -0,0 +1,13 @@
+import { editPost } from '../../../actions/articles';
+import article from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('edit article', () => {
+  it('returns article information', async () => {
+    const result = editPost({ article })(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+    expect(result.payload.data).toEqual(article);
+  });
+});
diff --git a/src/__tests__/actions/articles/publishArticle.test.js b/src/__tests__/actions/articles/publishArticle.test.js
@@ -0,0 +1,12 @@
+import { publishArticle } from '../../../actions/articles';
+import article from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('publish article', () => {
+  it('returns publish information', async () => {
+    const result = publishArticle({ slug: 'slug-slug' })(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+  });
+});
diff --git a/src/__tests__/actions/articles/unpublishArticle.test.js b/src/__tests__/actions/articles/unpublishArticle.test.js
@@ -0,0 +1,11 @@
+import { unpublishArticle } from '../../../actions/articles';
+
+const dispatch = jest.fn(action => action);
+
+describe('unpublish article', () => {
+  it('returns unpublish information', async () => {
+    const result = unpublishArticle({ slug: 'slug-slug' })(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+  });
+});
diff --git a/src/__tests__/actions/images/uploadImage.test.js b/src/__tests__/actions/images/uploadImage.test.js
@@ -0,0 +1,12 @@
+import { uploadImage } from '../../../actions/images/images';
+import article from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('upload image', () => {
+  test('returns upload information', async () => {
+    const result = uploadImage({ image: 'image.png' })(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+  });
+});
diff --git a/src/__tests__/components/Article.test.js b/src/__tests__/components/Article.test.js
@@ -0,0 +1,48 @@
+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 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';
+
+describe('<Article />', () => {
+  test('Get one article', () => {
+    const props = { match: { params: { slug: 'slug' } } };
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <Article {...props} />
+        </MemoryRouter>
+      </Provider>);
+    expect(component).toHaveLength(1);
+  });
+  test('Preview one article', () => {
+    const props = { match: { params: { slug: 'slug' } } };
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <PreviewArticle {...props} />
+        </MemoryRouter>
+      </Provider>);
+    expect(component).toHaveLength(1);
+  });
+  test('Edit one article', () => {
+    const props = { match: { params: { slug: 'slug' } } };
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <EditArticle {...props} />
+        </MemoryRouter>
+      </Provider>);
+    expect(component).toHaveLength(1);
+  });
+  test('Create one article', () => {
+    const props = { match: { params: { slug: 'slug' } } };
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <CreateArticle {...props} />
+        </MemoryRouter>
+      </Provider>);
+    expect(component).toHaveLength(1);
+  });
+});
diff --git a/src/__tests__/components/Articles/Article.test.js b/src/__tests__/components/Articles/Article.test.js
@@ -0,0 +1,25 @@
+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 } from '../../../components/Articles/Article/Article';
+import { shallow } from '../../../../config/enzymeConfig';
+
+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()
+  };
+
+  const component = shallow(<Article {...props} />);
+  it('should render a <Article /> component ', () => {
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/__tests__/components/Articles/FeaturedArticles.test.js b/src/__tests__/components/Articles/FeaturedArticles.test.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { mount } from '../../../../config/enzymeConfig';
+import FeaturedArticles from '../../../components/Articles/FeaturedArticles/FeaturedArticles';
+import store from '../../../__mocks__/store';
+
+describe('<FeaturedArticles />', () => {
+  test('Get features articles', () => {
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <FeaturedArticles />
+        </MemoryRouter>
+      </Provider>);
+    expect(component).toHaveLength(1);
+  });
+});
diff --git a/src/__tests__/components/Articles/ListOfTags.test.js b/src/__tests__/components/Articles/ListOfTags.test.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { mount } from '../../../../config/enzymeConfig';
+import Tags from '../../../components/Articles/Tags/Tags';
+import store from '../../../__mocks__/store';
+
+describe('<Tags />', () => {
+  test('renders without crashing', () => {
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <Tags />
+        </MemoryRouter>
+      </Provider>);
+    expect(component).toHaveLength(1);
+  });
+});
diff --git a/src/__tests__/components/Articles/__snapshots__/Article.test.js.snap b/src/__tests__/components/Articles/__snapshots__/Article.test.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Article /> should render a <Article /> component  1`] = `ShallowWrapper {}`;
diff --git a/src/__tests__/components/Articles/listOfArticles.test.js b/src/__tests__/components/Articles/listOfArticles.test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'react-thunk';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import articles from '../../../__mocks__/articles';
+import { mockStore, initialState } from '../../../__mocks__/store';
+import ListOfArticles from '../../../components/Articles/ListOfArticles/ListOfArticles';
+import { shallow, mount } from '../../../../config/enzymeConfig';
+
+const props = {
+  articles,
+  getAllArticles: jest.fn()
+};
+const store = mockStore({
+  ...initialState,
+  articles: { articles }
+});
+describe('<ListOfArticles />', () => {
+  it('should render a <ListOfArticles /> component ', () => {
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <ListOfArticles />
+        </MemoryRouter>
+      </Provider>);
+  });
+});