From 8e36c2c7fd77e35d6746dfeab26686a4627c55e9 Mon Sep 17 00:00:00 2001 From: Alireza Heidari Date: Thu, 7 Mar 2024 16:58:00 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F:=20refactor=20`LoginForm`?= =?UTF-8?q?=20test=20to=20typescript?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{LoginForm.test.js => LoginForm.test.ts} | 87 +++++++++++++------ client/src/components/Login/LoginForm.vue | 2 +- 2 files changed, 61 insertions(+), 28 deletions(-) rename client/src/components/Login/{LoginForm.test.js => LoginForm.test.ts} (63%) diff --git a/client/src/components/Login/LoginForm.test.js b/client/src/components/Login/LoginForm.test.ts similarity index 63% rename from client/src/components/Login/LoginForm.test.js rename to client/src/components/Login/LoginForm.test.ts index 1d35caaee6d6..6335809218de 100644 --- a/client/src/components/Login/LoginForm.test.js +++ b/client/src/components/Login/LoginForm.test.ts @@ -1,27 +1,31 @@ +import { getLocalVue } from "@tests/jest/helpers"; import { mount } from "@vue/test-utils"; import axios from "axios"; import MockAdapter from "axios-mock-adapter"; -import { getLocalVue } from "tests/jest/helpers"; -import MountTarget from "./LoginForm"; +import MountTarget from "./LoginForm.vue"; const localVue = getLocalVue(true); +async function mountLoginForm() { + const wrapper = mount(MountTarget as object, { + propsData: { + sessionCsrfToken: "sessionCsrfToken", + }, + localVue, + stubs: { + ExternalLogin: true, + }, + }); + + return wrapper; +} + describe("LoginForm", () => { - let wrapper; - let axiosMock; + let axiosMock: MockAdapter; beforeEach(() => { axiosMock = new MockAdapter(axios); - wrapper = mount(MountTarget, { - propsData: { - sessionCsrfToken: "sessionCsrfToken", - }, - localVue, - stubs: { - ExternalLogin: true, - }, - }); }); afterEach(() => { @@ -29,34 +33,50 @@ describe("LoginForm", () => { }); it("basics", async () => { + const wrapper = await mountLoginForm(); + const cardHeader = wrapper.find(".card-header"); expect(cardHeader.text()).toBe("Welcome to Galaxy, please log in"); + const inputs = wrapper.findAll("input"); expect(inputs.length).toBe(2); + const usernameField = inputs.at(0); expect(usernameField.attributes("type")).toBe("text"); + await usernameField.setValue("test_user"); + const pwdField = inputs.at(1); expect(pwdField.attributes("type")).toBe("password"); + await pwdField.setValue("test_pwd"); + const submitButton = wrapper.find("button[type='submit']"); await submitButton.trigger("submit"); - const postedData = JSON.parse(axiosMock.history.post[0].data); + + const postedData = JSON.parse(axiosMock.history.post?.[0]?.data); expect(postedData.login).toBe("test_user"); expect(postedData.password).toBe("test_pwd"); }); it("props", async () => { - const $register = "[id='register-toggle']"; + const wrapper = await mountLoginForm(); + + console.log(wrapper.html()); + + const $register = "#register-toggle"; expect(wrapper.findAll($register).length).toBe(0); + await wrapper.setProps({ allowUserCreation: true, enableOidc: true, showWelcomeWithLogin: true, welcomeUrl: "welcome_url", }); + const register = wrapper.find($register); - expect(register.text()).toBeLocalizationOf("Register here."); + (expect(register.text()) as any).toBeLocalizationOf("Register here."); + const welcomePage = wrapper.find("iframe"); expect(welcomePage.attributes("src")).toBe("welcome_url"); }); @@ -65,33 +85,46 @@ describe("LoginForm", () => { const external_email = "test@test.com"; const provider_id = "test_provider"; const provider_label = "Provider"; - await wrapper.setData({ - connectExternalEmail: external_email, - connectExternalProvider: provider_id, - connectExternalLabel: provider_label, - }); + + const originalLocation = window.location; + jest.spyOn(window, "location", "get").mockImplementation(() => ({ + ...originalLocation, + search: `?connect_external_email=${external_email}&connect_external_provider=${provider_id}&connect_externallocalizeabel=${provider_label}`, + })); + + const wrapper = await mountLoginForm(); + expect(wrapper.find(".card-header").exists()).toBe(false); + const alert = wrapper.find(".alert"); expect(alert.classes()).toContain("alert-info"); expect(alert.text()).toContain(`There already exists a user with the email ${external_email}`); expect(alert.text()).toContain(`In order to associate this account with ${provider_label}`); + const inputs = wrapper.findAll("input"); expect(inputs.length).toBe(2); + const usernameField = inputs.at(0); expect(usernameField.attributes("type")).toBe("text"); - expect(usernameField.element.disabled).toBe(true); - expect(usernameField.element.value).not.toBe(""); - expect(usernameField.element.value).toContain(external_email); + expect((usernameField.element as HTMLInputElement).disabled).toBe(true); + expect((usernameField.element as HTMLInputElement).value).not.toBe(""); + expect((usernameField.element as HTMLInputElement).value).toContain(external_email); + const pwdField = inputs.at(1); expect(pwdField.attributes("type")).toBe("password"); - expect(pwdField.element.value).toBe(""); + expect((pwdField.element as HTMLInputElement).value).toBe(""); + await pwdField.setValue("test_pwd"); + const submitButton = wrapper.find("button[type='submit']"); + await submitButton.trigger("submit"); - const postedData = JSON.parse(axiosMock.history.post[0].data); + + const postedData = JSON.parse(axiosMock.history.post?.[0]?.data); expect(postedData.login).toBe(external_email); expect(postedData.password).toBe("test_pwd"); - const postedURL = axiosMock.history.post[0].url; + + const postedURL = axiosMock.history.post?.[0]?.url; expect(postedURL).toBe("/user/login"); }); }); diff --git a/client/src/components/Login/LoginForm.vue b/client/src/components/Login/LoginForm.vue index 5278e7221d84..b465289d58bc 100644 --- a/client/src/components/Login/LoginForm.vue +++ b/client/src/components/Login/LoginForm.vue @@ -40,7 +40,7 @@ const props = withDefaults(defineProps(), { redirect: undefined, termsUrl: undefined, welcomeUrl: undefined, - allowUserCreation: true, + allowUserCreation: false, showWelcomeWithLogin: false, registrationWarningMessage: undefined, });