✨ Are more visual regression tests for wasm (#6702)

frontend/playwright/ui/render-wasm-specs/shapes.spec.js

@@ -30,7 +30,7 @@ test("Renders a file with solid, gradient and image fills", async ({
 }) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
-  await workspace.mockAsset(
+  await workspace.mockFileMediaAsset(
     [
       "1ebcea38-f1bf-8101-8006-4c8fd68e7c84",
       "1ebcea38-f1bf-8101-8006-4c8f579da49c",
@@ -51,7 +51,7 @@ test("Renders a file with solid, gradient and image fills", async ({
 test("Renders a file with strokes", async ({ page }) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
-  await workspace.mockAsset(
+  await workspace.mockFileMediaAsset(
     [
       "202c1104-9385-81d3-8006-5074e4682cac",
       "202c1104-9385-81d3-8006-5074c50339b6",
@@ -69,3 +69,47 @@ test("Renders a file with strokes", async ({ page }) => {
 
   await expect(workspace.canvas).toHaveScreenshot();
 });
+
+test("Renders a file with mutliple strokes", async ({ page }) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-multiple-strokes.json");
+
+  await workspace.goToWorkspace({
+    id: "c0939f58-37bc-805d-8006-51cc78297208",
+    pageId: "c0939f58-37bc-805d-8006-51cc78297209",
+  });
+  await workspace.waitForFirstRender();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});
+
+test("Renders a file with shapes with multiple fills", async ({ page }) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-multiple-fills.json");
+
+  await workspace.goToWorkspace({
+    id: "c0939f58-37bc-805d-8006-51cd3a51c255",
+    pageId: "c0939f58-37bc-805d-8006-51cd3a51c256",
+  });
+  await workspace.waitForFirstRender();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});
+
+// TODO: update the screenshots for this test once Taiga #11325 is fixed
+// https://tree.taiga.io/project/penpot/task/11325
+test("Renders shapes taking into account blend modes", async ({ page }) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-blend-modes.json");
+
+  await workspace.goToWorkspace({
+    id: "c0939f58-37bc-805d-8006-51cdf8e18e76",
+    pageId: "c0939f58-37bc-805d-8006-51cdf8e18e77",
+  });
+  await workspace.waitForFirstRender();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});

frontend/playwright/ui/render-wasm-specs/texts.spec.js

@@ -9,9 +9,7 @@ test.beforeEach(async ({ page }) => {
   ]);
 });
 
-test("Renders a file with texts", async ({
-  page,
-}) => {
+test("Renders a file with texts", async ({ page }) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("render-wasm/get-file-text.json");
@@ -24,9 +22,7 @@ test("Renders a file with texts", async ({
   await expect(workspace.canvas).toHaveScreenshot();
 });
 
-test("Updates a text font", async ({
-  page,
-}) => {
+test("Updates a text font", async ({ page }) => {
   const workspace = new WasmWorkspacePage(page);
   await workspace.setupEmptyFile();
   await workspace.mockGetFile("render-wasm/get-file-text.json");
@@ -42,4 +38,49 @@ test("Updates a text font", async ({
   const boldOption = fontStyle.getByText("bold").first();
   await boldOption.click();
   await expect(workspace.canvas).toHaveScreenshot();
-});
+});
+
+test("Renders a file with texts that use google fonts", async ({ page }) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-text-google-fonts.json");
+  await workspace.mockGoogleFont(
+    "ebgaramond",
+    "render-wasm/assets/ebgaramond.ttf",
+  );
+  await workspace.mockGoogleFont("firacode", "render-wasm/assets/firacode.ttf");
+
+  await workspace.goToWorkspace({
+    id: "434b0541-fa2f-802f-8006-5981e47bd732",
+    pageId: "434b0541-fa2f-802f-8006-5981e47bd733",
+  });
+  await workspace.waitForFirstRender();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});
+
+test("Renders a file with texts that use custom fonts", async ({ page }) => {
+  const workspace = new WasmWorkspacePage(page);
+  await workspace.setupEmptyFile();
+  await workspace.mockGetFile("render-wasm/get-file-text-custom-fonts.json");
+  await workspace.mockRPC(
+    "get-font-variants?team-id=*",
+    "render-wasm/get-font-variants-custom-fonts.json",
+  );
+  await workspace.mockAsset(
+    "2d1ffeb6-e70b-4027-bbcc-910248ba45f8",
+    "render-wasm/assets/mreaves.ttf",
+  );
+  await workspace.mockAsset(
+    "69e76833-0816-49fa-8c7b-4b97c71c6f1a",
+    "render-wasm/assets/nodesto-condensed.ttf",
+  );
+
+  await workspace.goToWorkspace({
+    id: "434b0541-fa2f-802f-8006-59827d964a9b",
+    pageId: "434b0541-fa2f-802f-8006-59827d964a9c",
+  });
+  await workspace.waitForFirstRender();
+
+  await expect(workspace.canvas).toHaveScreenshot();
+});