Add component tests for presentational components and Login

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

tests/components/Login.test.js

@@ -0,0 +1,92 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { setActivePinia, createPinia } from 'pinia';
+
+vi.mock('@/module/apiError.js', () => ({
+  default: vi.fn(),
+}));
+
+import Login from '@/views/Login/Login.vue';
+import loginStore from '@/stores/login.ts';
+
+describe('Login', () => {
+  let pinia;
+
+  beforeEach(() => {
+    pinia = createPinia();
+    setActivePinia(pinia);
+  });
+
+  const mountLogin = (options = {}) => {
+    return mount(Login, {
+      global: {
+        plugins: [pinia],
+        mocks: {
+          $route: {
+            query: {},
+            ...options.route,
+          },
+        },
+      },
+    });
+  };
+
+  it('renders login form', () => {
+    const wrapper = mountLogin();
+    expect(wrapper.find('h2').text()).toBe('LOGIN');
+    expect(wrapper.find('#account').exists()).toBe(true);
+    expect(wrapper.find('#password').exists()).toBe(true);
+  });
+
+  it('has disabled login button when fields are empty', () => {
+    const wrapper = mountLogin();
+    const btn = wrapper.find('#login_btn_main_btn');
+    expect(btn.attributes('disabled')).toBeDefined();
+  });
+
+  it('enables login button when both fields have values', async () => {
+    const wrapper = mountLogin();
+    const store = loginStore();
+    store.auth.username = 'user';
+    store.auth.password = 'pass';
+    await wrapper.vm.$nextTick();
+    const btn = wrapper.find('#login_btn_main_btn');
+    expect(btn.attributes('disabled')).toBeUndefined();
+  });
+
+  it('shows error message when isInvalid', async () => {
+    const wrapper = mountLogin();
+    const store = loginStore();
+    store.isInvalid = true;
+    await wrapper.vm.$nextTick();
+    expect(wrapper.text()).toContain('Incorrect account or password');
+  });
+
+  it('toggles password visibility', async () => {
+    const wrapper = mountLogin();
+    const store = loginStore();
+    store.auth.password = 'secret';
+    await wrapper.vm.$nextTick();
+
+    const pwdInput = wrapper.find('#password');
+    expect(pwdInput.attributes('type')).toBe('password');
+
+    // Click the eye icon to toggle
+    const eyeToggle = wrapper.find(
+      'label[for="passwordt"] span.cursor-pointer',
+    );
+    if (eyeToggle.exists()) {
+      await eyeToggle.trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(pwdInput.attributes('type')).toBe('text');
+    }
+  });
+
+  it('stores return-to URL from route query', () => {
+    const wrapper = mountLogin({
+      route: { query: { 'return-to': 'encodedUrl' } },
+    });
+    const store = loginStore();
+    expect(store.rememberedReturnToUrl).toBe('encodedUrl');
+  });
+});