Expand POM model

bryphe-coder · bryphe-coder · commit 7c568de4e1e3 · 2022-03-02T00:24:31.000Z
diff --git a/site/e2e/constants.ts b/site/e2e/constants.ts
@@ -2,4 +2,4 @@
 export const username = "admin"
 export const password = "password"
 export const organization = "acme-crop"
-export const email = "admin@coder.com"
+export const email = "admin@coder.com"
diff --git a/site/e2e/pom/BasePom.ts b/site/e2e/pom/BasePom.ts
@@ -0,0 +1,13 @@
+import { Page } from "@playwright/test"
+
+export abstract class BasePom {
+  abstract readonly url: string
+
+  protected page: Page
+  protected baseURL: string | undefined
+
+  constructor(baseURL: string | undefined, page: Page) {
+    this.page = page
+    this.baseURL = baseURL
+  }
+}
diff --git a/site/e2e/pom/ProjectsPage.ts b/site/e2e/pom/ProjectsPage.ts
@@ -0,0 +1,12 @@
+import { Page } from "@playwright/test"
+import { BasePom } from "./BasePom"
+
+export class ProjectsPage extends BasePom {
+  public get url(): string {
+    return this.baseURL + "/projects"
+  }
+
+  constructor(baseURL: string | undefined, page: Page) {
+    super(baseURL, page)
+  }
+}
diff --git a/site/e2e/pom/SignInPage.ts b/site/e2e/pom/SignInPage.ts
@@ -1,10 +1,13 @@
 import { Page } from "@playwright/test"
+import { BasePom } from "./BasePom"
 
-export class SignInPage {
-  private page: Page
+export class SignInPage extends BasePom {
+  public get url(): string {
+    return this.baseURL + "/login"
+  }
 
-  constructor(page: Page) {
-    this.page = page
+  constructor(baseURL: string | undefined, page: Page) {
+    super(baseURL, page)
   }
 
   async submitBuiltInAuthentication(email: string, password: string): Promise<void> {
diff --git a/site/e2e/tests/login.spec.ts b/site/e2e/tests/login.spec.ts
@@ -1,15 +1,17 @@
 import { test } from "@playwright/test"
 import { SignInPage } from "../pom"
 import { email, password } from "../constants"
+import ProjectPage from "../../pages/projects/[organization]/[project]"
 
-test("Login takes user to /projects", async ({ page, baseURL }) => {
+test("Login takes user to /projects", async ({ baseURL, page }) => {
   await page.goto(baseURL + "/", { waitUntil: "networkidle" })
 
   // Log-in with the default credentials we set up in the development server
-  const signInPage = new SignInPage(page)
+  const signInPage = new SignInPage(baseURL, page)
   await signInPage.submitBuiltInAuthentication(email, password)
 
-  await page.waitForNavigation({ url: baseURL + "/projects", waitUntil: "networkidle" })
+  const projectsPage = new ProjectPage(baseURL, page)
+  await page.waitForNavigation({ url: projectsPage.url, waitUntil: "networkidle" })
 
   await page.waitForSelector("text=Projects")
 })
