feat: e2e tests

apps/e2e/src/plugins.spec.ts

@@ -1,11 +1,52 @@
-import testingPlugin from './plugins/create-frame-text-rect';
 import { Agent } from './utils/agent';
+import testingPlugin from './plugins/create-frame-text-rect';
+import flex from './plugins/create-flexlayout';
+import grid from './plugins/create-gridlayout';
+import group from './plugins/group';
+import insertSvg from './plugins/insert-svg';
+import pluginData from './plugins/plugin-data';
+import componentLibrary from './plugins/component-library';
 
 describe('Plugins', () => {
   it('create frame - text - rectable', async () => {
     const agent = await Agent();
     const result = await agent.runCode(testingPlugin.toString());
+    expect(result).toMatchSnapshot();
+  });
 
+  it('create flex layout', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(flex.toString());
+    expect(result).toMatchSnapshot();
+  });
+
+  it('create grid layout', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(grid.toString());
+    expect(result).toMatchSnapshot();
+  });
+
+  it('group and ungroup', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(group.toString());
+    expect(result).toMatchSnapshot();
+  });
+
+  it('insert svg', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(insertSvg.toString());
+    expect(result).toMatchSnapshot();
+  });
+
+  it('plugin data', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(pluginData.toString());
+    expect(result).toMatchSnapshot();
+  });
+
+  it('component library', async () => {
+    const agent = await Agent();
+    const result = await agent.runCode(componentLibrary.toString());
     expect(result).toMatchSnapshot();
   });
 });

apps/e2e/src/plugins/component-library.ts

@@ -0,0 +1,7 @@
+export default function () {
+  const rectangle = penpot.createRectangle();
+  const shape = penpot.getPage()?.getShapeById(rectangle.id);
+  if (shape) {
+    penpot.library.local.createComponent(shape);
+  }
+}

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

@@ -0,0 +1,23 @@
+export default function () {
+  function createFlexLayout(): void {
+    const frame = penpot.createFrame();
+    frame.horizontalSizing = 'auto';
+    frame.verticalSizing = 'auto';
+
+    const flex = frame.addFlexLayout();
+
+    flex.dir = 'column';
+    flex.wrap = 'wrap';
+    flex.alignItems = 'center';
+    flex.justifyContent = 'center';
+    flex.verticalPadding = 5;
+    flex.horizontalPadding = 5;
+    flex.horizontalSizing = 'fill';
+    flex.verticalSizing = 'fill';
+
+    frame.appendChild(penpot.createRectangle());
+    frame.appendChild(penpot.createEllipse());
+  }
+
+  createFlexLayout();
+}

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

@@ -0,0 +1,25 @@
+export default function () {
+  function createGridLayout(): void {
+    const frame = penpot.createFrame();
+
+    const grid = frame.addGridLayout();
+
+    grid.addRow('flex', 1);
+    grid.addRow('flex', 1);
+    grid.addColumn('flex', 1);
+    grid.addColumn('flex', 1);
+
+    grid.alignItems = 'center';
+    grid.justifyItems = 'start';
+    grid.justifyContent = 'space-between';
+    grid.alignContent = 'stretch';
+    grid.rowGap = 10;
+    grid.columnGap = 10;
+    grid.verticalPadding = 5;
+    grid.horizontalPadding = 5;
+    grid.horizontalSizing = 'auto';
+    grid.verticalSizing = 'auto';
+  }
+
+  createGridLayout();
+}

apps/e2e/src/plugins/group.ts

@@ -0,0 +1,25 @@
+export default function () {
+  function group() {
+    const selected = penpot.selection;
+
+    if (selected.length && !penpot.utils.types.isGroup(selected[0])) {
+      return penpot.group(selected);
+    }
+  }
+
+  function ungroup() {
+    const selected = penpot.selection;
+
+    if (selected.length && penpot.utils.types.isGroup(selected[0])) {
+      return penpot.ungroup(selected[0]);
+    }
+  }
+
+  const rectangle = penpot.createRectangle();
+  const rectangle2 = penpot.createRectangle();
+
+  penpot.selection = [rectangle, rectangle2];
+
+  group();
+  ungroup();
+}

apps/e2e/src/plugins/insert-svg.ts

@@ -0,0 +1,21 @@
+export default function () {
+  function insertSvg(svg: string) {
+    const icon = penpot.createShapeFromSvg(svg);
+
+    if (icon) {
+      icon.name = 'Test icon';
+      icon.x = penpot.viewport.center.x;
+      icon.y = penpot.viewport.center.y;
+    }
+
+    return icon;
+  }
+
+  const svg = `
+  <svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
+    <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
+    Sorry, your browser does not support inline SVG.
+  </svg>`;
+
+  insertSvg(svg);
+}

apps/e2e/src/plugins/plugin-data.ts

@@ -0,0 +1,6 @@
+export default function () {
+  const rectangle = penpot.createRectangle();
+
+  rectangle?.setPluginData('testData', 'test');
+  return rectangle?.getPluginData('testData');
+}

apps/e2e/src/utils/agent.ts

@@ -1,12 +1,14 @@
 import puppeteer from 'puppeteer';
 import { PenpotApi } from './api';
 import { getFileUrl } from './get-file-url';
+import { idObjectToArray } from './clean-id';
 
 interface Shape {
   ':id': string;
   ':frame-id'?: string;
   ':parent-id'?: string;
   ':shapes'?: string[];
+  ':layout-grid-cells'?: string[];
 }
 
 function replaceIds(shapes: Shape[]) {
@@ -31,6 +33,13 @@ function replaceIds(shapes: Shape[]) {
           return shapeId === id ? newId : shapeId;
         });
       }
+
+      if (node[':layout-grid-cells']) {
+        node[':layout-grid-cells'] = idObjectToArray(
+          node[':layout-grid-cells'],
+          newId
+        );
+      }
     }
   }
 

apps/e2e/src/utils/clean-id.ts

@@ -1,3 +1,10 @@
 export function cleanId(id: string) {
   return id.replace('~u', '');
 }
+
+export function idObjectToArray(obj: Record<string, any>, newId: string) {
+  return Object.values(obj).map((item) => {
+    item[':id'] = newId;
+    return item;
+  });
+}