navidocs/SMOKE_TEST_CHECKLIST.md

LibraryView - Smoke Test Checklist

Version: 1.0 Last Updated: 2025-10-23 Component: LibraryView (/home/setup/navidocs/client/src/views/LibraryView.vue) Test Duration: ~10-15 minutes

---

Purpose

This smoke test checklist provides a quick validation that the LibraryView component is functioning correctly after code changes, deployments, or environment updates. It covers critical functionality that must work for the feature to be considered "shippable."

---

Prerequisites

• Repository cloned: /home/setup/navidocs
• Node.js installed (v18 or v20)
• Dependencies installed (npm install in client directory)
• No pending git changes that might interfere
• Browser available (Chrome, Firefox, or Safari recommended)

---

Test Environment Setup

1. Start the Development Server

# Navigate to client directory
cd /home/setup/navidocs/client

# Install dependencies (if not already done)
npm install

# Start dev server
npm run dev

Expected Output:

  VITE v5.x.x  ready in XXX ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Verification:

• Server starts without errors
• Port 5173 is accessible
• No dependency errors in terminal
• Build completes in <5 seconds

If server fails:

• Check for port conflicts: lsof -i :5173
• Check Node version: node --version
• Clear cache: rm -rf node_modules/.vite

---

Smoke Test Scenarios

Test 1: Initial Page Load ✓

Steps:

1. Open browser
2. Navigate to http://localhost:5173/library
3. Wait for page to fully load (2-3 seconds)

Pass Criteria:

• Page loads without white screen or errors
• Header appears with "Document Library" title
• Vessel name "LILIAN I - 29 documents" visible
• No JavaScript errors in console (F12 > Console)
• Background gradient visible (purple to black)
• Page renders in <3 seconds

Expected Console Output:

[Vue Router] Navigating to: /library
[LibraryView] Component mounted

Failure Indicators:

• ❌ Blank/white page
• ❌ "Cannot read property X of undefined" errors
• ❌ Infinite loading spinner
• ❌ 404 Not Found

---

Test 2: Console Error Check ✓

Steps:

1. With /library loaded, open DevTools (F12)
2. Go to Console tab
3. Scan for errors (red text)

Pass Criteria:

• No JavaScript errors (Uncaught, TypeError, ReferenceError)
• No Vue warnings about failed components
• No "Failed to fetch" network errors
• No unhandled promise rejections

Acceptable Warnings (can ignore):

// These are OK
[Vue Router warn]: ...
[Vue Devtools] ...

Failure Indicators:

// These are BAD
❌ Uncaught TypeError: Cannot read properties of undefined
❌ [Vue warn]: Failed to resolve component
❌ Uncaught ReferenceError: X is not defined
❌ Failed to fetch

If errors found:

• Copy full error stack trace
• Note which action triggered it
• Document browser and version
• Screenshot the console

---

Test 3: All Sections Render ✓

Steps:

1. On /library, scroll through entire page
2. Verify each major section is visible

Essential Documents Section:

• Section title "Essential Documents" visible
• "Pin Document" button visible (top-right)
• 3 document cards present:
  • Insurance Policy 2025 (blue icon)
  • LILIAN I Registration (green icon)
  • Owner's Manual (purple icon)
• Each card has an icon, title, description, badge, and alert banner
• Icons have proper colors and gradients

Browse by Category Section:

• Section title "Browse by Category" visible
• 8 category cards present:
  • Legal & Compliance (green)
  • Financial (yellow)
  • Operations (blue)
  • Manuals (purple)
  • Insurance (indigo)
  • Photos (pink)
  • Service Records (orange)
  • Warranties (teal)
• Each card has icon, title, description, and arrow
• Document counts visible on each card

Recent Activity Section:

• Section title "Recent Activity" visible
• Glass panel container visible
• 3 activity items present:
  • Facture n° F1820008157 (PDF badge)
  • Lilian delivery Olbia Cannes (XLSX badge)
  • Vessel exterior photo (JPG badge)
• Each item has file type badge, title, timestamp, and status badge

Pass Criteria:

• All 3 sections visible without scrolling issues
• No missing images or broken icons
• No layout overflow or cutoff content
• Spacing looks correct between sections

---

Test 4: Role Switcher Functionality ✓

Steps:

1. Locate role switcher in header (top-right)
2. Verify "Owner" is selected by default (has gradient background)
3. Click "Captain" button
4. Click "Manager" button
5. Click "Crew" button
6. Click "Owner" button again

Pass Criteria:

• All 4 role buttons visible: Owner, Captain, Manager, Crew
• Default role "Owner" has gradient background (from-primary-500 to-secondary-500)
• Clicking button immediately updates visual state
• Only one role highlighted at a time
• Previously selected role returns to inactive state (text-white/70)
• Inactive buttons show hover effect (bg-white/10)
• Smooth transition animation (no flashing)
• No console errors when switching roles

Console Verification:

// Open console (F12) and check for:
Navigate to category: captain (if logging enabled)
Navigate to category: manager
Navigate to category: crew
Navigate to category: owner

Failure Indicators:

• ❌ Multiple roles highlighted simultaneously
• ❌ Button doesn't respond to clicks
• ❌ JavaScript error on click
• ❌ Role state doesn't update

---

Test 5: Category Card Clicks ✓

Steps:

1. Open browser console (F12 > Console)
2. Scroll to "Browse by Category" section
3. Click on each category card and verify console output:

Category	Click	Console Output Expected
Legal & Compliance	Click	Navigate to category: legal
Financial	Click	Navigate to category: financial
Operations	Click	Navigate to category: operations
Manuals	Click	Navigate to category: manuals
Insurance	Click	Navigate to category: insurance
Photos	Click	Navigate to category: photos
Service Records	Click	Navigate to category: service
Warranties	Click	Navigate to category: warranties

Pass Criteria:

• Each card is clickable
• Hover effect applies: card translates up, shadow increases
• Icon scales and rotates on hover (group-hover effects)
• Arrow icon transitions to pink-400 and translates right
• Console logs correct category ID
• No JavaScript errors
• No actual page navigation (stays on /library)

Failure Indicators:

• ❌ Cards not clickable
• ❌ Wrong category logged
• ❌ TypeError in console
• ❌ Page navigates away unexpectedly
• ❌ Hover effects don't work

---

Test 6: Header Navigation ✓

Steps:

1. On /library page
2. Locate logo button (wave icon, top-left)
3. Hover over button
4. Click button

Pass Criteria:

• Logo button visible with gradient background (primary to secondary)
• Hover effect: button scales to 105% (hover:scale-105)
• Clicking button navigates to home page (/)
• Navigation completes without errors
• Back button returns to /library

Console Verification:

[Router] Navigating to: { name: 'home' }
[Router] Navigation complete

---

Test 7: Hover Effects & Interactions ✓

Steps: Test hover states on key interactive elements.

Essential Document Cards:

1. Hover over Insurance Policy card

   • Card translates up (-translate-y-1)
   • Shadow increases
   • Border color brightens (border-pink-400/50)
   • Icon scales to 110%

2. Hover over bookmark icon

   • Background changes (hover:bg-white/10)
   • Color changes to pink-300

Category Cards:

1. Hover over "Financial" category
   • Card translates up
   • Shadow increases
   • Icon scales to 110% and rotates 3deg
   • Title color changes to pink-400
   • Arrow changes to pink-400 and translates right

Activity Items:

1. Hover over activity items
   • Item translates up slightly
   • Background lightens (hover:bg-white/15)
   • Title color changes to pink-400

Role Buttons:

1. Hover over inactive role button
   • Text color changes to white
   • Background changes to white/10

Pass Criteria:

• All hover effects smooth (no janky animations)
• Transition duration feels right (~200-300ms)
• Effects revert when mouse leaves
• No layout shifts during hover

---

Test 8: Responsive Behavior ✓

Steps:

1. Open DevTools (F12)
2. Click device toggle (Ctrl+Shift+M or Cmd+Shift+M)
3. Test at different viewport sizes:

Desktop (1920x1080):

• Container max-width: 1280px (max-w-7xl)
• Essential docs: 3 columns
• Categories: 4 columns
• All content centered
• No horizontal scroll

Tablet (768px):

• Essential docs: 3 columns maintained
• Categories: 3 columns
• Role switcher fits in header
• Readable spacing

Mobile (375px):

• Essential docs: 1 column (stacked)
• Categories: 1 column (stacked)
• Role switcher may wrap or scroll
• Header remains sticky
• No horizontal overflow
• Text remains legible

Pass Criteria:

• Layout adapts smoothly at all breakpoints
• No broken layouts
• No overlapping content
• Touch targets at least 44x44px on mobile

---

Test 9: Visual Styling & Polish ✓

Visual Quality Check:

Glass Morphism:

• Header has glass effect (backdrop blur visible)
• Essential doc cards have glass effect
• Role switcher container has glass effect
• Recent activity panel has glass effect
• Blur effect works across all browsers

Gradients:

• Page background: Purple to black gradient
• Role switcher: Pink to purple gradient
• Category icons: Proper color gradients (green, yellow, blue, etc.)
• No gradient banding or color issues

Typography:

• Font: Inter (loaded from Google Fonts)
• Titles: Bold and readable
• Body text: Appropriate size (not too small)
• Proper hierarchy (H1 > H2 > H3)

Colors:

• White text contrasts well with dark background
• Pink accent color (#f472b6) visible and vibrant
• Badge colors match design (green=success, yellow=warning, etc.)
• Transparent elements blend smoothly

Spacing:

• Consistent padding/margins
• No elements touching edges
• Good visual rhythm (not cramped or too spacious)

Animations:

• Cards fade in on initial load
• Staggered animation delays (0.1s, 0.2s, etc.)
• Smooth transitions (no jerky movements)
• No animation flicker

Pass Criteria:

• Looks polished and professional
• Matches design system (Meilisearch-inspired)
• No visual bugs or glitches
• Consistent styling throughout

---

Test 10: Browser Compatibility Quick Check ✓

If Multiple Browsers Available:

Chrome/Edge:

• All features work
• Glass effects render correctly
• Animations smooth
• No console errors

Firefox:

• All features work
• Gradients render correctly
• Hover effects work
• No console errors

Safari (if on macOS):

• All features work
• Backdrop blur supported
• Transitions smooth
• No console errors

Pass Criteria:

• Core functionality works in all tested browsers
• Only minor visual differences acceptable
• No critical errors in any browser

---

Quick Issue Triage

If Tests Fail

Component doesn't load:

1. Check route is registered in /home/setup/navidocs/client/src/router.js
2. Verify component file exists at /home/setup/navidocs/client/src/views/LibraryView.vue
3. Check for import errors in console

Console errors appear:

1. Copy full error message and stack trace
2. Note which action triggered the error
3. Check for typos in component code
4. Verify all imports are correct

Styling looks wrong:

1. Verify Tailwind CSS is loaded (check main.css import)
2. Check for conflicting CSS
3. Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
4. Verify PostCSS and Tailwind configs

Hover effects don't work:

1. Ensure you're testing on desktop (not mobile)
2. Check for JavaScript errors blocking events
3. Verify CSS classes are applied

Router navigation fails:

1. Check Vue Router is initialized
2. Verify route names match
3. Check for navigation guards blocking access

---

Pass/Fail Criteria

Critical (Must Pass)

All of these must pass for the component to be considered functional:

• Test 1: Initial Page Load ✓
• Test 2: Console Error Check ✓
• Test 3: All Sections Render ✓
• Test 4: Role Switcher Functionality ✓
• Test 5: Category Card Clicks ✓

Important (Should Pass)

These should work but can be fixed in follow-up:

• Test 6: Header Navigation ✓
• Test 7: Hover Effects & Interactions ✓
• Test 8: Responsive Behavior ✓

Nice to Have (Can Defer)

These enhance quality but aren't blocking:

• Test 9: Visual Styling & Polish ✓
• Test 10: Browser Compatibility Quick Check ✓

---

Test Results Template

Tester Name: ___________________________ Date: ___________________________ Time Started: ___________________________ Time Completed: ___________________________ Browser: ___________________________ Browser Version: ___________________________ OS: ___________________________ Screen Resolution: ___________________________

Summary

Tests Passed: _____ / 10 Tests Failed: _____ Critical Issues Found: _____ Minor Issues Found: _____

Overall Status: 🟢 PASS / 🟡 PASS WITH ISSUES / 🔴 FAIL

Failed Tests

Test #	Test Name	Failure Reason	Severity
			Critical / Major / Minor
			Critical / Major / Minor

Issues Found

Issue #	Description	Steps to Reproduce	Severity	Screenshot/Log
1
2

Notes

Additional observations, questions, or concerns:

---

Cleanup

After testing:

1. Stop the dev server (Ctrl+C in terminal)
2. Close browser tabs
3. Document any issues in project tracker
4. Update this checklist if new tests are needed

---

Next Steps

If All Tests Pass:

• Mark component as smoke test approved
• Proceed to full regression testing (see /home/setup/navidocs/client/tests/LibraryView.test.md)
• Consider deploying to staging environment

If Tests Fail:

• Document failures in detail
• Create bug tickets for critical issues
• Assign to developer for fixes
• Re-run smoke tests after fixes
• Do not deploy until critical tests pass

For Future Enhancements:

• Add API integration tests
• Create automated Playwright tests
• Set up CI/CD smoke test pipeline
• Add performance benchmarks

---

Automation Notes

This checklist can be partially automated with Playwright:

// /home/setup/navidocs/tests/e2e/library-smoke.spec.js
import { test, expect } from '@playwright/test'

test('LibraryView smoke test', async ({ page }) => {
  // Test 1: Initial load
  await page.goto('http://localhost:5173/library')
  await expect(page.locator('h1')).toContainText('Document Library')

  // Test 2: Console errors
  page.on('console', msg => {
    if (msg.type() === 'error') throw new Error(msg.text())
  })

  // Test 3: Sections render
  await expect(page.locator('text=Essential Documents')).toBeVisible()
  await expect(page.locator('text=Browse by Category')).toBeVisible()
  await expect(page.locator('text=Recent Activity')).toBeVisible()

  // Test 4: Role switcher
  await page.click('text=Captain')
  await expect(page.locator('button:has-text("Captain")')).toHaveClass(/from-primary-500/)

  // Test 5: Category clicks
  await page.click('text=Legal & Compliance')
  // Check console for navigation log

  // ... more tests
})

---

Version History

Version	Date	Changes	Author
1.0	2025-10-23	Initial smoke test checklist created	Claude

---

Contact & Support

Questions about this checklist?

• Review full test documentation: /home/setup/navidocs/client/tests/LibraryView.test.md
• Check component source: /home/setup/navidocs/client/src/views/LibraryView.vue
• Review router config: /home/setup/navidocs/client/src/router.js

Reporting Issues:

• Include browser version and OS
• Attach screenshots or screen recordings
• Copy full console error messages
• Note steps to reproduce

---

END OF SMOKE TEST CHECKLIST