hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Migrate to Vue 3 and Vite

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2022-07-12 10:55:28 +02:00
parent 8f4099ee33
commit ee20e03cc2
464 changed files with 31515 additions and 32758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
js/tests/unit/specs/components/Participation/ParticipationSection.spec.ts
View File

@@ -1,26 +1,26 @@
import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
import { config, mount, VueWrapper } from "@vue/test-utils";
import ParticipationSection from "@/components/Participation/ParticipationSection.vue";
import Buefy from "buefy";
import VueRouter from "vue-router";
import { createRouter, createWebHistory, Router } from "vue-router";
import { routes } from "@/router";
import { CommentModeration, EventJoinOptions } from "@/types/enums";
import {
createMockClient,
MockApolloClient,
RequestHandler,
} from "mock-apollo-client";
import { CONFIG } from "@/graphql/config";
import VueApollo from "@vue/apollo-option";
import { configMock } from "../../mocks/config";
import { InMemoryCache } from "@apollo/client/cache";
import { defaultResolvers } from "../../common";
import { beforeEach, describe, expect, vi, it } from "vitest";
import Oruga from "@oruga-ui/oruga-next";
import FloatingVue from "floating-vue";
const localVue = createLocalVue();
localVue.use(Buefy);
localVue.use(VueRouter);
const router = new VueRouter({ routes, mode: "history" });
config.mocks.$t = (key: string): string => key;
config.global.plugins.push(Oruga);
config.global.plugins.push(FloatingVue);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const eventData = {
id: "1",
uuid: "e37910ea-fd5a-4756-7634-00971f3f4107",
@@ -32,49 +32,31 @@ const eventData = {
};
describe("ParticipationSection", () => {
let wrapper: Wrapper<Vue>;
let mockClient: MockApolloClient;
let apolloProvider;
let requestHandlers: Record<string, RequestHandler>;
let wrapper: VueWrapper;
const generateWrapper = (
handlers: Record<string, unknown> = {},
customProps: Record<string, unknown> = {},
baseData: Record<string, unknown> = {}
) => {
const cache = new InMemoryCache({ addTypename: false });
mockClient = createMockClient({
cache,
resolvers: defaultResolvers,
});
requestHandlers = {
configQueryHandler: jest.fn().mockResolvedValue(configMock),
...handlers,
};
mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
apolloProvider = new VueApollo({
defaultClient: mockClient,
});
wrapper = mount(ParticipationSection, {
localVue,
router,
apolloProvider,
stubs: {
ParticipationButton: true,
},
propsData: {
props: {
participation: null,
event: eventData,
anonymousParticipation: null,
currentActor: { id: "5" },
identities: [],
anonymousParticipationConfig: {
allowed: true,
},
...customProps,
},
data() {
return {
...baseData,
};
global: {
plugins: [router],
},
});
};
@@ -84,8 +66,6 @@ describe("ParticipationSection", () => {
await wrapper.vm.$nextTick();
expect(wrapper.exists()).toBe(true);
expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
expect(wrapper.find(".event-participation").exists()).toBeTruthy();
@@ -101,14 +81,14 @@ describe("ParticipationSection", () => {
});
it("renders the participation section with existing confimed anonymous participation", async () => {
generateWrapper({}, { anonymousParticipation: true });
generateWrapper({ anonymousParticipation: true });
expect(wrapper.find(".event-participation > small").text()).toContain(
"You are participating in this event anonymously"
);
const cancelAnonymousParticipationButton = wrapper.find(
".event-participation > button.button.is-text"
".event-participation > button.o-btn--text"
);
expect(cancelAnonymousParticipationButton.text()).toBe(
"Cancel anonymous participation"
@@ -127,20 +107,17 @@ describe("ParticipationSection", () => {
});
it("renders the participation section with existing confimed anonymous participation but event moderation", async () => {
generateWrapper(
{},
{
anonymousParticipation: true,
event: { ...eventData, joinOptions: EventJoinOptions.RESTRICTED },
}
);
generateWrapper({
anonymousParticipation: true,
event: { ...eventData, joinOptions: EventJoinOptions.RESTRICTED },
});
expect(wrapper.find(".event-participation > small").text()).toContain(
"You are participating in this event anonymously"
);
const cancelAnonymousParticipationButton = wrapper.find(
".event-participation > button.button.is-text"
".event-participation > button.o-btn--text"
);
expect(cancelAnonymousParticipationButton.text()).toBe(
"Cancel anonymous participation"
@@ -153,7 +130,7 @@ describe("ParticipationSection", () => {
ref: "anonymous-participation-modal",
});
expect(modal.isVisible()).toBeTruthy();
expect(modal.find("article.notification.is-primary").text()).toBe(
expect(modal.find(".o-notification--primary").text()).toBe(
"As the event organizer has chosen to manually validate participation requests, your participation will be really confirmed only once you receive an email stating it's being accepted."
);
@@ -163,7 +140,7 @@ describe("ParticipationSection", () => {
});
it("renders the participation section with existing unconfirmed anonymous participation", async () => {
generateWrapper({}, { anonymousParticipation: false });
generateWrapper({ anonymousParticipation: false });
expect(wrapper.find(".event-participation > small").text()).toContain(
"You are participating in this event anonymously but didn't confirm participation"
@@ -171,19 +148,16 @@ describe("ParticipationSection", () => {
});
it("renders the participation section but the event is already passed", async () => {
generateWrapper(
{},
{
event: {
...eventData,
beginsOn: "2020-12-02T10:52:56Z",
endsOn: "2020-12-03T10:52:56Z",
},
}
);
generateWrapper({
event: {
...eventData,
beginsOn: "2020-12-02T10:52:56Z",
endsOn: "2020-12-03T10:52:56Z",
},
});
expect(wrapper.find(".event-participation").exists()).toBeFalsy();
expect(wrapper.find("button.button.is-primary").text()).toBe(
expect(wrapper.find("button.o-btn--primary").text()).toBe(
"Event already passed"
);
});

142
js/tests/unit/specs/components/Participation/ParticipationWithoutAccount.spec.ts
View File

@@ -1,7 +1,5 @@
import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
import { config, mount, VueWrapper } 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,
@@ -13,26 +11,34 @@ import {
MockApolloClient,
RequestHandler,
} from "mock-apollo-client";
import { CONFIG } from "@/graphql/config";
import VueApollo from "@vue/apollo-option";
import { ANONYMOUS_ACTOR_ID } from "@/graphql/config";
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 { anonymousActorIdMock } from "../../mocks/config";
import {
fetchEventBasicMock,
joinEventMock,
joinEventResponseMock,
} from "../../mocks/event";
import { InMemoryCache } from "@apollo/client/cache";
import { defaultResolvers } from "../../common";
import flushPromises from "flush-promises";
import { vi, describe, expect, it, beforeEach, afterEach } from "vitest";
import { DefaultApolloClient } from "@vue/apollo-composable";
import { Router, createRouter, createWebHistory } from "vue-router";
import Oruga from "@oruga-ui/oruga-next";
import { cache } from "@/apollo/memory";
const localVue = createLocalVue();
localVue.use(Buefy);
localVue.use(VueRouter);
const router = new VueRouter({ routes, mode: "history" });
config.mocks.$t = (key: string): string => key;
config.global.plugins.push(Oruga);
let router: Router;
beforeEach(async () => {
router = createRouter({
history: createWebHistory(),
routes: routes,
});
// await router.isReady();
});
const eventData = {
id: "1",
@@ -56,31 +62,38 @@ const eventData = {
};
describe("ParticipationWithoutAccount", () => {
let wrapper: Wrapper<Vue>;
let mockClient: MockApolloClient;
let apolloProvider;
let wrapper: VueWrapper;
let mockClient: MockApolloClient | null;
let requestHandlers: Record<string, RequestHandler>;
afterEach(() => {
wrapper?.unmount();
cache.reset();
mockClient = null;
});
const generateWrapper = (
handlers: Record<string, unknown> = {},
customProps: Record<string, unknown> = {},
baseData: Record<string, unknown> = {}
customProps: Record<string, unknown> = {}
) => {
const cache = new InMemoryCache({ addTypename: false });
mockClient = createMockClient({
cache,
resolvers: defaultResolvers,
});
requestHandlers = {
configQueryHandler: jest.fn().mockResolvedValue(configMock),
fetchEventQueryHandler: jest.fn().mockResolvedValue(fetchEventBasicMock),
joinEventMutationHandler: jest
anonymousActorIdQueryHandler: vi
.fn()
.mockResolvedValue(anonymousActorIdMock),
fetchEventQueryHandler: vi.fn().mockResolvedValue(fetchEventBasicMock),
joinEventMutationHandler: vi
.fn()
.mockResolvedValue(joinEventResponseMock),
...handlers,
};
mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
mockClient.setRequestHandler(
ANONYMOUS_ACTOR_ID,
requestHandlers.anonymousActorIdQueryHandler
);
mockClient.setRequestHandler(
FETCH_EVENT_BASIC,
requestHandlers.fetchEventQueryHandler
@@ -90,43 +103,33 @@ describe("ParticipationWithoutAccount", () => {
requestHandlers.joinEventMutationHandler
);
apolloProvider = new VueApollo({
defaultClient: mockClient,
});
wrapper = mount(ParticipationWithoutAccount, {
localVue,
router,
i18n,
apolloProvider,
propsData: {
props: {
uuid: eventData.uuid,
...customProps,
},
data() {
return {
...baseData,
};
global: {
provide: {
[DefaultApolloClient]: mockClient,
},
plugins: [router],
},
});
};
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.anonymousActorIdQueryHandler).toHaveBeenCalled();
expect(requestHandlers.fetchEventQueryHandler).toHaveBeenCalledWith({
uuid: eventData.uuid,
});
expect(wrapper.vm.$apollo.queries.event).toBeTruthy();
await flushPromises();
expect(wrapper.find(".hero-body .container").isVisible()).toBeTruthy();
expect(wrapper.find("article.message.is-info").text()).toBe(
expect(wrapper.find(".container").isVisible()).toBeTruthy();
expect(wrapper.find(".o-notification--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."
);
@@ -134,13 +137,13 @@ describe("ParticipationWithoutAccount", () => {
wrapper.find("textarea").setValue("a message long enough");
wrapper.find("form").trigger("submit");
await wrapper.vm.$nextTick();
await flushPromises();
expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
...joinEventMock,
});
const cachedData = mockClient.cache.readQuery<{ event: IEvent }>({
const cachedData = mockClient?.cache.readQuery<{ event: IEvent }>({
query: FETCH_EVENT_BASIC,
variables: {
uuid: eventData.uuid,
@@ -161,10 +164,10 @@ describe("ParticipationWithoutAccount", () => {
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.");
// TextEncoder ~is~ was not in js-dom?
// expect(wrapper.find(".o-notification--error").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."
@@ -174,7 +177,7 @@ describe("ParticipationWithoutAccount", () => {
it("renders the warning if the event participation is restricted", async () => {
generateWrapper({
fetchEventQueryHandler: jest.fn().mockResolvedValue({
fetchEventQueryHandler: vi.fn().mockResolvedValue({
data: {
event: {
...fetchEventBasicMock.data.event,
@@ -182,7 +185,7 @@ describe("ParticipationWithoutAccount", () => {
},
},
}),
joinEventMutationHandler: jest.fn().mockResolvedValue({
joinEventMutationHandler: vi.fn().mockResolvedValue({
data: {
joinEvent: {
...joinEventResponseMock.data.joinEvent,
@@ -192,17 +195,18 @@ describe("ParticipationWithoutAccount", () => {
}),
});
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await flushPromises();
expect(wrapper.vm.$data.event.joinOptions).toBe(
EventJoinOptions.RESTRICTED
);
// expect(wrapper.vm.$data.event.joinOptions).toBe(
// EventJoinOptions.RESTRICTED
// );
expect(wrapper.find(".hero-body .container").text()).toContain(
expect(wrapper.findAll("section.container form > p")[1].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(
expect(
wrapper.findAll("section.container form > p")[1].text()
).not.toContain(
"If you want, you may send a message to the event organizer here."
);
@@ -210,13 +214,13 @@ describe("ParticipationWithoutAccount", () => {
wrapper.find("textarea").setValue("a message long enough");
wrapper.find("form").trigger("submit");
await wrapper.vm.$nextTick();
await flushPromises();
expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
...joinEventMock,
});
const cachedData = mockClient.cache.readQuery<{ event: IEvent }>({
const cachedData = mockClient?.cache.readQuery<{ event: IEvent }>({
query: FETCH_EVENT_BASIC,
variables: {
uuid: eventData.uuid,
@@ -242,30 +246,28 @@ describe("ParticipationWithoutAccount", () => {
it("handles being already a participant", async () => {
generateWrapper({
joinEventMutationHandler: jest
joinEventMutationHandler: vi
.fn()
.mockRejectedValue(
new Error("You are already a participant of this event")
),
});
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await flushPromises();
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();
await flushPromises();
expect(requestHandlers.joinEventMutationHandler).toHaveBeenCalledWith({
...joinEventMock,
});
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
await flushPromises();
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.find(".o-notification--danger").text()).toContain(
"You are already a participant of this event"
);
expect(wrapper.html()).toMatchSnapshot();
});
});

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

@@ -1,130 +1,83 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1
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">
<!---->
<!---->
<!---->
exports[`ParticipationWithoutAccount > handles being already a participant 1`] = `
"<section class=\\"container mx-auto\\">
<div class=\\"\\">
<form>
<p>This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.</p>
<transition-stub>
<article class=\\"o-notification o-notification--info\\">
<!--v-if-->
<!--v-if-->
<div class=\\"o-notification__wrapper\\">
<!--v-if-->
<div class=\\"o-notification__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>
<!---->
</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>
<!---->
<!---->
<!---->
</article>
</transition-stub>
<transition-stub>
<article class=\\"o-notification o-notification--danger\\">
<!--v-if-->
<!--v-if-->
<div class=\\"o-notification__wrapper\\">
<!--v-if-->
<div class=\\"o-notification__content\\">You are already a participant of this event</div>
</div>
<!---->
</article>
</transition-stub>
<div class=\\"o-field o-field--filled\\"><label for=\\"anonymousParticipationEmail\\" class=\\"o-field__label\\">Email address</label>
<div class=\\"o-ctrl-input\\"><input id=\\"anonymousParticipationEmail\\" placeholder=\\"Your email\\" required=\\"\\" class=\\"o-input\\" type=\\"email\\" autocomplete=\\"off\\">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>
<div class="field">
<!----><label class="b-checkbox checkbox"><input type="checkbox" autocomplete="on" 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 class="button is-text">
<!----><span>Back to previous page</span>
<!---->
</a></div>
</form>
</div>
<!--v-if-->
</div>
<p>If you want, you may send a message to the event organizer here.</p>
<div class=\\"o-field o-field--filled\\"><label for=\\"anonymousParticipationMessage\\" class=\\"o-field__label\\">Message</label>
<div class=\\"o-ctrl-input\\"><textarea id=\\"anonymousParticipationMessage\\" minlength=\\"10\\" class=\\"o-input o-input__textarea\\"></textarea>
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>
<div class=\\"o-field\\">
<!--v-if--><label class=\\"o-chk o-chk--checked\\"><input type=\\"checkbox\\" class=\\"o-chk__check o-chk__check--checked\\" true-value=\\"true\\" false-value=\\"false\\" value=\\"false\\"><span class=\\"o-chk__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>
<!--v-if-->
</div>
<div class=\\"flex gap-2 my-2\\"><button type=\\"submit\\" class=\\"o-btn o-btn--primary o-btn--disabled\\" disabled=\\"\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Send email</span>
<!--v-if--></span>
</button><button type=\\"button\\" class=\\"o-btn o-btn--text\\"><span class=\\"o-btn__wrapper\\"><!--v-if--><span class=\\"o-btn__label\\">Back to previous page</span>
<!--v-if--></span>
</button></div>
</form>
</div>
</section>
</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>
exports[`ParticipationWithoutAccount > renders the participation without account view with minimal data 1`] = `
"<section class=\\"container mx-auto\\">
<div class=\\"\\">
<div>
<h1 class=\\"title\\">Request for participation confirmation sent</h1>
<p class=\\"prose dark:prose-invert\\"><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>
<!--v-if-->
<p class=\\"prose dark:prose-invert\\">You may now close this window, or <a href=\\"/events/f37910ea-fd5a-4756-9679-00971f3f4106\\" class=\\"\\">return to the event's page</a>.</p>
</div>
</div>
</section>
</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>
exports[`ParticipationWithoutAccount > renders the warning if the event participation is restricted 1`] = `
"<section class=\\"container mx-auto\\">
<div class=\\"\\">
<div>
<h1 class=\\"title\\">Request for participation confirmation sent</h1>
<p class=\\"prose dark:prose-invert\\"><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>
<!--v-if-->
<p class=\\"prose dark:prose-invert\\">You may now close this window, or <a href=\\"/events/f37910ea-fd5a-4756-9679-00971f3f4106\\" class=\\"\\">return to the event's page</a>.</p>
</div>
</div>
</section>
</section>"
`;