test(css-isolation): expand playwright host coverage

Author: ScriptedAlchemy

css-isolation/e2e/checkApplications.spec.ts

@@ -1,50 +1,74 @@
 import { test, expect } from '@playwright/test';
 
-const apps = [
-  {
-    name: 'App 1',
-    header: 'Host Application - React Version',
-    url: 'http://localhost:3001',
-  },
-  {
-    name: 'App 2',
-    header: 'Remote Application - React Version',
-    url: 'http://localhost:3002',
-  },
-];
+const hostUrl = 'http://localhost:3001';
+const remoteUrl = 'http://localhost:3002';
 
 test.describe('CSS isolation example', () => {
-  for (const { name, header, url } of apps) {
-    test(`${name} renders expected headings`, async ({ page }) => {
-      await page.goto(url);
+  test.describe('host application', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(hostUrl);
+    });
 
-      const heading = page.getByRole('heading', { level: 1, name: new RegExp(header) });
-      await expect(heading).toBeVisible();
-      await expect(page.getByRole('heading', { level: 2, name })).toHaveText(name);
+    test('renders host headings', async ({ page }) => {
+      await expect(
+        page.getByRole('heading', { level: 1, name: /Host Application - React Version/ }),
+      ).toBeVisible();
+      await expect(page.getByRole('heading', { level: 2, name: 'App 1' })).toBeVisible();
     });
-  }
 
-  test('host renders remote button inside shadow DOM', async ({ page }) => {
-    await page.goto('http://localhost:3001');
+    test('mounts the remote inside a shadow DOM', async ({ page }) => {
+      const remoteMount = page.locator('#parent');
+      await expect(remoteMount).toBeVisible();
+
+      const hasShadowRoot = await remoteMount.evaluate(element => Boolean(element.shadowRoot));
+      expect(hasShadowRoot).toBe(true);
+
+      const remoteHeading = remoteMount.getByRole('heading', {
+        level: 1,
+        name: /Remote Application - React Version/,
+      });
+      const remoteButton = remoteMount.getByRole('button', { name: 'Make Everything Yellow' });
 
-    const buttonTextHandle = await page.waitForFunction(() => {
-      const host = document.querySelector('#parent');
+      await expect(remoteHeading).toBeVisible();
+      await expect(remoteButton).toBeVisible();
 
-      return host?.shadowRoot?.querySelector('button')?.textContent?.trim() ?? null;
+      await expect(
+        page.getByRole('heading', { level: 1, name: /Host Application - React Version/ }),
+      ).toHaveCSS('font-style', 'italic');
     });
 
-    expect(await buttonTextHandle.jsonValue()).toBe('Make Everything Yellow');
+    test('retains host styles after interacting with the remote', async ({ page }) => {
+      const remoteMount = page.locator('#parent');
+      const remoteButton = remoteMount.getByRole('button', { name: 'Make Everything Yellow' });
+
+      await remoteButton.click();
+
+      await expect(remoteButton).toBeVisible();
+      await expect(remoteMount.getByRole('heading', { level: 2, name: 'App 2' })).toBeVisible();
+      await expect(
+        page.getByRole('heading', { level: 1, name: /Host Application - React Version/ }),
+      ).toHaveCSS('font-style', 'italic');
+    });
   });
 
-  test.describe('standalone remote', () => {
-    test('button applies yellow styles after click', async ({ page }) => {
-      await page.goto('http://localhost:3002');
+  test.describe('standalone remote application', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(remoteUrl);
+    });
 
-      const button = page.getByRole('button', { name: 'Make Everything Yellow' });
-      await expect(button).toBeVisible();
+    test('renders remote headings and button', async ({ page }) => {
+      await expect(
+        page.getByRole('heading', { level: 1, name: /Remote Application - React Version/ }),
+      ).toBeVisible();
+      await expect(page.getByRole('heading', { level: 2, name: 'App 2' })).toBeVisible();
+      await expect(page.getByRole('button', { name: 'Make Everything Yellow' })).toBeVisible();
+    });
 
+    test('applies yellow styles after clicking the button', async ({ page }) => {
+      const button = page.getByRole('button', { name: 'Make Everything Yellow' });
       await button.click();
 
+      await expect(page.locator('#root')).toHaveCSS('background-color', 'rgb(255, 255, 0)');
       await expect(button).toHaveCSS('background-color', 'rgb(255, 255, 0)');
     });
   });