From 5fed432b0c3c84542a3d1b2952d183e9cbe3fa0e Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Fri, 27 Oct 2023 16:05:43 +0200
Subject: [PATCH] test: add test setup for dev overlay (#8932)
---
.changeset/new-candles-beam.md | 5 ++
packages/astro/e2e/dev-overlay.test.js | 90 +++++++++++++++++++
.../e2e/fixtures/dev-overlay/astro.config.mjs | 8 ++
.../e2e/fixtures/dev-overlay/package.json | 10 +++
.../dev-overlay/src/components/HelloWorld.tsx | 3 +
.../dev-overlay/src/pages/index.astro | 7 ++
.../src/runtime/client/dev-overlay/overlay.ts | 6 +-
.../client/dev-overlay/ui-library/tooltip.ts | 7 +-
.../client/dev-overlay/ui-library/window.ts | 2 +-
pnpm-lock.yaml | 12 +++
10 files changed, 145 insertions(+), 5 deletions(-)
create mode 100644 .changeset/new-candles-beam.md
create mode 100644 packages/astro/e2e/dev-overlay.test.js
create mode 100644 packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs
create mode 100644 packages/astro/e2e/fixtures/dev-overlay/package.json
create mode 100644 packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx
create mode 100644 packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro
diff --git a/.changeset/new-candles-beam.md b/.changeset/new-candles-beam.md
new file mode 100644
index 000000000000..e93d925d661f
--- /dev/null
+++ b/.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
diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js
new file mode 100644
index 000000000000..f4efab1414b0
--- /dev/null
+++ b/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();
+ });
+});
diff --git a/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs b/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs
new file mode 100644
index 000000000000..380a501ac44b
--- /dev/null
+++ b/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
+ }
+};
diff --git a/packages/astro/e2e/fixtures/dev-overlay/package.json b/packages/astro/e2e/fixtures/dev-overlay/package.json
new file mode 100644
index 000000000000..707aa8718b0d
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx b/packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx
new file mode 100644
index 000000000000..98f7d8bf42b9
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx
@@ -0,0 +1,3 @@
+export function HelloWorld({ name }) {
+ return Hello {name}! I'm a component!
;
+}
diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro b/packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro
new file mode 100644
index 000000000000..9c57b0b8d336
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro
@@ -0,0 +1,7 @@
+---
+import { HelloWorld } from "../components/HelloWorld";
+---
+
+
+
+
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 85bdf73e127a..e93f3bcac79f 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/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
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts
index 63244ab6bb96..0671fff0c429 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts
+++ b/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 {
}`
: ''
}
- ${section.content ? `${section.content}
` : ''}
+ ${section.content ? `${section.content}
` : ''}
${section.clickDescription ? `${section.clickDescription}` : ''}
`;
fragment.append(sectionElement);
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
index cc483b22799b..11c7b06f964c 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts
+++ b/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%);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bdc87fe98423..74f736d62314 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -928,6 +928,18 @@ importers:
specifier: ^18.0.0
version: 18.2.0(react@18.2.0)
+ packages/astro/e2e/fixtures/dev-overlay:
+ dependencies:
+ '@astrojs/preact':
+ specifier: workspace:*
+ version: link:../../../../integrations/preact
+ astro:
+ specifier: workspace:*
+ version: link:../../..
+ preact:
+ specifier: ^10.17.1
+ version: 10.18.1
+
packages/astro/e2e/fixtures/error-cyclic:
dependencies:
'@astrojs/preact':