GAUD-10486: add tests for dropdown scroll shadows - #7319
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
| { name: 'wide-opener', dropdownStyles: { left: '30px', right: '30px', top: '75px' }, openerStyles: { borderRadius: '5px', width: '100%' }, content: html`<d2l-dropdown-content opened>${basicText}</d2l-dropdown-content>` }, | ||
| { name: 'with-header-footer', allColorModes: true, content: html`<d2l-dropdown-content opened>${withHeaderFooter}</d2l-dropdown-content>` }, | ||
| { name: 'no-padding-no-pointer', content: html`<d2l-dropdown-content no-padding no-pointer opened>${basicText}</d2l-dropdown-content>` }, | ||
| { name: 'scroll-bottom-shadow', allColorModes: true, content: html`<d2l-dropdown-content opened>${scroll}</d2l-dropdown-content>` }, |
There was a problem hiding this comment.
Moved down below to group all the "shadow" vdiffs together. The test didn't change, it was just renamed to shadows-bottom.
| await expect(document).to.be.golden({ allColorModes: true }); | ||
| describe('shadows', () => { | ||
| [ | ||
| { name: 'both', allColorModes: true, initialContent: scroll, scrollTo: 75 }, |
There was a problem hiding this comment.
New test showing shadows at the top and bottom.
| { name: 'bottom', allColorModes: true, initialContent: scroll }, | ||
| { name: 'top', allColorModes: true, initialContent: scroll, scrollTo: 1000 }, | ||
| { name: 'async-content-added', initialContent: 'Initial Content', asyncContent: scrollContent }, | ||
| { name: 'async-content-removed', initialContent: scroll, asyncContent: 'Updated' } |
There was a problem hiding this comment.
These two async tests demonstrate the defect.
content-added is the case where initially scrolling isn't required but is later added. A shadow at the bottom should be present but isn't.
content-removed is the case where initially scrolling is required but content is removed such that it's no longer required. A shadow is shown at the bottom when it shouldn't be.
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
🎉 This PR is included in version 3.286.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
2 participants
When the content inside a dropdown overflows, shadows are displayed at the top and/or bottom to hint to the user that they can scroll.
However, if that content then changes after the fact to either cause scrolling when it wasn't there before or remove scrolling when it was, the shadows are not updated.
This PR simply adds vdiff tests to demonstrate the defect. I'll be doing a follow-up to fix it afterwards.
Vdiff Report