From 2e53747af78d7bda1d8a931b2df97c2f82826ac0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Trevor=20Mu=C3=B1oz?= <trevor.munoz@gmail.com>
Date: Thu, 11 Jul 2024 07:15:46 -0400
Subject: [PATCH] Add more initial basic Page Object Models and tests

---
 tests/pages/dialogues-page.ts | 15 ++++++++++++
 tests/pages/index.ts          |  5 ++++
 tests/pages/news-page.ts      | 15 ++++++++++++
 tests/pages/people-page.ts    | 15 ++++++++++++
 tests/pages/values-page.ts    | 15 ++++++++++++
 tests/top-level-pages.spec.ts | 45 +++++++++++++++++++++++++++++++++--
 6 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 tests/pages/dialogues-page.ts
 create mode 100644 tests/pages/index.ts
 create mode 100644 tests/pages/news-page.ts
 create mode 100644 tests/pages/people-page.ts
 create mode 100644 tests/pages/values-page.ts

diff --git a/tests/pages/dialogues-page.ts b/tests/pages/dialogues-page.ts
new file mode 100644
index 0000000000..5e19ac9e76
--- /dev/null
+++ b/tests/pages/dialogues-page.ts
@@ -0,0 +1,15 @@
+import type { Page, Locator } from "@playwright/test"
+
+export class DialoguesPage {
+  readonly page: Page
+  readonly visibleTitle: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.visibleTitle = page.locator("h1")
+  }
+
+  async goto() {
+    await this.page.goto("/digital-dialogues")
+  }
+}
diff --git a/tests/pages/index.ts b/tests/pages/index.ts
new file mode 100644
index 0000000000..1a55664b1f
--- /dev/null
+++ b/tests/pages/index.ts
@@ -0,0 +1,5 @@
+export { ResearchPage } from "./research-page"
+export { PeoplePage } from "./people-page"
+export { NewsPage } from "./news-page"
+export { DialoguesPage } from "./dialogues-page"
+export { ValuesPage } from "./values-page"
diff --git a/tests/pages/news-page.ts b/tests/pages/news-page.ts
new file mode 100644
index 0000000000..991cabf95e
--- /dev/null
+++ b/tests/pages/news-page.ts
@@ -0,0 +1,15 @@
+import type { Page, Locator } from "@playwright/test"
+
+export class NewsPage {
+  readonly page: Page
+  readonly visibleTitle: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.visibleTitle = page.locator("h1")
+  }
+
+  async goto() {
+    await this.page.goto("/news")
+  }
+}
diff --git a/tests/pages/people-page.ts b/tests/pages/people-page.ts
new file mode 100644
index 0000000000..c3cbceafba
--- /dev/null
+++ b/tests/pages/people-page.ts
@@ -0,0 +1,15 @@
+import type { Page, Locator } from "@playwright/test"
+
+export class PeoplePage {
+  readonly page: Page
+  readonly visibleTitle: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.visibleTitle = page.locator("h1")
+  }
+
+  async goto() {
+    await this.page.goto("/people")
+  }
+}
diff --git a/tests/pages/values-page.ts b/tests/pages/values-page.ts
new file mode 100644
index 0000000000..b7e13f8459
--- /dev/null
+++ b/tests/pages/values-page.ts
@@ -0,0 +1,15 @@
+import type { Page, Locator } from "@playwright/test"
+
+export class ValuesPage {
+  readonly page: Page
+  readonly visibleTitle: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.visibleTitle = page.locator("h1")
+  }
+
+  async goto() {
+    await this.page.goto("/values")
+  }
+}
diff --git a/tests/top-level-pages.spec.ts b/tests/top-level-pages.spec.ts
index c7f18e06ad..6b7fc7ea8e 100644
--- a/tests/top-level-pages.spec.ts
+++ b/tests/top-level-pages.spec.ts
@@ -1,9 +1,50 @@
-import { ResearchPage } from "./pages/research-page"
+import {
+  ResearchPage,
+  NewsPage,
+  PeoplePage,
+  DialoguesPage,
+  ValuesPage,
+} from "./pages"
 import { expect, test } from "@playwright/test"
 
-test("Research page has correct h1 title", async ({ page }) => {
+test("Research page has correct title and h1", async ({ page }) => {
   const researchPage = new ResearchPage(page)
   await researchPage.goto()
   await expect(researchPage.page).toHaveTitle("MITH Research | MITH")
   await expect(researchPage.visibleTitle).toHaveText("Research")
 })
+
+test("People page has correct title and h1", async ({ page }) => {
+  const peoplePage = new PeoplePage(page)
+  await peoplePage.goto()
+  await expect(peoplePage.page).toHaveTitle("People | MITH")
+  // Playwright's `toBeVisible` method checks if the element is in the DOM, not if it is hidden by CSS, as here
+  // so we expect this assertion to pass
+  await expect(peoplePage.visibleTitle).toBeVisible()
+
+  const classNames = await peoplePage.visibleTitle.evaluate(
+    node => node.className,
+  )
+  expect(classNames).toContain("text-hidden")
+})
+
+test("News page has correct title and h1", async ({ page }) => {
+  const newsPage = new NewsPage(page)
+  await newsPage.goto()
+  await expect(newsPage.page).toHaveTitle("MITH News | MITH")
+  await expect(newsPage.visibleTitle).toHaveText("News")
+})
+
+test("Dialogues page has correct title and h1", async ({ page }) => {
+  const dialoguesPage = new DialoguesPage(page)
+  await dialoguesPage.goto()
+  await expect(dialoguesPage.page).toHaveTitle("MITH Digital Dialogues | MITH")
+  await expect(dialoguesPage.visibleTitle).toHaveText("Digital Dialogues")
+})
+
+test("Values page has correct title and h1", async ({ page }) => {
+  const valuesPage = new ValuesPage(page)
+  await valuesPage.goto()
+  await expect(valuesPage.page).toHaveTitle("Our Values | MITH")
+  await expect(valuesPage.visibleTitle).toHaveText("Our Values")
+})