Add tests for participation without account

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

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

@@ -102,7 +102,9 @@ describe("CommentTree", () => {
     await wrapper.vm.$nextTick(); // because of the <transition>
 
     expect(wrapper.exists()).toBe(true);
-    expect(requestHandlers.eventCommentThreadsQueryHandler).toHaveBeenCalled();
+    expect(
+      requestHandlers.eventCommentThreadsQueryHandler
+    ).toHaveBeenCalledWith({ eventUUID: eventData.uuid });
     expect(wrapper.vm.$apollo.queries.comments).toBeTruthy();
     expect(wrapper.find(".loading").exists()).toBe(false);
     expect(wrapper.findAll(".comment-list .root-comment").length).toBe(2);

js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts

@@ -0,0 +1,278 @@
+import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
+import ParticipationWithoutAccount from "@/components/Participation/ParticipationWithoutAccount.vue";
+import Buefy from "buefy";
+import VueRouter from "vue-router";
+import { routes } from "@/router";
+import {
+  CommentModeration,
+  EventJoinOptions,
+  ParticipantRole,
+} from "@/types/enums";
+import {
+  createMockClient,
+  MockApolloClient,
+  RequestHandler,
+} from "mock-apollo-client";
+import buildCurrentUserResolver from "@/apollo/user";
+import { InMemoryCache } from "apollo-cache-inmemory";
+import { CONFIG } from "@/graphql/config";
+import VueApollo from "vue-apollo";
+import { FETCH_EVENT_BASIC, JOIN_EVENT } from "@/graphql/event";
+import { IEvent } from "@/types/event.model";
+import { i18n } from "@/utils/i18n";
+import { configMock } from "../../mocks/config";
+import {
+  fetchEventBasicMock,
+  joinEventMock,
+  joinEventResponseMock,
+} from "../../mocks/event";
+
+const localVue = createLocalVue();
+localVue.use(Buefy);
+localVue.use(VueRouter);
+const router = new VueRouter({ routes, mode: "history" });
+config.mocks.$t = (key: string): string => key;
+
+const eventData = {
+  id: "1",
+  uuid: "f37910ea-fd5a-4756-9679-00971f3f4106",
+  options: {
+    commentModeration: CommentModeration.ALLOW_ALL,
+  },
+  joinOptions: EventJoinOptions.FREE,
+  beginsOn: new Date("2089-12-04T09:21:25Z"),
+  endsOn: new Date("2089-12-04T11:21:25Z"),
+  participantStats: {
+    notApproved: 0,
+    notConfirmed: 0,
+    rejected: 0,
+    participant: 0,
+    creator: 1,
+    moderator: 0,
+    administrator: 0,
+    going: 1,
+  },
+};
+
+describe("ParticipationWithoutAccount", () => {
+  let wrapper: Wrapper<Vue>;
+  let mockClient: MockApolloClient;
+  let apolloProvider;
+  let requestHandlers: Record<string, RequestHandler>;
+
+  const generateWrapper = (
+    handlers: Record<string, unknown> = {},
+    customProps: Record<string, unknown> = {},
+    baseData: Record<string, unknown> = {}
+  ) => {
+    const cache = new InMemoryCache({ addTypename: false });
+
+    mockClient = createMockClient({
+      cache,
+      resolvers: buildCurrentUserResolver(cache),
+    });
+    requestHandlers = {
+      configQueryHandler: jest.fn().mockResolvedValue(configMock),
+      fetchEventQueryHandler: jest.fn().mockResolvedValue(fetchEventBasicMock),
+      joinEventMutationHandler: jest
+        .fn()
+        .mockResolvedValue(joinEventResponseMock),
+      ...handlers,
+    };
+    mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
+    mockClient.setRequestHandler(
+      FETCH_EVENT_BASIC,
+      requestHandlers.fetchEventQueryHandler
+    );
+    mockClient.setRequestHandler(
+      JOIN_EVENT,
+      requestHandlers.joinEventMutationHandler
+    );
+
+    apolloProvider = new VueApollo({
+      defaultClient: mockClient,
+    });
+
+    wrapper = mount(ParticipationWithoutAccount, {
+      localVue,
+      router,
+      i18n,
+      apolloProvider,
+      propsData: {
+        uuid: eventData.uuid,
+        ...customProps,
+      },
+      data() {
+        return {
+          ...baseData,
+        };
+      },
+    });
+  };
+
+  it("renders the participation without account view with minimal data", async () => {
+    generateWrapper();
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.exists()).toBe(true);
+    expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
+    expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
+
+    expect(requestHandlers.fetchEventQueryHandler).toHaveBeenCalledWith({
+      uuid: eventData.uuid,
+    });
+    expect(wrapper.vm.$apollo.queries.event).toBeTruthy();
+
+    expect(wrapper.find(".hero-body .container").isVisible()).toBeTruthy();
+    expect(wrapper.find("article.message.is-info").text()).toBe(
+      "Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
+    );
+
+    wrapper.find('input[type="email"]').setValue("some@email.tld");
+    wrapper.find("textarea").setValue("a message long enough");
+    wrapper.find("form").trigger("submit");
+
+    await wrapper.vm.$nextTick();
+
+    expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
+      ...joinEventMock,
+    });
+
+    const cachedData = mockClient.cache.readQuery<{ event: IEvent }>({
+      query: FETCH_EVENT_BASIC,
+      variables: {
+        uuid: eventData.uuid,
+      },
+    });
+    if (cachedData) {
+      const { event } = cachedData;
+
+      expect(event.participantStats.going).toBe(
+        eventData.participantStats.going + 1
+      );
+      expect(event.participantStats.participant).toBe(
+        eventData.participantStats.participant + 1
+      );
+    }
+    // lots of things to await
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("form").exists()).toBeFalsy();
+    expect(wrapper.find("h1.title").text()).toBe(
+      "Request for participation confirmation sent"
+    );
+    // TextEncoder is not in js-dom
+    expect(
+      wrapper.find("article.message.is-warning .media-content").text()
+    ).toBe("Unable to save your participation in this browser.");
+
+    expect(wrapper.find("span.details").text()).toBe(
+      "Your participation will be validated once you click the confirmation link into the email."
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders the warning if the event participation is restricted", async () => {
+    generateWrapper({
+      fetchEventQueryHandler: jest.fn().mockResolvedValue({
+        data: {
+          event: {
+            ...fetchEventBasicMock.data.event,
+            joinOptions: EventJoinOptions.RESTRICTED,
+          },
+        },
+      }),
+      joinEventMutationHandler: jest.fn().mockResolvedValue({
+        data: {
+          joinEvent: {
+            ...joinEventResponseMock.data.joinEvent,
+            role: ParticipantRole.NOT_CONFIRMED,
+          },
+        },
+      }),
+    });
+
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.$data.event.joinOptions).toBe(
+      EventJoinOptions.RESTRICTED
+    );
+
+    expect(wrapper.find(".hero-body .container").text()).toContain(
+      "The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event."
+    );
+    expect(wrapper.find(".hero-body .container").text()).not.toContain(
+      "If you want, you may send a message to the event organizer here."
+    );
+
+    wrapper.find('input[type="email"]').setValue("some@email.tld");
+    wrapper.find("textarea").setValue("a message long enough");
+    wrapper.find("form").trigger("submit");
+
+    await wrapper.vm.$nextTick();
+
+    expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
+      ...joinEventMock,
+    });
+
+    const cachedData = mockClient.cache.readQuery<{ event: IEvent }>({
+      query: FETCH_EVENT_BASIC,
+      variables: {
+        uuid: eventData.uuid,
+      },
+    });
+    if (cachedData) {
+      const { event } = cachedData;
+
+      expect(event.participantStats.notConfirmed).toBe(
+        eventData.participantStats.notConfirmed + 1
+      );
+    }
+    // lots of things to await
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("form").exists()).toBeFalsy();
+    expect(wrapper.find("h1.title").text()).toBe(
+      "Request for participation confirmation sent"
+    );
+    expect(wrapper.find("span.details").text()).toBe(
+      "Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation."
+    );
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("handles being already a participant", async () => {
+    generateWrapper({
+      joinEventMutationHandler: jest
+        .fn()
+        .mockRejectedValue(
+          new Error("You are already a participant of this event")
+        ),
+    });
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    wrapper.find('input[type="email"]').setValue("some@email.tld");
+    wrapper.find("textarea").setValue("a message long enough");
+    wrapper.find("form").trigger("submit");
+
+    await wrapper.vm.$nextTick();
+
+    expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
+      ...joinEventMock,
+    });
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("form").exists()).toBeTruthy();
+    expect(
+      wrapper.find("article.message.is-danger .media-content").text()
+    ).toContain("You are already a participant of this event");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

js/tests/unit/specs/components/Participation/__snapshots__/ParticipationWithoutAccount.spec.ts.snap

@@ -0,0 +1,126 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ParticipationWithoutAccount handles being already a participant 1`] = `
+<section class="container section hero is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <form>
+        <p>
+          This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.
+        </p>
+        <transition-stub name="fade">
+          <article class="message is-info">
+            <!---->
+            <section class="message-body">
+              <div class="media">
+                <!---->
+                <div class="media-content">
+                  Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer.
+                </div>
+              </div>
+            </section>
+          </article>
+        </transition-stub>
+        <transition-stub name="fade">
+          <article class="message is-danger">
+            <!---->
+            <section class="message-body">
+              <div class="media">
+                <!---->
+                <div class="media-content">You are already a participant of this event</div>
+              </div>
+            </section>
+          </article>
+        </transition-stub>
+        <div class="field"><label class="label">Email address</label>
+          <div class="control is-clearfix"><input type="email" autocomplete="on" placeholder="Your email" required="required" class="input">
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+        </div>
+        <p>
+          If you want, you may send a message to the event organizer here.
+        </p>
+        <div class="field"><label class="label">Message</label>
+          <div class="control is-clearfix"><textarea minlength="10" class="textarea"></textarea>
+            <!---->
+            <!---->
+            <!---->
+          </div>
+          <!---->
+        </div>
+        <div class="field">
+          <!----><label class="b-checkbox checkbox"><input type="checkbox" true-value="true" value="false"><span class="check"></span><span class="control-label"><b>Remember my participation in this browser</b> <p>
+              Will allow to display and manage your participation status on the event page when using this device. Uncheck if you're using a public device.
+            </p></span></label>
+          <!---->
+        </div> <button type="submit" class="button is-primary">
+          <!----><span>Send email</span>
+          <!---->
+        </button>
+        <div class="has-text-centered"><a type="button" class="button is-text">
+            <!----><span>Back to previous page</span>
+            <!---->
+          </a></div>
+      </form>
+    </div>
+  </div>
+</section>
+`;
+
+exports[`ParticipationWithoutAccount renders the participation without account view with minimal data 1`] = `
+<section class="container section hero is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <div>
+        <h1 class="title">
+          Request for participation confirmation sent
+        </h1>
+        <p class="content"><span>Check your inbox (and your junk mail folder).</span> <span class="details">Your participation will be validated once you click the confirmation link into the email.</span></p>
+        <transition-stub name="fade">
+          <article class="message is-warning">
+            <!---->
+            <section class="message-body">
+              <div class="media">
+                <!---->
+                <div class="media-content">Unable to save your participation in this browser.</div>
+              </div>
+            </section>
+          </article>
+        </transition-stub>
+        <p class="content"><span>You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</span></p>
+      </div>
+    </div>
+  </div>
+</section>
+`;
+
+exports[`ParticipationWithoutAccount renders the warning if the event participation is restricted 1`] = `
+<section class="container section hero is-fullheight">
+  <div class="hero-body">
+    <div class="container">
+      <div>
+        <h1 class="title">
+          Request for participation confirmation sent
+        </h1>
+        <p class="content"><span>Check your inbox (and your junk mail folder).</span> <span class="details">
+            Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation. </span></p>
+        <transition-stub name="fade">
+          <article class="message is-warning">
+            <!---->
+            <section class="message-body">
+              <div class="media">
+                <!---->
+                <div class="media-content">Unable to save your participation in this browser.</div>
+              </div>
+            </section>
+          </article>
+        </transition-stub>
+        <p class="content"><span>You may now close this window, or <a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106" class="">return to the event's page</a>.</span></p>
+      </div>
+    </div>
+  </div>
+</section>
+`;

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

@@ -1,3 +1,59 @@
+import { EventJoinOptions, ParticipantRole } from "@/types/enums";
+
+type DataMock = {
+  data: Record<string, unknown>;
+};
+
+export const fetchEventBasicMock = {
+  data: {
+    event: {
+      __typename: "Event",
+      id: "1",
+      uuid: "f37910ea-fd5a-4756-9679-00971f3f4106",
+      joinOptions: EventJoinOptions.FREE,
+      participantStats: {
+        notApproved: 0,
+        notConfirmed: 0,
+        rejected: 0,
+        participant: 0,
+        creator: 1,
+        moderator: 0,
+        administrator: 0,
+        going: 1,
+      },
+    },
+  },
+};
+
+export const joinEventResponseMock = {
+  data: {
+    joinEvent: {
+      id: "5",
+      role: ParticipantRole.NOT_APPROVED,
+      insertedAt: "2020-12-07T09:33:41Z",
+      metadata: {
+        cancellationToken: "some token",
+        message: "a message long enough",
+      },
+      event: {
+        id: "1",
+        uuid: "f37910ea-fd5a-4756-9679-00971f3f4106",
+      },
+      actor: {
+        id: "1",
+      },
+    },
+  },
+};
+
+export const joinEventMock = {
+  eventId: "1",
+  actorId: "1",
+  email: "some@email.tld",
+  message: "a message long enough",
+  locale: "en_US",
+};
+
 export const eventCommentThreadsMock = {
   data: {
     event: {
@@ -64,7 +120,7 @@ export const newCommentForEventMock = {
   inReplyToCommentId: null,
 };
 
-export const newCommentForEventResponse = {
+export const newCommentForEventResponse: DataMock = {
   data: {
     createComment: {
       id: "79",