Skip to content

test(e2e): Add Gallery block front-end delivery spec - #1306

Open
utkarshcloudinary wants to merge 1 commit into
developfrom
test/gallery-frontend-cloudinary-e2e
Open

utkarshcloudinary wants to merge 1 commit into
developfrom
test/gallery-frontend-cloudinary-e2e

Conversation

@utkarshcloudinary

Copy link
Copy Markdown
Collaborator

Adds a Playwright spec that checks the Cloudinary Gallery block on the front end. It covers the image count, Cloudinary delivery URLs, and a layout change made in the editor.

Approach

  • tests/e2e/cloudinary-gallery-delivery.spec.js (@serial, needs CLOUDINARY_E2E_URL):
    • beforeAll uploads 3 images. It syncs them through the plugin's cloudinary/v1/image_data endpoint, which is the same call the block editor makes. Then it publishes a post with a cloudinary/gallery block set to the expanded layout with 3 columns.
    • N images: the widget viewer renders exactly 3 images. Their public IDs match the selected images, and they fit in one row with no carousel or thumbnail strip.
    • Cloudinary URLs: every <img> in the widget, including thumbnails, has a src/srcset on res.cloudinary.com/<cloud_name>/.
    • Layout change: the test opens the post in the block editor and checks that the block is valid. It selects Classic in the Layout panel and saves. On the front end, the markup changes to mode="classic", a carousel viewer, no scroll viewer, and N thumbnails. All URLs are still Cloudinary URLs.
  • The spec waits for the widget's own data-test hooks and data-ready="true". It does not use fixed timeouts. The widget loads from product-gallery.cloudinary.com, so its waits allow 30s.
  • Moved expectCloudinaryUrl() from the image delivery spec to tests/e2e/utils/delivery.js so both specs share it.

QA notes

  • cp .env.example .env and set CLOUDINARY_E2E_URL to a test account.
  • npm run env:start, or npx wp-env start --config .wp-env.ci.json for the plain HTTP setup that CI uses.
  • npm run test:e2e:serial -- cloudinary-gallery-delivery, or with the CI config: WP_BASE_URL=http://localhost:8889 ./.wp-env/scripts/run-e2e.sh cloudinary-gallery-delivery --workers=1.
  • Expect 2 passing tests. cloudinary-image-delivery should still pass.

Publish a post with a Cloudinary Gallery block and assert the front
end renders exactly N images, that every src/srcset is served from
res.cloudinary.com/<cloud_name>/, and that switching the layout from
expanded to classic in the editor and saving changes the rendered
widget markup.

Move expectCloudinaryUrl() to utils/delivery.js so the image and
gallery delivery specs share one assertion.
@utkarshcloudinary
utkarshcloudinary marked this pull request as ready for review October 5, 2026 15:17

This branch has not been deployed

No deployments
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.

2 participants