Amend tests

5 files changed, 88 insertions, 22 deletions

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
index 161058e..32094a2 100644
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -51,7 +51,7 @@ jobs:
         extended: true
 
     - name: Run Playwright tests
-      run: npx playwright test
+      run: npm run test
 
     - name: Upload tests artifact
       uses: actions/upload-artifact@v4
diff --git a/eslint.config.js b/eslint.config.js
index 51753f5..054bd46 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -99,7 +99,7 @@ module.exports = [
     }
   },
   {
-    files: ['eslint.config.js', 'playwright.config.js'],
+    files: ['tests/*.spec.js', 'eslint.config.js', 'playwright.config.js'],
     languageOptions: {
       'sourceType': 'commonjs'
     }
diff --git a/package.json b/package.json
index 53ae529..4095ab6 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,10 @@
   "main": "index.js",
   "scripts": {
     "server": "HUGO_RESOURCEDIR='../resources' HUGO_ENV=development hugo server --verbose --source=exampleSite --buildDrafts --buildFuture --ignoreCache --disableFastRender",
+    "test": "playwright test",
     "lint": "npm run lint:js && npm run lint:editorconfig",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:js": "eslint static/js/* assets/js/* eslint.config.js playwright.config.js"
+    "lint:js": "eslint static/js/* assets/js/* tests/*.spec.js eslint.config.js playwright.config.js"
   },
   "devDependencies": {
     "@playwright/test": "^1.43.0",
diff --git a/tests/general.spec.js b/tests/general.spec.js
deleted file mode 100644
index 09d093f..0000000
--- a/tests/general.spec.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// @ts-check
-const { test, expect } = require('@playwright/test');
-
-test('has title', async ({ page }) => {
-  await page.goto('/');
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Ed./);
-});
-
-test('our documentation link', async ({ page }) => {
-  await page.goto('/');
-
-  // Click the "our documentation" link.
-  await page.getByText('our documentation').click();
-
-  // Expects page to have a heading with the name of Documentation.
-  await expect(page.getByRole('heading', { name: 'Documentation' })).toBeVisible();
-});
diff --git a/tests/main-page.spec.js b/tests/main-page.spec.js
new file mode 100644
index 0000000..a052cfd
--- /dev/null
+++ b/tests/main-page.spec.js
@@ -0,0 +1,84 @@
+'use strict';
+
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('correct loading main page', async ({ page }) => {
+  const consoleErrors = [];
+  await page.goto('/');
+
+  page.on('console', (msg) => {
+    if (msg.type() === 'error') {
+      consoleErrors.push(msg.text());
+    }
+  });
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Ed./);
+
+  // Expect no errors in the console.
+  expect(consoleErrors).toHaveLength(0);
+});
+
+test('main page have navigation and latest publications section', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect a navigation element to be visible.
+  const navigationElement = page.locator('div[role="navigation"]');
+  await expect(navigationElement).toBeVisible();
+
+  // Expect a header with the text "Latest publications" to be visible.
+  const latestPublicationsHeader = navigationElement.locator('text="Latest publications"');
+  await expect(latestPublicationsHeader).toBeVisible();
+
+  // Expect a list of links to be visible.
+  const linksList = navigationElement.locator('ul');
+  await expect(linksList).toBeVisible();
+
+  // Expect the list of links to have 5 items.
+  const textTitleContainers = linksList.locator('li.text-title');
+  await expect(textTitleContainers).toHaveCount(5);
+
+  for (let i = 0; i < 5; i++) {
+    const postMetaContainer = textTitleContainers.nth(i).locator('.post-meta');
+    await expect(postMetaContainer).toBeVisible();
+
+    const timeElement = postMetaContainer.locator('time');
+    await expect(timeElement).toBeVisible();
+  }
+});
+
+test('our documentation link', async ({ page }) => {
+  await page.goto('/');
+
+  // Click the "our documentation" link.
+  await page.getByText('our documentation').click();
+
+  // Expects page to have a heading with the name of Documentation.
+  await expect(page.getByRole('heading', { name: 'Documentation' })).toBeVisible();
+});
+
+
+test('external links in main wrapper have correct attributes', async ({ page }) => {
+  await page.goto('/');
+
+  const links = await page.$$('main a');
+
+  for (const link of links) {
+    const href = await link.getAttribute('href');
+
+    if (href && !href.startsWith('/') && !href.startsWith('#') && !href.includes('127.0.0.1')) {
+      // Expect the link to have class="external".
+      const hasExternalClass = await link.evaluate((el) => el.classList.contains('external'));
+      expect(hasExternalClass).toBe(true);
+
+      // Expect the link to have target="_blank".
+      const target = await link.getAttribute('target');
+      expect(target).toBe('_blank');
+
+      // Expect the link to have rel="noopener noreferrer".
+      const rel = await link.getAttribute('rel');
+      expect(rel).toBe('noopener noreferrer');
+    }
+  }
+});