Add some tests

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

ui/webapp/tests/e2e/explore.spec.ts

@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test';
+
+import { waitForGuideData } from './utils/data';
+import { gotoExplore } from './utils/navigation';
+
+test.describe('Explore page', () => {
+  test('shows navigation and footer content', async ({ page }) => {
+    await gotoExplore(page);
+
+    // Navigation bar
+    await expect(page.getByRole('button', { name: 'Go to "Explore" page' }).first()).toBeVisible();
+    await expect(page.getByRole('banner').getByText('Explore')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Go to "Guide" page' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Go to "Stats" page' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Open "Embeddable view setup"' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Open Dropdown' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Go to "Games" page' })).toBeVisible();
+    await expect(page.getByRole('banner').getByRole('link', { name: 'Open external link' })).toHaveAttribute(
+      'href',
+      'https://github.com/cncf/landscape2'
+    );
+
+    // Footer
+    await expect(page.getByRole('contentinfo')).toContainText('CNCF interactive landscapes generator');
+    await expect(page.getByRole('contentinfo')).toContainText('Privacy Policy');
+    await expect(page.getByRole('contentinfo')).toContainText('Terms of Use');
+  });
+});

ui/webapp/tests/e2e/guide.spec.ts

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test';
+
+import { waitForGuideData } from './utils/data';
+import { gotoExplore, gotoGuide } from './utils/navigation';
+
+test.describe('Guide page', () => {
+  test('loads guide content when navigating from the header', async ({ page }) => {
+    await gotoExplore(page);
+    await Promise.all([waitForGuideData(page), page.getByRole('button', { name: 'Go to "Guide" page' }).click()]);
+    await expect(page).toHaveURL(/\/guide/);
+
+    // Guide headings
+    await expect(page.getByRole('heading', { name: 'Category 1', exact: true })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Subcategory 1-1' })).toBeVisible();
+  });
+
+  test('loads guide page', async ({ page }) => {
+    await gotoGuide(page);
+
+    // Guide headings
+    await expect(page.getByRole('heading', { name: 'Category 1', exact: true })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Subcategory 1-1' })).toBeVisible();
+  });
+});

ui/webapp/tests/e2e/home.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+import { gotoExplore } from './utils/navigation';
+
+test.describe('Stats page', () => {
+  test('navigates to stats view from the header', async ({ page }) => {
+    await gotoExplore(page);
+    await page.getByRole('button', { name: 'Go to "Stats" page' }).click();
+    await expect(page).toHaveURL(/\/stats$/);
+
+    // Subtitles in stats page
+    await expect(page.getByText('Distribution by maturity')).toBeVisible();
+    await expect(page.getByText('Accepted over time')).toBeVisible();
+    await expect(page.getByText('Promotions')).toBeVisible();
+    await expect(page.getByText('Security audits')).toBeVisible();
+    await expect(page.getByText('Distribution by category, subcategory and TAG')).toBeVisible();
+    await expect(page.getByText('Distribution by category', { exact: true })).toBeVisible();
+    await expect(page.getByText('Memberships over time')).toBeVisible();
+    await expect(page.getByText('Most popular languages')).toBeVisible();
+    await expect(page.getByText('Activity')).toBeVisible();
+    await expect(page.getByText('Licenses')).toBeVisible();
+    await expect(page.getByText('Funding rounds', { exact: true })).toBeVisible();
+    await expect(page.getByText('Acquisitions', { exact: true })).toBeVisible();
+  });
+});

ui/webapp/tests/e2e/stats.spec.ts

@@ -41,11 +41,29 @@ const registerTemplateRoutes = async (page: Page) => {
   ]);
 };
 
-// Navigate to the home page, registering template routes beforehand
-export const gotoHome = async (page: Page) => {
+// Navigate to the explore page, registering template routes beforehand
+export const gotoExplore = async (page: Page) => {
   await registerTemplateRoutes(page);
   await Promise.all([
     page.waitForResponse((response) => response.url().includes('/static/data/base.json') && response.ok()),
     page.goto('/'),
   ]);
 };
+
+// Navigate to the stats page, registering template routes beforehand
+export const gotoStats = async (page: Page) => {
+  await registerTemplateRoutes(page);
+  await Promise.all([
+    page.waitForResponse((response) => response.url().includes('/static/data/stats.json') && response.ok()),
+    page.goto('/stats'),
+  ]);
+};
+
+// Navigate to the guide page, registering template routes beforehand
+export const gotoGuide = async (page: Page) => {
+  await registerTemplateRoutes(page);
+  await Promise.all([
+    page.waitForResponse((response) => response.url().includes('/static/data/guide.json') && response.ok()),
+    page.goto('/guide'),
+  ]);
+};