test(e2e/test): add and pass

Author: refirst11

e2e/test/class-conflict.test.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('Class conflict resolution works correctly', async ({ page }) => {
+  await page.goto('http://localhost:4000');
+  await page.waitForSelector('[data-testid="e2e-test-span"]');
+  const div = page.locator('[data-testid="e2e-test-span"]');
+  await div.evaluate((node) => node.classList.add('test_conflict'));
+  await expect(div).toHaveCSS('font-size', '14px');
+});

e2e/test/component-attach-class.test.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('Components have correct classes applied', async ({ page }) => {
+  await page.goto('http://localhost:4000');
+  await page.waitForSelector('[data-testid="e2e-test-div"]');
+  const div = page.locator('[data-testid="e2e-test-div"]');
+  await expect(div).toHaveClass(/e2e_/);
+});

e2e/test/media-query-position.test.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test('Media queries are placed after regular selectors', async ({ page }) => {
+  await page.goto('http://localhost:4000');
+  await page.waitForSelector('head > style', { state: 'attached' });
+  const styleContent = await page.evaluate(() => {
+    return Array.from(document.styleSheets)
+      .filter((sheet) => sheet.href === null || sheet.href.startsWith(window.location.origin))
+      .map((sheet) =>
+        Array.from(sheet.cssRules)
+          .map((rule) => rule.cssText)
+          .join('\n')
+      )
+      .join('\n');
+  });
+  expect(styleContent).toMatch(/^[^@]+@media/);
+});

e2e/test/responsive-deisgne.test.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('Responsive design applies correct styles based on viewport size', async ({ page }) => {
+  await page.goto('http://localhost:4000');
+  await page.waitForSelector('[data-testid="e2e-test-div"]');
+  const div = page.locator('[data-testid="e2e-test-div"]');
+
+  await page.setViewportSize({ width: 1200, height: 800 });
+  await expect(div).toHaveCSS('color', 'rgb(255, 192, 203)');
+
+  await page.setViewportSize({ width: 800, height: 600 });
+  await expect(div).toHaveCSS('color', 'rgb(0, 255, 255)');
+});

e2e/test/style-inject-head.test.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('Stylesheet is correctly inserted in the head', async ({ page }) => {
+  await page.goto('http://localhost:4000');
+  await page.waitForSelector('head > style', { state: 'attached' });
+  const styleElements = await page.locator('head > style').count();
+  expect(styleElements).toBeGreaterThan(0);
+});