test: rewrite test and provide expected assertions and pattern

tests/deposited-cycles.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+import { TemplatePage } from "./page-objects/template";
+
+const title = "deposited-cycles.tsx";
+const path = "/preview/notifications/deposited-cycles";
+
+test("should contains content", async ({ page }) => {
+  const template = await TemplatePage.init({ page, title, path });
+
+  await template.assertText({
+    text: "0.01 T Cycles have been deposited on your Satellite.",
+  });
+  await template.assertText({ text: "Module: Satellite (Hello)" });
+  await template.assertText({ text: "Amount: 0.01 T Cycles" });
+  await template.assertText({ text: "Time: September 7, 2022 at 10:58 AM" });
+
+  const url =
+    "https://console.juno.build/satellite/?s=ucnx3-aqaaa-aaaal-ab3ea-cai";
+
+  await template.assertLink({ url, text: "View your module" });
+  await template.assertLink({ url, text: url });
+});
+
+test("deposited-cycles layout", async ({ page }) => {
+  await TemplatePage.init({ page, title, path });
+
+  await expect(page).toHaveScreenshot(`deposited-cycles.png`, {
+    fullPage: true,
+  });
+});

tests/failed-deposit-cycles.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+import { TemplatePage } from "./page-objects/template";
+
+const title = "failed-deposit-cycles.tsx";
+const path = "/preview/notifications/failed-deposit-cycles";
+
+test("should contains content", async ({ page }) => {
+  const template = await TemplatePage.init({ page, title, path });
+
+  await template.assertText({
+    text: "An attempt to deposit cycles on your Satellite has failed!",
+  });
+  await template.assertText({ text: "Module: Satellite (Hello)" });
+  await template.assertText({ text: "Time: September 7, 2022 at 10:58 AM" });
+
+  const url =
+    "https://console.juno.build/satellite/?s=ucnx3-aqaaa-aaaal-ab3ea-cai";
+
+  await template.assertLink({ url, text: "View your module" });
+  await template.assertLink({ url, text: url });
+});
+
+test("deposited-cycles layout", async ({ page }) => {
+  await TemplatePage.init({ page, title, path });
+
+  await expect(page).toHaveScreenshot(`failed-deposit-cycles.png`, {
+    fullPage: true,
+  });
+});

tests/page-objects/template.ts

@@ -0,0 +1,42 @@
+import { expect, FrameLocator, Page } from "@playwright/test";
+
+export interface TemplatePageParams {
+  page: Page;
+  path: `/${string}`;
+  title: string;
+}
+
+export class TemplatePage {
+  private readonly page: Page;
+  private readonly frame: FrameLocator;
+
+  private constructor({
+    page,
+    frame,
+  }: Pick<TemplatePageParams, "page"> & { frame: FrameLocator }) {
+    this.page = page;
+    this.frame = frame;
+  }
+
+  static async init({
+    title,
+    path,
+    page,
+  }: TemplatePageParams): Promise<TemplatePage> {
+    await page.goto(path, { waitUntil: "domcontentloaded" });
+
+    const frame = page.frameLocator(`iframe[title="${title}"]`);
+
+    return new TemplatePage({ page, frame });
+  }
+
+  async assertText({ text }: { text: string }) {
+    await expect(this.frame.getByText(text, { exact: true })).toBeVisible();
+  }
+
+  async assertLink({ url, text }: { url: string; text: string }) {
+    await expect(
+      this.frame.locator(`a[href="${url}"]`, { hasText: text }),
+    ).toHaveCount(1);
+  }
+}