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

67
js/tests/unit/specs/components/User/PasswordReset.spec.ts
View File

@@ -1,17 +1,23 @@
import { config, createLocalVue, mount } from "@vue/test-utils";
const useRouterMock = vi.fn(() => ({
push: () => {},
}));
import { config, mount } from "@vue/test-utils";
import PasswordReset from "@/views/User/PasswordReset.vue";
import Buefy from "buefy";
import { createMockClient, RequestHandler } from "mock-apollo-client";
import { RESET_PASSWORD } from "@/graphql/auth";
import VueApollo from "@vue/apollo-option";
import { resetPasswordResponseMock } from "../../mocks/auth";
import RouteName from "@/router/name";
import flushPromises from "flush-promises";
import { describe, expect, it, vi } from "vitest";
import { DefaultApolloClient } from "@vue/apollo-composable";
import Oruga from "@oruga-ui/oruga-next";
const localVue = createLocalVue();
localVue.use(Buefy);
config.mocks.$t = (key: string): string => key;
const $router = { push: jest.fn() };
config.global.plugins.push(Oruga);
vi.mock("vue-router/dist/vue-router.mjs", () => ({
useRouter: useRouterMock,
}));
let requestHandlers: Record<string, RequestHandler>;
@@ -22,7 +28,7 @@ const generateWrapper = (
const mockClient = createMockClient();
requestHandlers = {
resetPasswordMutationHandler: jest
resetPasswordMutationHandler: vi
.fn()
.mockResolvedValue(resetPasswordResponseMock),
...customRequestHandlers,
@@ -33,21 +39,19 @@ const generateWrapper = (
requestHandlers.resetPasswordMutationHandler
);
const apolloProvider = new VueApollo({
defaultClient: mockClient,
});
return mount(PasswordReset, {
localVue,
mocks: {
$route: { query: {} },
$router,
...customMocks,
},
apolloProvider,
propsData: {
props: {
token: "some-token",
},
global: {
stubs: ["router-link", "router-view"],
mocks: {
...customMocks,
},
provide: {
[DefaultApolloClient]: mockClient,
},
},
});
};
@@ -60,12 +64,14 @@ describe("Reset page", () => {
it("shows error if token is invalid", async () => {
const wrapper = generateWrapper({
resetPasswordMutationHandler: jest.fn().mockResolvedValue({
resetPasswordMutationHandler: vi.fn().mockResolvedValue({
errors: [{ message: "The token you provided is invalid." }],
}),
});
wrapper.findAll('input[type="password"').setValue("my password");
wrapper
.findAll('input[type="password"')
.forEach((inputField) => inputField.setValue("my password"));
wrapper.find("form").trigger("submit");
await wrapper.vm.$nextTick();
@@ -78,27 +84,30 @@ describe("Reset page", () => {
await flushPromises();
expect(wrapper.find("article.message.is-danger").text()).toContain(
expect(wrapper.find(".o-notification--danger").text()).toContain(
"The token you provided is invalid"
);
expect(wrapper.html()).toMatchSnapshot();
});
it("redirects to homepage if token is valid", async () => {
const push = vi.fn(); // needs to write this code before render()
useRouterMock.mockImplementationOnce(() => ({
push,
}));
const wrapper = generateWrapper();
wrapper.findAll('input[type="password"').setValue("my password");
wrapper.find("form").trigger("submit");
await wrapper.vm.$nextTick();
wrapper
.findAll('input[type="password"')
.forEach((inputField) => inputField.setValue("my password"));
await wrapper.find("form").trigger("submit");
expect(requestHandlers.resetPasswordMutationHandler).toBeCalledTimes(1);
expect(requestHandlers.resetPasswordMutationHandler).toBeCalledWith({
password: "my password",
token: "some-token",
});
expect(jest.isMockFunction(wrapper.vm.$router.push)).toBe(true);
await flushPromises();
expect($router.push).toHaveBeenCalledWith({ name: RouteName.HOME });
expect(push).toHaveBeenCalledWith({ name: RouteName.HOME });
});
});

118
js/tests/unit/specs/components/User/__snapshots__/PasswordReset.spec.ts.snap
View File

@@ -1,75 +1,55 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1
exports[`Reset page renders correctly 1`] = `
<section class="section container">
<div class="columns is-mobile is-centered">
<div class="column is-half-desktop">
<h1 class="title">
Password reset
</h1>
<form>
<div class="field"><label class="label">Password</label>
<div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
<!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
<!---->
</div>
<!---->
</div>
<div class="field"><label class="label">Password (confirmation)</label>
<div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
<!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
<!---->
</div>
<!---->
</div> <button class="button is-primary">
Reset my password
</button>
</form>
exports[`Reset page > renders correctly 1`] = `
"<section class=\\"container mx-auto\\">
<h1 class=\\"\\">Password reset</h1>
<form>
<div class=\\"o-field\\"><label class=\\"o-field__label\\">Password</label>
<div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
<!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
</section>
<div class=\\"o-field\\"><label class=\\"o-field__label\\">Password (confirmation)</label>
<div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
<!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
<!--v-if-->
</div>
<!--v-if-->
</div><button class=\\"button is-primary\\">Reset my password</button>
</form>
</section>"
`;
exports[`Reset page shows error if token is invalid 1`] = `
<section class="section container">
<div class="columns is-mobile is-centered">
<div class="column is-half-desktop">
<h1 class="title">
Password reset
</h1>
<transition-stub name="fade">
<article class="message is-danger">
<header class="message-header">
<p>Error</p><button type="button" class="delete"></button>
</header>
<section class="message-body">
<div class="media">
<!---->
<div class="media-content">The token you provided is invalid.</div>
</div>
</section>
<!---->
</article>
</transition-stub>
<form>
<div class="field"><label class="label">Password</label>
<div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
<!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
<!---->
</div>
<!---->
</div>
<div class="field"><label class="label">Password (confirmation)</label>
<div class="control has-icons-right is-clearfix"><input type="password" autocomplete="on" aria-required="true" required="required" minlength="6" class="input">
<!----><span class="icon is-right has-text-primary is-clickable"><i class="mdi mdi-eye mdi-24px"></i></span>
<!---->
</div>
<!---->
</div> <button class="button is-primary">
Reset my password
</button>
</form>
exports[`Reset page > shows error if token is invalid 1`] = `
"<section class=\\"container mx-auto\\">
<h1 class=\\"\\">Password reset</h1>
<transition-stub title=\\"Error\\">
<article class=\\"o-notification o-notification--danger\\">
<!--v-if-->
<!--v-if-->
<div class=\\"o-notification__wrapper\\">
<!--v-if-->
<div class=\\"o-notification__content\\">The token you provided is invalid.</div>
</div>
</article>
</transition-stub>
<form>
<div class=\\"o-field o-field--filled\\"><label class=\\"o-field__label\\">Password</label>
<div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
<!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
</section>
<div class=\\"o-field o-field--filled\\"><label class=\\"o-field__label\\">Password (confirmation)</label>
<div class=\\"o-ctrl-input\\"><input aria-required=\\"true\\" required=\\"\\" minlength=\\"6\\" class=\\"o-input o-input-iconspace-right\\" type=\\"password\\" autocomplete=\\"off\\">
<!--v-if--><span class=\\"o-icon o-icon--clickable o-input__icon-right\\"><i class=\\"mdi mdi-eye mdi-24px\\"></i></span>
<!--v-if-->
</div>
<!--v-if-->
</div><button class=\\"button is-primary\\">Reset my password</button>
</form>
</section>"
`;

117
js/tests/unit/specs/components/User/login.spec.ts
View File

@@ -1,86 +1,83 @@
import { config, createLocalVue, mount, Wrapper } from "@vue/test-utils";
import Login from "@/views/User/Login.vue";
import Buefy from "buefy";
const useRouterMock = vi.fn(() => ({
push: () => {},
replace: () => {},
}));
const useRouteMock = vi.fn(() => {});
import { config, mount, VueWrapper } from "@vue/test-utils";
import Login from "@/views/User/LoginView.vue";
import {
createMockClient,
MockApolloClient,
RequestHandler,
} from "mock-apollo-client";
import VueApollo from "@vue/apollo-option";
import buildCurrentUserResolver from "@/apollo/user";
import { configMock } from "../../mocks/config";
import { i18n } from "@/utils/i18n";
import { CONFIG } from "@/graphql/config";
import { loginMock as loginConfigMock } from "../../mocks/config";
import { LOGIN_CONFIG } from "@/graphql/config";
import { loginMock, loginResponseMock } from "../../mocks/auth";
import { LOGIN } from "@/graphql/auth";
import { CURRENT_USER_CLIENT } from "@/graphql/user";
import { ICurrentUser } from "@/types/current-user.model";
import flushPromises from "flush-promises";
import RouteName from "@/router/name";
import { InMemoryCache } from "@apollo/client/cache";
import { afterEach, describe, expect, it, vi } from "vitest";
import { DefaultApolloClient } from "@vue/apollo-composable";
import Oruga from "@oruga-ui/oruga-next";
import { cache } from "@/apollo/memory";
const localVue = createLocalVue();
localVue.use(Buefy);
config.mocks.$t = (key: string): string => key;
const $router = { push: jest.fn(), replace: jest.fn() };
vi.mock("vue-router/dist/vue-router.mjs", () => ({
useRouter: useRouterMock,
useRoute: useRouteMock,
}));
config.global.plugins.push(Oruga);
describe("Render login form", () => {
let wrapper: Wrapper<Vue>;
let wrapper: VueWrapper;
let mockClient: MockApolloClient | null;
let apolloProvider;
let requestHandlers: Record<string, RequestHandler>;
const generateWrapper = (
handlers: Record<string, unknown> = {},
customProps: Record<string, unknown> = {},
baseData: Record<string, unknown> = {},
customMocks: Record<string, unknown> = {}
) => {
const cache = new InMemoryCache({ addTypename: false });
mockClient = createMockClient({
cache,
resolvers: buildCurrentUserResolver(cache),
});
requestHandlers = {
configQueryHandler: jest.fn().mockResolvedValue(configMock),
loginMutationHandler: jest.fn().mockResolvedValue(loginResponseMock),
configQueryHandler: vi.fn().mockResolvedValue(loginConfigMock),
loginMutationHandler: vi.fn().mockResolvedValue(loginResponseMock),
...handlers,
};
mockClient.setRequestHandler(CONFIG, requestHandlers.configQueryHandler);
mockClient.setRequestHandler(
LOGIN_CONFIG,
requestHandlers.configQueryHandler
);
mockClient.setRequestHandler(LOGIN, requestHandlers.loginMutationHandler);
apolloProvider = new VueApollo({
defaultClient: mockClient,
});
wrapper = mount(Login, {
localVue,
i18n,
apolloProvider,
propsData: {
props: {
...customProps,
},
mocks: {
$route: { query: {} },
$router,
...customMocks,
},
stubs: ["router-link", "router-view"],
data() {
return {
...baseData,
};
global: {
provide: {
[DefaultApolloClient]: mockClient,
},
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper?.unmount();
cache.reset();
mockClient = null;
apolloProvider = null;
$router.push.mockReset();
});
it("requires email and password to be filled", async () => {
@@ -90,10 +87,9 @@ describe("Render login form", () => {
expect(wrapper.exists()).toBe(true);
expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
wrapper.find('form input[type="email"]').setValue("");
wrapper.find('form input[type="password"]').setValue("");
wrapper.find("form button.button").trigger("click");
wrapper.find('form button[type="submit"]').trigger("click");
const form = wrapper.find("form");
expect(form.exists()).toBe(true);
const formElement = form.element as HTMLFormElement;
@@ -101,13 +97,18 @@ describe("Render login form", () => {
});
it("renders and submits the login form", async () => {
const replace = vi.fn(); // needs to write this code before render()
const push = vi.fn();
useRouterMock.mockImplementationOnce(() => ({
replace,
push,
}));
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();
wrapper.find('form input[type="email"]').setValue("some@email.tld");
wrapper.find('form input[type="password"]').setValue("somepassword");
wrapper.find("form").trigger("submit");
@@ -125,14 +126,19 @@ describe("Render login form", () => {
await flushPromises();
expect(currentUser?.email).toBe("some@email.tld");
expect(currentUser?.id).toBe("1");
expect(jest.isMockFunction(wrapper.vm.$router.replace)).toBe(true);
await flushPromises();
expect($router.replace).toHaveBeenCalledWith({ name: RouteName.HOME });
expect(replace).toHaveBeenCalledWith({ name: RouteName.HOME });
});
it("handles a login error", async () => {
const replace = vi.fn(); // needs to write this code before render()
const push = vi.fn();
useRouterMock.mockImplementationOnce(() => ({
push,
replace,
}));
generateWrapper({
loginMutationHandler: jest.fn().mockResolvedValue({
loginMutationHandler: vi.fn().mockResolvedValue({
errors: [
{
message:
@@ -147,7 +153,6 @@ describe("Render login form", () => {
expect(wrapper.exists()).toBe(true);
expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
expect(wrapper.vm.$apollo.queries.config).toBeTruthy();
wrapper.find('form input[type="email"]').setValue("some@email.tld");
wrapper.find('form input[type="password"]').setValue("somepassword");
wrapper.find("form").trigger("submit");
@@ -156,21 +161,23 @@ describe("Render login form", () => {
...loginMock,
});
await flushPromises();
expect(wrapper.find("article.message.is-danger").text()).toContain(
expect(wrapper.find(".o-notification--danger").text()).toContain(
"Impossible to authenticate, either your email or password are invalid."
);
expect($router.push).not.toHaveBeenCalled();
expect(push).not.toHaveBeenCalled();
});
it("handles redirection after login", async () => {
generateWrapper(
{},
{},
{},
{
$route: { query: { redirect: "/about/instance" } },
}
);
const replace = vi.fn(); // needs to write this code before render()
const push = vi.fn();
useRouterMock.mockImplementationOnce(() => ({
replace,
push,
}));
useRouteMock.mockImplementationOnce(() => ({
query: { redirect: "/about/instance" },
}));
generateWrapper();
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
@@ -179,6 +186,6 @@ describe("Render login form", () => {
wrapper.find('form input[type="password"]').setValue("somepassword");
wrapper.find("form").trigger("submit");
await flushPromises();
expect($router.push).toHaveBeenCalledWith("/about/instance");
expect(push).toHaveBeenCalledWith("/about/instance");
});
});