fix: Make the tile header part a section element

Fixed DOM structure unit test

Author: rkaraivanov

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

@@ -28,8 +28,11 @@ describe('Tile Manager component', () => {
   }
 
   function getActionButtons(tile: IgcTileComponent) {
-    const header = tile.shadowRoot?.querySelector('div[part="header"]');
-    return header?.querySelectorAll(IgcIconButtonComponent.tagName) || [];
+    return Array.from(
+      tile.renderRoot
+        .querySelector('[part="header"]')
+        ?.querySelectorAll(IgcIconButtonComponent.tagName) ?? []
+    );
   }
 
   function createTileManager() {
@@ -192,7 +195,7 @@ describe('Tile Manager component', () => {
             part="base draggable resizable"
             style="--ig-col-span:1;--ig-row-span:1;"
           >
-            <div part="header">
+            <section part="header">
               <header part="title">
                 <slot name="title"></slot>
               </header>
@@ -221,7 +224,7 @@ describe('Tile Manager component', () => {
                 </slot>
                 <slot name="actions"></slot>
               </section>
-            </div>
+            </section>
             <igc-divider type="solid"></igc-divider>
             <div part="content-container">
               <slot></slot>
@@ -538,8 +541,8 @@ describe('Tile Manager component', () => {
     it('can cancel `igcTileMaximize` event', async () => {
       const eventSpy = spy(tile, 'emitEvent');
 
-      tile.addEventListener('igcTileMaximize', (ev) => {
-        ev.preventDefault();
+      tile.addEventListener('igcTileMaximize', (event: Event) => {
+        event.preventDefault();
       });
 
       const btnMaximize = getActionButtons(tile)[0];

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

@@ -16,8 +16,6 @@ import {
   simulateKeyboard,
   simulateLostPointerCapture,
   simulatePointerDown,
-  simulatePointerEnter,
-  simulatePointerLeave,
   simulatePointerMove,
 } from '../common/utils.spec.js';
 import IgcResizeContainerComponent, {
@@ -409,12 +407,6 @@ function getResizeContainerDOM(tile: IgcTileComponent) {
   };
 }
 
-async function setResizeActiveState(tile: IgcTileComponent, state = true) {
-  const { container, resizeElement } = getResizeContainerDOM(tile);
-  state ? simulatePointerEnter(container) : simulatePointerLeave(container);
-  await elementUpdated(resizeElement);
-}
-
 function getResizeEventState(
   eventSpy: Sinon.SinonSpy<
     [

src/components/tile-manager/tile.ts

@@ -527,7 +527,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   protected _renderHeader() {
     return html`
-      <div part="header">
+      <section part="header">
         <header part="title" ${ref(this._headerRef)}>
           <slot name="title"></slot>
         </header>
@@ -544,7 +544,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
           </slot>
           <slot name="actions"></slot>
         </section>
-      </div>
+      </section>
       <igc-divider></igc-divider>
     `;
   }