diff --git a/frontend/src/app/plugins/register.cljs b/frontend/src/app/plugins/register.cljs index 1bf1a02f33..d9bb7763ac 100644 --- a/frontend/src/app/plugins/register.cljs +++ b/frontend/src/app/plugins/register.cljs @@ -126,6 +126,6 @@ (defn check-permission [plugin-id permission] - (or (= plugin-id "TEST") + (or (= plugin-id "00000000-0000-0000-0000-000000000000") (let [{:keys [permissions]} (dm/get-in @registry [:data plugin-id])] (contains? permissions permission)))) diff --git a/frontend/test/frontend_tests/plugins/context_shapes_test.cljs b/frontend/test/frontend_tests/plugins/context_shapes_test.cljs index 501a602c75..94fe2756d8 100644 --- a/frontend/test/frontend_tests/plugins/context_shapes_test.cljs +++ b/frontend/test/frontend_tests/plugins/context_shapes_test.cljs @@ -18,7 +18,7 @@ (let [;; ==== Setup store (ths/setup-store (cthf/sample-file :file1 :page-label :page1)) - ^js context (api/create-context "TEST") + ^js context (api/create-context "00000000-0000-0000-0000-000000000000") _ (set! st/state store) diff --git a/plugins/apps/e2e/eslint.config.js b/plugins/apps/e2e/eslint.config.js index e41f553526..67368f88b6 100644 --- a/plugins/apps/e2e/eslint.config.js +++ b/plugins/apps/e2e/eslint.config.js @@ -28,5 +28,5 @@ export default [ files: ['**/*.js', '**/*.jsx'], rules: {}, }, - { ignores: ['vite.config.ts'] }, + { ignores: ['vite.config.ts', 'vitest.setup.ts'] }, ]; diff --git a/plugins/apps/e2e/src/__snapshots__/plugins.spec.ts.snap b/plugins/apps/e2e/src/__snapshots__/plugins.spec.ts.snap index ca5f4161b6..a8abde20db 100644 --- a/plugins/apps/e2e/src/__snapshots__/plugins.spec.ts.snap +++ b/plugins/apps/e2e/src/__snapshots__/plugins.spec.ts.snap @@ -37,6 +37,10 @@ exports[`Plugins > comments 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -111,6 +115,10 @@ exports[`Plugins > component library 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -123,7 +131,7 @@ exports[`Plugins > component library 1`] = ` "y2": 0.01, }, "shapes": [ - "2", + "3", ], "strokes": [], "transform": { @@ -148,6 +156,8 @@ exports[`Plugins > component library 1`] = ` "y": 0, }, { + "constraintsH": "scale", + "constraintsV": "scale", "fills": [ { "fillColor": "#B1B2B5", @@ -156,40 +166,42 @@ exports[`Plugins > component library 1`] = ` ], "flipX": null, "flipY": null, - "frameId": "1", + "frameId": "3", "height": 100, "id": "2", "name": "Rectangle", - "parentId": "1", + "parentId": "3", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 784, + "x": 742, "y": 540, }, { - "x": 784, + "x": 742, "y": 640, }, { - "x": 684, + "x": 642, "y": 640, }, ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, - "rx": 0, - "ry": 0, "selrect": { "height": 100, "width": 100, - "x": 684, - "x1": 684, - "x2": 784, + "x": 642, + "x1": 642, + "x2": 742, "y": 540, "y1": 540, "y2": 640, @@ -213,7 +225,83 @@ exports[`Plugins > component library 1`] = ` }, "type": "rect", "width": 100, - "x": 684, + "x": 642, + "y": 540, + }, + { + "componentFile": "37adad8a-41e4-809c-8007-90cdca4d4a47", + "componentId": "bddbbfd1-950b-8023-8007-90cdce84074b", + "componentRoot": true, + "fills": [], + "flipX": null, + "flipY": null, + "frameId": "1", + "height": 100, + "hideFillOnExport": false, + "hideInViewer": true, + "id": "3", + "mainInstance": true, + "name": "Rectangle", + "parentId": "1", + "points": [ + { + "x": 642, + "y": 540, + }, + { + "x": 742, + "y": 540, + }, + { + "x": 742, + "y": 640, + }, + { + "x": 642, + "y": 640, + }, + ], + "proportion": 1, + "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, + "rotation": 0, + "selrect": { + "height": 100, + "width": 100, + "x": 642, + "x1": 642, + "x2": 742, + "y": 540, + "y1": 540, + "y2": 640, + }, + "shapes": [ + "2", + ], + "showContent": true, + "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": 100, + "x": 642, "y": 540, }, ] @@ -256,6 +344,10 @@ exports[`Plugins > create board - text - rectable 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -311,33 +403,35 @@ exports[`Plugins > create board - text - rectable 1`] = ` "parentId": "1", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 984, + "x": 942, "y": 540, }, { - "x": 984, + "x": 942, "y": 840, }, { - "x": 684, + "x": 642, "y": 840, }, ], "proportion": 1, "proportionLock": false, + "r1": 8, + "r2": 8, + "r3": 8, + "r4": 8, "rotation": 0, - "rx": 8, - "ry": 8, "selrect": { "height": 300, "width": 300, - "x": 684, - "x1": 684, - "x2": 984, + "x": 642, + "x1": 642, + "x2": 942, "y": 540, "y1": 540, "y2": 840, @@ -364,7 +458,7 @@ exports[`Plugins > create board - text - rectable 1`] = ` }, "type": "frame", "width": 300, - "x": 684, + "x": 642, "y": 540, }, { @@ -394,9 +488,8 @@ exports[`Plugins > create board - text - rectable 1`] = ` "text": "Hello from board", "textAlign": "left", "textDecoration": "none", + "textDirection": "ltr", "textTransform": "none", - "typographyRefFile": null, - "typographyRefId": null, }, ], "fills": [ @@ -415,10 +508,9 @@ exports[`Plugins > create board - text - rectable 1`] = ` "lineHeight": "1.2", "textAlign": "left", "textDecoration": "none", + "textDirection": "ltr", "textTransform": "none", "type": "paragraph", - "typographyRefFile": null, - "typographyRefId": null, }, ], "type": "paragraph-set", @@ -468,7 +560,7 @@ exports[`Plugins > create board - text - rectable 1`] = ` "height": 18, "letterSpacing": "normal", "text": "Hello from board", - "textDecoration": "none solid rgb(0, 0, 0)", + "textDecoration": "none", "textTransform": "none", "width": 99.234375, "x": 10, @@ -526,39 +618,41 @@ exports[`Plugins > create board - text - rectable 1`] = ` "name": "Rectangle", "parentId": "1", "pluginData": { - "TEST": { + "00000000000000000000000000000000": { "customKey": "customValue", }, }, "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 884, + "x": 842, "y": 540, }, { - "x": 884, + "x": 842, "y": 740, }, { - "x": 684, + "x": 642, "y": 740, }, ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, - "rx": 0, - "ry": 0, "selrect": { "height": 200, "width": 200, - "x": 684, - "x1": 684, - "x2": 884, + "x": 642, + "x1": 642, + "x2": 842, "y": 540, "y1": 540, "y2": 740, @@ -582,7 +676,7 @@ exports[`Plugins > create board - text - rectable 1`] = ` }, "type": "rect", "width": 200, - "x": 684, + "x": 642, "y": 540, }, { @@ -610,9 +704,8 @@ exports[`Plugins > create board - text - rectable 1`] = ` "text": "Hello from plugin", "textAlign": "left", "textDecoration": "none", + "textDirection": "ltr", "textTransform": "none", - "typographyRefFile": null, - "typographyRefId": null, }, ], "fills": [ @@ -631,10 +724,9 @@ exports[`Plugins > create board - text - rectable 1`] = ` "lineHeight": "1.2", "textAlign": "left", "textDecoration": "none", + "textDirection": "ltr", "textTransform": "none", "type": "paragraph", - "typographyRefFile": null, - "typographyRefId": null, }, ], "type": "paragraph-set", @@ -652,19 +744,19 @@ exports[`Plugins > create board - text - rectable 1`] = ` "parentId": "1", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 786, + "x": 744, "y": 540, }, { - "x": 786, + "x": 744, "y": 557, }, { - "x": 684, + "x": 642, "y": 557, }, ], @@ -684,10 +776,10 @@ exports[`Plugins > create board - text - rectable 1`] = ` "height": 18, "letterSpacing": "normal", "text": "Hello from plugin", - "textDecoration": "none solid rgb(0, 0, 0)", + "textDecoration": "none", "textTransform": "none", "width": 101.53125, - "x": 684, + "x": 642, "x1": 0, "x2": 101.53125, "y": 557, @@ -699,9 +791,9 @@ exports[`Plugins > create board - text - rectable 1`] = ` "selrect": { "height": 17, "width": 102, - "x": 684, - "x1": 684, - "x2": 786, + "x": 642, + "x1": 642, + "x2": 744, "y": 540, "y1": 540, "y2": 557, @@ -724,7 +816,7 @@ exports[`Plugins > create board - text - rectable 1`] = ` }, "type": "text", "width": 102, - "x": 684, + "x": 642, "y": 540, }, ] @@ -767,6 +859,10 @@ exports[`Plugins > create flex layout 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -813,19 +909,18 @@ exports[`Plugins > create flex layout 1`] = ` "flipX": null, "flipY": null, "frameId": "1", - "height": 110, + "height": 210, "hideFillOnExport": false, "id": "2", "layout": "flex", "layoutAlignContent": "stretch", "layoutAlignItems": "center", - "layoutFlexDir": "row", + "layoutFlexDir": "column", "layoutGap": { "columnGap": 0, "rowGap": 0, }, "layoutGapType": "multiple", - "layoutGridDir": "column", "layoutItemHSizing": "auto", "layoutItemVSizing": "auto", "layoutJustifyContent": "center", @@ -836,43 +931,47 @@ exports[`Plugins > create flex layout 1`] = ` "p4": 5, }, "layoutPaddingType": "simple", - "layoutWrapType": "nowrap", + "layoutWrapType": "wrap", "name": "Board", "parentId": "1", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 894, + "x": 752, "y": 540, }, { - "x": 894, - "y": 650, + "x": 752, + "y": 750, }, { - "x": 684, - "y": 650, + "x": 642, + "y": 750, }, ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { - "height": 110, - "width": 210, - "x": 684, - "x1": 684, - "x2": 894, + "height": 210, + "width": 110, + "x": 642, + "x1": 642, + "x2": 752, "y": 540, "y1": 540, - "y2": 650, + "y2": 750, }, "shapes": [ - "4", "3", + "4", ], "strokes": [], "transform": { @@ -892,8 +991,8 @@ exports[`Plugins > create flex layout 1`] = ` "f": 0, }, "type": "frame", - "width": 210, - "x": 684, + "width": 110, + "x": 642, "y": 540, }, { @@ -914,36 +1013,38 @@ exports[`Plugins > create flex layout 1`] = ` "parentId": "2", "points": [ { - "x": 689, - "y": 545, - }, - { - "x": 789, - "y": 545, - }, - { - "x": 789, + "x": 647, "y": 645, }, { - "x": 689, + "x": 747, "y": 645, }, + { + "x": 747, + "y": 745, + }, + { + "x": 647, + "y": 745, + }, ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, - "rx": 0, - "ry": 0, "selrect": { "height": 100, "width": 100, - "x": 689, - "x1": 689, - "x2": 789, - "y": 545, - "y1": 545, - "y2": 645, + "x": 647, + "x1": 647, + "x2": 747, + "y": 645, + "y1": 645, + "y2": 745, }, "strokes": [], "transform": { @@ -964,8 +1065,8 @@ exports[`Plugins > create flex layout 1`] = ` }, "type": "rect", "width": 100, - "x": 689, - "y": 545, + "x": 647, + "y": 645, }, { "constraintsH": "left", @@ -985,19 +1086,19 @@ exports[`Plugins > create flex layout 1`] = ` "parentId": "2", "points": [ { - "x": 789, + "x": 647, "y": 545, }, { - "x": 889, + "x": 747, "y": 545, }, { - "x": 889, + "x": 747, "y": 645, }, { - "x": 789, + "x": 647, "y": 645, }, ], @@ -1007,9 +1108,9 @@ exports[`Plugins > create flex layout 1`] = ` "selrect": { "height": 100, "width": 100, - "x": 789, - "x1": 789, - "x2": 889, + "x": 647, + "x1": 647, + "x2": 747, "y": 545, "y1": 545, "y2": 645, @@ -1033,7 +1134,7 @@ exports[`Plugins > create flex layout 1`] = ` }, "type": "circle", "width": 100, - "x": 789, + "x": 647, "y": 545, }, ] @@ -1076,6 +1177,10 @@ exports[`Plugins > create grid layout 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -1213,31 +1318,35 @@ exports[`Plugins > create grid layout 1`] = ` "parentId": "1", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 784, + "x": 742, "y": 540, }, { - "x": 784, + "x": 742, "y": 640, }, { - "x": 684, + "x": 642, "y": 640, }, ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 100, "width": 100, - "x": 684, - "x1": 684, - "x2": 784, + "x": 642, + "x1": 642, + "x2": 742, "y": 540, "y1": 540, "y2": 640, @@ -1262,7 +1371,7 @@ exports[`Plugins > create grid layout 1`] = ` }, "type": "frame", "width": 100, - "x": 684, + "x": 642, "y": 540, }, ] @@ -1305,6 +1414,10 @@ exports[`Plugins > group and ungroup 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -1357,33 +1470,35 @@ exports[`Plugins > group and ungroup 1`] = ` "parentId": "4", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 784, + "x": 742, "y": 540, }, { - "x": 784, + "x": 742, "y": 640, }, { - "x": 684, + "x": 642, "y": 640, }, ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, - "rx": 0, - "ry": 0, "selrect": { "height": 100, "width": 100, - "x": 684, - "x1": 684, - "x2": 784, + "x": 642, + "x1": 642, + "x2": 742, "y": 540, "y1": 540, "y2": 640, @@ -1407,7 +1522,7 @@ exports[`Plugins > group and ungroup 1`] = ` }, "type": "rect", "width": 100, - "x": 684, + "x": 642, "y": 540, }, { @@ -1426,33 +1541,35 @@ exports[`Plugins > group and ungroup 1`] = ` "parentId": "4", "points": [ { - "x": 784, + "x": 742, "y": 640, }, { - "x": 884, + "x": 842, "y": 640, }, { - "x": 884, + "x": 842, "y": 740, }, { - "x": 784, + "x": 742, "y": 740, }, ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, - "rx": 0, - "ry": 0, "selrect": { "height": 100, "width": 100, - "x": 784, - "x1": 784, - "x2": 884, + "x": 742, + "x1": 742, + "x2": 842, "y": 640, "y1": 640, "y2": 740, @@ -1476,7 +1593,7 @@ exports[`Plugins > group and ungroup 1`] = ` }, "type": "rect", "width": 100, - "x": 784, + "x": 742, "y": 640, }, { @@ -1491,19 +1608,19 @@ exports[`Plugins > group and ungroup 1`] = ` "parentId": "1", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 884, + "x": 842, "y": 540, }, { - "x": 884, + "x": 842, "y": 740, }, { - "x": 684, + "x": 642, "y": 740, }, ], @@ -1513,9 +1630,9 @@ exports[`Plugins > group and ungroup 1`] = ` "selrect": { "height": 200, "width": 200, - "x": 684, - "x1": 684, - "x2": 884, + "x": 642, + "x1": 642, + "x2": 842, "y": 540, "y1": 540, "y2": 740, @@ -1543,7 +1660,7 @@ exports[`Plugins > group and ungroup 1`] = ` }, "type": "group", "width": 200, - "x": 684, + "x": 642, "y": 540, }, ] @@ -1586,6 +1703,10 @@ exports[`Plugins > insert svg 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -1633,19 +1754,19 @@ exports[`Plugins > insert svg 1`] = ` "parentId": "1", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 984, + "x": 942, "y": 540, }, { - "x": 984, + "x": 942, "y": 670, }, { - "x": 684, + "x": 642, "y": 670, }, ], @@ -1655,9 +1776,9 @@ exports[`Plugins > insert svg 1`] = ` "selrect": { "height": 130, "width": 300, - "x": 684, - "x1": 684, - "x2": 984, + "x": 642, + "x1": 642, + "x2": 942, "y": 540, "y1": 540, "y2": 670, @@ -1672,6 +1793,7 @@ exports[`Plugins > insert svg 1`] = ` "height": "130", "width": "300", }, + "svgDefs": {}, "transform": { "a": 1, "b": 0, @@ -1690,7 +1812,7 @@ exports[`Plugins > insert svg 1`] = ` }, "type": "group", "width": 300, - "x": 684, + "x": 642, "y": 540, }, { @@ -1705,33 +1827,35 @@ exports[`Plugins > insert svg 1`] = ` "parentId": "2", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 984, + "x": 942, "y": 540, }, { - "x": 984, + "x": 942, "y": 670, }, { - "x": 684, + "x": 642, "y": 670, }, ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, - "rx": 0, - "ry": 0, "selrect": { "height": 130, "width": 300, - "x": 684, - "x1": 684, - "x2": 984, + "x": 642, + "x1": 642, + "x2": 942, "y": 540, "y1": 540, "y2": 670, @@ -1770,7 +1894,7 @@ exports[`Plugins > insert svg 1`] = ` }, "type": "rect", "width": 300, - "x": 684, + "x": 642, "y": 540, }, { @@ -1788,33 +1912,35 @@ exports[`Plugins > insert svg 1`] = ` "parentId": "2", "points": [ { - "x": 694, + "x": 652, "y": 550, }, { - "x": 894, + "x": 852, "y": 550, }, { - "x": 894, + "x": 852, "y": 650, }, { - "x": 694, + "x": 652, "y": 650, }, ], "proportion": 1, "proportionLock": false, + "r1": 20, + "r2": 20, + "r3": 20, + "r4": 20, "rotation": 0, - "rx": 20, - "ry": 20, "selrect": { "height": 100, "width": 200, - "x": 694, - "x1": 694, - "x2": 894, + "x": 652, + "x1": 652, + "x2": 852, "y": 550, "y1": 550, "y2": 650, @@ -1850,7 +1976,7 @@ exports[`Plugins > insert svg 1`] = ` }, "type": "rect", "width": 200, - "x": 694, + "x": 652, "y": 550, }, { @@ -1865,19 +1991,19 @@ exports[`Plugins > insert svg 1`] = ` "parentId": "2", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 984, + "x": 942, "y": 540, }, { - "x": 984, + "x": 942, "y": 670, }, { - "x": 684, + "x": 642, "y": 670, }, ], @@ -1887,9 +2013,9 @@ exports[`Plugins > insert svg 1`] = ` "selrect": { "height": 130, "width": 300, - "x": 684, - "x1": 684, - "x2": 984, + "x": 642, + "x1": 642, + "x2": 942, "y": 540, "y1": 540, "y2": 670, @@ -1925,7 +2051,7 @@ exports[`Plugins > insert svg 1`] = ` }, "type": "svg-raw", "width": 300, - "x": 684, + "x": 642, "y": 540, }, ] @@ -1968,6 +2094,10 @@ exports[`Plugins > plugin data 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -2019,7 +2149,7 @@ exports[`Plugins > plugin data 1`] = ` "name": "Rectangle", "parentId": "1", "pluginData": { - "TEST": { + "00000000000000000000000000000000": { "testData": "test", }, }, @@ -2043,9 +2173,11 @@ exports[`Plugins > plugin data 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, - "rx": 0, - "ry": 0, "selrect": { "height": 100, "width": 100, @@ -2118,6 +2250,10 @@ exports[`Plugins > ruler guides 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -2192,6 +2328,10 @@ exports[`Plugins > text and textrange 1`] = ` ], "proportion": 1, "proportionLock": false, + "r1": 0, + "r2": 0, + "r3": 0, + "r4": 0, "rotation": 0, "selrect": { "height": 0.01, @@ -2238,7 +2378,7 @@ exports[`Plugins > text and textrange 1`] = ` { "fills": [ { - "fillColor": "#ff6fe0", + "fillColor": "#000000", "fillOpacity": 1, }, ], @@ -2253,9 +2393,8 @@ exports[`Plugins > text and textrange 1`] = ` "text": "Hello", "textAlign": "left", "textDecoration": "underline", + "textDirection": "ltr", "textTransform": "uppercase", - "typographyRefFile": null, - "typographyRefId": null, }, { "fills": [ @@ -2275,9 +2414,8 @@ exports[`Plugins > text and textrange 1`] = ` "text": " World!", "textAlign": "left", "textDecoration": "underline", + "textDirection": "ltr", "textTransform": "uppercase", - "typographyRefFile": null, - "typographyRefId": null, }, ], "fills": [ @@ -2296,10 +2434,9 @@ exports[`Plugins > text and textrange 1`] = ` "lineHeight": "1.2", "textAlign": "left", "textDecoration": "underline", + "textDirection": "ltr", "textTransform": "uppercase", "type": "paragraph", - "typographyRefFile": null, - "typographyRefId": null, }, ], "type": "paragraph-set", @@ -2311,90 +2448,38 @@ exports[`Plugins > text and textrange 1`] = ` "flipY": null, "frameId": "1", "growType": "auto-width", - "height": 48, + "height": 1, "id": "2", "name": "Text", "parentId": "1", "points": [ { - "x": 684, + "x": 642, "y": 540, }, { - "x": 898, + "x": 643, "y": 540, }, { - "x": 898, - "y": 588, + "x": 643, + "y": 541, }, { - "x": 684, - "y": 588, - }, - ], - "positionData": [ - { - "direction": "ltr", - "fills": [ - { - "fillColor": "#ff6fe0", - "fillOpacity": 1, - }, - ], - "fontFamily": ""Work Sans"", - "fontSize": "40px", - "fontStyle": "italic", - "fontWeight": "500", - "height": 47, - "letterSpacing": "normal", - "text": "Hello", - "textDecoration": "underline solid rgb(255, 111, 224)", - "textTransform": "uppercase", - "width": 129.03125, - "x": 684, - "x1": 0, - "x2": 129.03125, - "y": 587, - "y1": 0, - "y2": 47, - }, - { - "direction": "ltr", - "fills": [ - { - "fillColor": "#000000", - "fillOpacity": 1, - }, - ], - "fontFamily": ""Work Sans"", - "fontSize": "20px", - "fontStyle": "italic", - "fontWeight": "500", - "height": 24, - "letterSpacing": "normal", - "text": " World!", - "textDecoration": "underline solid rgb(0, 0, 0)", - "textTransform": "uppercase", - "width": 84.375, - "x": 813.03125, - "x1": 129.03125, - "x2": 213.40625, - "y": 582, - "y1": 18, - "y2": 42, + "x": 642, + "y": 541, }, ], "rotation": 0, "selrect": { - "height": 48, - "width": 214, - "x": 684, - "x1": 684, - "x2": 898, + "height": 1, + "width": 1, + "x": 642, + "x1": 642, + "x2": 643, "y": 540, "y1": 540, - "y2": 588, + "y2": 541, }, "transform": { "a": 1, @@ -2413,8 +2498,8 @@ exports[`Plugins > text and textrange 1`] = ` "f": 0, }, "type": "text", - "width": 214, - "x": 684, + "width": 1, + "x": 642, "y": 540, }, ] diff --git a/plugins/apps/e2e/src/plugins.spec.ts b/plugins/apps/e2e/src/plugins.spec.ts index 2246e31a1f..ca34e3e430 100644 --- a/plugins/apps/e2e/src/plugins.spec.ts +++ b/plugins/apps/e2e/src/plugins.spec.ts @@ -11,7 +11,7 @@ import comments from './plugins/create-comments'; import { Agent } from './utils/agent'; describe('Plugins', () => { - it.only('create board - text - rectable', async () => { + it('create board - text - rectable', async () => { const agent = await Agent(); const result = await agent.runCode(testingPlugin.toString(), { screenshot: 'create-board-text-rect', @@ -29,6 +29,7 @@ describe('Plugins', () => { it('create grid layout', async () => { const agent = await Agent(); + const result = await agent.runCode(grid.toString(), { screenshot: 'create-gridlayout', }); @@ -83,9 +84,9 @@ describe('Plugins', () => { it('comments', async () => { const agent = await Agent(); + console.log(comments.toString()); const result = await agent.runCode(comments.toString(), { screenshot: 'create-comments', - avoidSavedStatus: true, }); expect(result).toMatchSnapshot(); }); diff --git a/plugins/apps/e2e/src/utils/agent.ts b/plugins/apps/e2e/src/utils/agent.ts index 1100640a5c..c6a528c944 100644 --- a/plugins/apps/e2e/src/utils/agent.ts +++ b/plugins/apps/e2e/src/utils/agent.ts @@ -1,4 +1,4 @@ -import puppeteer from 'puppeteer'; +import puppeteer, { ConsoleMessage } from 'puppeteer'; import { PenpotApi } from './api'; import { getFileUrl } from './get-file-url'; import { idObjectToArray } from './clean-id'; @@ -56,7 +56,10 @@ export async function Agent() { console.log('File URL:', fileUrl); console.log('Launching browser...'); - const browser = await puppeteer.launch({args: ['--ignore-certificate-errors']}); + const browser = await puppeteer.launch({ + headless: process.env['E2E_HEADLESS'] !== 'false', + args: ['--ignore-certificate-errors'], + }); const page = await browser.newPage(); await page.setViewport({ width: 1920, height: 1080 }); @@ -88,8 +91,11 @@ export async function Agent() { const finish = async () => { console.log('Deleting file and closing browser...'); - await penpotApi.deleteFile(file['~:id']); - await browser.close(); + // TODO + // await penpotApi.deleteFile(file['~:id']); + if (process.env['E2E_CLOSE_BROWSER'] !== 'false') { + await browser.close(); + } console.log('Clean up done.'); }; @@ -99,11 +105,9 @@ export async function Agent() { options: { screenshot?: string; autoFinish?: boolean; - avoidSavedStatus?: boolean; } = { screenshot: '', autoFinish: true, - avoidSavedStatus: false, }, ) { const autoFinish = options.autoFinish ?? true; @@ -112,28 +116,27 @@ export async function Agent() { await page.evaluate((testingPlugin) => { // eslint-disable-next-line @typescript-eslint/no-explicit-any (globalThis as any).ɵloadPlugin({ - pluginId: 'TEST', + pluginId: '00000000-0000-0000-0000-000000000000', name: 'Test', code: ` (${testingPlugin})(); `, icon: '', description: '', - permissions: ['content:read', 'content:write'], + permissions: [ + 'content:read', + 'content:write', + 'library:read', + 'library:write', + 'user:read', + 'comment:read', + 'comment:write', + 'allow:downloads', + 'allow:localstorage', + ], }); }, code); - 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); await page.screenshot({ @@ -141,30 +144,55 @@ export async function Agent() { }); } - return new Promise((resolve) => { - page.once('console', async (msg) => { + const result = await new Promise((resolve) => { + const handleConsole = async (msg: ConsoleMessage) => { const args = (await Promise.all( msg.args().map((arg) => arg.jsonValue()), - )) as Record[]; + )) as unknown[]; - const result = Object.values(args[1]) as Shape[]; + const type = args[0]; + const data = args[1]; + + if (type !== 'objects' || !data || typeof data !== 'object') { + console.log('Invalid console message, waiting for valid one...'); + page.once('console', handleConsole); + return; + } + + const result = Object.values(data) as Shape[]; replaceIds(result); console.log('IDs replaced in result.'); resolve(result); + }; - if (autoFinish) { - console.log('Auto finish enabled. Cleaning up...'); - finish(); - } - }); + page.once('console', handleConsole); console.log('Evaluating debug.dump_objects...'); page.evaluate(` debug.dump_objects(); `); }); + + await page.waitForNetworkIdle({ idleTime: 2000 }); + + // Wait for the update-file API call to complete + if (process.env['E2E_WAIT_API_RESPONSE'] === 'true') { + await page.waitForResponse( + (response) => + response.url().includes('api/main/methods/update-file') && + response.status() === 200, + { timeout: 10000 }, + ); + } + + if (autoFinish) { + console.log('Auto finish enabled. Cleaning up...'); + await finish(); + } + + return result; }, finish, }; diff --git a/plugins/apps/e2e/src/utils/api.ts b/plugins/apps/e2e/src/utils/api.ts index 7ffb3b4f2d..deeb1a4a95 100644 --- a/plugins/apps/e2e/src/utils/api.ts +++ b/plugins/apps/e2e/src/utils/api.ts @@ -1,5 +1,4 @@ import { FileRpc } from '../models/file-rpc.model'; - const apiUrl = 'https://localhost:3449'; export async function PenpotApi() { @@ -8,8 +7,8 @@ export async function PenpotApi() { } const body = JSON.stringify({ - 'email': process.env['E2E_LOGIN_EMAIL'], - 'password': process.env['E2E_LOGIN_PASSWORD'], + email: process.env['E2E_LOGIN_EMAIL'], + password: process.env['E2E_LOGIN_PASSWORD'], }); const resultLoginRequest = await fetch( @@ -18,25 +17,18 @@ export async function PenpotApi() { credentials: 'include', method: 'POST', headers: { - 'Content-Type': 'application/json' + 'Content-Type': 'application/json', }, - body: body + body: body, }, ); - console.log("AAAAAAAAAAAA", 1, apiUrl) - // console.log("AAAAAAAAAAAA", 2, resultLoginRequest); - - console.dir(resultLoginRequest.headers, {depth:20}); - console.log('Document Cookies:', window.document.cookie); - const loginData = await resultLoginRequest.json(); - const authToken = resultLoginRequest.headers - .get('set-cookie') - ?.split(';') - .at(0); + .getSetCookie() + .find((cookie: string) => cookie.startsWith('auth-token=')) + ?.split(';')[0]; if (!authToken) { throw new Error('Login failed'); @@ -62,6 +54,9 @@ export async function PenpotApi() { 'fdata/objects-map', 'fdata/pointer-map', 'fdata/shape-data-type', + 'fdata/path-data', + 'design-tokens/v1', + 'variants/v1', 'components/v2', 'styles/v2', 'layout/grid', @@ -72,7 +67,9 @@ export async function PenpotApi() { }, ); - return (await createFileRequest.json()) as FileRpc; + const fileData = (await createFileRequest.json()) as FileRpc; + console.log('File data received:', fileData); + return fileData; }, deleteFile: async (fileId: string) => { const deleteFileRequest = await fetch( diff --git a/plugins/apps/e2e/src/utils/get-file-url.ts b/plugins/apps/e2e/src/utils/get-file-url.ts index 20b7e0fc94..14de946934 100644 --- a/plugins/apps/e2e/src/utils/get-file-url.ts +++ b/plugins/apps/e2e/src/utils/get-file-url.ts @@ -6,5 +6,5 @@ export function getFileUrl(file: FileRpc) { const fileId = cleanId(file['~:id']); const pageId = cleanId(file['~:data']['~:pages'][0]); - return `http://localhost:3449/#/workspace/${projectId}/${fileId}?page-id=${pageId}`; + return `https://localhost:3449/#/workspace/${projectId}/${fileId}?page-id=${pageId}`; } diff --git a/plugins/apps/e2e/vite.config.ts b/plugins/apps/e2e/vite.config.ts index defb76d2a9..ae60487c66 100644 --- a/plugins/apps/e2e/vite.config.ts +++ b/plugins/apps/e2e/vite.config.ts @@ -7,13 +7,27 @@ export default defineConfig({ testTimeout: 20000, watch: false, globals: true, - environment: 'happy-dom', + environment: 'node', + environmentOptions: { + happyDOM: { + settings: { + disableCSSFileLoading: true, + disableJavaScriptFileLoading: true, + disableJavaScriptEvaluation: true, + enableFileSystemHttpRequests: false, + navigator: { + userAgent: + 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36', + }, + }, + }, + }, include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], reporters: ['default'], coverage: { reportsDirectory: '../coverage/e2e', provider: 'v8', }, - setupFiles: ['dotenv/config', 'vitest.setup.ts'] + setupFiles: ['dotenv/config', 'vitest.setup.ts'], }, }); diff --git a/plugins/apps/e2e/vitest.setup.ts b/plugins/apps/e2e/vitest.setup.ts index 79bc7c2e15..21f1320a90 100644 --- a/plugins/apps/e2e/vitest.setup.ts +++ b/plugins/apps/e2e/vitest.setup.ts @@ -1,3 +1 @@ -// import { vi } from 'vitest'; - -window.location.href = 'https://localhost:3449'; \ No newline at end of file +process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0'; diff --git a/plugins/docs/test-e2e.md b/plugins/docs/test-e2e.md index b92287a7bd..61f6c6fdc6 100644 --- a/plugins/docs/test-e2e.md +++ b/plugins/docs/test-e2e.md @@ -9,7 +9,10 @@ ```env E2E_LOGIN_EMAIL="test@penpot.app" E2E_LOGIN_PASSWORD="123123123" - E2E_SCREENSHOTS= "true" + E2E_SCREENSHOTS="true" # Enable/disable screenshots (default: false) + E2E_HEADLESS="false" # Run browser in headless mode (default: true) + E2E_CLOSE_BROWSER="true" # Close browser after tests (default: true) + E2E_WAIT_API_RESPONSE="false" # Wait for update-file API response (default: false) ``` 2. **Run E2E Tests** @@ -77,5 +80,5 @@ If you need to refresh all the snapshopts run the test with the update option: ```bash - pnpm run test:e2e -- --update + pnpm run test:e2e --update ``` diff --git a/plugins/libs/plugins-runtime/src/index.ts b/plugins/libs/plugins-runtime/src/index.ts index bc757d1578..2516cfb2f2 100644 --- a/plugins/libs/plugins-runtime/src/index.ts +++ b/plugins/libs/plugins-runtime/src/index.ts @@ -28,7 +28,9 @@ export const initPluginsRuntime = (contextBuilder: (id: string) => Context) => { try { console.log('%c[PLUGINS] Initialize runtime', 'color: #008d7c'); setContextBuilder(contextBuilder); - globalThisAny$.ɵcontext = contextBuilder('TEST'); + globalThisAny$.ɵcontext = contextBuilder( + '00000000-0000-0000-0000-000000000000', + ); globalThis.ɵloadPlugin = ɵloadPlugin; globalThis.ɵloadPluginByUrl = ɵloadPluginByUrl; globalThis.ɵunloadPlugin = ɵunloadPlugin;