diff --git a/tests/unit/specs/components/Event/EventActionSection.spec.ts b/tests/unit/specs/components/Event/EventActionSection.spec.ts new file mode 100644 index 000000000..8bedef8ee --- /dev/null +++ b/tests/unit/specs/components/Event/EventActionSection.spec.ts @@ -0,0 +1,212 @@ +import { beforeEach, describe, it, expect } from "vitest"; +import { enUS } from "date-fns/locale"; +import { routes } from "@/router"; +import { createRouter, createWebHistory, Router } from "vue-router"; +import { CONFIG } from "@/graphql/config"; +import { getMockClient } from "../../mocks/client"; +import EventActionSection from "@/components/Event/EventActionSection.vue"; +import { IPerson } from "@/types/actor"; +import { IParticipant } from "@/types/participant.model"; +import { + ActorType, + CommentModeration, + EventJoinOptions, + ParticipantRole, +} from "@/types/enums"; +import { shallowMount } from "@vue/test-utils"; + +let router: Router; + +beforeEach(async () => { + router = createRouter({ + history: createWebHistory(), + routes: routes, + }); + + // await router.isReady(); +}); + +const eventData = { + id: "1", + uuid: "f37910ea-fd5a-4756-9679-00971f3f4106", + options: { + commentModeration: CommentModeration.ALLOW_ALL, + hideNumberOfParticipants: false, + }, + draft: false, + 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, + }, +}; + +const participantData = { + id: "5", + role: ParticipantRole.NOT_APPROVED, + insertedAt: "2020-12-07T09:33:41Z", + metadata: { + cancellationToken: "some token", + message: "a message long enough", + }, + event: eventData, + actor: { + preferredUsername: "some_actor", + name: "Some actor", + avatar: null, + domain: null, + id: "1", + url: "@some_actor", + summary: "summary", + suspended: false, + type: ActorType.PERSON, + }, +}; + +const generateWrapper = ( + eventExtra: any = {}, + currentActor: IPerson | undefined = undefined, + participations: IParticipant[] = [], + person: IPerson | undefined = undefined +) => { + const global_data = getMockClient([CONFIG]); + global_data.provide.dateFnsLocale = enUS; + global_data.plugins = [router]; + return shallowMount(EventActionSection, { + props: { + event: { + ...eventData, + ...eventExtra, + }, + currentActor: currentActor, + participations: participations, + person: person, + }, + global: { + ...global_data, + stubs: { + RouterLink: false, + }, + }, + }); +}; + +describe("EventActionSection", () => { + it("event action section with basic informations", async () => { + const wrapper = generateWrapper(); + await wrapper.vm.$nextTick(); + expect(wrapper.find("p.inline-flex > span > span").text()).toBe( + "No one is participating" + ); + expect( + wrapper + .find("o-modal > .modal-card > .modal-card-head > .modal-card-title") + .text() + ).toBe("Participation confirmation"); + expect( + wrapper.find("o-modal > .modal-card > .modal-card-body > p").text() + ).toBe( + "The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?" + ); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it("event action section with participant", async () => { + const wrapper = generateWrapper( + { + options: { + maximumAttendeeCapacity: 10, + }, + participantStats: { + participant: 5, + }, + }, + undefined, + [participantData], + undefined + ); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.canManageEvent).toBe(false); + expect(wrapper.find("p.inline-flex > span > span").text()).toBe( + "5/10 available places" + ); + expect(wrapper.findAll("o-dropdown > o-dropdown-item").length).toBe(2); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(1)").text() + ).toBe("Share this event"); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(2)").text() + ).toBe("Add to my calendar"); + expect( + wrapper + .find("o-modal > .modal-card > .modal-card-head > .modal-card-title") + .text() + ).toBe("Participation confirmation"); + expect( + wrapper.find("o-modal > .modal-card > .modal-card-body > p").text() + ).toBe( + "The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?" + ); + expect(wrapper.html()).toMatchSnapshot(); + }); + + it("event action section with creator as participant", async () => { + const wrapper = generateWrapper( + {}, + undefined, + [ + { + ...participantData, + role: ParticipantRole.CREATOR, + }, + ], + undefined + ); + await wrapper.vm.$nextTick(); + expect(wrapper.vm.canManageEvent).toBe(true); + expect(wrapper.find(".participations-link").text()).toBe( + "No one is participating" + ); + expect(wrapper.findAll("o-dropdown > o-dropdown-item").length).toBe(7); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(1)").text() + ).toBe("Participations"); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(2)").text() + ).toBe("Announcements"); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(3)").text() + ).toBe("Edit"); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(4)").text() + ).toBe("Duplicate"); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(5)").text() + ).toBe("Delete"); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(6)").text() + ).toBe("Share this event"); + expect( + wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(7)").text() + ).toBe("Add to my calendar"); + expect( + wrapper + .find("o-modal > .modal-card > .modal-card-head > .modal-card-title") + .text() + ).toBe("Participation confirmation"); + expect( + wrapper.find("o-modal > .modal-card > .modal-card-body > p").text() + ).toBe( + "The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?" + ); + expect(wrapper.html()).toMatchSnapshot(); + }); +}); diff --git a/tests/unit/specs/components/Event/__snapshots__/EventActionSection.spec.ts.snap b/tests/unit/specs/components/Event/__snapshots__/EventActionSection.spec.ts.snap new file mode 100644 index 000000000..02217738e --- /dev/null +++ b/tests/unit/specs/components/Event/__snapshots__/EventActionSection.spec.ts.snap @@ -0,0 +1,165 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`EventActionSection > event action section with basic informations 1`] = ` +"
+ +
+

+ No one is participating + +

+ + + + + + + + Share this event + Add to my calendar + + +
+
+ + + + + + + + + + +
+
+

Participation confirmation

+
+
+

The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?

+
+ + + +
+ Cancel + Confirm my participation +
+
+
+
+" +`; + +exports[`EventActionSection > event action section with creator as participant 1`] = ` +"
+ +
+

+ + No one is participating + + +

+ + + Participations + + + Announcements + + + Edit + + + Duplicate + + Delete + + Share this event + Add to my calendar + + +
+
+ + + + + + + + + + +
+
+

Participation confirmation

+
+
+

The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?

+
+ + + +
+ Cancel + Confirm my participation +
+
+
+
+" +`; + +exports[`EventActionSection > event action section with participant 1`] = ` +"
+ +
+

+ 5/10 available places + +

+ + + + + + + + Share this event + Add to my calendar + + +
+
+ + + + + + + + + + +
+
+

Participation confirmation

+
+
+

The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?

+
+ + + +
+ Cancel + Confirm my participation +
+
+
+
+" +`;