Repository navigation
test(e2e): Add breakpoints and lazy load spec - #1342
Open
utkarshcloudinary wants to merge 2 commits into
Open
utkarshcloudinary wants to merge 2 commits into
utkarshcloudinary wants to merge 2 commits into
Conversation
Cloudinary transformation segments such as w_800,h_600 contain commas, so splitting srcset on every comma broke each candidate into pieces. Parse candidates by their trailing descriptor instead and expose the descriptor through parseSrcset().
Cover the responsive breakpoints and lazy load delivery settings on a synced image: - min/max/step produce the matching srcset width entries - lazy load renders the SVG placeholder, data attributes and the CLDLB loader config with the blur placeholder - turning either setting off removes its markup
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds an e2e spec for the responsive breakpoints and lazy load delivery settings on a synced image. It also fixes the shared
srcsetUrls()helper, which split Cloudinary URLs apart at the commas inside their transformation segment (w_800,h_600,c_scale).Approach
tests/e2e/cloudinary-breakpoints-lazy-load.spec.js(@serial, real credentials needed forwp cloudinary sync). It uploads the 1200x900 fixture, embeds it in a post, and syncs once inbeforeAll.afterAll.src/srcsetafter load.max_width=1100,min_width=500,pixel_step=300must givesrcsetwidths1200w, 1100w, 800w, 500w. Each breakpoint URL is on Cloudinary and has the matchingw_transformation. Core never makes these widths for this image, so they can only come from the plugin.srcseton the server when lazy load is off (Responsive_Breakpoints::add_features()), so the srcset test turns lazy load off.src,data-cloudinary="lazy",data-size, theCLDBindonload,data-public-id,data-delivery, and theCLDLBconfig with the blur placeholder (e_blur:2000). With JS on,srcchanges to a Cloudinary URL.data-responsiveand the breakpoint widths are gone. With lazy load off, the placeholder attributes andCLDLBare gone andsrcis the Cloudinary URL from the server.utils/delivery.js: newparseSrcset()returns{ url, descriptor }pairs.srcsetUrls()now uses it.QA notes
npm run test:e2e:serial -- cloudinary-breakpoints-lazy-loadnpm run test:e2e:serial -- cloudinary-gallery-delivery(uses the changed helper)