Page 1
test go to 2 diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index a04b905af..31e3128f5 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -20,6 +20,20 @@ function scrollToBottom(page) { }); } +function collectPreloads(page) { + return page.evaluate(() => { + window.preloads = []; + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => + mutation.addedNodes.forEach((node) => { + if (node.nodeName === 'LINK' && node.rel === 'preload') preloads.push(node.href); + }) + ); + }); + observer.observe(document.head, { childList: true }); + }); +} + test.describe('View Transitions', () => { test('Moving from page 1 to page 2', async ({ page, astro }) => { const loads = []; @@ -170,11 +184,15 @@ test.describe('View Transitions', () => { let p = page.locator('#one'); await expect(p, 'should have content').toHaveText('Page 1'); + await collectPreloads(page); + // Go to page 2 await page.click('#click-two'); p = page.locator('#two'); await expect(p, 'should have content').toHaveText('Page 2'); await expect(p, 'imported CSS updated').toHaveCSS('font-size', '24px'); + const preloads = await page.evaluate(() => window.preloads); + expect(preloads.length === 1 && preloads[0].endsWith('/two.css')).toBeTruthy(); }); test('astro:page-load event fires when navigating to new page', async ({ page, astro }) => { diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts index 12ac5615d..1049f92d1 100644 --- a/packages/astro/src/transitions/router.ts +++ b/packages/astro/src/transitions/router.ts @@ -292,7 +292,9 @@ async function updateDOM( // Do not preload links that are already on the page. if ( !document.querySelector( - `[${PERSIST_ATTR}="${el.getAttribute(PERSIST_ATTR)}"], link[rel=stylesheet]` + `[${PERSIST_ATTR}="${el.getAttribute( + PERSIST_ATTR + )}"], link[rel=stylesheet][href="${el.getAttribute('href')}"]` ) ) { const c = document.createElement('link');