add tests for ResetPassword

client/src/entry/analysis/modules/ResetPassword.test.ts

@@ -1,12 +1,9 @@
-import { createTestingPinia } from "@pinia/testing";
 import { getLocalVue } from "@tests/jest/helpers";
 import { mount } from "@vue/test-utils";
-import { setActivePinia } from "pinia";
-
-import { getGalaxyInstance } from "@/app/singleton";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
 
 import ResetPassword from "./ResetPassword.vue";
-import assert from "assert";
 
 const localVue = getLocalVue(true);
 
@@ -26,7 +23,6 @@ jest.mock("app/singleton");
 jest.mock("@/composables/config", () => ({
     useConfig: jest.fn(() => ({
         config: configMock,
-
         isConfigLoaded: true,
     })),
 }));
@@ -37,33 +33,84 @@ const mockRouter = (query: object) => ({
     },
 });
 
-(getGalaxyInstance as jest.Mock).mockReturnValue({ session_csrf_token: "session_csrf_token" });
-
 function mountResetPassword(routerQuery: object = {}) {
-    const pinia = createTestingPinia();
-    setActivePinia(pinia);
-
     return mount(ResetPassword, {
         localVue,
-        pinia,
+        attachTo: document.body,
         mocks: {
             $router: mockRouter(routerQuery),
         },
     });
 }
 
 describe("ResetPassword", () => {
-    it("ResetPassword index attribute matching", async () => {
-        const wrapper = mountResetPassword({
-            redirect: "redirect_url",
-        });
+    it("query", async () => {
+        const email = "test";
+        const wrapper = mountResetPassword({ email: "test" });
+
         const emailField = wrapper.find("#reset-email");
+        const emailValue = (emailField.element as HTMLInputElement).value;
+        expect(emailValue).toBe(email);
+    });
+
+    it("button text", async () => {
+        const wrapper = mountResetPassword();
+        const submitButton = wrapper.find("#reset-password");
+        (expect(submitButton.text()) as any).toBeLocalizationOf("Send password reset email");
+    });
+
+    it("validate email", async () => {
+        const wrapper = mountResetPassword();
         const submitButton = wrapper.find("#reset-password");
-        const testEmail = "eihfeuh";
+        const emailField = wrapper.find("#reset-email");
+        const emailElement = emailField.element as HTMLInputElement;
+
+        let email = "";
+        await emailField.setValue(email);
+        expect(emailElement.value).toBe(email);
+        await submitButton.trigger("click");
+        expect(emailElement.checkValidity()).toBe(false);
 
-        emailField.setValue(testEmail);
-        const emailValue = emailField.element.textContent;
-        expect(emailValue).toBe(testEmail);
+        email = "test";
+        await emailField.setValue(email);
+        expect(emailElement.value).toBe(email);
+        await submitButton.trigger("click");
+        expect(emailElement.checkValidity()).toBe(false);
 
+        email = "[email protected]";
+        await emailField.setValue(email);
+        expect(emailElement.value).toBe(email);
+        await submitButton.trigger("click");
+        expect(emailElement.checkValidity()).toBe(true);
+    });
+
+    it("display success message", async () => {
+        const wrapper = mountResetPassword({ email: "[email protected]" });
+        const mockAxios = new MockAdapter(axios);
+        const submitButton = wrapper.find("#reset-password");
+
+        mockAxios.onPost("/user/reset_password").reply(200, {
+            message: "Reset link has been sent to your email.",
+        });
+        await submitButton.trigger("click");
+        setTimeout(async () => {
+            const alertSuccess = wrapper.find("#reset-password-alert");
+            expect(alertSuccess.text()).toBe("Reset link has been sent to your email.");
+        });
+    });
+
+    it("display error message", async () => {
+        const wrapper = mountResetPassword({ email: "[email protected]" });
+        const submitButton = wrapper.find("#reset-password");
+
+        const mockAxios = new MockAdapter(axios);
+        mockAxios.onPost("/user/reset_password").reply(400, {
+            err_msg: "Please provide your email.",
+        });
+        await submitButton.trigger("click");
+        setTimeout(async () => {
+            const alertError = wrapper.find("#reset-password-alert");
+            expect(alertError.text()).toBe("Please provide your email.");
+        });
     });
 });

client/src/entry/analysis/modules/ResetPassword.vue

@@ -35,16 +35,18 @@ async function resetLogin() {
             <div class="row justify-content-md-center">
                 <div class="col col-lg-6">
                     <BForm @submit.prevent="resetLogin">
-                        <BAlert v-if="!!message" class="mt-2" :variant="messageVariant" show>
+                        <BAlert v-if="!!message" id="reset-password-alert" class="mt-2" :variant="messageVariant" show>
                             {{ message }}
                         </BAlert>
 
                         <BCard header="Reset your password">
                             <BFormGroup label="Email Address">
-                                <BFormInput id="reset-email" v-model="email" type="email" />
+                                <BFormInput id="reset-email" v-model="email" type="email" name="email" required />
                             </BFormGroup>
 
-                            <BButton type="submit">Reset your password</BButton>
+                            <BButton id="reset-password" v-localize type="submit" :disabled="loading"
+                                >Send password reset email</BButton
+                            >
                         </BCard>
                     </BForm>
                 </div>