Skip to content

Add automated E2E tests for frontend #125

@davidperezgar

Description

@davidperezgar

Summary

The plugin currently has no frontend or E2E test coverage. This issue tracks the implementation of automated End-to-End tests for the frontend using Playwright, covering the admin settings page and the key frontend JavaScript components.

Motivation

  • 42 JavaScript files across 21 component directories with zero test coverage
  • Interactive admin UI (toggles, settings) has no automated validation
  • Frontend block enhancements (carousel, sticky column, animations, counter, etc.) are untested
  • CI/CD pipeline only covers PHP linting/static analysis — no JS quality gates

Scope

Admin Settings Page

  • Settings page renders correctly
  • Feature toggles (Testimonials, Reading Progress, Back Button, Events CPT) can be enabled/disabled
  • Settings are persisted after page reload

Frontend Components

  • Carousel – navigation arrows work, auto-play works, responsive layout
  • Sticky Column – element sticks during scroll, unsticks at correct position
  • Reading Progress Bar – bar advances on scroll, reaches 100% at page bottom
  • Counter – animates from 0 to target value when in viewport
  • Headline Marquee – scrolls continuously, pauses on hover
  • Animations – elements animate in when scrolled into view
  • Back Button – navigates to previous page on click
  • Accordion – opens/closes panels correctly

Implementation Plan

  1. Install Playwright (@playwright/test) as a dev dependency
  2. Add playwright.config.ts targeting a local WordPress test environment
  3. Create test fixtures/helpers for WordPress login and page navigation
  4. Write specs under tests/e2e/
  5. Add test:e2e npm script
  6. Add a GitHub Actions workflow (.github/workflows/e2e.yml) to run tests on PRs

Acceptance Criteria

  • All listed test cases are implemented and passing
  • Tests run in CI on every pull request targeting trunk
  • Test results are available as GitHub Actions artifacts (HTML report)
  • No existing build scripts are broken

Tech Stack

  • Test runner: Playwright (@playwright/test)
  • Language: TypeScript
  • Environment: WordPress (local via wp-env or a Docker-based setup)
  • Browsers: Chromium (primary), Firefox, WebKit (optional)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions