✨ Add visual testing to viewer

frontend/playwright/ui/pages/ViewerPage.js

@@ -27,6 +27,26 @@ export class ViewerPage extends BaseWebSocketPage {
     );
   }
 
+  async setupFileWithSingleBoard() {
+    await this.mockRPC(/get\-view\-only\-bundle\?/, "viewer/get-view-only-bundle-single-board.json");
+    await this.mockRPC("get-comment-threads?file-id=*", "workspace/get-comment-threads-empty.json");
+    await this.mockRPC(
+      "get-file-fragment?file-id=*&fragment-id=*",
+      "viewer/get-file-fragment-single-board.json",
+    );
+  };
+
+  async setupFileWithComments() {
+    await this.mockRPC(/get\-view\-only\-bundle\?/, "viewer/get-view-only-bundle-single-board.json");
+    await this.mockRPC("get-comment-threads?file-id=*", "workspace/get-comment-threads-not-empty.json");
+    await this.mockRPC(
+      "get-file-fragment?file-id=*&fragment-id=*",
+      "viewer/get-file-fragment-single-board.json",
+    );
+    await this.mockRPC("get-comments?thread-id=*", "workspace/get-thread-comments.json");
+    await this.mockRPC("update-comment-thread-status", "workspace/update-comment-thread-status.json");
+  };
+
   #ws = null;
 
   constructor(page) {
@@ -56,5 +76,11 @@ export class ViewerPage extends BaseWebSocketPage {
     .filter({ hasText: number.toString() })
     .click(clickOptions);
   }
+
+  async showCode(clickOptions = {}) {
+    await this.page
+      .getByRole("button", { name: 'Inspect (G I)' })
+      .click(clickOptions);
+  }
 }
 

frontend/playwright/ui/specs/viewer-comments.spec.js

@@ -8,21 +8,11 @@ test.beforeEach(async ({ page }) => {
 const singleBoardFileId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb1";
 const singleBoardPageId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb2";
 
-const setupFileWithSingleBoard = async (viewer) => {
-  await viewer.mockRPC(/get\-view\-only\-bundle\?/, "viewer/get-view-only-bundle-single-board.json");
-  await viewer.mockRPC("get-comment-threads?file-id=*", "workspace/get-comment-threads-not-empty.json");
-  await viewer.mockRPC(
-    "get-file-fragment?file-id=*&fragment-id=*",
-    "viewer/get-file-fragment-single-board.json",
-  );
-  await viewer.mockRPC("get-comments?thread-id=*", "workspace/get-thread-comments.json");
-  await viewer.mockRPC("update-comment-thread-status", "workspace/update-comment-thread-status.json");
-};
 
 test("Comment is shown with scroll and valid position", async ({ page }) => {
   const viewer = new ViewerPage(page);
   await viewer.setupLoggedInUser();
-  await setupFileWithSingleBoard(viewer);
+  await viewer.setupFileWithComments();
 
   await viewer.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
   await viewer.showComments();

frontend/playwright/ui/specs/viewer-header.spec.js

@@ -8,15 +8,6 @@ test.beforeEach(async ({ page }) => {
 const singleBoardFileId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb1";
 const singleBoardPageId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb2";
 
-const setupFileWithSingleBoard = async (viewer) => {
-  await viewer.mockRPC(/get\-view\-only\-bundle\?/, "viewer/get-view-only-bundle-single-board.json");
-  await viewer.mockRPC("get-comment-threads?file-id=*", "workspace/get-comment-threads-empty.json");
-  await viewer.mockRPC(
-    "get-file-fragment?file-id=*&fragment-id=*",
-    "viewer/get-file-fragment-single-board.json",
-  );
-};
-
 test("Clips link area of the logo", async ({ page }) => {
   const viewerPage = new ViewerPage(page);
   await viewerPage.setupLoggedInUser();
@@ -37,7 +28,7 @@ test("Clips link area of the logo", async ({ page }) => {
 test("Updates URL with zoom type", async ({ page }) => {
   const viewer = new ViewerPage(page);
   await viewer.setupLoggedInUser();
-  await setupFileWithSingleBoard(viewer);
+  await viewer.setupFileWithSingleBoard(viewer);
 
   await viewer.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
 

frontend/playwright/ui/visual-specs/visual-dashboard.spec.js

@@ -379,7 +379,7 @@ test("User invite people to the team", async ({ page }) => {
 
   await expect(page.getByText("Invite with the role")).toBeVisible();
 
-  await page.getByPlaceholder('Emails, comma separated').fill("test5@mail.com");
+  await page.getByPlaceholder("Emails, comma separated").fill("test5@mail.com");
 
   await expect(page.getByText("Send invitation")).not.toBeDisabled();
 

frontend/playwright/ui/visual-specs/visual-viewer.spec.js

@@ -0,0 +1,117 @@
+import { test, expect } from "@playwright/test";
+import { ViewerPage } from "../pages/ViewerPage";
+
+test.beforeEach(async ({ page }) => {
+  await ViewerPage.init(page);
+
+});
+
+const singleBoardFileId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb1";
+const singleBoardPageId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb2";
+
+test("User goes to an empty Viewer", async ({ page }) => {
+  const viewerPage = new ViewerPage(page);
+  await viewerPage.setupLoggedInUser();
+  await viewerPage.setupEmptyFile();
+
+  await viewerPage.goToViewer();
+
+  await expect(viewerPage.page.getByTestId("penpot-logo-link")).toBeVisible();
+  await expect(viewerPage.page).toHaveScreenshot();
+});
+
+test("User goes to the Viewer", async ({ page }) => {
+  const viewerPage = new ViewerPage(page);
+  await viewerPage.setupLoggedInUser();
+  await viewerPage.setupFileWithSingleBoard();
+
+  await viewerPage.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
+
+  await expect(viewerPage.page.getByTestId("penpot-logo-link")).toBeVisible();
+  await expect(viewerPage.page).toHaveScreenshot();
+});
+
+test("User goes to the Viewer and opens zoom modal", async ({ page }) => {
+  const viewerPage = new ViewerPage(page);
+  await viewerPage.setupLoggedInUser();
+  await viewerPage.setupFileWithSingleBoard();
+
+  await viewerPage.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
+
+  await viewerPage.page.getByTitle("Zoom").click();
+
+  await expect(viewerPage.page.getByTestId("penpot-logo-link")).toBeVisible();
+  await expect(viewerPage.page).toHaveScreenshot();
+});
+
+test("User goes to the Viewer Comments", async ({ page }) => {
+  const viewerPage = new ViewerPage(page);
+  await viewerPage.setupLoggedInUser();
+  await viewerPage.setupFileWithComments();
+
+  await viewerPage.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
+
+  await viewerPage.showComments();
+  await viewerPage.showCommentsThread(1);
+  await expect(viewerPage.page.getByRole("textbox", { name: "Reply" })).toBeVisible();
+
+  await expect(viewerPage.page).toHaveScreenshot();
+});
+
+test("User opens Viewer comment list", async ({ page }) => {
+  const viewerPage = new ViewerPage(page);
+  await viewerPage.setupLoggedInUser();
+  await viewerPage.setupFileWithComments();
+
+  await viewerPage.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
+
+  await viewerPage.showComments();
+  await viewerPage.page.getByTestId("viewer-comments-dropdown").click();
+
+  await viewerPage.page.getByText("Show comments list").click();
+
+  await expect(viewerPage.page.getByRole("button", { name: "Show all comments" })).toBeVisible();
+  await expect(viewerPage.page).toHaveScreenshot();
+});
+
+test("User goes to the Viewer Inspect code", async ({ page }) => {
+  const viewerPage = new ViewerPage(page);
+  await viewerPage.setupLoggedInUser();
+  await viewerPage.setupFileWithComments();
+
+  await viewerPage.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
+
+  await viewerPage.showCode();
+
+  await expect(viewerPage.page.getByText("Size and position")).toBeVisible();
+
+  await expect(viewerPage.page).toHaveScreenshot();
+});
+
+test("User goes to the Viewer Inspect code, code tab", async ({ page }) => {
+  const viewerPage = new ViewerPage(page);
+  await viewerPage.setupLoggedInUser();
+  await viewerPage.setupFileWithComments();
+
+  await viewerPage.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
+
+  await viewerPage.showCode();
+  await viewerPage.page.getByTestId("code").click();
+
+  await expect(viewerPage.page.getByRole("button", { name: "Copy all code" })).toBeVisible();
+
+  await expect(viewerPage.page).toHaveScreenshot();
+});
+
+test("User opens Share modal", async ({ page }) => {
+  const viewerPage = new ViewerPage(page);
+  await viewerPage.setupLoggedInUser();
+  await viewerPage.setupFileWithSingleBoard();
+
+  await viewerPage.goToViewer({ fileId: singleBoardFileId, pageId: singleBoardPageId });
+
+  await viewerPage.page.getByRole("button", { name: "Share" }).click();
+
+  await expect(viewerPage.page.getByRole("button", { name: "Get link" })).toBeVisible();
+  await expect(viewerPage.page).toHaveScreenshot();
+});

frontend/src/app/main/ui/viewer/comments.cljs

@@ -65,6 +65,7 @@
              (st/emit! (dcm/update-options {:show-sidebar? (not mode)})))))]
 
     [:div {:class (stl/css :view-options)
+           :data-testid "viewer-comments-dropdown"
            :on-click toggle-dropdown}
      [:span {:class (stl/css :dropdown-title)} (tr "labels.comments")]
      [:span {:class (stl/css :icon-dropdown)} i/arrow]