E2e

tests/constants.js

@@ -1,5 +1,21 @@
 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 WORKER_URL_WILDCARD =
+  'https://domainlookup.nicknenovski.workers.dev/*';
 export const E2E_WORKER_URL =
   'https://domainlookup-e2e.nicknenovski.workers.dev';
+
+export const HISTORY_ARRAY = [
+  {
+    domain: 'google.com',
+    searchedOn: 1740243839975,
+  },
+  {
+    domain: 'example.com',
+    searchedOn: 1740243827808,
+  },
+  {
+    domain: 'nikola-nenovski.info',
+    searchedOn: 1740243804740,
+  },
+];

tests/home.spec.ts

@@ -3,6 +3,7 @@ import { HomeView } from './view-objects/HomeView';
 import { DomainUtils } from './utils/DomainUtils';
 import {
   E2E_WORKER_URL,
+  HISTORY_ARRAY,
   HOME_TITLE,
   HOME_URL,
   WORKER_URL_WILDCARD,
@@ -75,3 +76,31 @@ test.describe('checks search form validations', () => {
     await page.unroute(WORKER_URL_WILDCARD);
   });
 });
+
+test.describe('checks history modal', () => {
+  test.beforeEach(async () => {
+    await homeView.populateHistory(HISTORY_ARRAY);
+    await homeView.toggleHistoryModal();
+  });
+
+  test('checks modal visibility', async ({ page }) => {
+    await expect(page.locator('#history_modal')).toHaveAttribute('open');
+  });
+
+  test('should close the history modal', async ({ page }) => {
+    await homeView.toggleHistoryModal();
+
+    await expect(page.locator('#history_modal')).not.toHaveAttribute('open');
+  });
+
+  test('checks table of domains', async ({ page }) => {
+    await expect(page.getByRole('table').locator('tr')).toHaveCount(4);
+  });
+
+  test('checks delete history button', async ({ page }) => {
+    const deleteBtn = page.getByRole('button', { name: 'history' });
+
+    await deleteBtn.click();
+    await expect(page.getByRole('table').locator('tr')).toHaveCount(1);
+  });
+});

tests/view-objects/HomeView.js

@@ -1,16 +1,45 @@
 export class HomeView {
+  /**
+   * @param {import("@playwright/test").Page} page
+   */
   constructor(page) {
     this.page = page;
     this.submitButton = page.getByRole('button', { name: 'Accio!' });
     this.searchForm = page.getByPlaceholder('Type a valid domain...');
   }
 
+  /**
+   * Navigates to the home page
+   */
   async navigateToHome() {
     await this.page.goto('https://domain-lookup.nikola-nenovski.info/');
   }
 
+  /**
+   * Fills in the search form and submits the domain
+   * @param {string} domain
+   */
   async submitDomain(domain) {
     await this.searchForm.fill(domain);
     await this.submitButton.click();
   }
+
+  /**
+   * Toggles the history modal by pressing Escape
+   */
+  async toggleHistoryModal() {
+    await this.page.locator('body').press('Escape');
+  }
+
+  /**
+   * Injects history array into localStorage
+   * @param {Array} data
+   */
+  async populateHistory(data) {
+    await this.page.evaluate(json => {
+      return window.localStorage.setItem('history', json);
+    }, JSON.stringify(data));
+
+    await this.page.reload();
+  }
 }