View Transitions redirects WIP
This commit is contained in:
parent
78b82bb392
commit
6ece3646e6
4 changed files with 47 additions and 1 deletions
|
@ -64,7 +64,9 @@ const { fallback = 'animate' } = Astro.props as Props;
|
||||||
};
|
};
|
||||||
|
|
||||||
async function getHTML(href: string) {
|
async function getHTML(href: string) {
|
||||||
const res = await fetch(href);
|
const res = await fetch(href, {
|
||||||
|
redirect: 'manual'
|
||||||
|
});
|
||||||
const html = await res.text();
|
const html = await res.text();
|
||||||
return { ok: res.ok, html };
|
return { ok: res.ok, html };
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,10 @@ export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: nodejs({ mode: 'standalone' }),
|
adapter: nodejs({ mode: 'standalone' }),
|
||||||
integrations: [react()],
|
integrations: [react()],
|
||||||
|
redirects: {
|
||||||
|
'/redirect-two': '/two',
|
||||||
|
'/redirect-external': 'http://example.com/',
|
||||||
|
},
|
||||||
vite: {
|
vite: {
|
||||||
build: {
|
build: {
|
||||||
assetsInlineLimit: 0,
|
assetsInlineLimit: 0,
|
||||||
|
|
|
@ -8,6 +8,8 @@ import Layout from '../components/Layout.astro';
|
||||||
<a id="click-three" href="/three">go to 3</a>
|
<a id="click-three" href="/three">go to 3</a>
|
||||||
<a id="click-longpage" href="/long-page">go to long page</a>
|
<a id="click-longpage" href="/long-page">go to long page</a>
|
||||||
<a id="click-self" href="">go to top</a>
|
<a id="click-self" href="">go to top</a>
|
||||||
|
<a id="click-redirect-two" href="/redirect-two">go to redirect 2</a>
|
||||||
|
<a id="click-redirect-external" href="/redirect-external">go to a redirect external</a>
|
||||||
|
|
||||||
<div id="test">test content</div>
|
<div id="test">test content</div>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -543,4 +543,42 @@ test.describe('View Transitions', () => {
|
||||||
p = page.locator('#one');
|
p = page.locator('#one');
|
||||||
await expect(p, 'should have content').toHaveText('Page 1');
|
await expect(p, 'should have content').toHaveText('Page 1');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test.skip('Moving to a page which redirects to another', async ({ page, astro }) => {
|
||||||
|
const loads = [];
|
||||||
|
page.addListener('load', (p) => {
|
||||||
|
loads.push(p.title());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Go to page 1
|
||||||
|
await page.goto(astro.resolveUrl('/one'));
|
||||||
|
let p = page.locator('#one');
|
||||||
|
await expect(p, 'should have content').toHaveText('Page 1');
|
||||||
|
|
||||||
|
// go to page 2
|
||||||
|
await page.click('#click-redirect-two');
|
||||||
|
p = page.locator('#two');
|
||||||
|
await expect(p, 'should have content').toHaveText('Page 2');
|
||||||
|
|
||||||
|
expect(loads.length, 'There should be 2 page loads').toEqual(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
test.only('Redirect to external site causes page load', async ({ page, astro }) => {
|
||||||
|
const loads = [];
|
||||||
|
page.addListener('load', (p) => {
|
||||||
|
loads.push(p.title());
|
||||||
|
});
|
||||||
|
|
||||||
|
// Go to page 1
|
||||||
|
await page.goto(astro.resolveUrl('/one'));
|
||||||
|
let p = page.locator('#one');
|
||||||
|
await expect(p, 'should have content').toHaveText('Page 1');
|
||||||
|
|
||||||
|
// go to external page
|
||||||
|
await page.click('#click-redirect-external');
|
||||||
|
p = page.locator('h1');
|
||||||
|
await expect(p, 'should have content').toBeVisible();
|
||||||
|
|
||||||
|
expect(loads.length, 'There should be 2 page load').toEqual(2);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue