test: add test setup for dev overlay (#8932)

.changeset/new-candles-beam.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixed window component appearing over the dev overlay on small windows. Added a maximum length to sections of the tooltip component

packages/astro/e2e/dev-overlay.test.js

@@ -0,0 +1,90 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory({
+	root: './fixtures/dev-overlay/',
+});
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+	devServer = await astro.startDevServer();
+});
+
+test.afterAll(async () => {
+	await devServer.stop();
+});
+
+test.describe('Dev Overlay zzz', () => {
+	test('dev overlay exists in the page', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const devOVerlay = page.locator('astro-dev-overlay');
+		await expect(devOVerlay).toHaveCount(1);
+	});
+
+	test('can open Astro plugin', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const overlay = page.locator('astro-dev-overlay');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
+		await pluginButton.click();
+
+		const astroPluginCanvas = overlay.locator(
+			'astro-dev-overlay-plugin-canvas[data-plugin-id="astro"]'
+		);
+		const astroWindow = astroPluginCanvas.locator('astro-dev-overlay-window');
+		await expect(astroWindow).toHaveCount(1);
+		await expect(astroWindow).toBeVisible();
+
+		// Toggle plugin off
+		await pluginButton.click();
+		await expect(astroWindow).not.toBeVisible();
+	});
+
+	test('xray shows highlights and tooltips', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const overlay = page.locator('astro-dev-overlay');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]');
+		await pluginButton.click();
+
+		const xrayCanvas = overlay.locator(
+			'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:xray"]'
+		);
+		const xrayHighlight = xrayCanvas.locator('astro-dev-overlay-highlight');
+		await expect(xrayHighlight).toBeVisible();
+
+		await xrayHighlight.hover();
+		const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-overlay-tooltip');
+		await expect(xrayHighlightTooltip).toBeVisible();
+
+		// Toggle plugin off
+		await pluginButton.click();
+		await expect(xrayHighlight).not.toBeVisible();
+		await expect(xrayHighlightTooltip).not.toBeVisible();
+	});
+
+	test('audit shows higlights and tooltips', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const overlay = page.locator('astro-dev-overlay');
+		const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
+		await pluginButton.click();
+
+		const auditCanvas = overlay.locator(
+			'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:audit"]'
+		);
+		const auditHighlight = auditCanvas.locator('astro-dev-overlay-highlight');
+		await expect(auditHighlight).toBeVisible();
+
+		await auditHighlight.hover();
+		const auditHighlightTooltip = auditHighlight.locator('astro-dev-overlay-tooltip');
+		await expect(auditHighlightTooltip).toBeVisible();
+
+		// Toggle plugin off
+		await pluginButton.click();
+		await expect(auditHighlight).not.toBeVisible();
+		await expect(auditHighlightTooltip).not.toBeVisible();
+	});
+});

packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs

@@ -0,0 +1,8 @@
+import preact from '@astrojs/preact';
+
+export default {
+	integrations: [preact()],
+	experimental: {
+		devOverlay: true
+	}
+};

packages/astro/e2e/fixtures/dev-overlay/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@e2e/dev-overlay",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/preact": "workspace:*",
+    "astro": "workspace:*",
+    "preact": "^10.17.1"
+  }
+}

packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx

@@ -0,0 +1,3 @@
+export function HelloWorld({ name }) {
+	return <div>Hello {name}! I'm a component!</div>;
+}

packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro

@@ -0,0 +1,7 @@
+---
+import { HelloWorld } from "../components/HelloWorld";
+---
+
+<HelloWorld name={"Dev Overlay"} client:load />
+
+<img src="https://astro.build/assets/press/astro-logo-dark.svg" />

packages/astro/src/runtime/client/dev-overlay/overlay.ts

@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 		constructor() {
 			super();
-			this.shadowRoot = this.attachShadow({ mode: 'closed' });
+			this.shadowRoot = this.attachShadow({ mode: 'open' });
 		}
 
 		// connect component
@@ -79,7 +79,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 				bottom: 7.5%;
 				left: calc(50% + 32px);
 				transform: translate(-50%, 0%);
-				z-index: 999999;
+				z-index: 9999999999;
 				display: flex;
 				gap: 8px;
 				align-items: center;
@@ -478,7 +478,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 		constructor() {
 			super();
-			this.shadowRoot = this.attachShadow({ mode: 'closed' });
+			this.shadowRoot = this.attachShadow({ mode: 'open' });
 		}
 
 		// connect component

packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts

@@ -57,6 +57,11 @@ export class DevOverlayTooltip extends HTMLElement {
 				padding: 8px;
 			}
 
+			.section-content {
+				max-height: 250px;
+    		overflow-y: scroll;
+			}
+
 			.modal-title {
 				display: flex;
 				justify-content: space-between;
@@ -126,7 +131,7 @@ export class DevOverlayTooltip extends HTMLElement {
 						}</div>`
 						: ''
 				}
-				${section.content ? `<div>${section.content}</div>` : ''}
+				${section.content ? `<div class="section-content">${section.content}</div>` : ''}
 				${section.clickDescription ? `<span class="modal-cta">${section.clickDescription}</span>` : ''}
 			`;
 			fragment.append(sectionElement);

packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts

@@ -30,7 +30,7 @@ export class DevOverlayWindow extends HTMLElement {
 					font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 					color: rgba(204, 206, 216, 1);
 					position: fixed;
-					z-index: 9999999999;
+					z-index: 999999999;
 					top: 55%;
 					left: 50%;
 					transform: translate(-50%, -50%);