test(shadow-dom): adds shadow dom tests

Adds e2e and unit tests for shadow dom components.
The e2e tests check for shadow DOM rendering and shared styles.
The unit tests verify shadow DOM elements and style application.
Removes old shadow DOM template tests.

Author: Vheissu

__test__/shadow-dom.spec.js

@@ -7,8 +7,29 @@ test.beforeEach(async ({ page }) => {
 test.describe('MyApp', () => {
   test('shows message', async ({ page }) => {
     await page.waitForSelector('my-app', { timeout: 10000 });
+    
+    // @if shadow-dom
+    // Check if shadow DOM is rendered
+    const hasShadowRoot = await page.locator('my-app').evaluate(el => !!el.shadowRoot);
+    await expect(hasShadowRoot).toBe(true);
+    
+    // Use Playwright's piercing selector syntax to access shadow DOM content
+    const shadowText = page.locator('my-app').locator(':scope .shared-shadow-text');
+    await expect(shadowText).toBeVisible();
+    
+    // Assert visibility of shared-style elements within shadow DOM
     const messageElement = page.locator('my-app').getByText('Hello World!');
     await expect(messageElement).toBeVisible();
+    
+    // Optional: Take a screenshot to guard against visual regressions
+    await page.screenshot({ path: 'shadow-dom-component.png' });
+    // @endif
+    
+    // @if !shadow-dom
+    const messageElement = page.locator('my-app').getByText('Hello World!');
+    await expect(messageElement).toBeVisible();
+    // @endif
+    
     await expect(page.locator('my-app')).toContainText('Hello World!');
     await expect(page).toHaveTitle(/Aurelia/);
   });

app-min/e2e__if_playwright/app.spec.ext__if_not_plugin

@@ -5,6 +5,7 @@ import { MyApp } from '../src/my-app';
 import { createFixture } from '@aurelia/testing';
 
 describe('my-app', () => {
+  // @if !shadow-dom
   it('should render message', async () => {
     const { assertText } = await createFixture(
       '<my-app></my-app>',
@@ -32,4 +33,72 @@ describe('my-app', () => {
     assertText('Hello World!', { compact: true });
     // @endif
   });
+  // @endif
+
+  // @if shadow-dom
+  it('should render with Shadow DOM and shared styles', async () => {
+    const { element } = await createFixture(
+      '<my-app></my-app>',
+      {},
+      [MyApp],
+    ).started;
+
+    // Assert that the host element has a shadow root
+    const shadowRoot = element.shadowRoot;
+    if (shadowRoot === null) {
+      throw new Error('Expected shadowRoot to be present, but it was null');
+    }
+
+    // Query inside the shadow root to verify the message text
+    const messageElement = shadowRoot.querySelector('.message') || 
+                          shadowRoot.querySelector('[class*="text-"]'); // Handle TailwindCSS classes
+    if (messageElement === null) {
+      throw new Error('Expected to find message element in shadow root');
+    }
+
+    // Verify the message contains 'Hello World!'
+    const messageText = messageElement.textContent || '';
+    if (!messageText.includes('Hello World!')) {
+      throw new Error(`Expected message to contain 'Hello World!' but got: ${messageText}`);
+    }
+
+    // Verify presence of shared shadow DOM style elements
+    const sharedStyleElement = shadowRoot.querySelector('.shared-shadow-style');
+    if (sharedStyleElement === null) {
+      throw new Error('Expected to find .shared-shadow-style element in shadow root');
+    }
+
+    const sharedTextElement = shadowRoot.querySelector('.shared-shadow-text');
+    if (sharedTextElement === null) {
+      throw new Error('Expected to find .shared-shadow-text element in shadow root');
+    }
+
+    // Verify the shared text content
+    const sharedTextContent = sharedTextElement.textContent || '';
+    if (!sharedTextContent.includes('This content uses shared Shadow DOM styles!')) {
+      throw new Error(`Expected shared text content but got: ${sharedTextContent}`);
+    }
+
+    // Verify computed styles are applied (proving sharedStyles were injected)
+    const computedStyles = window.getComputedStyle(sharedStyleElement);
+    
+    // Check for background gradient (linear-gradient)
+    const backgroundImage = computedStyles.backgroundImage;
+    if (!backgroundImage.includes('linear-gradient')) {
+      throw new Error(`Expected background gradient to be applied, but got: ${backgroundImage}`);
+    }
+
+    // Check for box-shadow
+    const boxShadow = computedStyles.boxShadow;
+    if (boxShadow === 'none' || boxShadow === '') {
+      throw new Error(`Expected box-shadow to be applied, but got: ${boxShadow}`);
+    }
+
+    // Check for border-radius
+    const borderRadius = computedStyles.borderRadius;
+    if (borderRadius === '0px' || borderRadius === '') {
+      throw new Error(`Expected border-radius to be applied, but got: ${borderRadius}`);
+    }
+  });
+  // @endif
 });