correct and complete unit tests in Front-End

This commit is contained in:
Laurent GAY
2025-06-11 18:49:45 +02:00
parent 2fa54e8282
commit 533ecbdbba
67 changed files with 1900 additions and 203 deletions

View File

@@ -70,7 +70,10 @@ describe("Reset page", () => {
const wrapper = generateWrapper();
expect(wrapper.router).toBe(router);
expect(wrapper.findAll('input[type="password"').length).toBe(2);
expect(wrapper.html()).toMatchSnapshot();
const labels = wrapper.findAll("label");
expect(labels.length).toBe(2);
expect(labels.at(0).text()).toBe("Password");
expect(labels.at(1).text()).toBe("Password (confirmation)");
});
it("shows error if token is invalid", async () => {
@@ -98,7 +101,6 @@ describe("Reset page", () => {
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 () => {

View File

@@ -1,55 +0,0 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
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 name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\" 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>"
`;

View File

@@ -8,9 +8,17 @@ import {
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 {
loginMock,
loginResponseMock,
nullIdentityMock,
} from "../../mocks/auth";
import { LOGIN } from "@/graphql/auth";
import { CURRENT_USER_CLIENT } from "@/graphql/user";
import {
CURRENT_USER_CLIENT,
LOGGED_USER_LOCATION,
UPDATE_CURRENT_USER_CLIENT,
} from "@/graphql/user";
import { ICurrentUser } from "@/types/current-user.model";
import flushPromises from "flush-promises";
import RouteName from "@/router/name";
@@ -24,6 +32,8 @@ import {
injectRouterMock,
getRouter,
} from "vue-router-mock";
import { IDENTITIES } from "@/graphql/actor";
import { nullMock } from "../../common";
config.global.plugins.push(Oruga);
config.plugins.VueWrapper.install(VueRouterMock);
@@ -58,6 +68,8 @@ describe("Render login form", () => {
requestHandlers = {
configQueryHandler: vi.fn().mockResolvedValue(loginConfigMock),
loginMutationHandler: vi.fn().mockResolvedValue(loginResponseMock),
identity: vi.fn().mockResolvedValue(nullIdentityMock),
mockhdl: vi.fn().mockResolvedValue(nullMock),
...handlers,
};
mockClient.setRequestHandler(
@@ -65,6 +77,12 @@ describe("Render login form", () => {
requestHandlers.configQueryHandler
);
mockClient.setRequestHandler(LOGIN, requestHandlers.loginMutationHandler);
mockClient.setRequestHandler(IDENTITIES, requestHandlers.identity);
mockClient.setRequestHandler(LOGGED_USER_LOCATION, requestHandlers.mockhdl);
mockClient.setRequestHandler(
UPDATE_CURRENT_USER_CLIENT,
requestHandlers.mockhdl
);
wrapper = mount(Login, {
props: {
@@ -80,6 +98,7 @@ describe("Render login form", () => {
},
},
});
wrapper.router.push.mockReset();
};
afterEach(() => {