Add unit tests for LoginButton component with comprehensive coverage

.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.