E2e testing

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -134,3 +134,9 @@ dist
 
 # .vscode
 .vscode
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

package.json

@@ -35,7 +35,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@playwright/test": "^1.50.1",
     "@types/autoprefixer": "^10.2.4",
+    "@types/node": "^22.13.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/tailwindcss": "^3.1.0",

playwright.config.ts

@@ -0,0 +1,62 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  // workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    headless: !!process.env.CI,
+    launchOptions: {
+      slowMo: 1000,
+    },
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+  ],
+});

tests/constants.js

@@ -0,0 +1,5 @@
+export const HOME_URL = 'https://domain-lookup.nikola-nenovski.info';
+export const HOME_TITLE = 'DomainLookup';
+export const WORKER_URL_WILDCARD = 'https://domainlookup.nicknenovski.workers.dev/*';
+export const E2E_WORKER_URL =
+  'https://domainlookup-e2e.nicknenovski.workers.dev';

tests/home.spec.ts

@@ -0,0 +1,77 @@
+import { test, expect } from '@playwright/test';
+import { HomeView } from './view-objects/HomeView';
+import { DomainUtils } from './utils/DomainUtils';
+import {
+  E2E_WORKER_URL,
+  HOME_TITLE,
+  HOME_URL,
+  WORKER_URL_WILDCARD,
+} from './constants';
+import { ApiUtils } from './utils/ApiUtils';
+
+let homeView: HomeView;
+
+test.beforeEach(async ({ page }) => {
+  homeView = new HomeView(page);
+  await homeView.navigateToHome();
+});
+
+test.describe('Home view', () => {
+  test('checks title', async ({ page }) => {
+    await expect(page).toHaveTitle(HOME_TITLE);
+  });
+
+  test('checks URL', async ({ page }) => {
+    await expect(page).toHaveURL(HOME_URL);
+  });
+});
+
+test.describe('checks search form validations', () => {
+  test('search form should be visible', async () => {
+    await expect(homeView.searchForm).toBeVisible();
+  });
+
+  test('submit button should be disabled', async () => {
+    await expect(homeView.submitButton).toBeDisabled();
+  });
+
+  // TODO check validation for incorrect domain names after adding a proper validation message
+  // test('submit button should be disabled for invalid domain names', async () => {
+  //   await homeView.searchForm.fill('test');
+  //   await expect(homeView.submitButton).toBeDisabled();
+  // });
+
+  test('search form should accept valid domains with special characters', async ({
+    page,
+  }) => {
+    const apiUtils = new ApiUtils(page);
+    await apiUtils.swapApiRequestUrl(WORKER_URL_WILDCARD, E2E_WORKER_URL);
+
+    const domain = 'хамали.bg';
+    const encodedDomain = DomainUtils.punyEncode(domain);
+
+    await homeView.submitDomain(domain);
+
+    await expect(page).toHaveURL(`${HOME_URL}/results?domain=${encodedDomain}`);
+
+    await page.unroute(WORKER_URL_WILDCARD);
+  });
+
+  test('search form should accept URLs containing valid domain names', async ({
+    page,
+  }) => {
+    const apiUtils = new ApiUtils(page);
+    await apiUtils.swapApiRequestUrl(WORKER_URL_WILDCARD, E2E_WORKER_URL);
+
+    const url = 'https://playwright.dev/search?q=assertions';
+    const extractedDomain = DomainUtils.extractFromUrl(url);
+
+    await homeView.submitDomain(url);
+
+    await expect(page).toHaveURL(
+      `${HOME_URL}/results?domain=${extractedDomain}`
+    );
+
+    await page.unroute(WORKER_URL_WILDCARD);
+  });
+});

tests/utils/ApiUtils.js

@@ -0,0 +1,20 @@
+export class ApiUtils {
+  constructor(page) {
+    this.page = page;
+  }
+
+  async swapApiRequestUrl(urlToSwap, newUrl) {
+    await this.page.route(urlToSwap, async (route, request) => {
+      const requestUrl = request.url();
+      const apiEndpoint = requestUrl.substring(requestUrl.lastIndexOf('/'));
+
+      await route.continue({
+        url: newUrl + apiEndpoint,
+      });
+    });
+  }
+
+  async unroute(url) {
+    await this.page.unroute(url);
+  }
+}

tests/utils/DomainUtils.js

@@ -0,0 +1,43 @@
+import { toASCII } from 'punycode-esm';
+
+export class DomainUtils {
+  static punyEncode(domain) {
+    if (typeof domain !== 'string') {
+      throw new Error('domain must be a string');
+    }
+
+    return toASCII(domain);
+  }
+
+  static extractFromUrl(url) {
+    if (typeof url !== 'string') {
+      throw new Error('Url must be a string');
+    }
+
+    const domainRegex = /^(?:https?:\/\/)?(?:www\.)?([^/?#]+)/;
+    const match = url.match(domainRegex);
+
+    return match ? match[1] : '';
+  }
+
+  static domainPipe(...fns) {
+    return function (x) {
+      return fns.reduce((result, nextFn) => nextFn(result), x);
+    };
+  }
+
+  static punyDecode(encodedDomain) {
+    if (typeof domain !== 'string') {
+      throw new Error('domain must be a string');
+    }
+
+    return toUnicode(encodedDomain);
+  }
+
+  static isDomainValid(domain) {
+    const domainRegex =
+      /^(?!:\/\/)([a-zA-Z0-9-_]+\.)*[a-zA-Z0-9][a-zA-Z0-9-_]+\.[a-zA-Z]{2,}$/;
+
+    return domainRegex.test(domain);
+  }
+}

tests/view-objects/HomeView.js

@@ -0,0 +1,16 @@
+export class HomeView {
+  constructor(page) {
+    this.page = page;
+    this.submitButton = page.getByRole('button', { name: 'Accio!' });
+    this.searchForm = page.getByPlaceholder('Type a valid domain...');
+  }
+
+  async navigateToHome() {
+    await this.page.goto('https://domain-lookup.nikola-nenovski.info/');
+  }
+
+  async submitDomain(domain) {
+    await this.searchForm.fill(domain);
+    await this.submitButton.click();
+  }
+}