Add unit-test for Event - issue 1776
This commit is contained in:
Laurent GAY
212
tests/unit/specs/components/Event/EventActionSection.spec.ts
Normal file
212
tests/unit/specs/components/Event/EventActionSection.spec.ts
Normal file
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,165 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`EventActionSection > event action section with basic informations 1`] = `
|
||||
"<div class="">
|
||||
<!--v-if-->
|
||||
<div class="flex flex-col gap-1 mt-1">
|
||||
<p class="inline-flex gap-2 ml-auto">
|
||||
<ticket-confirmation-outline-stub fillcolor="currentColor" size="24"></ticket-confirmation-outline-stub><span><span>No one is participating</span></span>
|
||||
<!--v-if-->
|
||||
</p>
|
||||
<o-dropdown class="ml-auto">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<o-dropdown-item aria-role="listitem" class="p-1"><span class="flex gap-1"><share-stub fillcolor="currentColor" size="24"></share-stub> Share this event</span></o-dropdown-item>
|
||||
<o-dropdown-item aria-role="listitem"><span class="flex gap-1"><calendar-plus-stub fillcolor="currentColor" size="24"></calendar-plus-stub> Add to my calendar</span></o-dropdown-item>
|
||||
<!--v-if-->
|
||||
</o-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
|
||||
<report-modal-stub title="Report this event"></report-modal-stub>
|
||||
</o-modal>
|
||||
<o-modal close-button-aria-label="Close" active="false" has-modal-card="">
|
||||
<share-event-modal-stub event="[object Object]" eventcapacityok="true"></share-event-modal-stub>
|
||||
</o-modal>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
|
||||
<!--v-if-->
|
||||
</o-modal>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Participation confirmation</p>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<p>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?</p>
|
||||
<form>
|
||||
<o-field label="Message">
|
||||
<o-input type="textarea" size="medium" modelvalue="" minlength="10"></o-input>
|
||||
</o-field>
|
||||
<div class="buttons">
|
||||
<o-button native-type="button" class="button">Cancel</o-button>
|
||||
<o-button variant="primary" native-type="submit">Confirm my participation</o-button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</o-modal>"
|
||||
`;
|
||||
|
||||
exports[`EventActionSection > event action section with creator as participant 1`] = `
|
||||
"<div class="">
|
||||
<!--v-if-->
|
||||
<div class="flex flex-col gap-1 mt-1">
|
||||
<p class="inline-flex gap-2 ml-auto">
|
||||
<ticket-confirmation-outline-stub fillcolor="currentColor" size="24"></ticket-confirmation-outline-stub><a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106/participations" class="participations-link">
|
||||
<!-- We retire one because of the event creator who is a
|
||||
participant --><span>No one is participating</span>
|
||||
</a>
|
||||
<!--v-if-->
|
||||
</p>
|
||||
<o-dropdown class="ml-auto">
|
||||
<o-dropdown-item aria-role="listitem" has-link="">
|
||||
<account-multiple-stub fillcolor="currentColor" size="24"></account-multiple-stub> Participations
|
||||
</o-dropdown-item>
|
||||
<o-dropdown-item aria-role="listitem" has-link="">
|
||||
<bullhorn-stub fillcolor="currentColor" size="24"></bullhorn-stub> Announcements
|
||||
</o-dropdown-item>
|
||||
<o-dropdown-item aria-role="listitem" has-link="">
|
||||
<pencil-stub fillcolor="currentColor" size="24"></pencil-stub> Edit
|
||||
</o-dropdown-item>
|
||||
<o-dropdown-item aria-role="listitem" has-link="">
|
||||
<content-duplicate-stub fillcolor="currentColor" size="24"></content-duplicate-stub> Duplicate
|
||||
</o-dropdown-item>
|
||||
<o-dropdown-item aria-role="listitem"><span class="flex gap-1"><delete-stub fillcolor="currentColor" size="24"></delete-stub> Delete</span></o-dropdown-item>
|
||||
<hr role="presentation" class="dropdown-divider" aria-role="o-dropdown-item">
|
||||
<o-dropdown-item aria-role="listitem" class="p-1"><span class="flex gap-1"><share-stub fillcolor="currentColor" size="24"></share-stub> Share this event</span></o-dropdown-item>
|
||||
<o-dropdown-item aria-role="listitem"><span class="flex gap-1"><calendar-plus-stub fillcolor="currentColor" size="24"></calendar-plus-stub> Add to my calendar</span></o-dropdown-item>
|
||||
<!--v-if-->
|
||||
</o-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
|
||||
<report-modal-stub title="Report this event"></report-modal-stub>
|
||||
</o-modal>
|
||||
<o-modal close-button-aria-label="Close" active="false" has-modal-card="">
|
||||
<share-event-modal-stub event="[object Object]" eventcapacityok="true"></share-event-modal-stub>
|
||||
</o-modal>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
|
||||
<!--v-if-->
|
||||
</o-modal>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Participation confirmation</p>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<p>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?</p>
|
||||
<form>
|
||||
<o-field label="Message">
|
||||
<o-input type="textarea" size="medium" modelvalue="" minlength="10"></o-input>
|
||||
</o-field>
|
||||
<div class="buttons">
|
||||
<o-button native-type="button" class="button">Cancel</o-button>
|
||||
<o-button variant="primary" native-type="submit">Confirm my participation</o-button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</o-modal>"
|
||||
`;
|
||||
|
||||
exports[`EventActionSection > event action section with participant 1`] = `
|
||||
"<div class="">
|
||||
<!--v-if-->
|
||||
<div class="flex flex-col gap-1 mt-1">
|
||||
<p class="inline-flex gap-2 ml-auto">
|
||||
<ticket-confirmation-outline-stub fillcolor="currentColor" size="24"></ticket-confirmation-outline-stub><span><span>5/10 available places</span></span>
|
||||
<!--v-if-->
|
||||
</p>
|
||||
<o-dropdown class="ml-auto">
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<o-dropdown-item aria-role="listitem" class="p-1"><span class="flex gap-1"><share-stub fillcolor="currentColor" size="24"></share-stub> Share this event</span></o-dropdown-item>
|
||||
<o-dropdown-item aria-role="listitem"><span class="flex gap-1"><calendar-plus-stub fillcolor="currentColor" size="24"></calendar-plus-stub> Add to my calendar</span></o-dropdown-item>
|
||||
<!--v-if-->
|
||||
</o-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
|
||||
<report-modal-stub title="Report this event"></report-modal-stub>
|
||||
</o-modal>
|
||||
<o-modal close-button-aria-label="Close" active="false" has-modal-card="">
|
||||
<share-event-modal-stub event="[object Object]" eventcapacityok="true"></share-event-modal-stub>
|
||||
</o-modal>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
|
||||
<!--v-if-->
|
||||
</o-modal>
|
||||
<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
|
||||
<div class="modal-card">
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">Participation confirmation</p>
|
||||
</header>
|
||||
<section class="modal-card-body">
|
||||
<p>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?</p>
|
||||
<form>
|
||||
<o-field label="Message">
|
||||
<o-input type="textarea" size="medium" modelvalue="" minlength="10"></o-input>
|
||||
</o-field>
|
||||
<div class="buttons">
|
||||
<o-button native-type="button" class="button">Cancel</o-button>
|
||||
<o-button variant="primary" native-type="submit">Confirm my participation</o-button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</o-modal>"
|
||||
`;
|
||||
Reference in New Issue
Block a user