astro/packages/astro/e2e/test-utils.js
Erika 31ec847972
Add a new error overlay (#5495)
* Add new overlay

* Fix CSS errors missing the proper stacktrace

* Fix names not working in some cases

* Add changeset

* Fix Playwright not detecting the overlay

* Update E2E test

* Fix tests

* Small refactor, fix syntax highlight on light mode, fix code element showing even with no code

* Simplier injection

* Add Markdown support to CLI reporting

* Fix not being able to navigate with the keyboard to the open in editor link

* aria-hide some svgs (#5508)

we should also make the "open in editor" button a button, not a link, if we are using JS for interactions

* Implement close method so Vite can close the overlay when needed

* Fix filepaths not being absolute when coming from node_modules for errors

* Fix multi line errors with indentation not showing correctly

* Fix entire page being scrolled to the error line in certain cases

* Update docs links

* Put the new error overlay behind a flag

* add flag for e2e tests

Co-authored-by: Caleb Jasik <calebjasik@jasik.xyz>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
2022-12-14 10:27:15 -05:00

60 lines
1.6 KiB
JavaScript

import { test as testBase, expect } from '@playwright/test';
import { loadFixture as baseLoadFixture } from '../test/test-utils.js';
export const isWindows = process.platform === 'win32';
export function loadFixture(inlineConfig) {
if (!inlineConfig || !inlineConfig.root)
throw new Error("Must provide { root: './fixtures/...' }");
// resolve the relative root (i.e. "./fixtures/tailwindcss") to a full filepath
// without this, the main `loadFixture` helper will resolve relative to `packages/astro/test`
return baseLoadFixture({
...inlineConfig,
root: new URL(inlineConfig.root, import.meta.url).toString(),
});
}
export function testFactory(inlineConfig) {
let fixture;
const test = testBase.extend({
astro: async ({}, use) => {
fixture = fixture || (await loadFixture(inlineConfig));
await use(fixture);
},
});
test.afterEach(() => {
fixture.resetAllFiles();
});
return test;
}
/**
*
* @param {string} page
* @returns {Promise<{message: string, hint: string}>}
*/
export async function getErrorOverlayContent(page) {
const overlay = await page.waitForSelector('vite-error-overlay', {
strict: true,
timeout: 10 * 1000,
});
expect(overlay).toBeTruthy();
const message = await overlay.$$eval('#message-content', (m) => m[0].textContent);
const hint = await overlay.$$eval('#hint-content', (m) => m[0].textContent);
return { message, hint };
}
/**
* @param {import('@playwright/test').Locator} el
* @returns {Promise<string>}
*/
export async function getColor(el) {
return await el.evaluate((e) => getComputedStyle(e).color);
}