adding tests for custom selectors
This commit is contained in:
parent
7ebc51fc27
commit
03be95fc51
5 changed files with 166 additions and 52 deletions
41
packages/labs/prefetch/playwright.config.js
Normal file
41
packages/labs/prefetch/playwright.config.js
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
import { devices } from '@playwright/test';
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
testMatch: 'test/*.test.js',
|
||||||
|
/* Maximum time one test can run for. */
|
||||||
|
timeout: 30 * 1000,
|
||||||
|
expect: {
|
||||||
|
/**
|
||||||
|
* Maximum time expect() should wait for the condition to be met.
|
||||||
|
* For example in `await expect(locator).toHaveText();`
|
||||||
|
*/
|
||||||
|
timeout: 5000,
|
||||||
|
},
|
||||||
|
/* Fail the build on CI if you accidentally left test in the source code. */
|
||||||
|
forbidOnly: !!process.env.CI,
|
||||||
|
/* Retry on CI only */
|
||||||
|
retries: process.env.CI ? 5 : 0,
|
||||||
|
/* Opt out of parallel tests on CI. */
|
||||||
|
workers: 1,
|
||||||
|
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||||
|
use: {
|
||||||
|
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
|
||||||
|
actionTimeout: 0,
|
||||||
|
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||||
|
baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || 'http://localhost:3000',
|
||||||
|
|
||||||
|
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||||
|
trace: 'on-first-retry',
|
||||||
|
},
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
name: 'Chrome Stable',
|
||||||
|
use: {
|
||||||
|
browserName: 'chromium',
|
||||||
|
channel: 'chrome',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
|
@ -58,11 +58,9 @@ async function preloadHref(link: HTMLAnchorElement) {
|
||||||
|
|
||||||
export interface PrefetchOptions {
|
export interface PrefetchOptions {
|
||||||
selectors?: string | HTMLAnchorElement[];
|
selectors?: string | HTMLAnchorElement[];
|
||||||
root?: ParentNode;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function prefetch({
|
export default function prefetch({
|
||||||
root = document,
|
|
||||||
selectors = 'a[href][rel="prefetch"]',
|
selectors = 'a[href][rel="prefetch"]',
|
||||||
}: PrefetchOptions) {
|
}: PrefetchOptions) {
|
||||||
const [toAdd, isDone] = throttle();
|
const [toAdd, isDone] = throttle();
|
||||||
|
@ -79,7 +77,7 @@ export default function prefetch({
|
||||||
|
|
||||||
requestIdleCallback(() => {
|
requestIdleCallback(() => {
|
||||||
const links = Array.from(
|
const links = Array.from(
|
||||||
typeof selectors === 'string' ? root.querySelectorAll<HTMLAnchorElement>(selectors) : selectors
|
typeof selectors === 'string' ? document.querySelectorAll<HTMLAnchorElement>(selectors) : selectors
|
||||||
).filter(shouldPreload);
|
).filter(shouldPreload);
|
||||||
|
|
||||||
for (const link of links) {
|
for (const link of links) {
|
||||||
|
|
|
@ -3,60 +3,62 @@ import { testFactory } from './test-utils.js';
|
||||||
|
|
||||||
const test = testFactory({ root: './fixtures/basic-prefetch/' });
|
const test = testFactory({ root: './fixtures/basic-prefetch/' });
|
||||||
|
|
||||||
test.describe('dev', () => {
|
test.describe('Basic prefetch', () => {
|
||||||
let devServer;
|
test.describe('dev', () => {
|
||||||
|
let devServer;
|
||||||
|
|
||||||
test.beforeEach(async ({ astro }) => {
|
test.beforeEach(async ({ astro }) => {
|
||||||
devServer = await astro.startDevServer();
|
devServer = await astro.startDevServer();
|
||||||
|
});
|
||||||
|
|
||||||
|
test.afterEach(async () => {
|
||||||
|
await devServer.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
test.describe('prefetches rel="prefetch" links', () => {
|
||||||
|
test('skips /admin', async ({ page, astro }) => {
|
||||||
|
const requests = new Set();
|
||||||
|
|
||||||
|
page.on('request', async (request) => requests.add(request.url()));
|
||||||
|
|
||||||
|
await page.goto(astro.resolveUrl('/'));
|
||||||
|
|
||||||
|
await page.waitForLoadState('networkidle');
|
||||||
|
|
||||||
|
await expect(requests.has(astro.resolveUrl('/about')), '/about was prefetched').toBeTruthy();
|
||||||
|
await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
|
||||||
|
await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
test.afterEach(async () => {
|
test.describe('build', () => {
|
||||||
await devServer.stop();
|
let previewServer;
|
||||||
});
|
|
||||||
|
|
||||||
test.describe('prefetches rel="prefetch" links', () => {
|
test.beforeAll(async ({ astro }) => {
|
||||||
test('skips /admin', async ({ page, astro }) => {
|
await astro.build();
|
||||||
const requests = new Set();
|
previewServer = await astro.preview();
|
||||||
|
});
|
||||||
|
|
||||||
page.on('request', async (request) => requests.add(request.url()));
|
// important: close preview server (free up port and connection)
|
||||||
|
test.afterAll(async () => {
|
||||||
|
await previewServer.stop();
|
||||||
|
});
|
||||||
|
|
||||||
await page.goto(astro.resolveUrl('/'));
|
test.describe('prefetches rel="prefetch" links', () => {
|
||||||
|
test('skips /admin', async ({ page, astro }) => {
|
||||||
|
const requests = new Set();
|
||||||
|
|
||||||
await page.waitForLoadState('networkidle');
|
page.on('request', async (request) => requests.add(request.url()));
|
||||||
|
|
||||||
await expect(requests.has(astro.resolveUrl('/about'))).toBeTruthy();
|
await page.goto(astro.resolveUrl('/'));
|
||||||
await expect(requests.has(astro.resolveUrl('/contact'))).toBeTruthy();
|
|
||||||
await expect(requests.has(astro.resolveUrl('/admin'))).toBeFalsy();
|
await page.waitForLoadState('networkidle');
|
||||||
});
|
|
||||||
});
|
await expect(requests.has(astro.resolveUrl('/about')), '/about was prefetched').toBeTruthy();
|
||||||
});
|
await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
|
||||||
|
await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
|
||||||
test.describe('build', () => {
|
});
|
||||||
let previewServer;
|
|
||||||
|
|
||||||
test.beforeAll(async ({ astro }) => {
|
|
||||||
await astro.build();
|
|
||||||
previewServer = await astro.preview();
|
|
||||||
});
|
|
||||||
|
|
||||||
// important: close preview server (free up port and connection)
|
|
||||||
test.afterAll(async () => {
|
|
||||||
await previewServer.stop();
|
|
||||||
});
|
|
||||||
|
|
||||||
test.describe('prefetches rel="prefetch" links', () => {
|
|
||||||
test('skips /admin', async ({ page, astro }) => {
|
|
||||||
const requests = new Set();
|
|
||||||
|
|
||||||
page.on('request', async (request) => requests.add(request.url()));
|
|
||||||
|
|
||||||
await page.goto(astro.resolveUrl('/'));
|
|
||||||
|
|
||||||
await page.waitForLoadState('networkidle');
|
|
||||||
|
|
||||||
await expect(requests.has(astro.resolveUrl('/about'))).toBeTruthy();
|
|
||||||
await expect(requests.has(astro.resolveUrl('/contact'))).toBeTruthy();
|
|
||||||
await expect(requests.has(astro.resolveUrl('/admin'))).toBeFalsy();
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
72
packages/labs/prefetch/test/custom-selectors.test.js
Normal file
72
packages/labs/prefetch/test/custom-selectors.test.js
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import { testFactory } from './test-utils.js';
|
||||||
|
import prefetch from '../dist/index.js';
|
||||||
|
|
||||||
|
const test = testFactory({
|
||||||
|
root: './fixtures/basic-prefetch/',
|
||||||
|
integrations: [
|
||||||
|
prefetch({
|
||||||
|
selectors: 'a[href="/admin"]'
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
test.describe('Custom prefetch selectors', () => {
|
||||||
|
test.describe('dev', () => {
|
||||||
|
let devServer;
|
||||||
|
|
||||||
|
test.beforeEach(async ({ astro }) => {
|
||||||
|
devServer = await astro.startDevServer();
|
||||||
|
});
|
||||||
|
|
||||||
|
test.afterEach(async () => {
|
||||||
|
await devServer.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
test.describe('prefetches links by custom selector', () => {
|
||||||
|
test('only prefetches /contact', async ({ page, astro }) => {
|
||||||
|
const requests = new Set();
|
||||||
|
|
||||||
|
page.on('request', async (request) => requests.add(request.url()));
|
||||||
|
|
||||||
|
await page.goto(astro.resolveUrl('/'));
|
||||||
|
|
||||||
|
await page.waitForLoadState('networkidle');
|
||||||
|
|
||||||
|
await expect(requests.has(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
|
||||||
|
await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
|
||||||
|
await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test.describe('build', () => {
|
||||||
|
let previewServer;
|
||||||
|
|
||||||
|
test.beforeAll(async ({ astro }) => {
|
||||||
|
await astro.build();
|
||||||
|
previewServer = await astro.preview();
|
||||||
|
});
|
||||||
|
|
||||||
|
// important: close preview server (free up port and connection)
|
||||||
|
test.afterAll(async () => {
|
||||||
|
await previewServer.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
test.describe('prefetches links by custom selector', () => {
|
||||||
|
test('only prefetches /contact', async ({ page, astro }) => {
|
||||||
|
const requests = new Set();
|
||||||
|
|
||||||
|
page.on('request', async (request) => requests.add(request.url()));
|
||||||
|
|
||||||
|
await page.goto(astro.resolveUrl('/'));
|
||||||
|
|
||||||
|
await page.waitForLoadState('networkidle');
|
||||||
|
|
||||||
|
await expect(requests.has(astro.resolveUrl('/about')), '/about was skipped').toBeFalsy();
|
||||||
|
await expect(requests.has(astro.resolveUrl('/contact')), '/contact was prefetched').toBeTruthy();
|
||||||
|
await expect(requests.has(astro.resolveUrl('/admin')), '/admin was skipped').toBeFalsy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
|
@ -13,13 +13,14 @@
|
||||||
<li>
|
<li>
|
||||||
<a href="/about" rel="prefetch">About</a>
|
<a href="/about" rel="prefetch">About</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<a href="/contact" rel="prefetch">Contact</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
<li>
|
||||||
<a href="/admin">Admin</a>
|
<a href="/admin">Admin</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<a href="/contact" rel="prefetch">Contact</a>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Add table
Reference in a new issue