feat(tag): implement articles search by tag

- Create actions for searching by tag
- Create components for filtered articles page
- Write unit tests

[Delivers #166840979]

Author: codeBlock-1984

_test_/App.spec.js

@@ -26,6 +26,6 @@ describe('App', () => {
     expect(app.find('Switch').length).toBe(1);
   });
   it('renders a Route component', () => {
-    expect(app.find('Route').length).toBe(19);
+    expect(app.find('Route').length).toBe(16);
   });
 });

_test_/ArticleActions.spec.js

@@ -1,17 +1,21 @@
 import moxios from 'moxios';
 import makeMockStore from './Utils/makeMockStore';
-import { fetchResponseData, mockData } from './testData/articleData';
+import { fetchResponseData, mockData, getArticlesByTagData } from './testData/articleData';
 import ArticleActions from '../src/actions/ArticleActions';
 import {
   SET_LOADING,
   FETCH_ARTICLES,
   SET_CURRENT_ARTICLES,
+  GET_ARTICLES_BY_TAG,
 } from '../src/actions/types';
 
-const { fetchArticles } = ArticleActions;
+const { fetchArticles, getArticlesByTag } = ArticleActions;
 
 const store = makeMockStore({
   article: {
+    totalArticles: 0,
+    currentArticles: [],
+    articlesByTag: [],
     allArticles: [],
     loading: false,
   },
@@ -26,23 +30,25 @@ describe('Article Actions', () => {
     moxios.uninstall();
   });
 
-  it('fetches articles', () => {
-    moxios.wait(() => {
-      const request = moxios.requests.mostRecent();
-      request.respondWith({ status: 200, response: fetchResponseData });
-    });
+  describe('fetchArticles', () => {
+    it('fetches articles', () => {
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith({ status: 200, response: fetchResponseData });
+      });
 
-    const expectedActions = [
-      { type: SET_LOADING },
-      { type: FETCH_ARTICLES, payload: mockData },
-      { type: SET_CURRENT_ARTICLES, payload: mockData.articles },
-    ];
+      const expectedActions = [
+        { type: SET_LOADING },
+        { type: FETCH_ARTICLES, payload: mockData },
+        { type: SET_CURRENT_ARTICLES, payload: mockData.articles },
+      ];
 
-    return store.dispatch(fetchArticles())
-      .then(() => {
-        const actionsCalled = store.getActions();
-        expect(actionsCalled).toEqual(expectedActions);
-        expect(actionsCalled[1].type).toEqual(FETCH_ARTICLES);
-      });
+      return store.dispatch(fetchArticles())
+        .then(() => {
+          const actionsCalled = store.getActions();
+          expect(actionsCalled).toEqual(expectedActions);
+          expect(actionsCalled[1].type).toEqual(FETCH_ARTICLES);
+        });
+    });
   });
 });

_test_/ArticleActionsTag.spec.js

@@ -0,0 +1,85 @@
+import moxios from 'moxios';
+import makeMockStore from './Utils/makeMockStore';
+import { getArticlesByTagData } from './testData/articleData';
+import ArticleActions from '../src/actions/ArticleActions';
+import {
+  SET_LOADING,
+  GET_ARTICLES_BY_TAG,
+  GET_ERRORS,
+} from '../src/actions/types';
+
+const { getArticlesByTag } = ArticleActions;
+
+const store = makeMockStore({
+  article: {
+    totalArticles: 0,
+    currentArticles: [],
+    articlesByTag: [],
+    allArticles: [],
+    loading: false,
+  },
+  errors: {},
+});
+
+describe('Article Actions', () => {
+  describe('getArticlesByTag', () => {
+    beforeEach(() => {
+      moxios.install();
+    });
+    afterEach(() => {
+      moxios.uninstall();
+    });
+
+    it('fetches articles with a specific tag', () => {
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        request.respondWith({ status: 200, response: getArticlesByTagData });
+      });
+
+      const expectedActions = [
+        { type: SET_LOADING },
+        { type: GET_ARTICLES_BY_TAG, payload: getArticlesByTagData.data[0] },
+      ];
+
+      return store.dispatch(getArticlesByTag('lagos', 1))
+        .then(() => {
+          const actionsCalled = store.getActions();
+          expect(actionsCalled).toEqual(expectedActions);
+        });
+    });
+  });
+
+
+  describe('getArticlesByTag error', () => {
+    beforeEach(() => {
+      moxios.install();
+    });
+    afterEach(() => {
+      moxios.uninstall();
+    });
+
+    it('throws an error', () => {
+      moxios.wait(() => {
+        const request = moxios.requests.mostRecent();
+        const errorResponse = {
+          status: 400,
+          message: 'Your search input must be greater than 3 letters',
+        };
+        request.respondWith({ status: 200, response: errorResponse });
+      });
+
+      const expectedActions = [
+        { type: SET_LOADING },
+        { type: GET_ARTICLES_BY_TAG, payload: getArticlesByTagData.data[0] },
+        { type: SET_LOADING },
+        { type: GET_ERRORS, payload: 'Cannot read property \'0\' of undefined' },
+      ];
+
+      return store.dispatch(getArticlesByTag('trjkfjjdhh', 9))
+        .then(() => {
+          const actionsCalled = store.getActions();
+          expect(actionsCalled).toEqual(expectedActions);
+        });
+    });
+  });
+});

_test_/FilteredArticles.spec.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import expect from 'expect';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+import { FilteredArticles } from '../src/views/FilteredArticles';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Articles', () => {
+  describe('', () => {
+    let app;
+    const props = {
+      paginate: jest.fn(),
+      getArticlesByTag: jest.fn(),
+      loading: false,
+      articles: {
+        loading: false,
+        allArticles: {
+          articles: [
+            {
+              id: 1,
+              title: 'title 1',
+              imageUrl: 'http://img.com',
+              body: 'I am the body',
+              Category: {
+                name: 'Game',
+              },
+              views: '34',
+            },
+            {
+              id: 2,
+              title: 'title 2',
+              imageUrl: 'http://img.com',
+              body: 'I am the body 2',
+              Category: {
+                name: 'Game',
+              },
+              views: '34',
+            },
+          ],
+          articleCount: 2,
+        },
+      },
+    };
+
+    const propsTwo = {
+      paginate: jest.fn(),
+      loading: true,
+      getArticlesByTag: jest.fn(),
+      articles: {
+        loading: true,
+        allArticles: {
+          articles: [],
+          articleCount: 2,
+        },
+      },
+    };
+
+    beforeEach(() => {
+      app = shallow(<FilteredArticles {...props} />);
+    });
+
+    it('renders successfully', () => {
+      expect(app).toBeDefined();
+    });
+
+    it('renders a div component', () => {
+      expect(app.find('div').length).toBe(2);
+    });
+
+    it('renders a loader component', () => {
+      const appTwo = shallow(<FilteredArticles {...propsTwo} />);
+      expect(appTwo.find('Index').length).toBe(1);
+    });
+
+    it('contains a paginate method', () => {
+      const data = {
+        selected: 2,
+      };
+      const inst = app.instance();
+      inst.paginate(data);
+    });
+  });
+});

_test_/FilteredLayout.spec.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import FilteredLayout from '../src/components/FilteredLayout/index';
+
+describe('Article Layout', () => {
+  describe('When no article found', () => {
+    let app;
+    const article = {
+      allArticles: [
+        'No Article Found',
+      ],
+    };
+
+    beforeEach(() => {
+      app = shallow(<FilteredLayout article={article} />);
+    });
+
+    it('renders successfully', () => {
+      expect(app).toBeDefined();
+    });
+
+    it('Check for div', () => {
+      expect(app.find('div').length).toBe(1);
+    });
+  });
+
+  describe('Load articles', () => {
+    let app;
+    const article = {
+      allArticles: [
+        {
+          article: {
+            id: 3,
+            title: 'Article 3',
+            slug: 'article',
+            description: '',
+            body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
+            imageUrl: '',
+            isDraft: true,
+            views: 21,
+            read: 21,
+            readRatio: 0,
+            userId: 1,
+            catId: 1,
+            Category: {
+              id: 1,
+              name: 'Education',
+            },
+            User: {
+              id: 1,
+              firstName: null,
+              lastName: null,
+              userName: 'Alpha',
+              bio: null,
+              imageUrl: null,
+            },
+          },
+        },
+        {
+          article: {
+            id: 2,
+            title: 'Article 2',
+            slug: 'article',
+            description: '',
+            body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
+            imageUrl: '',
+            isDraft: true,
+            views: 4,
+            read: 4,
+            readRatio: 0,
+            userId: 1,
+            catId: 1,
+            Category: {
+              id: 1,
+              name: 'Education',
+            },
+            User: {
+              id: 1,
+              firstName: null,
+              lastName: null,
+              userName: 'Alpha',
+              bio: null,
+              imageUrl: null,
+            },
+          },
+        },
+      ],
+    };
+
+    beforeEach(() => {
+      app = shallow(<FilteredLayout article={article} />);
+    });
+
+    it('renders successfully', () => {
+      expect(app).toBeDefined();
+    });
+  });
+});

_test_/LikeIcon.spec.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import LikeIcon from '../src/components/articleLayout/LikeIcon';
+
+describe('LikeIcon', () => {
+  let app;
+
+  beforeEach(() => {
+    app = shallow(<LikeIcon likeCount={2} />);
+  });
+
+  it('renders successfully', () => {
+    expect(app).toBeDefined();
+  });
+});

_test_/Tags.spec.js

@@ -18,8 +18,14 @@ describe('Tags', () => {
     expect(component).toBeDefined();
   });
 
-  it('renders three div components', () => {
-    expect(component.find('div').length).toBe(3);
+  it('has an onclick handler', () => {
+    const app = shallow(<Tags tags={['tag']} />);
+    expect(app.find('Link').length).toBe(1);
+    app.find('Link').simulate('click');
+  });
+
+  it('renders three Link', () => {
+    expect(component.find('Link').length).toBe(3);
   });
 
   it('renders no div component', () => {