build: switch from yarn to npm to manage js dependencies and move js contents to root
yarn v1 is being deprecated and starts to have some issues Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
115
tests/unit/specs/components/User/PasswordReset.spec.ts
Normal file
115
tests/unit/specs/components/User/PasswordReset.spec.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
const useRouterMock = vi.fn(() => ({
|
||||
push: function () {
|
||||
// do nothing
|
||||
},
|
||||
}));
|
||||
|
||||
import { config, mount } from "@vue/test-utils";
|
||||
import PasswordReset from "@/views/User/PasswordReset.vue";
|
||||
import { createMockClient, RequestHandler } from "mock-apollo-client";
|
||||
import { RESET_PASSWORD } from "@/graphql/auth";
|
||||
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";
|
||||
|
||||
config.global.plugins.push(Oruga);
|
||||
|
||||
vi.mock("vue-router/dist/vue-router.mjs", () => ({
|
||||
useRouter: useRouterMock,
|
||||
}));
|
||||
|
||||
let requestHandlers: Record<string, RequestHandler>;
|
||||
|
||||
const generateWrapper = (
|
||||
customRequestHandlers: Record<string, RequestHandler> = {},
|
||||
customMocks = {}
|
||||
) => {
|
||||
const mockClient = createMockClient();
|
||||
|
||||
requestHandlers = {
|
||||
resetPasswordMutationHandler: vi
|
||||
.fn()
|
||||
.mockResolvedValue(resetPasswordResponseMock),
|
||||
...customRequestHandlers,
|
||||
};
|
||||
|
||||
mockClient.setRequestHandler(
|
||||
RESET_PASSWORD,
|
||||
requestHandlers.resetPasswordMutationHandler
|
||||
);
|
||||
|
||||
return mount(PasswordReset, {
|
||||
props: {
|
||||
token: "some-token",
|
||||
},
|
||||
global: {
|
||||
stubs: ["router-link", "router-view"],
|
||||
mocks: {
|
||||
...customMocks,
|
||||
},
|
||||
provide: {
|
||||
[DefaultApolloClient]: mockClient,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
describe("Reset page", () => {
|
||||
it("renders correctly", () => {
|
||||
const wrapper = generateWrapper();
|
||||
expect(wrapper.findAll('input[type="password"').length).toBe(2);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("shows error if token is invalid", async () => {
|
||||
const wrapper = generateWrapper({
|
||||
resetPasswordMutationHandler: vi.fn().mockResolvedValue({
|
||||
errors: [{ message: "The token you provided is invalid." }],
|
||||
}),
|
||||
});
|
||||
|
||||
wrapper
|
||||
.findAll('input[type="password"')
|
||||
.forEach((inputField) => inputField.setValue("my password"));
|
||||
wrapper.find("form").trigger("submit");
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(requestHandlers.resetPasswordMutationHandler).toBeCalledTimes(1);
|
||||
expect(requestHandlers.resetPasswordMutationHandler).toBeCalledWith({
|
||||
password: "my password",
|
||||
token: "some-token",
|
||||
});
|
||||
|
||||
await flushPromises();
|
||||
|
||||
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"')
|
||||
.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",
|
||||
});
|
||||
await flushPromises();
|
||||
expect(push).toHaveBeenCalledWith({ name: RouteName.HOME });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
// Vitest Snapshot v1
|
||||
|
||||
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 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=\\"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 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>"
|
||||
`;
|
||||
197
tests/unit/specs/components/User/login.spec.ts
Normal file
197
tests/unit/specs/components/User/login.spec.ts
Normal file
@@ -0,0 +1,197 @@
|
||||
const useRouterMock = vi.fn(() => ({
|
||||
push: function () {
|
||||
// do nothing
|
||||
},
|
||||
replace: function () {
|
||||
// do nothing
|
||||
},
|
||||
}));
|
||||
const useRouteMock = vi.fn(function () {
|
||||
// do nothing
|
||||
});
|
||||
|
||||
import { config, mount, VueWrapper } from "@vue/test-utils";
|
||||
import Login from "@/views/User/LoginView.vue";
|
||||
import {
|
||||
createMockClient,
|
||||
MockApolloClient,
|
||||
RequestHandler,
|
||||
} from "mock-apollo-client";
|
||||
import buildCurrentUserResolver from "@/apollo/user";
|
||||
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 { 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";
|
||||
|
||||
vi.mock("vue-router/dist/vue-router.mjs", () => ({
|
||||
useRouter: useRouterMock,
|
||||
useRoute: useRouteMock,
|
||||
}));
|
||||
|
||||
config.global.plugins.push(Oruga);
|
||||
|
||||
describe("Render login form", () => {
|
||||
let wrapper: VueWrapper;
|
||||
let mockClient: MockApolloClient | null;
|
||||
let requestHandlers: Record<string, RequestHandler>;
|
||||
|
||||
const generateWrapper = (
|
||||
handlers: Record<string, unknown> = {},
|
||||
customProps: Record<string, unknown> = {},
|
||||
customMocks: Record<string, unknown> = {}
|
||||
) => {
|
||||
mockClient = createMockClient({
|
||||
cache,
|
||||
resolvers: buildCurrentUserResolver(cache),
|
||||
});
|
||||
|
||||
requestHandlers = {
|
||||
configQueryHandler: vi.fn().mockResolvedValue(loginConfigMock),
|
||||
loginMutationHandler: vi.fn().mockResolvedValue(loginResponseMock),
|
||||
...handlers,
|
||||
};
|
||||
mockClient.setRequestHandler(
|
||||
LOGIN_CONFIG,
|
||||
requestHandlers.configQueryHandler
|
||||
);
|
||||
mockClient.setRequestHandler(LOGIN, requestHandlers.loginMutationHandler);
|
||||
|
||||
wrapper = mount(Login, {
|
||||
props: {
|
||||
...customProps,
|
||||
},
|
||||
mocks: {
|
||||
...customMocks,
|
||||
},
|
||||
stubs: ["router-link", "router-view"],
|
||||
global: {
|
||||
provide: {
|
||||
[DefaultApolloClient]: mockClient,
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
wrapper?.unmount();
|
||||
cache.reset();
|
||||
mockClient = null;
|
||||
});
|
||||
|
||||
it("requires email and password to be filled", async () => {
|
||||
generateWrapper();
|
||||
await wrapper.vm.$nextTick();
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(wrapper.exists()).toBe(true);
|
||||
expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
|
||||
wrapper.find('form input[type="email"]').setValue("");
|
||||
wrapper.find('form input[type="password"]').setValue("");
|
||||
wrapper.find('form button[type="submit"]').trigger("click");
|
||||
const form = wrapper.find("form");
|
||||
expect(form.exists()).toBe(true);
|
||||
const formElement = form.element as HTMLFormElement;
|
||||
expect(formElement.checkValidity()).toBe(false);
|
||||
});
|
||||
|
||||
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();
|
||||
wrapper.find('form input[type="email"]').setValue("some@email.tld");
|
||||
wrapper.find('form input[type="password"]').setValue("somepassword");
|
||||
wrapper.find("form").trigger("submit");
|
||||
await wrapper.vm.$nextTick();
|
||||
expect(requestHandlers.loginMutationHandler).toHaveBeenCalledWith({
|
||||
...loginMock,
|
||||
});
|
||||
await flushPromises();
|
||||
const currentUser = mockClient?.cache.readQuery<{
|
||||
currentUser: ICurrentUser;
|
||||
}>({
|
||||
query: CURRENT_USER_CLIENT,
|
||||
})?.currentUser;
|
||||
|
||||
await flushPromises();
|
||||
expect(currentUser?.email).toBe("some@email.tld");
|
||||
expect(currentUser?.id).toBe("1");
|
||||
await flushPromises();
|
||||
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: vi.fn().mockResolvedValue({
|
||||
errors: [
|
||||
{
|
||||
message:
|
||||
'"Impossible to authenticate, either your email or password are invalid."',
|
||||
},
|
||||
],
|
||||
}),
|
||||
});
|
||||
|
||||
await wrapper.vm.$nextTick();
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
expect(wrapper.exists()).toBe(true);
|
||||
expect(requestHandlers.configQueryHandler).toHaveBeenCalled();
|
||||
wrapper.find('form input[type="email"]').setValue("some@email.tld");
|
||||
wrapper.find('form input[type="password"]').setValue("somepassword");
|
||||
wrapper.find("form").trigger("submit");
|
||||
await wrapper.vm.$nextTick();
|
||||
expect(requestHandlers.loginMutationHandler).toHaveBeenCalledWith({
|
||||
...loginMock,
|
||||
});
|
||||
await flushPromises();
|
||||
expect(wrapper.find(".o-notification--danger").text()).toContain(
|
||||
"Impossible to authenticate, either your email or password are invalid."
|
||||
);
|
||||
expect(push).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("handles redirection after login", async () => {
|
||||
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();
|
||||
|
||||
wrapper.find('form input[type="email"]').setValue("some@email.tld");
|
||||
wrapper.find('form input[type="password"]').setValue("somepassword");
|
||||
wrapper.find("form").trigger("submit");
|
||||
await flushPromises();
|
||||
expect(push).toHaveBeenCalledWith("/about/instance");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user