US156331 - Add ability to indicate the actual element to use for size calculations for the screenshot #146
Conversation
…ze to be used for the screenshot
test/browser/element.vdiff.js
Outdated
| } | ||
| render() { | ||
| return html` | ||
| <div class="vdiff-size"> |
There was a problem hiding this comment.
This represents typical core usage. We'll add the appropriate class to dialog, dropdown`, etc.
test/browser/element.vdiff.js
Outdated
| class extends LitElement { | ||
| render() { | ||
| return html`${unsafeHTML(` | ||
| <${fixedElementTag} class="vdiff-size"><${elementTag} text="Visual Difference"></${elementTag}></${fixedElementTag}> |
There was a problem hiding this comment.
This represents what is likely to happen for consumers of core. If they have a component that wraps d2l-dialog for example, they'll add the class to d2l-dialog. vdiff will look for this class, then follow it into d2l-dialog to use the element we've added the class to.
| @@ -196,6 +196,7 @@ export class WTRConfig { | |||
| config.groups.forEach(g => g.browsers = this.getBrowsers(g.browsers)); | |||
|
|
|||
| if (open || watch) { | |||
| config.testsFinishTimeout = 15 * 60 * 1000; | |||
There was a problem hiding this comment.
This is a bit unrelated, but when I was trying to debug my new tests with --open, I only had two minutes before the whole thing force-closed. This ups that timeout to 15 minutes in open or watch mode.
Co-authored-by: github-actions <[email protected]>
src/browser/vdiff.js
Outdated
| if (!elem.shadowRoot) return elem; | ||
| const nestedSizedElem = elem.shadowRoot.querySelector('.vdiff-size'); | ||
| if (!nestedSizedElem) return elem; | ||
| return findRealSize(nestedSizedElem); |
There was a problem hiding this comment.
Cool. So if an element doesn't define its size at all but instead that falls to something in its shadow root, it can just put the class on that element and it'll recurse -- nice!
There was a problem hiding this comment.
Yeah exactly! And in theory, this should "just work" for consumers wrapping a core component in that situation, because we would've had to already add it for everything that needs it for our own tests.
src/browser/vdiff.js
Outdated
| @@ -19,6 +19,13 @@ mocha.setup({ | |||
| }); | |||
| /* eslint-enable */ | |||
|
|
|||
| function findRealSize(elem) { | |||
| if (!elem.shadowRoot) return elem; | |||
| const nestedSizedElem = elem.shadowRoot.querySelector('.vdiff-size'); | |||
There was a problem hiding this comment.
Alternate options for the CSS class: vdiff-rect-elem, vdiff-rect, vdiff-container
There was a problem hiding this comment.
Yeah I had vdiff-rect and then I didn't love it, but I don't love vdiff-size either so switched back to that!
There was a problem hiding this comment.
Throwing another option out there: vdiff-boundary
There was a problem hiding this comment.
vdiff-area? vdiff-box? vdiff-frame? vdiff-actual?
|
🎉 This PR is included in version 0.30.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
ghost
added
the
Some root custom elements that consumers pass to vdiff won't be the one that defines its true size. For example, the
<d2l-dialog>element has no height or width -- instead, the size is defined by an element in its shadow root. As a result, snapshotting a dialog fails.This PR adds functionality to look for the "real" size. If your custom element is one of these, you can add the
vdiff-sizevdiff-targetclass to the element in itsshadowRootthat does have the proper size. This will search recursively, until there's no element in theshadowRootwithvdiff-sizevdiff-targetor we reach a native HTML element. I've added a couple tests to demonstrate this.Not tied to any of the naming, so suggest away!
Without the changes to check for
vdiff-sizevdiff-target, the new goldens here would look like this: