[#6] - Add tests

[thatisrich]

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: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