Skip to content

test: restructure master-detail-layout DOM snapshot tests #11426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
web-padawan merged 4 commits into from
Mar 31, 2026
+133 −117
Merged

test: restructure master-detail-layout DOM snapshot tests #11426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f127ad
test: restructure master-detail-layout DOM snapshot tests
vursen Mar 30, 2026
33f6af0
test: remove unit tests checking has-detail attribute presence
vursen Mar 30, 2026
4a6a8e2
update snapshot tests
vursen Mar 30, 2026
d998b6c
update snapshot tests
vursen Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 88 additions & 69 deletions packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,6 @@ snapshots["vaadin-master-detail-layout host default"] =
<div>
Master content
</div>
<div slot="detail">
Detail content
</div>
<div slot="detail-placeholder">
Detail placeholder
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout host default */
Expand All @@ -30,12 +24,6 @@ snapshots["vaadin-master-detail-layout host masterSize"] =
<div>
Master content
</div>
<div slot="detail">
Detail content
</div>
<div slot="detail-placeholder">
Detail placeholder
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout host masterSize */
Expand All @@ -50,12 +38,6 @@ snapshots["vaadin-master-detail-layout host detailSize"] =
<div>
Master content
</div>
<div slot="detail">
Detail content
</div>
<div slot="detail-placeholder">
Detail placeholder
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout host detailSize */
Expand All @@ -70,50 +52,10 @@ snapshots["vaadin-master-detail-layout host masterSize and detailSize"] =
<div>
Master content
</div>
<div slot="detail">
Detail content
</div>
<div slot="detail-placeholder">
Detail placeholder
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout host masterSize and detailSize */

snapshots["vaadin-master-detail-layout host no detail"] =
`<vaadin-master-detail-layout
expand="master"
has-detail-placeholder=""
orientation="horizontal"
overlay-containment="layout"
>
<div>
Master content
</div>
<div slot="detail-placeholder">
Detail placeholder
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout host no detail */

snapshots["vaadin-master-detail-layout host no detail placeholder"] =
`<vaadin-master-detail-layout
expand="master"
has-detail=""
orientation="horizontal"
overlay-containment="layout"
>
<div>
Master content
</div>
<div slot="detail">
Detail content
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout host no detail placeholder */

snapshots["vaadin-master-detail-layout shadow default"] =
`<div
id="backdrop"
Expand Down Expand Up @@ -152,33 +94,36 @@ snapshots["vaadin-master-detail-layout shadow default"] =
`;
/* end snapshot vaadin-master-detail-layout shadow default */

snapshots["vaadin-master-detail-layout overlay mode default"] =
snapshots["vaadin-master-detail-layout detail default"] =
`<vaadin-master-detail-layout
detail-size="300px"
expand="master"
has-detail=""
master-size="300px"
orientation="horizontal"
overlay-containment="layout"
style="width: 400px; --_master-size: 300px; --_detail-size: 300px;"
style="--_master-size: 300px; --_detail-size: 300px;"
>
<div>
Master content
</div>
<div slot="detail">
Detail content
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout overlay mode default */
/* end snapshot vaadin-master-detail-layout detail default */

snapshots["vaadin-master-detail-layout overlay mode with detail"] =
snapshots["vaadin-master-detail-layout detail overflow"] =
`<vaadin-master-detail-layout
detail-size="300px"
expand="master"
has-detail=""
keep-detail-column-offscreen=""
master-size="300px"
orientation="horizontal"
overlay=""
overlay-containment="layout"
style="width: 400px; --_master-size: 300px; --_detail-size: 300px;"
style="--_master-size: 300px; --_detail-size: 300px; width: 400px;"
>
<div>
Master content
Expand All @@ -188,9 +133,67 @@ snapshots["vaadin-master-detail-layout overlay mode with detail"] =
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout overlay mode with detail */
/* end snapshot vaadin-master-detail-layout detail overflow */

snapshots["vaadin-master-detail-layout detail hidden"] =
`<vaadin-master-detail-layout
detail-size="300px"
expand="master"
master-size="300px"
orientation="horizontal"
overlay-containment="layout"
style="--_master-size: 300px; --_detail-size: 300px;"
>
<div>
Master content
</div>
<div
hidden=""
slot="detail"
>
Detail content
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout detail hidden */

snapshots["vaadin-master-detail-layout detail removed"] =
`<vaadin-master-detail-layout
detail-size="300px"
expand="master"
master-size="300px"
orientation="horizontal"
overlay-containment="layout"
style="--_master-size: 300px; --_detail-size: 300px;"
>
<div>
Master content
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout detail removed */

snapshots["vaadin-master-detail-layout overlay mode with detail placeholder"] =
snapshots["vaadin-master-detail-layout detail placeholder default"] =
`<vaadin-master-detail-layout
detail-size="300px"
expand="master"
has-detail-placeholder=""
master-size="300px"
orientation="horizontal"
overlay-containment="layout"
style="--_master-size: 300px; --_detail-size: 300px;"
>
<div>
Master content
</div>
<div slot="detail-placeholder">
Detail placeholder content
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout detail placeholder default */

snapshots["vaadin-master-detail-layout detail placeholder overflow"] =
`<vaadin-master-detail-layout
detail-size="300px"
expand="master"
Expand All @@ -199,15 +202,31 @@ snapshots["vaadin-master-detail-layout overlay mode with detail placeholder"] =
orientation="horizontal"
overlay=""
overlay-containment="layout"
style="width: 400px; --_master-size: 300px; --_detail-size: 300px;"
style="--_master-size: 300px; --_detail-size: 300px; width: 400px;"
>
<div>
Master content
</div>
<div slot="detail-placeholder">
Detail placeholder
Detail placeholder content
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout detail placeholder overflow */

snapshots["vaadin-master-detail-layout detail placeholder removed"] =
`<vaadin-master-detail-layout
detail-size="300px"
expand="master"
master-size="300px"
orientation="horizontal"
overlay-containment="layout"
style="--_master-size: 300px; --_detail-size: 300px;"
>
<div>
Master content
</div>
</vaadin-master-detail-layout>
`;
/* end snapshot vaadin-master-detail-layout overlay mode with detail placeholder */
/* end snapshot vaadin-master-detail-layout detail placeholder removed */

72 changes: 45 additions & 27 deletions packages/master-detail-layout/test/dom/master-detail-layout.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { expect } from '@vaadin/chai-plugins';
import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
import { fixtureSync } from '@vaadin/testing-helpers';
import '../../src/vaadin-master-detail-layout.js';
import { onceResized } from '../helpers.js';

Expand All @@ -15,11 +15,9 @@ describe('vaadin-master-detail-layout', () => {
layout = fixtureSync(`
<vaadin-master-detail-layout>
<div>Master content</div>
<div slot="detail">Detail content</div>
<div slot="detail-placeholder">Detail placeholder</div>
</vaadin-master-detail-layout>
`);
await nextFrame();
await onceResized(layout);
});

it('default', async () => {
Expand All @@ -28,49 +26,75 @@ describe('vaadin-master-detail-layout', () => {

it('masterSize', async () => {
layout.masterSize = '300px';
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});

it('detailSize', async () => {
layout.detailSize = '400px';
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});

it('masterSize and detailSize', async () => {
layout.masterSize = '300px';
layout.detailSize = '400px';
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});
});

it('no detail', async () => {
layout.querySelector('[slot="detail"]').remove();
describe('shadow', () => {
beforeEach(async () => {
layout = fixtureSync(`<vaadin-master-detail-layout></vaadin-master-detail-layout>`);
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});

it('no detail placeholder', async () => {
layout.querySelector('[slot="detail-placeholder"]').remove();
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
it('default', async () => {
await expect(layout).shadowDom.to.equalSnapshot();
});
});

describe('shadow', () => {
describe('detail', () => {
beforeEach(async () => {
layout = fixtureSync(`<vaadin-master-detail-layout></vaadin-master-detail-layout>`);
await nextFrame();
layout = fixtureSync(`
<vaadin-master-detail-layout master-size="300px" detail-size="300px">
<div>Master content</div>
<div slot="detail">Detail content</div>
</vaadin-master-detail-layout>
`);
await onceResized(layout);
});

it('default', async () => {
await expect(layout).shadowDom.to.equalSnapshot();
await expect(layout).dom.to.equalSnapshot();
});

it('overflow', async () => {
layout.style.width = '400px';
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});

it('hidden', async () => {
layout.querySelector('[slot="detail"]').hidden = true;
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});

it('removed', async () => {
layout.querySelector('[slot="detail"]').remove();
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});
});

describe('overlay mode', () => {
describe('detail placeholder', () => {
beforeEach(async () => {
layout = fixtureSync(`
<vaadin-master-detail-layout master-size="300px" detail-size="300px" style="width: 400px;">
<vaadin-master-detail-layout master-size="300px" detail-size="300px">
<div>Master content</div>
<div slot="detail-placeholder">Detail placeholder content</div>
</vaadin-master-detail-layout>
`);
await onceResized(layout);
Expand All @@ -80,20 +104,14 @@ describe('vaadin-master-detail-layout', () => {
await expect(layout).dom.to.equalSnapshot();
});

it('with detail', async () => {
const detail = document.createElement('div');
detail.setAttribute('slot', 'detail');
detail.textContent = 'Detail content';
layout.appendChild(detail);
it('overflow', async () => {
layout.style.width = '400px';
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});

it('with detail placeholder', async () => {
const detailPlaceholder = document.createElement('div');
detailPlaceholder.setAttribute('slot', 'detail-placeholder');
detailPlaceholder.textContent = 'Detail placeholder';
layout.appendChild(detailPlaceholder);
it('removed', async () => {
layout.querySelector('[slot="detail-placeholder"]').remove();
await onceResized(layout);
await expect(layout).dom.to.equalSnapshot();
});
Expand Down
21 changes: 0 additions & 21 deletions packages/master-detail-layout/test/master-detail-layout.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,27 +38,6 @@ describe('vaadin-master-detail-layout', () => {
});

describe('detail', () => {
it('should set has-detail when detail content is provided', () => {
expect(layout.hasAttribute('has-detail')).to.be.true;
});

it('should remove has-detail when detail is removed', async () => {
layout.querySelector('[slot="detail"]').remove();
await onceResized(layout);
expect(layout.hasAttribute('has-detail')).to.be.false;
});

it('should set has-detail when detail becomes visible', async () => {
const detailContent = layout.querySelector('[slot="detail"]');
detailContent.hidden = true;
await onceResized(layout);
expect(layout.hasAttribute('has-detail')).to.be.false;

detailContent.hidden = false;
await onceResized(layout);
expect(layout.hasAttribute('has-detail')).to.be.true;
});

it('should expand master to fill the layout when detail is removed', async () => {
layout.masterSize = '200px';
layout.detailSize = '200px';
Expand Down
Loading