Skip to content

Commit cb8b629

Browse files
mtsvyatkovamtsvyatkova
committed
test(tile): add tests for the slotted items in the header
1 parent 8c15847 commit cb8b629

File tree

1 file changed

+132
-87
lines changed

1 file changed

+132
-87
lines changed

‎src/components/tile-manager/tile-manager.spec.ts‎

Lines changed: 132 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,25 @@ describe('Tile Manager component', () => {
5656
<p>Content 1</p>
5757
</igc-tile>
5858
<igc-tile tile-id="customId-2">
59-
<span slot="title">Tile Header 2</span>
59+
<h1 slot="title">Tile Header 2</h1>
6060
<p>Content 2</p>
6161
</igc-tile>
62+
<igc-tile tile-id="customId-3">
63+
<span slot="title">Customize default actions</span>
64+
<button slot="default-actions">Action</button>
65+
</igc-tile>
66+
<igc-tile tile-id="customId-4">
67+
<span slot="title">Customize maximize and fullscreen</span>
68+
<button slot="maximize-action">Maximize</button>
69+
<button slot="fullscreen-action">Fullscreen</button>
70+
</igc-tile>
71+
<igc-tile tile-id="customId-5">
72+
<span slot="title">Customize maximize and fullscreen</span>
73+
<div slot="actions">
74+
<igc-icon-button>A</igc-icon-button>
75+
<igc-icon-button>B</igc-icon-button>
76+
</div>
77+
</igc-tile>
6278
</igc-tile-manager>
6379
`);
6480
});
@@ -68,15 +84,15 @@ describe('Tile Manager component', () => {
6884
await expect(tileManager).shadowDom.to.be.accessible();
6985
});
7086

71-
// TODO: Add an initialization test with non-defined column count and minimum dimension constraints
7287
it('is correctly initialized with its default component state', () => {
73-
// TODO: Add checks for other settings when implemented
7488
expect(tileManager.columnCount).to.equal(0);
75-
expect(tileManager.dragMode).to.equal('none');
7689
expect(tileManager.dragAction).to.equal('slide');
90+
expect(tileManager.dragMode).to.equal('none');
91+
expect(tileManager.gap).to.equal(undefined);
7792
expect(tileManager.minColumnWidth).to.equal(undefined);
7893
expect(tileManager.minRowHeight).to.equal(undefined);
79-
expect(tileManager.tiles).lengthOf(2);
94+
expect(tileManager.resizeMode).to.equal('none');
95+
expect(tileManager.tiles).lengthOf(5);
8096
});
8197

8298
it('should render properly', () => {
@@ -93,9 +109,56 @@ describe('Tile Manager component', () => {
93109
style="view-transition-name: tile-transition-customId-2; order: 1;"
94110
tile-id="customId-2"
95111
>
96-
<span slot="title">Tile Header 2</span>
112+
<h1 slot="title">Tile Header 2</h1>
97113
<p>Content 2</p>
98114
</igc-tile>
115+
<igc-tile
116+
style="view-transition-name: tile-transition-customId-3; order: 2;"
117+
tile-id="customId-3"
118+
>
119+
<span slot="title">
120+
Customize default actions
121+
</span>
122+
<button slot="default-actions">
123+
Action
124+
</button>
125+
</igc-tile>
126+
<igc-tile
127+
style="view-transition-name: tile-transition-customId-4; order: 3;"
128+
tile-id="customId-4"
129+
>
130+
<span slot="title">
131+
Customize maximize and fullscreen
132+
</span>
133+
<button slot="maximize-action">
134+
Maximize
135+
</button>
136+
<button slot="fullscreen-action">
137+
Fullscreen
138+
</button>
139+
</igc-tile>
140+
<igc-tile
141+
style="view-transition-name: tile-transition-customId-5; order: 4;"
142+
tile-id="customId-5"
143+
>
144+
<span slot="title">
145+
Customize maximize and fullscreen
146+
</span>
147+
<div slot="actions">
148+
<igc-icon-button
149+
type="button"
150+
variant="contained"
151+
>
152+
A
153+
</igc-icon-button>
154+
<igc-icon-button
155+
type="button"
156+
variant="contained"
157+
>
158+
B
159+
</igc-icon-button>
160+
</div>
161+
</igc-tile>
99162
</igc-tile-manager>`
100163
);
101164

@@ -166,80 +229,65 @@ describe('Tile Manager component', () => {
166229
);
167230
});
168231

169-
it.skip('should slot user provided content for tile header', () => {
170-
// TODO: Add test for the actions slot and modify the current checks
171-
// const tileHeaders = Array.from(
172-
// tileManager.querySelectorAll(IgcTileHeaderComponent.tagName)
173-
// );
174-
175-
const header =
176-
tileManager.tiles[0].shadowRoot?.querySelector('div[part="header"]');
177-
178-
expect(header).dom.to.equal(
179-
`<div part="header">
180-
<slot part="title" name="title"></slot>
181-
<section part="actions">
182-
<slot name="default-actions">
183-
<slot name="maximize-action">
184-
<igc-icon-button
185-
aria-label="expand_content"
186-
collection="default"
187-
exportparts="icon"
188-
name="expand_content"
189-
type="button"
190-
variant="flat"
191-
>
192-
</slot>
193-
<slot name="fullscreen-action">
194-
<igc-icon-button
195-
aria-label="fullscreen"
196-
collection="default"
197-
exportparts="icon"
198-
name="fullscreen"
199-
type="button"
200-
variant="flat"
201-
>
202-
</slot>
203-
</slot>
204-
<slot name="actions"></slot>
205-
</section>
206-
</div>`
232+
it('should slot user provided content in the title', () => {
233+
const tiles = tileManager.tiles;
234+
const titleSlot1 = tiles[0].shadowRoot?.querySelector(
235+
'slot[name="title"]'
236+
) as HTMLSlotElement;
237+
const titleSlot2 = tiles[1].shadowRoot?.querySelector(
238+
'slot[name="title"]'
239+
) as HTMLSlotElement;
240+
241+
expect(titleSlot1.assignedNodes()?.[0]?.textContent?.trim()).to.equal(
242+
'Tile Header 1'
243+
);
244+
expect(titleSlot2.assignedNodes()?.[0]?.textContent?.trim()).to.equal(
245+
'Tile Header 2'
207246
);
247+
});
248+
249+
it('should slot custom default actions', () => {
250+
const tile = tileManager.tiles[2];
251+
const defaultActionsSLot = tile?.shadowRoot?.querySelector(
252+
'slot[name="default-actions"]'
253+
) as HTMLSlotElement;
254+
const defaultActions = defaultActionsSLot.assignedNodes();
208255

209-
// expect(header).shadowDom.to.equal(
210-
// `<div part="header">
211-
// <slot part="title" name="title"></slot>
212-
// <section part="actions">
213-
// <slot name="default-actions">
214-
// <slot name="maximize-action">
215-
// <igc-icon-button
216-
// aria-label="expand_content"
217-
// collection="default"
218-
// exportparts="icon"
219-
// name="expand_content"
220-
// type="button"
221-
// variant="flat"
222-
// >
223-
// </igc-icon-button>
224-
// </slot>
225-
// <slot name="fullscreen-action">
226-
// <igc-icon-button
227-
// aria-label="fullscreen"
228-
// collection="default"
229-
// exportparts="icon"
230-
// name="fullscreen"
231-
// type="button"
232-
// variant="flat"
233-
// >
234-
// </igc-icon-button>
235-
// </slot>
236-
// </slot>
237-
// <slot name="actions"></slot>
238-
// </section>
239-
// </div>
240-
// <igc-divider type="solid">
241-
// </igc-divider>`
242-
// );
256+
expect(defaultActions?.[0]?.textContent?.trim()).to.equal('Action');
257+
});
258+
259+
it('should override maximize and fullscreen actions when provided', async () => {
260+
const tile = tileManager.tiles[3];
261+
262+
const maximizeActionSlot = tile?.shadowRoot?.querySelector(
263+
'slot[name="maximize-action"]'
264+
) as HTMLSlotElement;
265+
const maximizeAction = maximizeActionSlot.assignedNodes();
266+
expect(maximizeAction?.[0]?.textContent?.trim()).to.equal('Maximize');
267+
268+
const fullscreenActionSlot = tile?.shadowRoot?.querySelector(
269+
'slot[name="fullscreen-action"]'
270+
) as HTMLSlotElement;
271+
const fullscreenAction = fullscreenActionSlot.assignedNodes();
272+
expect(fullscreenAction?.[0]?.textContent?.trim()).to.equal('Fullscreen');
273+
});
274+
275+
it('should slot custom actions after the default ones', () => {
276+
const tile = tileManager.tiles[4];
277+
const actionsSlot = (
278+
tile?.shadowRoot?.querySelector(
279+
'slot[name="actions"]'
280+
) as HTMLSlotElement
281+
).assignedNodes();
282+
283+
expect(actionsSlot).to.have.length(1);
284+
285+
const actionButtons = (actionsSlot?.[0] as HTMLElement).querySelectorAll(
286+
'igc-icon-button'
287+
);
288+
expect(actionButtons).to.have.length(2);
289+
expect(actionButtons?.[0].textContent?.trim()).to.equal('A');
290+
expect(actionButtons?.[1].textContent?.trim()).to.equal('B');
243291
});
244292
});
245293

@@ -384,7 +432,6 @@ describe('Tile Manager component', () => {
384432
});
385433

386434
it('should correctly fire `igcTileFullscreen` event', async () => {
387-
const tile = first(tileManager.tiles);
388435
const eventSpy = spy(tile, 'emitEvent');
389436
const fullscreenButton = getActionButtons(tile)[1];
390437

@@ -408,7 +455,6 @@ describe('Tile Manager component', () => {
408455
});
409456

410457
it('can cancel `igcTileFullscreen` event', async () => {
411-
const tile = first(tileManager.tiles);
412458
const eventSpy = spy(tile, 'emitEvent');
413459
const fullscreenButton = getActionButtons(tile)[1];
414460

@@ -430,9 +476,12 @@ describe('Tile Manager component', () => {
430476
expect(tile.requestFullscreen).not.to.have.been.called;
431477
});
432478

433-
// FIXME: Review this test scenario and adjust it based on the new fullscreen API
434-
it.skip('should update fullscreen property on fullscreenchange (e.g. Esc key is pressed)', async () => {
435-
tile.fullscreen = true;
479+
it('should update fullscreen property on fullscreenchange (e.g. Esc key is pressed)', async () => {
480+
const btnFullscreen = getActionButtons(tile)[1];
481+
simulateClick(btnFullscreen);
482+
await elementUpdated(tileManager);
483+
484+
expect(tile.fullscreen).to.be.true;
436485

437486
// Mock the browser removing fullscreen element and firing a fullscreenchange event
438487
Object.defineProperty(document, 'fullscreenElement', {
@@ -446,7 +495,6 @@ describe('Tile Manager component', () => {
446495
});
447496

448497
it('should properly switch the icons on fullscreen state change.', async () => {
449-
const tile = first(tileManager.tiles);
450498
const btnFullscreen = getActionButtons(tile)[1];
451499

452500
expect(btnFullscreen.name).equals('fullscreen');
@@ -461,7 +509,6 @@ describe('Tile Manager component', () => {
461509
});
462510

463511
it('should correctly fire `igcTileMaximize` event on clicking Maximize button', async () => {
464-
const tile = first(tileManager.tiles);
465512
const eventSpy = spy(tile, 'emitEvent');
466513
const btnMaximize = getActionButtons(tile)[0];
467514

@@ -487,7 +534,6 @@ describe('Tile Manager component', () => {
487534
});
488535

489536
it('can cancel `igcTileMaximize` event', async () => {
490-
const tile = first(tileManager.tiles);
491537
const eventSpy = spy(tile, 'emitEvent');
492538

493539
tile.addEventListener('igcTileMaximize', (ev) => {
@@ -506,7 +552,6 @@ describe('Tile Manager component', () => {
506552
});
507553

508554
it('should properly switch the icons on maximized state change.', async () => {
509-
const tile = first(tileManager.tiles);
510555
const btnMaximize = getActionButtons(tile)[0];
511556

512557
expect(btnMaximize.name).equals('expand_content');

0 commit comments

Comments
 (0)