From 86f98eb536d18857b047fb9e03fd0d7f3615687b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20L=C3=B3pez?= Date: Mon, 23 Sep 2024 11:01:31 +0200 Subject: [PATCH] test: added comments and ruler guides tests --- .../src/__snapshots__/plugins.spec.ts.snap | 148 ++++++++++++++++++ apps/e2e/src/plugins.spec.ts | 19 +++ apps/e2e/src/plugins/create-comments.ts | 40 +++++ apps/e2e/src/plugins/create-ruler-guides.ts | 21 +++ apps/e2e/src/utils/agent.ts | 23 +-- 5 files changed, 241 insertions(+), 10 deletions(-) create mode 100644 apps/e2e/src/plugins/create-comments.ts create mode 100644 apps/e2e/src/plugins/create-ruler-guides.ts diff --git a/apps/e2e/src/__snapshots__/plugins.spec.ts.snap b/apps/e2e/src/__snapshots__/plugins.spec.ts.snap index ea39ba3..ca5f416 100644 --- a/apps/e2e/src/__snapshots__/plugins.spec.ts.snap +++ b/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`] = ` [ { diff --git a/apps/e2e/src/plugins.spec.ts b/apps/e2e/src/plugins.spec.ts index 979ac8e..79ff774 100644 --- a/apps/e2e/src/plugins.spec.ts +++ b/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(); + }); }); diff --git a/apps/e2e/src/plugins/create-comments.ts b/apps/e2e/src/plugins/create-comments.ts new file mode 100644 index 0000000..379ba7e --- /dev/null +++ b/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(); +} diff --git a/apps/e2e/src/plugins/create-ruler-guides.ts b/apps/e2e/src/plugins/create-ruler-guides.ts new file mode 100644 index 0000000..60d9bfa --- /dev/null +++ b/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(); +} diff --git a/apps/e2e/src/utils/agent.ts b/apps/e2e/src/utils/agent.ts index 83244d4..10c9371 100644 --- a/apps/e2e/src/utils/agent.ts +++ b/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);