Implement and debug case study list and item view page e2e tests

Author: webstackdev

src/content/articles/getting-started-with-astro/index.md

@@ -0,0 +1,73 @@
+---
+title: "Getting Started with Astro"
+description: "Learn the fundamentals of building fast, content-focused websites with Astro"
+author: kevin-firko
+tags: ["typescript", "cms"]
+image:
+  src: "/assets/images/placeholder-article.jpg"
+  alt: "Getting Started with Astro"
+publishDate: 2024-01-15
+isDraft: false
+featured: true
+---
+
+## Introduction
+
+Astro is a modern static site builder that delivers lightning-fast performance by shipping zero JavaScript by default. This guide will help you get started with Astro and understand its core concepts.
+
+## Why Choose Astro?
+
+Astro offers several advantages for building content-focused websites:
+
+- **Zero JavaScript by Default**: Only ship the JavaScript you need
+- **Framework Agnostic**: Use React, Vue, Svelte, or any framework
+- **Built-in Optimizations**: Automatic image optimization, CSS bundling, and more
+- **Island Architecture**: Interactive components load independently
+
+## Getting Started
+
+To create a new Astro project, run:
+
+```bash
+npm create astro@latest
+```
+
+Follow the prompts to set up your project with your preferred configuration.
+
+## Project Structure
+
+A typical Astro project structure looks like this:
+
+```
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   ├── layouts/
+│   └── pages/
+└── astro.config.mjs
+```
+
+## Creating Your First Page
+
+Pages in Astro are created in the `src/pages` directory. Here's a simple example:
+
+```astro
+---
+const title = "My First Astro Page"
+---
+
+<html>
+  <head>
+    <title>{title}</title>
+  </head>
+  <body>
+    <h1>Welcome to Astro!</h1>
+  </body>
+</html>
+```
+
+## Conclusion
+
+Astro provides a powerful foundation for building fast, modern websites. Its component-based architecture and performance optimizations make it an excellent choice for content-focused sites.

src/content/articles/typescript-best-practices/index.md

@@ -0,0 +1,109 @@
+---
+title: "TypeScript Best Practices for Modern Development"
+description: "Essential TypeScript patterns and practices to write safer, more maintainable code"
+author: kevin-firko
+tags: ["typescript", "code"]
+image:
+  src: "/assets/images/placeholder-article.jpg"
+  alt: "TypeScript Best Practices"
+publishDate: 2024-02-20
+isDraft: false
+featured: false
+---
+
+## Introduction
+
+TypeScript has become the standard for building scalable JavaScript applications. This guide covers essential best practices for writing clean, type-safe TypeScript code.
+
+## Type Safety First
+
+Always leverage TypeScript's type system to catch errors at compile time:
+
+```typescript
+// Good: Explicit types
+interface User {
+  id: string
+  name: string
+  email: string
+}
+
+function getUser(id: string): User {
+  // Implementation
+}
+
+// Avoid: Using 'any'
+function processData(data: any) {
+  // Type safety lost
+}
+```
+
+## Use Strict Mode
+
+Enable strict mode in your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true
+  }
+}
+```
+
+## Utility Types
+
+TypeScript provides powerful utility types:
+
+```typescript
+// Partial - makes all properties optional
+type PartialUser = Partial<User>
+
+// Pick - select specific properties
+type UserPreview = Pick<User, 'name' | 'email'>
+
+// Omit - exclude specific properties
+type UserWithoutId = Omit<User, 'id'>
+```
+
+## Discriminated Unions
+
+Use discriminated unions for type-safe state management:
+
+```typescript
+type LoadingState =
+  | { status: 'idle' }
+  | { status: 'loading' }
+  | { status: 'success'; data: User[] }
+  | { status: 'error'; error: string }
+
+function renderState(state: LoadingState) {
+  switch (state.status) {
+    case 'loading':
+      return 'Loading...'
+    case 'success':
+      return state.data.map(user => user.name)
+    case 'error':
+      return state.error
+    default:
+      return null
+  }
+}
+```
+
+## Generic Constraints
+
+Use generic constraints to create flexible, type-safe functions:
+
+```typescript
+function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
+  return obj[key]
+}
+
+const user: User = { id: '1', name: 'John', email: 'john@example.com' }
+const name = getProperty(user, 'name') // Type: string
+```
+
+## Conclusion
+
+Following these TypeScript best practices will help you write more maintainable, error-free code. Start with strict mode, leverage the type system, and use advanced features like discriminated unions and generics.

src/content/case-studies/ecommerce-modernization/index.mdx

@@ -0,0 +1,56 @@
+---
+title: "E-Commerce Platform Modernization"
+description: "How we helped a retail company modernize their e-commerce platform for better performance and scalability"
+tags: ["cms", "react"]
+publishDate: 2024-03-10
+isDraft: false
+featured: true
+author: "webstack-builders"
+client: "RetailCo"
+industry: "Retail"
+projectType: "Platform Modernization"
+duration: "6 months"
+---
+
+## Challenge
+
+RetailCo was struggling with an outdated e-commerce platform that couldn't handle peak traffic during sales events. The existing system was slow, difficult to maintain, and lacked modern features customers expected.
+
+## Solution
+
+We implemented a comprehensive platform modernization strategy:
+
+### Technical Approach
+
+- Migrated to a headless architecture using modern frameworks
+- Implemented edge caching and CDN optimization
+- Redesigned the checkout flow for better conversion
+- Integrated with modern payment providers
+
+### Key Features
+
+- **Performance**: 70% faster page load times
+- **Scalability**: Handles 10x traffic during peak periods
+- **Mobile**: Responsive design with mobile-first approach
+- **Analytics**: Real-time insights into customer behavior
+
+## Results
+
+The new platform delivered impressive results:
+
+- **40% increase** in conversion rate
+- **70% faster** page load times
+- **99.9% uptime** during peak sales events
+- **25% reduction** in cart abandonment
+
+## Technologies Used
+
+- React for the frontend
+- Node.js for the backend
+- PostgreSQL for data storage
+- Redis for caching
+- AWS for hosting and CDN
+
+## Conclusion
+
+By modernizing their e-commerce platform, RetailCo was able to provide a better customer experience, handle increased traffic, and see significant improvements in key business metrics.

src/content/case-studies/enterprise-api-platform/index.mdx

@@ -0,0 +1,65 @@
+---
+title: "Enterprise API Platform Development"
+description: "Building a scalable API platform to power integrations across multiple business units"
+tags: ["apiDesign", "graphql"]
+publishDate: 2024-04-15
+isDraft: false
+featured: false
+author: "webstack-builders"
+client: "TechCorp"
+industry: "Technology"
+projectType: "API Development"
+duration: "8 months"
+---
+
+## Challenge
+
+TechCorp needed a unified API platform to connect disparate systems across their organization. Multiple business units were building their own integrations, leading to duplication, inconsistency, and security concerns.
+
+## Solution
+
+We designed and built a comprehensive enterprise API platform:
+
+### Architecture
+
+- RESTful API design following best practices
+- OAuth 2.0 for authentication and authorization
+- Rate limiting and quota management
+- Comprehensive API documentation
+
+### Key Components
+
+- **API Gateway**: Centralized entry point for all API traffic
+- **Developer Portal**: Self-service documentation and API keys
+- **Monitoring**: Real-time metrics and alerting
+- **Versioning**: Backward-compatible API evolution
+
+## Implementation
+
+The platform was rolled out in phases:
+
+1. **Phase 1**: Core infrastructure and authentication
+2. **Phase 2**: First set of business APIs
+3. **Phase 3**: Developer portal and documentation
+4. **Phase 4**: Advanced features and monitoring
+
+## Results
+
+The API platform transformed how TechCorp's systems communicate:
+
+- **50+ APIs** launched in the first year
+- **10M+ API calls** per day
+- **99.99% uptime** SLA achieved
+- **30% reduction** in integration costs
+
+## Technologies Used
+
+- Node.js and Express for API services
+- Kong for API gateway
+- PostgreSQL for data persistence
+- Redis for caching and rate limiting
+- Kubernetes for orchestration
+
+## Conclusion
+
+The enterprise API platform provided TechCorp with a scalable, secure foundation for integrations, enabling faster development and better collaboration across business units.

test/e2e/specs/02-pages/case-studies.spec.ts

@@ -4,60 +4,56 @@
  */
 import { test, expect } from '@playwright/test'
 import { TEST_URLS } from '../../fixtures/test-data'
+import { setupConsoleErrorChecker } from '@test/e2e/helpers/console-errors'
 
 test.describe('Case Studies List Page', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(TEST_URLS.caseStudies)
   })
 
-  test.skip('@wip page loads with correct title', async ({ page }) => {
-    // Expected: Case studies page should have descriptive title
-    // Actual: Unknown - needs testing
+  test('@ready page loads with correct title', async ({ page }) => {
     await expect(page).toHaveTitle(/Case Studies/)
   })
 
-  test.skip('@wip hero section displays', async ({ page }) => {
-    // Expected: Should have hero section with heading
-    // Actual: Unknown - needs testing
+  test('@ready hero section displays', async ({ page }) => {
     await expect(page.locator('h1')).toBeVisible()
+    await expect(page.locator('h1')).toContainText(/Case Studies/)
   })
 
-  test.skip('@wip case studies grid displays', async ({ page }) => {
-    // Expected: Should show grid of case study cards
-    // Actual: Unknown - needs testing
-    const caseStudyCards = page.locator('article')
-    await expect(caseStudyCards.first()).toBeVisible()
+  test('@ready case studies list displays', async ({ page }) => {
+    const caseStudyList = page.locator('.case-study-item, article')
+    await expect(caseStudyList.first()).toBeVisible()
+  })
+
+    test('@ready case study cards have required elements', async ({ page }) => {
+    const caseStudyList = page.locator('.case-study-item, article')
+    const firstCard = caseStudyList.first()
+    const heading = firstCard.locator('h2, h3').first()
+    await expect(heading).toBeVisible()
+    await expect(firstCard.locator('a').first()).toBeVisible()
   })
 
-  test.skip('@wip case study cards have required elements', async ({ page }) => {
-    // Expected: Each card should have image, title, description
-    // Actual: Unknown - needs testing
-    const firstCard = page.locator('article').first()
-    await expect(firstCard.locator('img')).toBeVisible()
-    await expect(firstCard.locator('h2, h3')).toBeVisible()
+  test('@ready case study links are functional', async ({ page }) => {
+    const firstLink = page.locator('.case-study-item a, article a').first()
+    await expect(firstLink).toHaveAttribute('href', /\/case-studies\//)
   })
 
-  test.skip('@wip case study links are functional', async ({ page }) => {
-    // Expected: Clicking case study should navigate to detail page
-    // Actual: Unknown - needs testing
-    const firstLink = page.locator('article a').first()
-    await expect(firstLink).toHaveAttribute('href', /.+/)
+  test('@ready clicking case study navigates to detail page', async ({ page }) => {
+    const firstLink = page.locator('.case-study-item a, article a').first()
+    await firstLink.click()
+    await expect(page).toHaveURL(/\/case-studies\/.+/)
   })
 
-  test.skip('@wip industry/tag filtering works', async ({ page }) => {
-    // Expected: If filters exist, they should work
-    // Actual: Unknown - needs testing
-    // Check if filter UI exists
+  test('@ready page is responsive on mobile', async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 667 })
+    await expect(page.locator('h1')).toBeVisible()
+    const caseStudyCards = page.locator('.case-study-item, article')
+    await expect(caseStudyCards.first()).toBeVisible()
   })
 
-  test.skip('@wip page has no console errors', async ({ page }) => {
-    // Expected: No console errors on page load
-    // Actual: Unknown - needs testing
-    const errors: string[] = []
-    page.on('console', (msg) => {
-      if (msg.type() === 'error') errors.push(msg.text())
-    })
+  test('@ready page has no console errors', async ({ page }) => {
+    const errorChecker = setupConsoleErrorChecker(page)
     await page.reload()
-    expect(errors).toHaveLength(0)
+    expect(errorChecker.getFilteredErrors()).toHaveLength(0)
   })
 })