test: added comments and ruler guides tests

apps/e2e/src/__snapshots__/plugins.spec.ts.snap

@@ -1,5 +1,79 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Plugins > comments 1`] = `
+[
+  {
+    "fills": [
+      {
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
+      },
+    ],
+    "flipX": null,
+    "flipY": null,
+    "frameId": "1",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "1",
+    "name": "Root Frame",
+    "parentId": "1",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
+    },
+    "shapes": [],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
+  },
+]
+`;
+
 exports[`Plugins > component library 1`] = `
 [
   {
@@ -2007,6 +2081,80 @@ exports[`Plugins > plugin data 1`] = `
 ]
 `;
 
+exports[`Plugins > ruler guides 1`] = `
+[
+  {
+    "fills": [
+      {
+        "fillColor": "#FFFFFF",
+        "fillOpacity": 1,
+      },
+    ],
+    "flipX": null,
+    "flipY": null,
+    "frameId": "1",
+    "height": 0.01,
+    "hideFillOnExport": false,
+    "id": "1",
+    "name": "Root Frame",
+    "parentId": "1",
+    "points": [
+      {
+        "x": 0,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0,
+      },
+      {
+        "x": 0.01,
+        "y": 0.01,
+      },
+      {
+        "x": 0,
+        "y": 0.01,
+      },
+    ],
+    "proportion": 1,
+    "proportionLock": false,
+    "rotation": 0,
+    "selrect": {
+      "height": 0.01,
+      "width": 0.01,
+      "x": 0,
+      "x1": 0,
+      "x2": 0.01,
+      "y": 0,
+      "y1": 0,
+      "y2": 0.01,
+    },
+    "shapes": [],
+    "strokes": [],
+    "transform": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "transformInverse": {
+      "a": 1,
+      "b": 0,
+      "c": 0,
+      "d": 1,
+      "e": 0,
+      "f": 0,
+    },
+    "type": "frame",
+    "width": 0.01,
+    "x": 0,
+    "y": 0,
+  },
+]
+`;
+
 exports[`Plugins > text and textrange 1`] = `
 [
   {

apps/e2e/src/plugins.spec.ts

@@ -2,10 +2,12 @@ import componentLibrary from './plugins/component-library';
 import testingPlugin from './plugins/create-board-text-rect';
 import flex from './plugins/create-flexlayout';
 import grid from './plugins/create-gridlayout';
+import rulerGuides from './plugins/create-ruler-guides';
 import createText from './plugins/create-text';
 import group from './plugins/group';
 import insertSvg from './plugins/insert-svg';
 import pluginData from './plugins/plugin-data';
+import comments from './plugins/create-comments';
 import { Agent } from './utils/agent';
 
 describe('Plugins', () => {
@@ -70,4 +72,21 @@ describe('Plugins', () => {
     });
     expect(result).toMatchSnapshot();
   });
+
+  it('ruler guides', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(rulerGuides.toString(), {
+      screenshot: 'create-ruler-guides',
+    });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('comments', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(comments.toString(), {
+      screenshot: 'create-comments',
+      avoidSavedStatus: true,
+    });
+    expect(result).toMatchSnapshot();
+  });
 });

apps/e2e/src/plugins/create-comments.ts

@@ -0,0 +1,40 @@
+export default function () {
+  async function createComment() {
+    const page = penpot.getPage();
+
+    if (page) {
+      await page.addCommentThread('Hello world!', {
+        x: penpot.viewport.center.x,
+        y: penpot.viewport.center.y,
+      });
+    }
+  }
+
+  async function replyComment() {
+    const page = penpot.getPage();
+
+    if (page) {
+      const comments = await page.findCommentThreads({
+        onlyYours: true,
+        showResolved: false,
+      });
+      await comments[0].reply('This is a reply.');
+    }
+  }
+
+  async function deleteComment() {
+    const page = penpot.getPage();
+
+    if (page) {
+      const commentThreads = await page.findCommentThreads({
+        onlyYours: true,
+        showResolved: false,
+      });
+      await page.removeCommentThread(commentThreads[0]);
+    }
+  }
+
+  createComment();
+  replyComment();
+  deleteComment();
+}

apps/e2e/src/plugins/create-ruler-guides.ts

@@ -0,0 +1,21 @@
+export default function () {
+  function createRulerGuides(): void {
+    const page = penpot.getPage();
+
+    if (page) {
+      page.addRulerGuide('horizontal', penpot.viewport.center.x);
+      page.addRulerGuide('vertical', penpot.viewport.center.y);
+    }
+  }
+
+  function removeRulerGuides(): void {
+    const page = penpot.getPage();
+
+    if (page) {
+      page.removeRulerGuide(page.rulerGuides[0]);
+    }
+  }
+
+  createRulerGuides();
+  removeRulerGuides();
+}

apps/e2e/src/utils/agent.ts

@@ -93,9 +93,10 @@ export async function Agent() {
   return {
     async runCode(
       code: string,
-      options: { screenshot?: string; autoFinish?: boolean } = {
+      options: { screenshot?: string; autoFinish?: boolean, avoidSavedStatus?: boolean, } = {
         screenshot: '',
         autoFinish: true,
+        avoidSavedStatus: false
       }
     ) {
       const autoFinish = options.autoFinish ?? true;
@@ -113,15 +114,17 @@ export async function Agent() {
           permissions: ['content:read', 'content:write'],
         });
       }, code);
-
-      console.log('Waiting for save status...');
-      await page.waitForSelector(
-        '.main_ui_workspace_right_header__saved-status',
-        {
-          timeout: 10000,
-        }
-      );
-      console.log('Save status found.');
+
+      if (!options.avoidSavedStatus) {
+        console.log('Waiting for save status...');
+        await page.waitForSelector(
+          '.main_ui_workspace_right_header__saved-status',
+          {
+            timeout: 10000,
+          }
+        );
+        console.log('Save status found.');
+      }
 
       if (options.screenshot && screenshotsEnable) {
         console.log('Taking screenshot:', options.screenshot);