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 {
|
||||
selectors?: string | HTMLAnchorElement[];
|
||||
root?: ParentNode;
|
||||
}
|
||||
|
||||
export default function prefetch({
|
||||
root = document,
|
||||
selectors = 'a[href][rel="prefetch"]',
|
||||
}: PrefetchOptions) {
|
||||
const [toAdd, isDone] = throttle();
|
||||
|
@ -79,7 +77,7 @@ export default function prefetch({
|
|||
|
||||
requestIdleCallback(() => {
|
||||
const links = Array.from(
|
||||
typeof selectors === 'string' ? root.querySelectorAll<HTMLAnchorElement>(selectors) : selectors
|
||||
typeof selectors === 'string' ? document.querySelectorAll<HTMLAnchorElement>(selectors) : selectors
|
||||
).filter(shouldPreload);
|
||||
|
||||
for (const link of links) {
|
||||
|
|
|
@ -3,60 +3,62 @@ import { testFactory } from './test-utils.js';
|
|||
|
||||
const test = testFactory({ root: './fixtures/basic-prefetch/' });
|
||||
|
||||
test.describe('dev', () => {
|
||||
let devServer;
|
||||
test.describe('Basic prefetch', () => {
|
||||
test.describe('dev', () => {
|
||||
let devServer;
|
||||
|
||||
test.beforeEach(async ({ astro }) => {
|
||||
devServer = await astro.startDevServer();
|
||||
test.beforeEach(async ({ astro }) => {
|
||||
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 () => {
|
||||
await devServer.stop();
|
||||
});
|
||||
test.describe('build', () => {
|
||||
let previewServer;
|
||||
|
||||
test.describe('prefetches rel="prefetch" links', () => {
|
||||
test('skips /admin', async ({ page, astro }) => {
|
||||
const requests = new Set();
|
||||
test.beforeAll(async ({ astro }) => {
|
||||
await astro.build();
|
||||
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 expect(requests.has(astro.resolveUrl('/contact'))).toBeTruthy();
|
||||
await expect(requests.has(astro.resolveUrl('/admin'))).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();
|
||||
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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
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>
|
||||
<a href="/about" rel="prefetch">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/contact" rel="prefetch">Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin">Admin</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<footer>
|
||||
<a href="/contact" rel="prefetch">Contact</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue