crud comment added

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

src/__mocks__/article.js

@@ -61,3 +61,12 @@ export const article = {
     entityMap: {}
   })
 };
+
+export const newComment = {
+  id: 2,
+  articleSlug: 'slug',
+  userId: 5,
+  body: 'this is a comment'
+};
+
+export const Comment = { body: 'comme here' };

src/__tests__/actions/comments/createComment.test.js

@@ -0,0 +1,12 @@
+import { createComment } from '../../../actions/index';
+import { Comment } from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('Create comment', () => {
+  test('returns comments information', async () => {
+    const result = createComment(Comment)(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+  });
+});

src/__tests__/actions/comments/deleteComment.test.js

@@ -0,0 +1,12 @@
+import { deleteComment } from '../../../actions/index';
+import { newComment } from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('delete comment', () => {
+  it('returns delete comment information', async () => {
+    const result = deleteComment(newComment)(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+  });
+});

src/__tests__/actions/comments/editComment.test.js

@@ -0,0 +1,12 @@
+import { editComment } from '../../../actions/index';
+import { Comment } from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('Edit comment', () => {
+  test('returns comments information', async () => {
+    const result = editComment(Comment)(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+  });
+});

src/__tests__/actions/comments/fetchComments.test.js

@@ -0,0 +1,12 @@
+import { fetchComments } from '../../../actions/index';
+import { newComment } from '../../../__mocks__/article';
+
+const dispatch = jest.fn(action => action);
+
+describe('Fetch comments', () => {
+  test('returns fetch comments information', async () => {
+    const result = fetchComments(newComment)(dispatch);
+    expect(result).toHaveProperty('type');
+    expect(result).toHaveProperty('payload');
+  });
+});

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

@@ -1,9 +1,8 @@
 import React from 'react';
-import { createRate, clearCreateRateStore } from '../../../actions/rating';
 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';
 

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ProgressBar as ProgressBarComponent } from '../../../components/common/ProgressBar/ProgressBar';
+import { shallow } from '../../../../config/enzymeConfig';
+
+describe('<Progress />', () => {
+  const component = shallow(<ProgressBarComponent />);
+  it('should render progressbar', () => {
+    expect(component).toMatchSnapshot();
+  });
+});

src/__tests__/components/Articles/__snapshots__/ProgressBar.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Progress /> should render progressbar 1`] = `ShallowWrapper {}`;

src/__tests__/actions/rating/__snapshots__/createRate.test.js.snap → src/__tests__/components/comments/__snapshots__/commentForm.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<RatingComponent /> should render a <CreateRatingComponent /> component  1`] = `ShallowWrapper {}`;
+exports[`<CommentComponent /> should render a <CommentFormComponent /> component  1`] = `ShallowWrapper {}`;

src/__tests__/components/comments/commentForm.test.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from '../../../__mocks__/store';
+import CommentForm, { CommentForm as CommentFormComponent } from '../../../components/Articles/Comments/CommentForm';
+import { shallow, mount } from '../../../../config/enzymeConfig';
+import user from '../../../__mocks__/user';
+
+const props = {
+  errors: { error: ['12'] },
+  comments: [
+    {
+      body: 'Hello John Doe',
+      userId: 1,
+      commentAuthor: {
+        firstName: 'John',
+        lastName: 'Doe',
+        username: 'johndoe',
+        image: 'image.png'
+      },
+      createdAt: '2019-01-01'
+    }
+  ],
+
+  createComment: jest.fn(),
+  isAuth: true,
+  profile: {
+    id: 1,
+    ...user
+  }
+};
+const state = { loading: true, comment: 'this is the comment' };
+
+describe('<CommentComponent />', () => {
+  const component = shallow(<CommentFormComponent {...props} />);
+  test('should render a <CommentFormComponent /> component ', () => {
+    expect(component).toMatchSnapshot();
+  });
+  test('should set state', () => {
+    component.setState({ ...state });
+    expect(component).toHaveLength(1);
+  });
+
+  test('should call onChange method when the comment is provided', () => {
+    const component = shallow(<CommentFormComponent {...props} />);
+    const spy = jest.spyOn(component.instance(), 'onChange');
+    component.instance().forceUpdate();
+    component.setProps({ ...props, errors: { errors: ['error1'] } });
+    const event = { target: { value: 'body' } };
+    const textArea = component.find('#commentBody');
+    textArea.simulate('change', event);
+    expect(textArea.length).toBe(1);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  test('should submit comment', () => {
+    const component = shallow(<CommentFormComponent state={state} {...props} />);
+    const instance = component.instance();
+
+    const fakeEvent = { preventDefault: jest.fn() };
+    instance.onSubmit(fakeEvent);
+  });
+
+  test('', () => {
+    const component = shallow(<CommentFormComponent state={state} {...{ ...props, isAuth: false }} />);
+
+    component.setState({ errors: { token: 'some' } });
+    const fakeEvent = { preventDefault: () => {} };
+  });
+
+  test('render the props', () => {
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <CommentForm {...props} />
+        </MemoryRouter>
+      </Provider>);
+
+    expect(component).toHaveLength(1);
+  });
+});

src/__tests__/components/comments/commentThread.test.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import store from '../../../__mocks__/store';
+import CommentThread, { CommentThread as ComponentThreadComponent } from '../../../components/Articles/Comments/CommentThread';
+import { shallow, mount } from '../../../../config/enzymeConfig';
+import user from '../../../__mocks__/user';
+
+let component = '';
+let submitButton = '';
+let form = '';
+let toggleComment = '';
+let deleteComment = '';
+const closeComment = '';
+
+const state = {
+  comments: [
+    {
+      id: 2,
+      articleSlug: 'slug',
+      userId: 1,
+      body: 'we are here',
+      commentAuthor: user
+    },
+    {
+      id: 4,
+      articleSlug: 'slug',
+      userId: 5,
+      body: 'we are here',
+      commentAuthor: user
+    }
+  ],
+  errors: {},
+  commentEditor: { 0: { display: 'block' } },
+  newComments: { 'comment-0': { value: 'we are here' } }
+};
+
+const props = {
+  profile: {
+    id: 1,
+    ...user
+  },
+  isAuth: true,
+  loading: false,
+  slug: '',
+  deleteComment: jest.fn(comment => comment),
+  fetchComments: jest.fn(),
+  toggleCommentEditor: jest.fn(key => key),
+  closeCommentEditor: jest.fn(),
+  editComment: jest.fn(),
+  onSubmit: jest.fn(),
+  comments: ['this is the first comment', 'this is the onother comment'],
+  deleted: true
+};
+
+describe('COMMENT THREAD', () => {
+  test('kkk', () => {
+    component = shallow(<ComponentThreadComponent state={state} {...props} />);
+    component.setState(state);
+
+    submitButton = component.find('#submit-comment').exists();
+    form = component.find('#submit-comment');
+    form.map(f => f.simulate('submit', { preventDefault: jest.fn() }));
+    component.instance().onDeleteComment(1, 1);
+    component.instance().componentWillReceiveProps(props);
+    component.instance().onChangeEditComment({ target: { value: 'hello world' } });
+    component.instance().toggleCommentEditor(2);
+    component.instance().closeCommentEditor({ preventDefault: jest.fn() });
+    component.instance().onSubmit({ preventDefault: jest.fn() });
+  });
+
+  test('Should not comment when the user is not authenticated', () => {
+    component = shallow(<ComponentThreadComponent state={state} {...{ ...props, isAuth: false }} />);
+    component.setState(state);
+
+    submitButton = component.find('#submit-comment').exists();
+    form = component.find('#submit-comment');
+    form.map(f => f.simulate('submit', { preventDefault: jest.fn() }));
+  });
+
+  test('Should comment when the user is logged in', () => {
+    component = shallow(<ComponentThreadComponent state={{ ...state, newComments: {} }} {...props} />);
+    component.setState({ ...state, newComments: {} });
+
+    submitButton = component.find('#submit-comment').exists();
+    form = component.find('#submit-comment');
+    form.map(f => f.simulate('submit', { preventDefault: jest.fn() }));
+  });
+
+  test('Should toggle edit form', () => {
+    component = shallow(<ComponentThreadComponent state={{ ...state }} {...props} />);
+    component.setState({ ...state });
+
+    toggleComment = component.find('#toggle-comment');
+    toggleComment.simulate('click');
+  });
+
+  test('Should delete comment', () => {
+    component = shallow(<ComponentThreadComponent state={{ ...state }} {...props} />);
+    component.setState({ ...state });
+
+    deleteComment = component.find('#delete-comment');
+    deleteComment.simulate('click');
+  });
+
+  test('Should close toggle comment editor', () => {
+    component = shallow(<ComponentThreadComponent state={{ ...state }} {...props} />);
+    component.setState({ ...state });
+
+    submitButton = component.find('#close-comment-editor').exists();
+    form = component.find('#close-comment-editor');
+    form.map(f => f.simulate('click', { preventDefault: jest.fn() }));
+  });
+
+  test('render the props', () => {
+    const component = mount(<Provider store={store}>
+        <MemoryRouter>
+          <CommentThread {...props} />
+        </MemoryRouter>
+      </Provider>);
+
+    expect(component).toHaveLength(1);
+  });
+});

src/__tests__/components/comments/comments.test.js

@@ -1,56 +1,14 @@
 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 { CommentForm as CommentFormComponent } from '../../../components/Articles/Comments/CommentForm';
-import { shallow, mount } from '../../../../config/enzymeConfig';
+import { Comments as CommentsComponent } from '../../../components/Articles/Comments/Comments';
+import { shallow } from '../../../../config/enzymeConfig';
 
-describe('<CommentComponent />', () => {
-  const props = {
-    errors: { error: ['12'] },
-    comments: [
-      {
-        body: 'Hello John Doe',
-        userId: 1,
-        commentAuthor: {
-          firstName: 'John',
-          lastName: 'Doe',
-          username: 'johndoe',
-          image: 'image.png'
-        },
-        createdAt: '2019-01-01'
-      }
-    ],
-    createComment: jest.fn()
-  };
-  const state = { title: 'comments' };
-  const component = shallow(<CommentFormComponent {...props} />);
-  it('should render a <CommentFormComponent /> component ', () => {
-    expect(component).toMatchSnapshot();
-  });
-  it('should set state', () => {
-    component.setState({ ...state });
-    expect(component).toHaveLength(1);
-  });
-  it('should call onChange method when the comment is provided', () => {
-    const component = shallow(<CommentFormComponent {...props} />);
-    const spy = jest.spyOn(component.instance(), 'onChange');
-    component.instance().forceUpdate();
-    component.setProps({ ...props, errors: { errors: ['error1'] } });
-    const event = { target: { value: 'body' } };
-    const textArea = component.find('#commentBody');
-    textArea.simulate('change', event);
-    expect(textArea.length).toBe(1);
-    expect(spy).toHaveBeenCalled();
-  });
-  it('should submit comment', () => {
-    const instance = component.instance();
-    const fakeEvent = { preventDefault: () => {} };
-    instance.onSubmit(fakeEvent);
+let component = '';
+
+const state = { title: 'comments' };
+
+describe('COMMENTS', () => {
+  test('render the comments', () => {
+    component = shallow(<CommentsComponent state={state} />);
+    component.setState(state);
   });
-  it('should not comment if not logged in ', () => {
-    component.setProps({ isAuth: false });
-    component.setState({ errors: { token: 'some' } });
-    const fakeEvent = { preventDefault: () => {} };
 });