chore: test cases added and CI config updated

Author: Ashish Kumar

.babelrc

@@ -5,8 +5,7 @@
                 "modules": false,
                 "targets": [
                     "last 3 versions", "not dead", "not < 1%"
-                ],
-                // "useBuiltIns": "usage"
+                ]
             }
         ],
         "@babel/preset-react"
@@ -31,6 +30,18 @@
                     }
                 ]
             ]
-        }
+        },
+        "test": {
+            "presets": [
+              [
+                "@babel/preset-env",
+                {
+                  "targets": {
+                    "node": "current"
+                  }
+                }
+              ]
+            ]
+          }
     }
 }

.circleci/config.yml

@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  node: circleci/node@1.1.6
+  node: circleci/node:lts
 jobs:
   build-and-test:
     executor:
@@ -11,6 +11,7 @@ jobs:
           steps:
             - run: npm install
             - run: npm run lint
+            - run: npm run test
 workflows:
     build-and-test:
       jobs:

.eslintignore

@@ -4,4 +4,5 @@
 .gitignore
 .travis.yml
 docker-compose.yml
-Dockerfile
+Dockerfile
+*.test.js

.gitignore

@@ -1,3 +1,4 @@
 /client-build
 /server-build
-/node_modules
+/node_modules
+__snapshots__

client/__tests__/index.test.js

@@ -0,0 +1,50 @@
+/* eslint-disable no-undef */
+import configureMockStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import axios from "axios";
+import Cookies from "universal-cookie";
+import mockData from "../constants/mockData";
+import * as actions from "../actions/index";
+import * as types from "../constants/ActionTypes";
+import * as reducers from "../reducers/StoriesReducer";
+
+const cookies = new Cookies();
+jest.mock("axios");
+const middlewares = [thunk.withExtraArgument({
+    api: axios,
+    cookies
+})];
+const mockStore = configureMockStore(middlewares);
+
+const store = mockStore(reducers.INITIAL_STATE);
+
+describe("TESTING ACTIONS", () => {
+    const response = mockData;
+    const payload = response.hits[0];
+    const expectedAction = [
+        {
+            type: types.FETCH_STORIES_PENDING
+        }, {
+            type: types.FETCH_STORIES_SUCCESS,
+            payload: response
+        },
+        {
+            type: types.UPVOTE_STORY,
+            payload: payload.objectID
+        }
+    ];
+    axios.get.mockResolvedValue({
+        ...response
+    });
+    it(`${types.UPVOTE_STORY} ->`, () => {
+        store
+            .dispatch(actions.fetchStories(1))
+            .then(() => expect(actions.updateUpVote(payload)).toEqual(expectedAction));
+    });
+
+    it(`${types.HIDE_STORY} ->`, () => {
+        store
+            .dispatch(actions.fetchStories(1))
+            .then(() => expect(actions.hideStory(payload)).toEqual(expectedAction));
+    });
+});

client/actions/index.js

@@ -48,11 +48,13 @@ export const fetchStories = (page = 0) => async (dispatch, getState, { api }) =>
         const res = await api.get(`/search?page=${page}&hitsPerPage=30`);
         const modifiedData = await dispatch(updateListWithPersistentData(res.data));
         dispatch(updateStoriesInStore(modifiedData));
+        return modifiedData;
     } catch (err) {
         console.log(err);
         dispatch({
             type: FETCH_STORIES_FAILURE
         });
+        return {};
     }
 };
 

client/components/StoryList/__tests__/index.test.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import { shallow, configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+// eslint-disable-next-line import/no-self-import
+import { Provider } from "react-redux";
+import configureMockStore from "redux-mock-store";
+import StoryList from "../index";
+import mockData from "../../../constants/mockData";
+
+React.useLayoutEffect = React.useEffect;
+
+const mockStore = configureMockStore();
+const store = mockStore({
+    stories: {
+        loading: false,
+        data: mockData
+    }
+});
+
+configure({ adapter: new Adapter() });
+
+test("Testing StoryList >>", () => {
+    const component = shallow(
+        <Provider store={store}>
+            <MemoryRouter>
+                <StoryList />
+            </MemoryRouter>
+        </Provider>
+    );
+
+    // const tree = component.toJSON();
+    expect(component.render()).toMatchSnapshot();
+});

client/constants/mockData.js

@@ -0,0 +1,85 @@
+export default {
+    hits: [
+        {
+            created_at: "2013-04-12T05:07:53.000Z",
+            title: "",
+            url: "",
+            author: "xijuan",
+            points: 2751,
+            story_text: "26 to 30",
+            comment_text: null,
+            num_comments: null,
+            story_id: null,
+            story_title: null,
+            story_url: null,
+            parent_id: 5536734,
+            created_at_i: 1365743273,
+            relevancy_score: 4557,
+            _tags: [
+                "pollopt", "author_xijuan", "story_5536739"
+            ],
+            objectID: "5536739",
+            _highlightResult: {
+                title: {
+                    value: "",
+                    matchLevel: "none",
+                    matchedWords: []
+                },
+                url: {
+                    value: "",
+                    matchLevel: "none",
+                    matchedWords: []
+                },
+                author: {
+                    value: "xijuan",
+                    matchLevel: "none",
+                    matchedWords: []
+                },
+                story_text: {
+                    value: "26 to 30",
+                    matchLevel: "none",
+                    matchedWords: []
+                }
+            }
+        }, {
+            created_at: "2011-05-29T01:13:53.000Z",
+            title: null,
+            url: null,
+            author: "pg",
+            points: 2743,
+            story_text: "I liked it better when comment scores were displayed.",
+            comment_text: null,
+            num_comments: null,
+            story_id: null,
+            story_title: null,
+            story_url: null,
+            parent_id: 2595605,
+            created_at_i: 1306631633,
+            relevancy_score: 3240,
+            _tags: [
+                "pollopt", "author_pg", "story_2595606"
+            ],
+            objectID: "2595606",
+            _highlightResult: {
+                author: {
+                    value: "pg",
+                    matchLevel: "none",
+                    matchedWords: []
+                },
+                story_text: {
+                    value: "I liked it better when comment scores were displayed.",
+                    matchLevel: "none",
+                    matchedWords: []
+                }
+            }
+        }
+    ],
+    nbHits: 21526846,
+    page: 1,
+    nbPages: 34,
+    hitsPerPage: 30,
+    exhaustiveNbHits: true,
+    query: "",
+    params: "advancedSyntax=true\u0026analytics=true\u0026analyticsTags=backend\u0026hitsPerPage=30\u0026page=1",
+    processingTimeMS: 2
+};

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    // presets: ["@babel/preset-env", "@babel/preset-react"],
+    transformIgnorePatterns: ["<rootDir>/node_modules/"],
+    transform: {
+        "^.+\\.(js|jsx)?$": "babel-jest"
+    }
+};