Add unit tests for LoginButton component with comprehensive coverage

.github/copilot-instructions.md

@@ -8,6 +8,7 @@
 - **Database**: Use TinyDB with `from_dict()`/`to_dict()` for serialization. All logic should operate on model instances, not raw dicts.
 - **Events**: Real-time updates via Server-Sent Events (SSE). Every mutation (add/edit/delete/trigger) must call `send_event_for_current_user` (see `backend/events/`).
 - **Changes**: Do not use comments to replace code. All changes must be reflected in both backend and frontend files as needed.
+- **Specs**: If specs have a checklist, all items must be completed and marked done.
 
 ## 🧩 Key Patterns & Conventions
 
@@ -15,7 +16,11 @@
 - **Scoped Styles**: All `.vue` files must use `<style scoped>`. Reference global variables for theme consistency.
 - **API Error Handling**: Backend returns JSON with `error` and `code` (see `backend/api/error_codes.py`). Frontend extracts `{ msg, code }` using `parseErrorResponse(res)` from `api.ts`.
 - **JWT Auth**: Tokens are stored in HttpOnly, Secure, SameSite=Strict cookies.
-- **Code Style**: Follow PEP 8 for Python, and standard TypeScript conventions. Use type annotations everywhere in Python. Place python changes after imports. Place all imports at the top of the file.
+- **Code Style**:
+  1. Follow PEP 8 for Python, and standard TypeScript conventions.
+  2. Use type annotations everywhere in Python.
+  3. Place python changes after imports. Place all imports at the top of the file.
+  4. Vue files should specifically place `<template>`, `<script>`, then `<style>` in that order. Make sure to put ts code in `<script>` only.
 
 ## 🚦 Frontend Logic & Event Bus
 
@@ -41,7 +46,7 @@
 - `backend/models/` — Python dataclasses (business logic, serialization)
 - `backend/db/` — TinyDB setup and helpers
 - `backend/events/` — SSE event types, broadcaster, payloads
-- `frontend/vue-app/` — Vue 3 frontend (see `src/common/`, `src/components/`, `src/layout/`)
+- `frontend/vue-app/` — Vue 3 frontend (see `src/common/`, `src/components/`, `src/layout/`) - Where tests are run from
 - `frontend/vue-app/src/common/models.ts` — TypeScript interfaces (mirror Python models)
 - `frontend/vue-app/src/common/api.ts` — API helpers, error parsing, validation
 - `frontend/vue-app/src/common/backendEvents.ts` — SSE event types and handlers

.github/specs/active/profile-button-menu/feat-profile-icon-button-menu.md

@@ -5,8 +5,9 @@
 - **Sample Design:** #mockup.png
 - **Design:**
   1. Dropdown header colors need to match color theme inside #colors.css
-  2. The three dropdown items should be "Profile", "Child Mode", and "Sign out"
-  3. Currently, the dropdown shows "Log out" for "Child Mode", that should be changed to "Child Mode"
+  2. The icon button shall be circular and use all the space of it's container. It should be centered in it's container.
+  3. The three dropdown items should be "Profile", "Child Mode", and "Sign out"
+  4. Currently, the dropdown shows "Log out" for "Child Mode", that should be changed to "Child Mode"
 
 ## Context:
 
@@ -16,6 +17,7 @@
 ## Technical Requirements
 
 - **File Affected:** LoginButton.vue, ParentLayout.vue, ChildLayout.vue, AuthLayout.vue
+- **Backend:** When LoginButton loads, it should query the backend for the current user data (/user/profile) The returned data will provide the image_id and first_name of the user.
 - **Navigation:**
   1. When the avatar button is focused, pressing Enter or Space opens the dropdown.
   2. When the dropdown is open:
@@ -30,7 +32,7 @@
 - **Focus Ring:** All interactive elements (avatar button and dropdown menu items) must display a visible focus ring when focused via keyboard navigation. The focus ring color should use a theme variable from colors.css and meet accessibility contrast guidelines.
 - **Mobile & Layout:**
   1. The avatar icon button must always be positioned at the top right of the screen, regardless of device size.
-  2. The icon must never exceed 65px in width or height.
+  2. The icon must never exceed 44px in width or height.
   3. On mobile, ensure the button is at least 44x44px for touch accessibility.
 - **Avatar Fallback:** If user.first_name does not exist, display a ? as the fallback initial.
 - **Dropdown Placement and Animation:**
@@ -46,18 +48,18 @@
 
 ## UI Acceptance Criteria (The "Definition of Done")
 
-- [ ] UI: Swap the "Parent" button with the user's avatar image.
-- [ ] UI: Refactor #LoginButton.vue to use new CSS generated from #mockup.png
-- [ ] Logic: Make sure the dropdown does not show when in child mode.
-- [ ] Logic: Make sure the parent PIN modal shows when the button is pressed in child mode.
-- [ ] Logic: Make sure the parent PIN creation view shows when the button is pressed in child mode if no user.pin doesn't exist or is empty.
-- [ ] Frontend Tests: Add vitest for this feature in the frontend to make sure the logic for button clicking in parent mode and child mode act correctly.
-  1. [ ] Avatar button renders image, initial, or ? as fallback
-  2. [ ] Dropdown opens/closes via click, Enter, Space, Esc, and outside click.
-  3. [ ] Dropdown is positioned and animated correctly.
-  4. [ ] Keyboard navigation (Up/Down, Enter, Space, Esc) works as specified.
-  5. [ ] ARIA attributes and roles are set correctly.
-  6. [ ] Focus ring is visible and uses theme color.
-  7. [ ] Avatar button meets size and position requirements on all devices.
-  8. [ ] Menu logic for parent/child mode is correct.
-  9. [ ] Stub icons are rendered for menu items.
+- [x] UI: Swap the "Parent" button with the user's avatar image.
+- [x] UI: Refactor #LoginButton.vue to use new CSS generated from #mockup.png
+- [x] Logic: Make sure the dropdown does not show when in child mode.
+- [x] Logic: Make sure the parent PIN modal shows when the button is pressed in child mode.
+- [x] Logic: Make sure the parent PIN creation view shows when the button is pressed in child mode if no user.pin doesn't exist or is empty.
+- [x] Frontend Tests: Add vitest for this feature in the frontend to make sure the logic for button clicking in parent mode and child mode act correctly.
+  1. [x] Avatar button renders image, initial, or ? as fallback
+  2. [x] Dropdown opens/closes via click, Enter, Space, Esc, and outside click.
+  3. [x] Dropdown is positioned and animated correctly.
+  4. [x] Keyboard navigation (Up/Down, Enter, Space, Esc) works as specified.
+  5. [x] ARIA attributes and roles are set correctly.
+  6. [x] Focus ring is visible and uses theme color.
+  7. [x] Avatar button meets size and position requirements on all devices.
+  8. [x] Menu logic for parent/child mode is correct.
+  9. [x] Stub icons are rendered for menu items.