From a261d4013adc5376c74837ba061bc24f1153a9b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20Palancher?= <remi@rackslab.io>
Date: Fri, 13 Sep 2024 09:40:55 +0200
Subject: [PATCH] tests: introduce unit tests for login form

---
 frontend/src/views/LoginView.spec.ts | 51 ++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 frontend/src/views/LoginView.spec.ts

diff --git a/frontend/src/views/LoginView.spec.ts b/frontend/src/views/LoginView.spec.ts
new file mode 100644
index 00000000..312fbd7f
--- /dev/null
+++ b/frontend/src/views/LoginView.spec.ts
@@ -0,0 +1,51 @@
+import { describe, test, beforeEach, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import LoginView from '@/views/LoginView.vue'
+
+import { setActivePinia, createPinia } from 'pinia'
+
+describe('LoginView.vue', () => {
+  beforeEach(() => {
+    /*
+     * Creates a fresh pinia and makes it active so it's automatically picked up
+     * by any useStore() call without having to pass it to it: `useStore(pinia)`
+     */
+    setActivePinia(createPinia())
+  })
+  test('should display login form', () => {
+    const wrapper = mount(LoginView, {})
+    // Check presence of the logo and its source.
+    const image = wrapper.get('img');
+    expect(image.attributes('src')).toBe('/logo/slurm-web_logo.png');
+    // Check presence on user/password inputs.
+    wrapper.get('input#user')
+    wrapper.get('input#password')
+    // Check presence and type of submit button.
+    const button = wrapper.get('button')
+    expect(button.attributes('type')).toBe('submit');
+  })
+  test('error on login form submission with empty user input', async () => {
+    const wrapper = mount(LoginView, {})
+    const button = wrapper.get('button')
+    const user_input = wrapper.get('input#user')
+    const password_input = wrapper.get('input#password')
+    await button.trigger('submit');
+    // Check user input is highlighted with red background color while password
+    // input is still in gray.
+    expect(user_input.classes('bg-red-200')).toBe(true);
+    expect(password_input.classes('bg-gray-50')).toBe(true);
+  })
+  test('error on login form submission with empty password input', async () => {
+    const wrapper = mount(LoginView, {})
+    const button = wrapper.get('button')
+    // Add value in user input.
+    const user_input = wrapper.get('input#user')
+    user_input.setValue("user")
+    const password_input = wrapper.get('input#password')
+    await button.trigger('submit');
+    // Check password input is highlighted with red background color while user
+    // is OK.
+    expect(user_input.classes('bg-gray-50')).toBe(true);
+    expect(password_input.classes('bg-red-200')).toBe(true);
+  })
+})