From 2bcc85e397c74465696d6babb18c54e6fc874eb9 Mon Sep 17 00:00:00 2001
From: XkijuX <sanderhegland@gmail.com>
Date: Thu, 5 May 2022 19:58:48 +0200
Subject: [PATCH] Added more tests for loginForm
---
src/components/FormComponents/LoginForm.vue | 2 +-
.../__snapshots__/login-form.spec.js.snap | 2 +-
.../login-form-component.spec.js | 75 +++++++++++++++++++
.../login-form-valid-login.spec.js | 56 ++++++++++++++
4 files changed, 133 insertions(+), 2 deletions(-)
create mode 100644 tests/unit/component-tests/user-component-tests/login-form-component/login-form-component.spec.js
create mode 100644 tests/unit/component-tests/user-component-tests/login-form-component/login-form-valid-login.spec.js
diff --git a/src/components/FormComponents/LoginForm.vue b/src/components/FormComponents/LoginForm.vue
index 4b52c2e..d6fdcad 100644
--- a/src/components/FormComponents/LoginForm.vue
+++ b/src/components/FormComponents/LoginForm.vue
@@ -66,7 +66,7 @@
>Glemt passord?</router-link
>
- <Button @click="loginClicked" :text="'Logg på'"></Button>
+ <Button class="login" @click="loginClicked" :text="'Logg på'"></Button>
</div>
</div>
</div>
diff --git a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
index 7d3875c..1576edb 100644
--- a/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
+++ b/tests/unit/component-tests/user-component-tests/__snapshots__/login-form.spec.js.snap
@@ -49,7 +49,7 @@ exports[`LoginForm component renders correctly 1`] = `
Glemt passord?
</router-link>
<button
- class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light"
+ class="block text-white bg-primary-medium hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-light font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-medium dark:hover:bg-primary-dark dark:focus:ring-primary-light login"
>
Logg på
</button>
diff --git a/tests/unit/component-tests/user-component-tests/login-form-component/login-form-component.spec.js b/tests/unit/component-tests/user-component-tests/login-form-component/login-form-component.spec.js
new file mode 100644
index 0000000..6a6b69f
--- /dev/null
+++ b/tests/unit/component-tests/user-component-tests/login-form-component/login-form-component.spec.js
@@ -0,0 +1,75 @@
+import { shallowMount } from "@vue/test-utils";
+import LoginForm from "@/components/FormComponents/LoginForm.vue";
+
+jest.mock('@/utils/apiutil', () => {
+ return {
+ doLogin: () => {
+ return new Promise((resolve) => {
+ resolve({
+ isLoggedIn: false
+ });
+ })
+ }
+ }
+});
+
+describe("LoginForm component", () => {
+ let wrapper;
+ const mockRouter = {
+ push: jest.fn()
+ }
+ const mockStore = {
+ commit: jest.fn()
+ }
+
+ beforeEach(() => {
+ wrapper = shallowMount(LoginForm, {
+ global: {
+ mocks: {
+ $router: mockRouter,
+ $store: mockStore
+ }
+ }
+ });
+ });
+
+ it("is instantiated", () => {
+ console.log(wrapper.html());
+ expect(wrapper.exists()).toBeTruthy();
+ });
+
+ it("Check that two input fields are rendered" , () => {
+ expect(wrapper.findAll("input").length).toBe(2);
+ });
+
+ it("Insert invalid email into the first input field", () => {
+ const field = wrapper.findAll("input")[0];
+ field.setValue("test");
+ expect(field.element.validity.valid).toBeFalsy();
+ });
+
+ it("Insert valid email into the first input field", () => {
+ const field = wrapper.findAll("input")[0];
+ field.setValue("test@test.com");
+ expect(field.element.validity.valid).toBeTruthy();
+ });
+
+ it("Check invalid login", async () => {
+ // Verify that the error message is empty
+ expect(wrapper.vm.message).toBe("");
+ const field = wrapper.findAll("input")[0];
+ field.setValue("test@test.com");
+ const field2 = wrapper.findAll("input")[1];
+ field2.setValue("testtest");
+
+ // Click on the login button
+ const button = wrapper.find(".login");
+ button.trigger("click");
+
+ // wait a tick
+ await wrapper.vm.$nextTick();
+
+ // Check that the error message is not empty
+ expect(wrapper.vm.message).not.toBe("");
+ })
+});
\ No newline at end of file
diff --git a/tests/unit/component-tests/user-component-tests/login-form-component/login-form-valid-login.spec.js b/tests/unit/component-tests/user-component-tests/login-form-component/login-form-valid-login.spec.js
new file mode 100644
index 0000000..689ed40
--- /dev/null
+++ b/tests/unit/component-tests/user-component-tests/login-form-component/login-form-valid-login.spec.js
@@ -0,0 +1,56 @@
+import { shallowMount } from "@vue/test-utils";
+import LoginForm from "@/components/FormComponents/LoginForm.vue";
+import vueRouter from 'vue-router'
+
+jest.mock('@/utils/apiutil', () => {
+ return {
+ doLogin: () => {
+ return new Promise((resolve) => {
+ resolve({
+ isLoggedIn: true
+ });
+ })
+ }
+ }
+});
+
+describe("LoginForm component", () => {
+ let wrapper;
+ const mockRouter = {
+ push: jest.fn()
+ }
+ const mockStore = {
+ commit: jest.fn()
+ }
+
+ beforeEach(() => {
+ wrapper = shallowMount(LoginForm, {
+ global: {
+ mocks: {
+ $router: mockRouter,
+ $store: mockStore
+ },
+ }
+ });
+ });
+
+ it("Check valid login", async () => {
+
+ // Verify that the error message is empty
+ expect(wrapper.vm.message).toBe("");
+ const field = wrapper.findAll("input")[0];
+ field.setValue("test@test.com");
+ const field2 = wrapper.findAll("input")[1];
+ field2.setValue("testtest");
+
+ // Click on the login button
+ const button = wrapper.find(".login");
+ button.trigger("click");
+
+ // wait a tick
+ await wrapper.vm.$nextTick();
+
+ // Check that the error message is not empty
+ expect(mockRouter.push).toBeCalledTimes(1);
+ })
+})
\ No newline at end of file
--
GitLab