Skip to content

Commit f49bb0d

Browse files
vursenclaude
vursen
and
claude
authored
test: restructure master-detail-layout DOM snapshot tests (#11426)
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 7df59b5 commit f49bb0d

File tree

3 files changed

+133
-117
lines changed

3 files changed

+133
-117
lines changed

‎packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js‎

Lines changed: 88 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@ snapshots["vaadin-master-detail-layout host default"] =
1010
<div>
1111
Master content
1212
</div>
13-
<div slot="detail">
14-
Detail content
15-
</div>
16-
<div slot="detail-placeholder">
17-
Detail placeholder
18-
</div>
1913
</vaadin-master-detail-layout>
2014
`;
2115
/* end snapshot vaadin-master-detail-layout host default */
@@ -30,12 +24,6 @@ snapshots["vaadin-master-detail-layout host masterSize"] =
3024
<div>
3125
Master content
3226
</div>
33-
<div slot="detail">
34-
Detail content
35-
</div>
36-
<div slot="detail-placeholder">
37-
Detail placeholder
38-
</div>
3927
</vaadin-master-detail-layout>
4028
`;
4129
/* end snapshot vaadin-master-detail-layout host masterSize */
@@ -50,12 +38,6 @@ snapshots["vaadin-master-detail-layout host detailSize"] =
5038
<div>
5139
Master content
5240
</div>
53-
<div slot="detail">
54-
Detail content
55-
</div>
56-
<div slot="detail-placeholder">
57-
Detail placeholder
58-
</div>
5941
</vaadin-master-detail-layout>
6042
`;
6143
/* end snapshot vaadin-master-detail-layout host detailSize */
@@ -70,50 +52,10 @@ snapshots["vaadin-master-detail-layout host masterSize and detailSize"] =
7052
<div>
7153
Master content
7254
</div>
73-
<div slot="detail">
74-
Detail content
75-
</div>
76-
<div slot="detail-placeholder">
77-
Detail placeholder
78-
</div>
7955
</vaadin-master-detail-layout>
8056
`;
8157
/* end snapshot vaadin-master-detail-layout host masterSize and detailSize */
8258

83-
snapshots["vaadin-master-detail-layout host no detail"] =
84-
`<vaadin-master-detail-layout
85-
expand="master"
86-
has-detail-placeholder=""
87-
orientation="horizontal"
88-
overlay-containment="layout"
89-
>
90-
<div>
91-
Master content
92-
</div>
93-
<div slot="detail-placeholder">
94-
Detail placeholder
95-
</div>
96-
</vaadin-master-detail-layout>
97-
`;
98-
/* end snapshot vaadin-master-detail-layout host no detail */
99-
100-
snapshots["vaadin-master-detail-layout host no detail placeholder"] =
101-
`<vaadin-master-detail-layout
102-
expand="master"
103-
has-detail=""
104-
orientation="horizontal"
105-
overlay-containment="layout"
106-
>
107-
<div>
108-
Master content
109-
</div>
110-
<div slot="detail">
111-
Detail content
112-
</div>
113-
</vaadin-master-detail-layout>
114-
`;
115-
/* end snapshot vaadin-master-detail-layout host no detail placeholder */
116-
11759
snapshots["vaadin-master-detail-layout shadow default"] =
11860
`<div
11961
id="backdrop"
@@ -152,33 +94,36 @@ snapshots["vaadin-master-detail-layout shadow default"] =
15294
`;
15395
/* end snapshot vaadin-master-detail-layout shadow default */
15496

155-
snapshots["vaadin-master-detail-layout overlay mode default"] =
97+
snapshots["vaadin-master-detail-layout detail default"] =
15698
`<vaadin-master-detail-layout
15799
detail-size="300px"
158100
expand="master"
101+
has-detail=""
159102
master-size="300px"
160103
orientation="horizontal"
161104
overlay-containment="layout"
162-
style="width: 400px; --_master-size: 300px; --_detail-size: 300px;"
105+
style="--_master-size: 300px; --_detail-size: 300px;"
163106
>
164107
<div>
165108
Master content
166109
</div>
110+
<div slot="detail">
111+
Detail content
112+
</div>
167113
</vaadin-master-detail-layout>
168114
`;
169-
/* end snapshot vaadin-master-detail-layout overlay mode default */
115+
/* end snapshot vaadin-master-detail-layout detail default */
170116

171-
snapshots["vaadin-master-detail-layout overlay mode with detail"] =
117+
snapshots["vaadin-master-detail-layout detail overflow"] =
172118
`<vaadin-master-detail-layout
173119
detail-size="300px"
174120
expand="master"
175121
has-detail=""
176-
keep-detail-column-offscreen=""
177122
master-size="300px"
178123
orientation="horizontal"
179124
overlay=""
180125
overlay-containment="layout"
181-
style="width: 400px; --_master-size: 300px; --_detail-size: 300px;"
126+
style="--_master-size: 300px; --_detail-size: 300px; width: 400px;"
182127
>
183128
<div>
184129
Master content
@@ -188,9 +133,67 @@ snapshots["vaadin-master-detail-layout overlay mode with detail"] =
188133
</div>
189134
</vaadin-master-detail-layout>
190135
`;
191-
/* end snapshot vaadin-master-detail-layout overlay mode with detail */
136+
/* end snapshot vaadin-master-detail-layout detail overflow */
137+
138+
snapshots["vaadin-master-detail-layout detail hidden"] =
139+
`<vaadin-master-detail-layout
140+
detail-size="300px"
141+
expand="master"
142+
master-size="300px"
143+
orientation="horizontal"
144+
overlay-containment="layout"
145+
style="--_master-size: 300px; --_detail-size: 300px;"
146+
>
147+
<div>
148+
Master content
149+
</div>
150+
<div
151+
hidden=""
152+
slot="detail"
153+
>
154+
Detail content
155+
</div>
156+
</vaadin-master-detail-layout>
157+
`;
158+
/* end snapshot vaadin-master-detail-layout detail hidden */
159+
160+
snapshots["vaadin-master-detail-layout detail removed"] =
161+
`<vaadin-master-detail-layout
162+
detail-size="300px"
163+
expand="master"
164+
master-size="300px"
165+
orientation="horizontal"
166+
overlay-containment="layout"
167+
style="--_master-size: 300px; --_detail-size: 300px;"
168+
>
169+
<div>
170+
Master content
171+
</div>
172+
</vaadin-master-detail-layout>
173+
`;
174+
/* end snapshot vaadin-master-detail-layout detail removed */
192175

193-
snapshots["vaadin-master-detail-layout overlay mode with detail placeholder"] =
176+
snapshots["vaadin-master-detail-layout detail placeholder default"] =
177+
`<vaadin-master-detail-layout
178+
detail-size="300px"
179+
expand="master"
180+
has-detail-placeholder=""
181+
master-size="300px"
182+
orientation="horizontal"
183+
overlay-containment="layout"
184+
style="--_master-size: 300px; --_detail-size: 300px;"
185+
>
186+
<div>
187+
Master content
188+
</div>
189+
<div slot="detail-placeholder">
190+
Detail placeholder content
191+
</div>
192+
</vaadin-master-detail-layout>
193+
`;
194+
/* end snapshot vaadin-master-detail-layout detail placeholder default */
195+
196+
snapshots["vaadin-master-detail-layout detail placeholder overflow"] =
194197
`<vaadin-master-detail-layout
195198
detail-size="300px"
196199
expand="master"
@@ -199,15 +202,31 @@ snapshots["vaadin-master-detail-layout overlay mode with detail placeholder"] =
199202
orientation="horizontal"
200203
overlay=""
201204
overlay-containment="layout"
202-
style="width: 400px; --_master-size: 300px; --_detail-size: 300px;"
205+
style="--_master-size: 300px; --_detail-size: 300px; width: 400px;"
203206
>
204207
<div>
205208
Master content
206209
</div>
207210
<div slot="detail-placeholder">
208-
Detail placeholder
211+
Detail placeholder content
212+
</div>
213+
</vaadin-master-detail-layout>
214+
`;
215+
/* end snapshot vaadin-master-detail-layout detail placeholder overflow */
216+
217+
snapshots["vaadin-master-detail-layout detail placeholder removed"] =
218+
`<vaadin-master-detail-layout
219+
detail-size="300px"
220+
expand="master"
221+
master-size="300px"
222+
orientation="horizontal"
223+
overlay-containment="layout"
224+
style="--_master-size: 300px; --_detail-size: 300px;"
225+
>
226+
<div>
227+
Master content
209228
</div>
210229
</vaadin-master-detail-layout>
211230
`;
212-
/* end snapshot vaadin-master-detail-layout overlay mode with detail placeholder */
231+
/* end snapshot vaadin-master-detail-layout detail placeholder removed */
213232

‎packages/master-detail-layout/test/dom/master-detail-layout.test.js‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { expect } from '@vaadin/chai-plugins';
2-
import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
2+
import { fixtureSync } from '@vaadin/testing-helpers';
33
import '../../src/vaadin-master-detail-layout.js';
44
import { onceResized } from '../helpers.js';
55

@@ -15,11 +15,9 @@ describe('vaadin-master-detail-layout', () => {
1515
layout = fixtureSync(`
1616
<vaadin-master-detail-layout>
1717
<div>Master content</div>
18-
<div slot="detail">Detail content</div>
19-
<div slot="detail-placeholder">Detail placeholder</div>
2018
</vaadin-master-detail-layout>
2119
`);
22-
await nextFrame();
20+
await onceResized(layout);
2321
});
2422

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

2927
it('masterSize', async () => {
3028
layout.masterSize = '300px';
29+
await onceResized(layout);
3130
await expect(layout).dom.to.equalSnapshot();
3231
});
3332

3433
it('detailSize', async () => {
3534
layout.detailSize = '400px';
35+
await onceResized(layout);
3636
await expect(layout).dom.to.equalSnapshot();
3737
});
3838

3939
it('masterSize and detailSize', async () => {
4040
layout.masterSize = '300px';
4141
layout.detailSize = '400px';
42+
await onceResized(layout);
4243
await expect(layout).dom.to.equalSnapshot();
4344
});
45+
});
4446

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

51-
it('no detail placeholder', async () => {
52-
layout.querySelector('[slot="detail-placeholder"]').remove();
53-
await onceResized(layout);
54-
await expect(layout).dom.to.equalSnapshot();
53+
it('default', async () => {
54+
await expect(layout).shadowDom.to.equalSnapshot();
5555
});
5656
});
5757

58-
describe('shadow', () => {
58+
describe('detail', () => {
5959
beforeEach(async () => {
60-
layout = fixtureSync(`<vaadin-master-detail-layout></vaadin-master-detail-layout>`);
61-
await nextFrame();
60+
layout = fixtureSync(`
61+
<vaadin-master-detail-layout master-size="300px" detail-size="300px">
62+
<div>Master content</div>
63+
<div slot="detail">Detail content</div>
64+
</vaadin-master-detail-layout>
65+
`);
66+
await onceResized(layout);
6267
});
6368

6469
it('default', async () => {
65-
await expect(layout).shadowDom.to.equalSnapshot();
70+
await expect(layout).dom.to.equalSnapshot();
71+
});
72+
73+
it('overflow', async () => {
74+
layout.style.width = '400px';
75+
await onceResized(layout);
76+
await expect(layout).dom.to.equalSnapshot();
77+
});
78+
79+
it('hidden', async () => {
80+
layout.querySelector('[slot="detail"]').hidden = true;
81+
await onceResized(layout);
82+
await expect(layout).dom.to.equalSnapshot();
83+
});
84+
85+
it('removed', async () => {
86+
layout.querySelector('[slot="detail"]').remove();
87+
await onceResized(layout);
88+
await expect(layout).dom.to.equalSnapshot();
6689
});
6790
});
6891

69-
describe('overlay mode', () => {
92+
describe('detail placeholder', () => {
7093
beforeEach(async () => {
7194
layout = fixtureSync(`
72-
<vaadin-master-detail-layout master-size="300px" detail-size="300px" style="width: 400px;">
95+
<vaadin-master-detail-layout master-size="300px" detail-size="300px">
7396
<div>Master content</div>
97+
<div slot="detail-placeholder">Detail placeholder content</div>
7498
</vaadin-master-detail-layout>
7599
`);
76100
await onceResized(layout);
@@ -80,20 +104,14 @@ describe('vaadin-master-detail-layout', () => {
80104
await expect(layout).dom.to.equalSnapshot();
81105
});
82106

83-
it('with detail', async () => {
84-
const detail = document.createElement('div');
85-
detail.setAttribute('slot', 'detail');
86-
detail.textContent = 'Detail content';
87-
layout.appendChild(detail);
107+
it('overflow', async () => {
108+
layout.style.width = '400px';
88109
await onceResized(layout);
89110
await expect(layout).dom.to.equalSnapshot();
90111
});
91112

92-
it('with detail placeholder', async () => {
93-
const detailPlaceholder = document.createElement('div');
94-
detailPlaceholder.setAttribute('slot', 'detail-placeholder');
95-
detailPlaceholder.textContent = 'Detail placeholder';
96-
layout.appendChild(detailPlaceholder);
113+
it('removed', async () => {
114+
layout.querySelector('[slot="detail-placeholder"]').remove();
97115
await onceResized(layout);
98116
await expect(layout).dom.to.equalSnapshot();
99117
});

‎packages/master-detail-layout/test/master-detail-layout.test.js‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -38,27 +38,6 @@ describe('vaadin-master-detail-layout', () => {
3838
});
3939

4040
describe('detail', () => {
41-
it('should set has-detail when detail content is provided', () => {
42-
expect(layout.hasAttribute('has-detail')).to.be.true;
43-
});
44-
45-
it('should remove has-detail when detail is removed', async () => {
46-
layout.querySelector('[slot="detail"]').remove();
47-
await onceResized(layout);
48-
expect(layout.hasAttribute('has-detail')).to.be.false;
49-
});
50-
51-
it('should set has-detail when detail becomes visible', async () => {
52-
const detailContent = layout.querySelector('[slot="detail"]');
53-
detailContent.hidden = true;
54-
await onceResized(layout);
55-
expect(layout.hasAttribute('has-detail')).to.be.false;
56-
57-
detailContent.hidden = false;
58-
await onceResized(layout);
59-
expect(layout.hasAttribute('has-detail')).to.be.true;
60-
});
61-
6241
it('should expand master to fill the layout when detail is removed', async () => {
6342
layout.masterSize = '200px';
6443
layout.detailSize = '200px';

0 commit comments

Comments
 (0)