(#8) Implement a Shared Header with Navigation

[GeorgePapalazaridis]

• Linked Issue: Closes #8

[GeorgePapalazaridis]

Test Cases for Shared Header Component

1. Header Component Display

• Test Case: Verify that the header is displayed on all pages.
  • Steps:
    1. Navigate to both /photos and /favorites pages.
  • Expected Result: The header component should be visible at the top of each page.

2. Navigation Buttons

• Test Case 1: Verify the presence of the navigation buttons ("Photo Grid" and "Favorites").

  • Steps:
    1. Open any page (e.g., /photos or /favorites).
    2. Inspect the header for the navigation buttons.
  • Expected Result: The buttons "Photo Grid" and "Favorites" should be displayed in the header.

• Test Case 2: Verify that clicking the "Photo Grid" button navigates to /photos and clicking the "Favorites" button navigates to /favorites.

  • Steps:
    1. Click on the "Photo Grid" button.
    2. Check if the URL in the browser changes to /photos.
    3. Click on the "Favorites" button.
    4. Check if the URL changes to /favorites.
  • Expected Result:
    • The "Photo Grid" button should navigate to /photos.
    • The "Favorites" button should navigate to /favorites.

3. Active Route Highlighting

• Test Case 1: Verify that the active route is highlighted correctly.

  • Steps:
    1. Navigate to /photos page.
    2. Check the "Photo Grid" button in the header.
    3. Navigate to /favorites page.
    4. Check the "Favorites" button in the header.
  • Expected Result:
    • The button corresponding to the active route should have a distinct style (e.g., color change, bold text, or underline).
    • The "Photo Grid" button should be highlighted when on the /photos page.
    • The "Favorites" button should be highlighted when on the /favorites page.

• Test Case 2: Verify that the routerLinkActive directive is working and adds the active class to the active button.

  • Steps:
    1. Navigate to both /photos and /favorites.
    2. Inspect the header buttons in the browser developer tools.
  • Expected Result:
    • The active class should be added to the corresponding button in the header based on the current route.

4. Styling and Responsiveness

• Test Case 1: Verify that the header is styled correctly and is distinguishable from the main content.

  • Steps:
    1. Open the application in a browser.
    2. Inspect the header’s background color, padding, and layout.
  • Expected Result: The header should have a clean, consistent style that separates it from the main content. It should have appropriate padding and should be visually distinct from the body.

• Test Case 2: Verify that the header is fixed at the top of the page and remains visible when scrolling.

  • Steps:
    1. Scroll down on any page.
    2. Check if the header remains fixed at the top of the screen.
  • Expected Result: The header should remain fixed at the top of the page and should not scroll with the page content.

• Test Case 3: Verify mobile responsiveness of the header.

  • Steps:
    1. Resize the browser window or test on a mobile device.
    2. Check the layout and styling of the header.
  • Expected Result: The header should adapt to small screen sizes, maintaining a clean layout and ensuring the navigation buttons are still clickable. The header should have appropriate padding and spacing on mobile devices.