Skip to content

Conversation

thatisrich
Copy link
Contributor

@thatisrich thatisrich commented Nov 27, 2024

Description

#6 - This PR adds some initial Playwright integration and e2e tests.

The initial tests are designed to ensure the Image Comparison block can be added to a page with various settings and be rendered (or not, as the case may be) and interacted with correctly.

The 001-insert-block.spec.ts test adds the block with a series of image variations (both images, no images, and a single image populated), and container size variations, then asserts if the block is rendered correctly on the front end. The test also runs axe to check for some basic accessibility violations.

The 002-fe-interactions.spec.ts test sets the starting divider position and then ensures the divider can be changed without error on the front end, in both horizontal and vertical directions.

Change Log

  • .gitignore - Adds Playwright files / folders to be ignored
  • .wp-env.json - Ensures the plugin is activated by default in wp-env
  • package.json - Includes the Playwright and env dependencies and test commands
  • playwright.config.ts - The Playwright config setting the folder structure and setup
  • tests/config/global-setup.ts - Base environment setup to ensure images are included in the media library
  • tests/assets/before.png + tests/assets/after.png - Images used in the test
  • tests/e2e/001-insert-block.spec.ts - Initial e2e test following the detail outlined above
  • tests/e2e/002-fe-interactions.spec.ts - e2e test for front end interactions
  • README.md - Adds brief testing commands to the documentation

Steps to test

The Playwright tests use wp-env, so a fresh docker WP instance will be created and ran in silo from any existing local environments. Please ensure docker is running prior to running the tests.

  • Run npm install to get the latest packages
  • Run npm run test:e2e for headless testing (wp-env will be started on first run so may take a bit longer while setting up)
  • Run npm run test:e2e:ui to run multiple / individual tests in a Chromium window
  • Run npm run test:e2e:debug for step-by-step navigation of the tests (each test will open, then close, a new Chromium window)
  • While running debug mode, notice the current test.step is shown on the command line as the test proceeds

Screenshots/Videos

Screenshot - Playwright test results
Video - Playwright tests running in debug mode

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • Any dependent changes have been merged and published in downstream modules

@thatisrich thatisrich linked an issue Nov 28, 2024 that may be closed by this pull request
@thatisrich thatisrich marked this pull request as ready for review November 28, 2024 11:28
@thatisrich thatisrich requested review from a team, chrishbite and jaymcp as code owners November 28, 2024 11:28
Copy link
Member

@jaymcp jaymcp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is great, thanks! 😊
just a couple of little suggestions. 🙏

@thatisrich thatisrich requested a review from jaymcp February 3, 2025 17:25
@jaymcp jaymcp merged commit 4569b96 into main Mar 14, 2025
1 check passed
@jaymcp jaymcp deleted the feature/initial-automated-tests branch March 14, 2025 16:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add tests

2 participants