test: add test

packages/astro/e2e/dev-toolbar.test.js

@@ -290,4 +290,18 @@ test.describe('Dev Toolbar', () => {
  expect(serverRenderTime).not.toBe(null);
  expect(clientRenderTime).not.toBe(null);
  });
+
+ test('apps can show notifications', async ({ page, astro }) => {
+ await page.goto(astro.resolveUrl('/'));
+
+ const toolbar = page.locator('astro-dev-toolbar');
+ const appButton = toolbar.locator('button[data-app-id="my-plugin"]');
+ await appButton.click();
+
+ const customAppNotification = appButton.locator('.icon .notification');
+ await expect(customAppNotification).toHaveAttribute('data-active');
+ await expect(customAppNotification).toHaveAttribute('data-level', 'warning');
+
+ await expect(customAppNotification).toBeVisible();
+ });
 });

packages/astro/e2e/fixtures/dev-toolbar/custom-plugin.js

@@ -2,7 +2,7 @@ export default {
  id: 'my-plugin',
  name: 'My Plugin',
  icon: 'astro:logo',
- init(canvas) {
+ init(canvas, eventTarget) {
  const astroWindow = document.createElement('astro-dev-toolbar-window');
  const myButton = document.createElement('astro-dev-toolbar-button');
  myButton.size = 'medium';
@@ -13,6 +13,14 @@ export default {
  console.log('Clicked!');
  });
 
+ eventTarget.dispatchEvent(
+ new CustomEvent("toggle-notification", {
+ detail: {
+ level: "warning",
+ },
+ })
+ );
+
  astroWindow.appendChild(myButton);
 
  canvas.appendChild(astroWindow);