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); + }) +})