Part 6 pw

[Lukecsharpwalker]

This pull request introduces end-to-end (E2E) testing capabilities using Playwright, along with minor refactoring and dependency updates. The changes include setting up a GitHub Actions workflow for E2E testing, adding Playwright configurations, creating an example test, and updating the Angular project configuration to support Playwright. Additionally, there are minor updates to improve code readability in the AdminApiService.

E2E Testing Setup:

• .github/workflows/e2e-tests.yml: Added a GitHub Actions workflow to run E2E tests with a local Supabase instance and Playwright. This includes setting up dependencies, starting services, running tests, and uploading test results.
• playwright.config.ts: Added Playwright configuration to define test settings, browser projects, and a local web server for testing.
• e2e/example.spec.ts: Added an example Playwright test to verify the page title and handle cookie consent.

Angular Project Configuration:

• angular.json: Added a new e2e target to the Angular project configuration for running Playwright tests in different environments (e.g., local, production).
• package.json: Added Playwright-related scripts (e2e, e2e:local) and dependencies (@playwright/test, playwright-ng-schematics, ts-node). [1] [2] [3]

Code Refactoring:

• src/app/admin/_services/admin-api.service.ts: Improved code readability by formatting long lines, using consistent arrow function syntax, and adding commas for better diffing. [1] [2] [3] [4] [5] [6] [7]

TypeScript Configuration:

• e2e/tsconfig.json: Added a TypeScript configuration file for the e2e directory, extending the base tsconfig.json.

[Lukecsharpwalker]

This pull request introduces end-to-end (E2E) testing capabilities using Playwright, integrates Supabase for local testing, and enhances the Angular application with debugging utilities and test coverage. Key changes include new workflows for E2E testing, updates to the Angular project configuration, and the addition of Playwright tests and helpers.

E2E Testing Integration

• GitHub Actions Workflow: Added .github/workflows/e2e-tests.yml to define a CI workflow for running E2E tests with a local Supabase instance. This includes steps for setting up dependencies, starting Supabase, and running Playwright tests.
• Playwright Configuration: Introduced playwright.config.ts to configure Playwright for testing across multiple browsers and environments, including local development.
• Angular Configuration: Updated angular.json to include an e2e target using playwright-ng-schematics. Added configurations for different environments (e.g., production, local).

Playwright Tests and Helpers

• Example Test: Added e2e/example.spec.ts, which includes a basic test to verify the page title and handle cookie consent using a helper function.
• Tags Test: Added e2e/tags.spec.ts to validate the display of tags and verify API calls to Supabase. This test includes checks for tag visibility and data integrity.
• Helpers: Introduced utilities in e2e/helpers/ for common testing tasks:
  • cookie-consent.helper.ts: Handles cookie consent dialogs.
  • debug.helper.ts: Provides debugging utilities for inspecting page state, network requests, and Angular-specific elements.

Supabase Integration

• Local Supabase Setup: Added commands in package.json to start Supabase locally (start:local:backend) and manage schema updates (schema:pull).
• Environment Variables: Updated workflows and tests to use Supabase environment variables (SUPABASE_URL, SUPABASE_ANON_KEY). [1] [2]

Angular Application Enhancements

• Tag Component Updates: Enhanced posts-list.component.html to include data-testid attributes for tags, improving testability.
• Admin API Service: Refactored AdminApiService for better readability and consistency, including updates to tag handling logic. [1] [2] [3]

Dependency Updates

• Playwright and Schematics: Added @playwright/test and playwright-ng-schematics as dependencies in package.json. [1] [2]
• TypeScript and Node Types: Updated TypeScript and @types/node to newer versions.