feat: create announcements banner (#617)

Author: araujogui

.github/workflows/ci.yml

@@ -78,3 +78,41 @@ jobs:
         with:
           files: ./junit.xml
           report_type: test_results
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Harden Runner
+        uses: step-security/harden-runner@fa2e9d605c4eeb9fcad4c99c224cee0c6c7f3594 # v2.16.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout code
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Checkout Node.js source
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          repository: nodejs/node
+          sparse-checkout: doc/api/assert.md
+          path: node
+
+      - name: Build docs
+        run: npx doc-kit generate -t web -i "./node/doc/api/assert.md" -o out
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      - name: Run E2E tests
+        run: node --run test:e2e

.gitignore

@@ -16,3 +16,7 @@ isolate-*
 
 # Node's Source Folder
 node
+
+# Playwright
+playwright-report/
+test-results/

e2e/announcement-banner.spec.js

@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test';
+
+const REMOTE_CONFIG_URL = 'https://nodejs.org/site.json';
+
+test.describe('Announcement Banner', () => {
+  test('renders a text-only banner', async ({ page }) => {
+    await page.route(REMOTE_CONFIG_URL, route =>
+      route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          websiteBanners: {
+            index: { text: 'Important announcement for all users' },
+          },
+        }),
+      })
+    );
+
+    await page.goto('/assert.html');
+
+    const banner = page.getByRole('region', { name: 'Announcements' });
+    await expect(banner).toBeVisible();
+    await expect(banner).toContainText('Important announcement for all users');
+  });
+
+  test('renders a banner with a link', async ({ page }) => {
+    await page.route(REMOTE_CONFIG_URL, route =>
+      route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({
+          websiteBanners: {
+            index: {
+              text: 'Read the release notes',
+              link: 'https://nodejs.org/releases',
+            },
+          },
+        }),
+      })
+    );
+
+    await page.goto('/assert.html');
+
+    const banner = page.getByRole('region', { name: 'Announcements' });
+    await expect(banner).toBeVisible();
+
+    const link = banner.getByRole('link', { name: 'Read the release notes' });
+    await expect(link).toBeVisible();
+    await expect(link).toHaveAttribute('href', 'https://nodejs.org/releases');
+    await expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  test('does not render when there are no active banners', async ({ page }) => {
+    await page.route(REMOTE_CONFIG_URL, route =>
+      route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({ websiteBanners: {} }),
+      })
+    );
+
+    await page.goto('/assert.html');
+    await page.waitForLoadState('networkidle');
+
+    await expect(
+      page.getByRole('region', { name: 'Announcements' })
+    ).not.toBeAttached();
+  });
+});

eslint.config.mjs

@@ -13,7 +13,7 @@ export default defineConfig([
     ignores: ['out/', 'src/generators/api-links/__tests__/fixtures/'],
   },
   {
-    files: ['**/*.{mjs,jsx}'],
+    files: ['**/*.{mjs,jsx,js}'],
     plugins: { jsdoc },
     languageOptions: {
       ecmaVersion: 'latest',