Fix to get Integration Data even when a page is transitioned by ViewT…

…ransition (#10079) * Fix to get Integration Data even when a page is transitioned by ViewTransition. * add test case * add changeset * fix test * Fix typo
withastro · Feb 20, 2024 · 80f8996 · 80f8996
1 parent b92d35f
commit 80f8996
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 12 deletions.
diff --git a/.changeset/tidy-laws-think.md b/.changeset/tidy-laws-think.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fix integrationData fetch to always be called even if View Transition is enabled.
diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js
@@ -53,6 +53,28 @@ test.describe('Dev Toolbar', () => {
 		await expect(astroWindow).not.toBeVisible();
 	});
 
+	test('show integration app', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/view-transition-a'));
+
+		let toolbar = page.locator('astro-dev-toolbar');
+		let appButton = toolbar.locator('button[data-app-id="astro"]');
+		await appButton.click();
+
+		let astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro"]');
+		let astroToolbarCards = await astroAppCanvas.locator('astro-dev-toolbar-card');
+		await page.waitForSelector('astro-dev-toolbar-card');
+		await expect(astroToolbarCards.first()).toBeVisible();
+
+		let consolePromise = page.waitForEvent('console');
+		await page.click('#go-to-b');
+		await consolePromise;
+
+		astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro"]');
+		astroToolbarCards = await astroAppCanvas.locator('astro-dev-toolbar-card');
+		await page.waitForSelector('astro-dev-toolbar-card');
+		await expect(astroToolbarCards.first()).toBeVisible();
+	});
+
 	test('xray shows highlights and tooltips', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 

diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/layout/Layout.astro
@@ -0,0 +1,18 @@
+---
+import { ViewTransitions } from 'astro:transitions';
+---
+<html lang="en">
+  <head>
+    <title>View Transition Test</title>
+    <ViewTransitions />
+		<script is:inline>
+			// let playwright know when navigate() is done
+			document.addEventListener('astro:before-swap', (e) => {
+				e.viewTransition.ready.then(()=>console.log("ready"))
+			});
+		</script>
+  </head>
+  <body>
+		<slot />
+  </body>
+</html>
diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-a.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-a.astro
@@ -0,0 +1,7 @@
+---
+import Layout from '../layout/Layout.astro'
+---
+<Layout>
+	<div>Test</div>
+	<a href="/view-transition-b" id="go-to-b">Go to B</a>
+</Layout>
diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-b.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/view-transition-b.astro
@@ -0,0 +1,7 @@
+---
+import Layout from '../layout/Layout.astro'
+---
+<Layout>
+	<div>Test</div>
+	<a href="/view-transition-a" id="go-to-a">Go to A</a>
+</Layout>
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
@@ -34,27 +34,31 @@ export default {
 		createCanvas();
 
 		document.addEventListener('astro:after-swap', createCanvas);
+		document.addEventListener('astro:after-swap', fetchIntegrationData);
 
 		eventTarget.addEventListener('app-toggled', async (event) => {
 			resetDebugButton();
 			if (!(event instanceof CustomEvent)) return;
 
 			if (event.detail.state === true) {
-				if (!integrationData)
-					fetch('https://astro.build/api/v1/dev-overlay/', {
-						cache: 'no-cache',
-					})
-						.then((res) => res.json())
-						.then((data) => {
-							integrationData = data;
-							integrationData.data = integrationData.data.map((integration) => {
-								return integration;
-							});
-							refreshIntegrationList();
-						});
+				if (!integrationData) fetchIntegrationData();
 			}
 		});
 
+		function fetchIntegrationData() {
+			fetch('https://astro.build/api/v1/dev-overlay/', {
+				cache: 'no-cache',
+			})
+				.then((res) => res.json())
+				.then((data) => {
+					integrationData = data;
+					integrationData.data = integrationData.data.map((integration) => {
+						return integration;
+					});
+					refreshIntegrationList();
+				});
+		}
+
 		function createCanvas() {
 			const links: { icon: Icon; name: string; link: string }[] = [
 				{