async await article store actions (#108)

* introduce test for fetching comments for an article

* use async await in fetch comments action

* return comments from action call

* add tests to make sure that comments are fetched

* use async await and add tests

src/store/article.module.js

@@ -50,34 +50,29 @@ export const actions = {
     context.commit(SET_ARTICLE, data.article);
     return data;
   },
-  [FETCH_COMMENTS](context, articleSlug) {
-    return CommentsService.get(articleSlug).then(({ data }) => {
-      context.commit(SET_COMMENTS, data.comments);
-    });
-  },
-  [COMMENT_CREATE](context, payload) {
-    return CommentsService.post(payload.slug, payload.comment).then(() => {
-      context.dispatch(FETCH_COMMENTS, payload.slug);
-    });
-  },
-  [COMMENT_DESTROY](context, payload) {
-    return CommentsService.destroy(payload.slug, payload.commentId).then(() => {
-      context.dispatch(FETCH_COMMENTS, payload.slug);
-    });
-  },
-  [FAVORITE_ADD](context, payload) {
-    return FavoriteService.add(payload).then(({ data }) => {
-      // Update list as well. This allows us to favorite an article in the Home view.
-      context.commit(UPDATE_ARTICLE_IN_LIST, data.article, { root: true });
-      context.commit(SET_ARTICLE, data.article);
-    });
-  },
-  [FAVORITE_REMOVE](context, payload) {
-    return FavoriteService.remove(payload).then(({ data }) => {
-      // Update list as well. This allows us to favorite an article in the Home view.
-      context.commit(UPDATE_ARTICLE_IN_LIST, data.article, { root: true });
-      context.commit(SET_ARTICLE, data.article);
-    });
+  async [FETCH_COMMENTS](context, articleSlug) {
+    const { data } = await CommentsService.get(articleSlug);
+    context.commit(SET_COMMENTS, data.comments);
+    return data.comments;
+  },
+  async [COMMENT_CREATE](context, payload) {
+    await CommentsService.post(payload.slug, payload.comment);
+    context.dispatch(FETCH_COMMENTS, payload.slug);
+  },
+  async [COMMENT_DESTROY](context, payload) {
+    await CommentsService.destroy(payload.slug, payload.commentId);
+    context.dispatch(FETCH_COMMENTS, payload.slug);
+  },
+  async [FAVORITE_ADD](context, payload) {
+    const { data } = await FavoriteService.add(payload);
+    context.commit(UPDATE_ARTICLE_IN_LIST, data.article, { root: true });
+    context.commit(SET_ARTICLE, data.article);
+  },
+  async [FAVORITE_REMOVE](context, payload) {
+    const { data } = await FavoriteService.remove(payload);
+    // Update list as well. This allows us to favorite an article in the Home view.
+    context.commit(UPDATE_ARTICLE_IN_LIST, data.article, { root: true });
+    context.commit(SET_ARTICLE, data.article);
   },
   [ARTICLE_PUBLISH]({ state }) {
     return ArticlesService.create(state.article);

tests/unit/store/article.module.spec.js

@@ -1,5 +1,12 @@
 import { actions } from "../../../src/store/article.module";
-import { FETCH_ARTICLE } from "../../../src/store/actions.type";
+import {
+  FETCH_ARTICLE,
+  FETCH_COMMENTS,
+  COMMENT_CREATE,
+  COMMENT_DESTROY,
+  FAVORITE_ADD,
+  FAVORITE_REMOVE
+} from "../../../src/store/actions.type";
 
 jest.mock("vue", () => {
   return {
@@ -20,7 +27,82 @@ jest.mock("vue", () => {
             }
           };
         }
-        return "A not mocked up response occured";
+        if (articleSlug.includes("f986b3d6-95c2-4c4f-a6b9-fbbf79d8cb0c")) {
+          return {
+            data: {
+              comments: [
+                {
+                  id: 1,
+                  createdAt: "2018-12-01T15:43:41.235Z",
+                  updatedAt: "2018-12-01T15:43:41.235Z",
+                  body: "Lorem ipsum dolor sit amet.",
+                  author: {
+                    username: "dccf649a-5e7b-4040-b8c3-ecf74598eba2",
+                    bio: null,
+                    image: "https://via.placeholder.com/350x150",
+                    following: false
+                  }
+                },
+                {
+                  id: 2,
+                  createdAt: "2018-12-01T15:43:39.077Z",
+                  updatedAt: "2018-12-01T15:43:39.077Z",
+                  body:
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet.",
+                  author: {
+                    username: "8568a50a-9656-4d55-a023-632029513a2d",
+                    bio: null,
+                    image: "https://via.placeholder.com/350x150",
+                    following: false
+                  }
+                }
+              ]
+            }
+          };
+        }
+        throw new Error("Article not existing");
+      }),
+      post: jest.fn().mockImplementation(async articleSlug => {
+        if (articleSlug.includes("582e1e46-6b8b-4f4d-8848-f07b57e015a0")) {
+          return null;
+        }
+        if (articleSlug.includes("5611ee1b-0b95-417f-a917-86687176a627")) {
+          return {
+            data: {
+              article: {
+                author: {},
+                title: "Lorem ipsum dolor sit amet",
+                description:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed cursus nisl. Morbi pulvinar nisl urna, tincidunt mattis tortor sollicitudin eget. Nulla viverra justo quis.",
+                body:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum efficitur justo, nec aliquam quam rutrum in. Pellentesque vulputate augue quis vulputate finibus. Phasellus auctor semper sapien sit amet interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas placerat auctor metus. Integer blandit lacinia volutpat.",
+                tagList: ["lorem", "ipsum", "javascript", "vue"]
+              }
+            }
+          };
+        }
+        throw new Error("Article not existing");
+      }),
+      delete: jest.fn().mockImplementation(async articleSlug => {
+        if (articleSlug.includes("657a6075-d269-4aec-83fa-b14f579a3e78")) {
+          return null;
+        }
+        if (articleSlug.includes("480fdaf8-027c-43b1-8952-8403f90dcdab")) {
+          return {
+            data: {
+              article: {
+                author: {},
+                title: "Lorem ipsum dolor sit amet",
+                description:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed cursus nisl. Morbi pulvinar nisl urna, tincidunt mattis tortor sollicitudin eget. Nulla viverra justo quis.",
+                body:
+                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum efficitur justo, nec aliquam quam rutrum in. Pellentesque vulputate augue quis vulputate finibus. Phasellus auctor semper sapien sit amet interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas placerat auctor metus. Integer blandit lacinia volutpat.",
+                tagList: ["lorem", "ipsum", "javascript", "vue"]
+              }
+            }
+          };
+        }
+        throw new Error("Article not existing");
       })
     }
   };
@@ -56,4 +138,123 @@ describe("Vuex Article Module", () => {
     );
     expect(actionCall).toMatchSnapshot();
   });
+
+  it("should commit the right name when fetching comments for an existing article", async () => {
+    const commitFunction = jest.fn();
+    const context = { commit: commitFunction };
+    const articleSlug = "f986b3d6-95c2-4c4f-a6b9-fbbf79d8cb0c";
+    await actions[FETCH_COMMENTS](context, articleSlug);
+    expect(commitFunction.mock.calls[0][0]).toBe("setComments");
+  });
+
+  it("should commit the exact size of comments", async () => {
+    const commitFunction = jest.fn();
+    const context = { commit: commitFunction };
+    const articleSlug = "f986b3d6-95c2-4c4f-a6b9-fbbf79d8cb0c";
+    await actions[FETCH_COMMENTS](context, articleSlug);
+    expect(commitFunction.mock.calls[0][1]).toHaveLength(2);
+  });
+
+  it("should return the comments from the fetch comments action", async () => {
+    const context = { commit: () => {} };
+    const articleSlug = "f986b3d6-95c2-4c4f-a6b9-fbbf79d8cb0c";
+    const comments = await actions[FETCH_COMMENTS](context, articleSlug);
+    expect(comments).toHaveLength(2);
+  });
+
+  it("should dispatch a fetching comment action after successfully creating a comment", async () => {
+    const dispatchFunction = jest.fn();
+    const context = { dispatch: dispatchFunction };
+    const payload = {
+      slug: "582e1e46-6b8b-4f4d-8848-f07b57e015a0",
+      comment: "Lorem Ipsum"
+    };
+    await actions[COMMENT_CREATE](context, payload);
+    expect(dispatchFunction).toHaveBeenLastCalledWith(
+      "fetchComments",
+      "582e1e46-6b8b-4f4d-8848-f07b57e015a0"
+    );
+  });
+
+  it("should dispatch a fetching comment action after successfully deleting a comment", async () => {
+    const dispatchFunction = jest.fn();
+    const context = { dispatch: dispatchFunction };
+    const payload = {
+      slug: "657a6075-d269-4aec-83fa-b14f579a3e78",
+      commentId: 1
+    };
+    await actions[COMMENT_DESTROY](context, payload);
+    expect(dispatchFunction).toHaveBeenLastCalledWith(
+      "fetchComments",
+      "657a6075-d269-4aec-83fa-b14f579a3e78"
+    );
+  });
+
+  it("should commit updating the article in the list action favorize an article", async () => {
+    const commitFunction = jest.fn();
+    const context = { commit: commitFunction };
+    const payload = "5611ee1b-0b95-417f-a917-86687176a627";
+    await actions[FAVORITE_ADD](context, payload);
+    expect(commitFunction.mock.calls[0][0]).toBe("updateAricleInList");
+    expect(commitFunction.mock.calls[0][1]).toEqual({
+      author: {},
+      title: "Lorem ipsum dolor sit amet",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed cursus nisl. Morbi pulvinar nisl urna, tincidunt mattis tortor sollicitudin eget. Nulla viverra justo quis.",
+      body:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum efficitur justo, nec aliquam quam rutrum in. Pellentesque vulputate augue quis vulputate finibus. Phasellus auctor semper sapien sit amet interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas placerat auctor metus. Integer blandit lacinia volutpat.",
+      tagList: ["lorem", "ipsum", "javascript", "vue"]
+    });
+  });
+
+  it("should commit setting the article", async () => {
+    const commitFunction = jest.fn();
+    const context = { commit: commitFunction };
+    const payload = "5611ee1b-0b95-417f-a917-86687176a627";
+    await actions[FAVORITE_ADD](context, payload);
+    expect(commitFunction.mock.calls[1][0]).toBe("setArticle");
+    expect(commitFunction.mock.calls[1][1]).toEqual({
+      author: {},
+      title: "Lorem ipsum dolor sit amet",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed cursus nisl. Morbi pulvinar nisl urna, tincidunt mattis tortor sollicitudin eget. Nulla viverra justo quis.",
+      body:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum efficitur justo, nec aliquam quam rutrum in. Pellentesque vulputate augue quis vulputate finibus. Phasellus auctor semper sapien sit amet interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas placerat auctor metus. Integer blandit lacinia volutpat.",
+      tagList: ["lorem", "ipsum", "javascript", "vue"]
+    });
+  });
+
+  it("should commit updating the article in the list action favorize an article", async () => {
+    const commitFunction = jest.fn();
+    const context = { commit: commitFunction };
+    const payload = "480fdaf8-027c-43b1-8952-8403f90dcdab";
+    await actions[FAVORITE_REMOVE](context, payload);
+    expect(commitFunction.mock.calls[0][0]).toBe("updateAricleInList");
+    expect(commitFunction.mock.calls[0][1]).toEqual({
+      author: {},
+      title: "Lorem ipsum dolor sit amet",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed cursus nisl. Morbi pulvinar nisl urna, tincidunt mattis tortor sollicitudin eget. Nulla viverra justo quis.",
+      body:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum efficitur justo, nec aliquam quam rutrum in. Pellentesque vulputate augue quis vulputate finibus. Phasellus auctor semper sapien sit amet interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas placerat auctor metus. Integer blandit lacinia volutpat.",
+      tagList: ["lorem", "ipsum", "javascript", "vue"]
+    });
+  });
+
+  it("should commit setting the article", async () => {
+    const commitFunction = jest.fn();
+    const context = { commit: commitFunction };
+    const payload = "480fdaf8-027c-43b1-8952-8403f90dcdab";
+    await actions[FAVORITE_REMOVE](context, payload);
+    expect(commitFunction.mock.calls[1][0]).toBe("setArticle");
+    expect(commitFunction.mock.calls[1][1]).toEqual({
+      author: {},
+      title: "Lorem ipsum dolor sit amet",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed cursus nisl. Morbi pulvinar nisl urna, tincidunt mattis tortor sollicitudin eget. Nulla viverra justo quis.",
+      body:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum efficitur justo, nec aliquam quam rutrum in. Pellentesque vulputate augue quis vulputate finibus. Phasellus auctor semper sapien sit amet interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas placerat auctor metus. Integer blandit lacinia volutpat.",
+      tagList: ["lorem", "ipsum", "javascript", "vue"]
+    });
+  });
 });