mirror of
https://github.com/withastro/astro.git
synced 2025-02-17 22:44:24 -05:00
test: add test setup for dev overlay (#8932)
This commit is contained in:
Erika
GitHub
parent
15acd86028
commit
5fed432b0c
10 changed files with 145 additions and 5 deletions
5
.changeset/new-candles-beam.md
Normal file
5
.changeset/new-candles-beam.md
Normal file
|
|
@ -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
|
||||
90
packages/astro/e2e/dev-overlay.test.js
Normal file
90
packages/astro/e2e/dev-overlay.test.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
8
packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs
Normal file
8
packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import preact from '@astrojs/preact';
|
||||
|
||||
export default {
|
||||
integrations: [preact()],
|
||||
experimental: {
|
||||
devOverlay: true
|
||||
}
|
||||
};
|
||||
10
packages/astro/e2e/fixtures/dev-overlay/package.json
Normal file
10
packages/astro/e2e/fixtures/dev-overlay/package.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"name": "@e2e/dev-overlay",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@astrojs/preact": "workspace:*",
|
||||
"astro": "workspace:*",
|
||||
"preact": "^10.17.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export function HelloWorld({ name }) {
|
||||
return <div>Hello {name}! I'm a component!</div>;
|
||||
}
|
||||
|
|
@ -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" />
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
12
pnpm-lock.yaml
generated
12
pnpm-lock.yaml
generated
|
|
@ -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':
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue