Updating tests and removing test results

Author: BradNut

.github/workflows/svelte_integration.yml

@@ -5,7 +5,7 @@ on:
     branches: [ main, master ]
   pull_request:
     branches: [ main, master ]
-  
+
 
   workflow_dispatch:
 

package.json

@@ -60,7 +60,7 @@
     "bits-ui": "2.9.4",
     "flexsearch": "^0.8.205",
     "ioredis": "^5.7.0",
-    "lucide-svelte": "^0.541.0",
+    "lucide-svelte": "^0.542.0",
     "scrape-it": "^6.1.11",
     "sharp": "^0.34.3",
     "svelte-local-storage-store": "^0.6.4"

pnpm-lock.yaml

@@ -31,12 +31,12 @@ test.describe('Home page', () => {
       await expect(link).toBeVisible();
 
       const before = await link.evaluate((el) => {
-        const cs = getComputedStyle(el as Element) as CSSStyleDeclaration;
+        const cs = getComputedStyle(el);
         return { color: cs.color };
       });
       await link.hover();
       const after = await link.evaluate((el) => {
-        const cs = getComputedStyle(el as Element) as CSSStyleDeclaration;
+        const cs = getComputedStyle(el);
         return { color: cs.color };
       });
 
@@ -55,7 +55,7 @@ test.describe('Home page', () => {
       const nav = page.locator(area);
       const link = nav.getByRole('link', { name: 'Home', exact: true });
       await expect(link).toBeVisible();
-      const isActive = await link.evaluate((el) => (el as Element).classList.contains('active'));
+      const isActive = await link.evaluate((el) => el.classList.contains('active'));
       expect(isActive).toBeTruthy();
     }
   });
@@ -193,9 +193,9 @@ test.describe('Home page', () => {
 
     // Layout: single column and scrollable vertically
     const scrollInfo = await albumsGrid.evaluate((el) => ({
-      overflowY: getComputedStyle(el as HTMLElement).overflowY,
-      scrollHeight: (el as HTMLElement).scrollHeight,
-      clientHeight: (el as HTMLElement).clientHeight,
+      overflowY: getComputedStyle(el).overflowY,
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
     }));
     expect(scrollInfo.clientHeight).toBeLessThan(scrollInfo.scrollHeight);
     expect(['auto', 'scroll']).toContain(scrollInfo.overflowY);
@@ -216,7 +216,7 @@ test.describe('Home page', () => {
 
     // Articles are a vertical list (same x, increasing y)
     const boxes = await page.locator('section.articles article.card').evaluateAll((els) =>
-      (els as HTMLElement[]).slice(0, Math.min(4, els.length)).map((el) => el.getBoundingClientRect())
+      els.slice(0, Math.min(4, els.length)).map((el) => el.getBoundingClientRect())
     );
     expect(boxes.length).toBeGreaterThan(0);
     const x0 = boxes[0].left;

test-results/.last-run.json

@@ -0,0 +1,188 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Portfolio page', () => {
+  test('has expected main heading', async ({ page }) => {
+    await page.goto('/portfolio');
+    await expect(page.getByRole('heading', { level: 1, name: 'Portfolio!' })).toBeVisible();
+  });
+
+  test('header/footer links hover: color becomes shellYellow', async ({ page }) => {
+    await page.goto('/portfolio');
+
+    const shellYellow = await page.evaluate(() => {
+      const probe = document.createElement('div');
+      probe.style.color = 'var(--shellYellow)';
+      document.body.appendChild(probe);
+      const color = getComputedStyle(probe).color;
+      probe.remove();
+      return color;
+    });
+
+    const areas = [
+      'header[aria-label="header navigation"]',
+      'footer nav[aria-label="footer navigation"]',
+    ];
+
+    for (const area of areas) {
+      const nav = page.locator(area);
+      await expect(nav).toBeVisible();
+
+      const link = nav.getByRole('link', { name: 'Portfolio', exact: true });
+      await expect(link).toBeVisible();
+
+      const before = await link.evaluate((el) => getComputedStyle(el as Element).color);
+      await link.hover();
+      const after = await link.evaluate((el) => getComputedStyle(el as Element).color);
+
+      expect(after).toBe(shellYellow);
+      expect(after).not.toBe(before);
+    }
+  });
+
+  test('current page (Portfolio) link is active in header and footer', async ({ page }) => {
+    await page.goto('/portfolio');
+    const areas = [
+      'header[aria-label="header navigation"]',
+      'footer nav[aria-label="footer navigation"]',
+    ];
+    for (const area of areas) {
+      const nav = page.locator(area);
+      const portfolioLink = nav.getByRole('link', { name: 'Portfolio', exact: true });
+      await expect(portfolioLink).toBeVisible();
+      const isActive = await portfolioLink.evaluate((el) => (el as Element).classList.contains('active'));
+      expect(isActive).toBeTruthy();
+    }
+  });
+
+  test('tabs render and can switch between Personal and Professional', async ({ page }) => {
+    await page.goto('/portfolio');
+
+    // Prefer role-based tab selection; fall back to data attribute if role is not present
+    const personalTab = page.getByRole('tab', { name: 'Personal' }).or(page.locator('[data-tabs-trigger]', { hasText: 'Personal' }));
+    const professionalTab = page.getByRole('tab', { name: 'Professional' }).or(page.locator('[data-tabs-trigger]', { hasText: 'Professional' }));
+
+    await expect(personalTab).toBeVisible();
+    await expect(professionalTab).toBeVisible();
+
+    // Personal content visible by default (card heading exists)
+    const personalCardHeading = page.locator('.portfolio-picture h2', { hasText: 'Personal Website' }).first();
+    await expect(personalCardHeading).toBeVisible();
+
+    // Switch to Professional
+    await professionalTab.click();
+
+    // Professional content appears, personal may hide
+    const professionalCardHeading = page.locator('.portfolio-picture h2', { hasText: 'Mark Shellnut Architect' }).first();
+    await expect(professionalCardHeading).toBeVisible();
+  });
+
+  test('personal tab: key cards, images, and external links are accessible', async ({ page }) => {
+    await page.goto('/portfolio');
+
+    // Ensure on Personal tab
+    const personalTab = page.getByRole('tab', { name: 'Personal' }).or(page.locator('[data-tabs-trigger]', { hasText: 'Personal' }));
+    await personalTab.click();
+
+    // Headings (scoped to portfolio cards to avoid strict-mode conflicts)
+    await expect(page.locator('.portfolio-picture h2', { hasText: 'Personal Website' }).first()).toBeVisible();
+    await expect(page.locator('.portfolio-picture h2', { hasText: 'Wedding Website' }).first()).toBeVisible();
+    await expect(page.locator('.portfolio-picture h2', { hasText: 'Old Personal Website' }).first()).toBeVisible();
+
+    // Images by alt text
+    await expect(page.getByAltText("Picture of Bradley Shellnut's Personal Website")).toBeVisible();
+    await expect(page.getByAltText('Picture of NextJS Wedding Website')).toBeVisible();
+    await expect(page.getByAltText('Home Page of the old bradleyshellnut.com website')).toBeVisible();
+
+    // External links (use visible link names)
+    await expect(page.getByRole('link', { name: /GitHub repository/i }).first()).toBeVisible();
+  });
+
+  test('professional tab: card renders with external link', async ({ page }) => {
+    await page.goto('/portfolio');
+
+    const professionalTab = page.getByRole('tab', { name: 'Professional' }).or(page.locator('[data-tabs-trigger]', { hasText: 'Professional' }));
+    await professionalTab.click();
+
+    const professionalCard = page
+      .locator('.portfolio')
+      .filter({ has: page.locator('.portfolio-picture h2', { hasText: 'Mark Shellnut Architect' }) })
+      .first();
+
+    await expect(professionalCard).toBeVisible();
+    // Accessible name derived from aria-label in ExternalLink.svelte
+    await expect(
+      professionalCard.getByRole('link', { name: /Open\s+View Mark Shellnut Architect\s+externally/i })
+    ).toBeVisible();
+  });
+
+  // Mirror header link presence from other pages
+  test('header navigation shows expected links', async ({ page }) => {
+    await page.goto('/portfolio');
+    const headerNav = page.locator('header[aria-label="header navigation"]');
+    await expect(headerNav).toBeVisible();
+    await expect(headerNav.getByRole('link', { name: 'Home', exact: true })).toBeVisible();
+    await expect(headerNav.getByRole('link', { name: 'About', exact: true })).toBeVisible();
+    await expect(headerNav.getByRole('link', { name: 'Portfolio', exact: true })).toBeVisible();
+    await expect(headerNav.getByRole('link', { name: 'Uses', exact: true })).toBeVisible();
+  });
+
+  // Mirror navigation flow via header (starting on /portfolio)
+  test('header navigation links go to correct routes (from /portfolio)', async ({ page }) => {
+    await page.goto('/portfolio');
+    const headerNav = page.locator('header[aria-label="header navigation"]');
+
+    await headerNav.getByRole('link', { name: 'About', exact: true }).click();
+    await expect(page).toHaveURL(/\/about\/?$/);
+
+    await headerNav.getByRole('link', { name: 'Uses', exact: true }).click();
+    await expect(page).toHaveURL(/\/uses\/?$/);
+
+    await headerNav.getByRole('link', { name: 'Home', exact: true }).click();
+    await expect(page).toHaveURL(/\/?$/);
+
+    await headerNav.getByRole('link', { name: 'Portfolio', exact: true }).click();
+    await expect(page).toHaveURL(/\/portfolio\/?$/);
+  });
+
+  // Mirror footer link presence from other pages
+  test('footer shows expected links', async ({ page }) => {
+    await page.goto('/portfolio');
+    const footerNav = page.getByRole('navigation', { name: 'footer navigation' });
+    await expect(footerNav).toBeVisible();
+    await expect(footerNav.getByRole('link', { name: 'Home', exact: true })).toBeVisible();
+    await expect(footerNav.getByRole('link', { name: 'About', exact: true })).toBeVisible();
+    await expect(footerNav.getByRole('link', { name: 'Portfolio', exact: true })).toBeVisible();
+    await expect(footerNav.getByRole('link', { name: 'Uses', exact: true })).toBeVisible();
+    await expect(footerNav.getByRole('link', { name: 'Privacy', exact: true })).toBeVisible();
+    await expect(footerNav.getByRole('link', { name: 'Favorite Articles', exact: true })).toBeVisible();
+  });
+
+  // Mirror navigation via footer (starting on /portfolio)
+  test('footer navigation links go to correct routes (from /portfolio)', async ({ page }) => {
+    await page.goto('/portfolio');
+    const footerNav = page.getByRole('navigation', { name: 'footer navigation' });
+
+    await footerNav.getByRole('link', { name: 'Privacy', exact: true }).scrollIntoViewIfNeeded();
+    await footerNav.getByRole('link', { name: 'Privacy', exact: true }).click();
+    await expect(page).toHaveURL(/\/privacy\/?$/);
+
+    // Favorite Articles may route to /articles or /articles/1
+    const fav = footerNav.getByRole('link', { name: 'Favorite Articles', exact: true });
+    await fav.scrollIntoViewIfNeeded();
+    const href = await fav.getAttribute('href');
+    expect(href).toBeTruthy();
+    if (href) {
+      expect(href).toMatch(/\/articles(\/\d+)?\/?$/);
+      await page.goto(href);
+      await expect(page).toHaveURL(/\/articles(\/\d+)?\/?$/, { timeout: 15000 });
+    }
+
+    await footerNav.getByRole('link', { name: 'About', exact: true }).scrollIntoViewIfNeeded();
+    await footerNav.getByRole('link', { name: 'About', exact: true }).click();
+    await expect(page).toHaveURL(/\/about\/?$/);
+
+    await footerNav.getByRole('link', { name: 'Home', exact: true }).scrollIntoViewIfNeeded();
+    await footerNav.getByRole('link', { name: 'Home', exact: true }).click();
+    await expect(page).toHaveURL(/\/?$/);
+  });
+});