Fix JS unit tests

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/apollo/utils.ts

@@ -59,7 +59,7 @@ export const typePolicies: TypePolicies = {
   Event: {
     fields: {
       participants: paginatedLimitPagination<IParticipant>(["roles"]),
-      commnents: pageLimitPagination<IComment>(),
+      comments: pageLimitPagination<IComment>(),
       relatedEvents: pageLimitPagination<IEvent>(),
     },
   },

js/tests/unit/specs/components/Comment/CommentTree.spec.ts

@@ -15,6 +15,7 @@ import { CommentModeration } from "@/types/enums";
 import { IEvent } from "@/types/event.model";
 import {
   eventCommentThreadsMock,
+  eventNoCommentThreadsMock,
   newCommentForEventMock,
   newCommentForEventResponse,
 } from "../../mocks/event";
@@ -35,7 +36,7 @@ const eventData = {
 };
 describe("CommentTree", () => {
   let wrapper: Wrapper<Vue>;
-  let mockClient: MockApolloClient;
+  let mockClient: MockApolloClient | null;
   let apolloProvider;
   let requestHandlers: Record<string, RequestHandler>;
   const cache = new InMemoryCache({ addTypename: false });
@@ -83,24 +84,10 @@ describe("CommentTree", () => {
     });
   };
 
-  it("renders an empty comment tree", async () => {
-    generateWrapper();
-
-    expect(wrapper.exists()).toBe(true);
-    expect(wrapper.find(".loading").text()).toBe("Loading comments…");
-
-    await wrapper.vm.$nextTick();
-    await wrapper.vm.$nextTick(); // because of the <transition>
-
-    expect(wrapper.find(".no-comments").text()).toBe("No comments yet");
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
   it("renders a comment tree with comments", async () => {
     generateWrapper();
 
-    await wrapper.vm.$nextTick();
+    await flushPromises();
-    await wrapper.vm.$nextTick(); // because of the <transition>
 
     expect(wrapper.exists()).toBe(true);
     expect(
@@ -150,4 +137,21 @@ describe("CommentTree", () => {
       }
     }
   });
+
+  it("renders an empty comment tree", async () => {
+    generateWrapper({
+      eventCommentThreadsQueryHandler: jest
+        .fn()
+        .mockResolvedValue(eventNoCommentThreadsMock),
+    });
+    expect(requestHandlers.eventCommentThreadsQueryHandler).toHaveBeenCalled();
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find(".loading").text()).toBe("Loading comments…");
+
+    await flushPromises();
+
+    expect(wrapper.find(".no-comments").text()).toBe("No comments yet");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 });

js/tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap

@@ -2,25 +2,62 @@
 
 exports[`CommentTree renders a comment tree with comments 1`] = `
 <div>
-  <!---->
+  <form class="new-comment">
+    <!---->
+    <article class="media">
+      <figure class="media-left">
+        <identity-picker-wrapper-stub value="[object Object]"></identity-picker-wrapper-stub>
+      </figure>
+      <div class="media-content">
+        <div class="field">
+          <div class="field">
+            <p class="control">
+              <editor-stub mode="comment" value=""></editor-stub>
+            </p>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+      <div class="send-comment">
+        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" aria-label="Post a comment" class="comment-button-submit"></b-button-stub>
+      </div>
+    </article>
+  </form>
   <transition-group-stub name="comment-empty-list" mode="out-in">
     <transition-group-stub tag="ul" name="comment-list" class="comment-list">
       <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
       <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
     </transition-group-stub>
-    <div class="no-comments"><span>No comments yet</span></div>
   </transition-group-stub>
 </div>
 `;
 
 exports[`CommentTree renders an empty comment tree 1`] = `
 <div>
-  <!---->
+  <form class="new-comment">
+    <!---->
+    <article class="media">
+      <figure class="media-left">
+        <identity-picker-wrapper-stub value="[object Object]"></identity-picker-wrapper-stub>
+      </figure>
+      <div class="media-content">
+        <div class="field">
+          <div class="field">
+            <p class="control">
+              <editor-stub mode="comment" value=""></editor-stub>
+            </p>
+            <!---->
+          </div>
+          <!---->
+        </div>
+      </div>
+      <div class="send-comment">
+        <b-button-stub type="is-primary" iconleft="send" nativetype="submit" tag="button" aria-label="Post a comment" class="comment-button-submit"></b-button-stub>
+      </div>
+    </article>
+  </form>
   <transition-group-stub name="comment-empty-list" mode="out-in">
-    <transition-group-stub tag="ul" name="comment-list" class="comment-list">
-      <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
-      <comment-stub comment="[object Object]" event="[object Object]" class="root-comment"></comment-stub>
-    </transition-group-stub>
     <div class="no-comments"><span>No comments yet</span></div>
   </transition-group-stub>
 </div>

js/tests/unit/specs/mocks/event.ts

@@ -63,6 +63,17 @@ export const joinEventMock = {
   locale: "en_US",
 };
 
+export const eventNoCommentThreadsMock = {
+  data: {
+    event: {
+      __typename: "Event",
+      id: "1",
+      uuid: "f37910ea-fd5a-4756-9679-00971f3f4106",
+      comments: [],
+    },
+  },
+};
+
 export const eventCommentThreadsMock = {
   data: {
     event: {