mirror of
https://github.com/penpot/penpot.git
synced 2025-02-13 10:38:13 -05:00
Merge pull request #4767 from penpot/ladybenko-ds-visual-tests-workspace-stg
📎 Add (temporary) visual regression tests for the Workspace
This commit is contained in:
Alejandro
GitHub
commit
5e7180b054
11 changed files with 914 additions and 7 deletions
3
frontend/.gitignore
vendored
3
frontend/.gitignore
vendored
|
|
@ -10,5 +10,4 @@ node_modules/
|
|||
/playwright-report/
|
||||
/blob-report/
|
||||
/playwright/.cache/
|
||||
visual-dashboard.spec.js-snapshots
|
||||
|
||||
/playwright/**/visual-specs/**/*.png
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"~:id": "~u015fda4f-caa6-8103-8004-862a9e4b4d4b",
|
||||
"~:file-id": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
|
||||
"~:created-at": "~m1718718436639",
|
||||
"~:content": {
|
||||
"~ue117f7f6-433c-807e-8004-862a38e1823d": {
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a38e1823d",
|
||||
"~:name": "Button",
|
||||
"~:path": "",
|
||||
"~:modified-at": "~m1718718335855",
|
||||
"~:main-instance-id": "~ue117f7f6-433c-807e-8004-862a38e0099a",
|
||||
"~:main-instance-page": "~u015fda4f-caa6-8103-8004-862a00ddbe94"
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862a51a90ef5": {
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a51a90ef5",
|
||||
"~:name": "Badge",
|
||||
"~:path": "",
|
||||
"~:modified-at": "~m1718718361245",
|
||||
"~:main-instance-id": "~ue117f7f6-433c-807e-8004-862a51a84a91",
|
||||
"~:main-instance-page": "~u015fda4f-caa6-8103-8004-862a00ddbe94"
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862a9b541a46": {
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a9b541a46",
|
||||
"~:name": "Avatar",
|
||||
"~:path": "",
|
||||
"~:modified-at": "~m1718718436652",
|
||||
"~:main-instance-id": "~ue117f7f6-433c-807e-8004-862a9b5374b6",
|
||||
"~:main-instance-page": "~u015fda4f-caa6-8103-8004-862a00ddbe94"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,630 @@
|
|||
{
|
||||
"~:id": "~u015fda4f-caa6-8103-8004-862a9e4ad279",
|
||||
"~:file-id": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
|
||||
"~:created-at": "~m1718718436639",
|
||||
"~:content": {
|
||||
"~:options": {},
|
||||
"~:objects": {
|
||||
"~u00000000-0000-0000-0000-000000000000": {
|
||||
"~#shape": {
|
||||
"~:y": 0,
|
||||
"~:hide-fill-on-export": false,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:name": "Root Frame",
|
||||
"~:width": 0.01,
|
||||
"~:type": "~:frame",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 0,
|
||||
"~:y": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 0.01,
|
||||
"~:y": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 0.01,
|
||||
"~:y": 0.01
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 0,
|
||||
"~:y": 0.01
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:strokes": [],
|
||||
"~:x": 0,
|
||||
"~:proportion": 1.0,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 0,
|
||||
"~:y": 0,
|
||||
"~:width": 0.01,
|
||||
"~:height": 0.01,
|
||||
"~:x1": 0,
|
||||
"~:y1": 0,
|
||||
"~:x2": 0.01,
|
||||
"~:y2": 0.01
|
||||
}
|
||||
},
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#FFFFFF",
|
||||
"~:fill-opacity": 1
|
||||
}
|
||||
],
|
||||
"~:flip-x": null,
|
||||
"~:height": 0.01,
|
||||
"~:flip-y": null,
|
||||
"~:shapes": [
|
||||
"~ue117f7f6-433c-807e-8004-862a38e0099a",
|
||||
"~ue117f7f6-433c-807e-8004-862a51a84a91",
|
||||
"~ue117f7f6-433c-807e-8004-862a9b5374b6"
|
||||
]
|
||||
}
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862a18bba46f": {
|
||||
"~#shape": {
|
||||
"~:y": 220,
|
||||
"~:rx": 0,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:grow-type": "~:fixed",
|
||||
"~:hide-in-viewer": false,
|
||||
"~:name": "Button",
|
||||
"~:width": 120,
|
||||
"~:type": "~:rect",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 663,
|
||||
"~:y": 220
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 783,
|
||||
"~:y": 220
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 783,
|
||||
"~:y": 274
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 663,
|
||||
"~:y": 274
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:constraints-v": "~:scale",
|
||||
"~:constraints-h": "~:scale",
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a18bba46f",
|
||||
"~:parent-id": "~ue117f7f6-433c-807e-8004-862a38e0099a",
|
||||
"~:frame-id": "~ue117f7f6-433c-807e-8004-862a38e0099a",
|
||||
"~:strokes": [],
|
||||
"~:x": 663,
|
||||
"~:proportion": 1,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 663,
|
||||
"~:y": 220,
|
||||
"~:width": 120,
|
||||
"~:height": 54,
|
||||
"~:x1": 663,
|
||||
"~:y1": 220,
|
||||
"~:x2": 783,
|
||||
"~:y2": 274
|
||||
}
|
||||
},
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#B1B2B5",
|
||||
"~:fill-opacity": 1
|
||||
}
|
||||
],
|
||||
"~:flip-x": null,
|
||||
"~:ry": 0,
|
||||
"~:height": 54,
|
||||
"~:flip-y": null
|
||||
}
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862a38e0099a": {
|
||||
"~#shape": {
|
||||
"~:y": 220,
|
||||
"~:hide-fill-on-export": false,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:hide-in-viewer": true,
|
||||
"~:name": "Button",
|
||||
"~:width": 120,
|
||||
"~:type": "~:frame",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 663,
|
||||
"~:y": 220
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 783,
|
||||
"~:y": 220
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 783,
|
||||
"~:y": 274
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 663,
|
||||
"~:y": 274
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:component-root": true,
|
||||
"~:show-content": true,
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a38e0099a",
|
||||
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:component-id": "~ue117f7f6-433c-807e-8004-862a38e1823d",
|
||||
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:strokes": [],
|
||||
"~:x": 663,
|
||||
"~:main-instance": true,
|
||||
"~:proportion": 1,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 663,
|
||||
"~:y": 220,
|
||||
"~:width": 120,
|
||||
"~:height": 54,
|
||||
"~:x1": 663,
|
||||
"~:y1": 220,
|
||||
"~:x2": 783,
|
||||
"~:y2": 274
|
||||
}
|
||||
},
|
||||
"~:fills": [],
|
||||
"~:flip-x": null,
|
||||
"~:height": 54,
|
||||
"~:component-file": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
|
||||
"~:flip-y": null,
|
||||
"~:shapes": [
|
||||
"~ue117f7f6-433c-807e-8004-862a18bba46f"
|
||||
]
|
||||
}
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862a40b7caca": {
|
||||
"~#shape": {
|
||||
"~:y": 188,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:grow-type": "~:fixed",
|
||||
"~:hide-in-viewer": false,
|
||||
"~:name": "Badge",
|
||||
"~:width": 61,
|
||||
"~:type": "~:circle",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 860,
|
||||
"~:y": 188
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 921,
|
||||
"~:y": 188
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 921,
|
||||
"~:y": 247
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 860,
|
||||
"~:y": 247
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:constraints-v": "~:scale",
|
||||
"~:constraints-h": "~:scale",
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a40b7caca",
|
||||
"~:parent-id": "~ue117f7f6-433c-807e-8004-862a51a84a91",
|
||||
"~:frame-id": "~ue117f7f6-433c-807e-8004-862a51a84a91",
|
||||
"~:strokes": [],
|
||||
"~:x": 860,
|
||||
"~:proportion": 1,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 860,
|
||||
"~:y": 188,
|
||||
"~:width": 61,
|
||||
"~:height": 59,
|
||||
"~:x1": 860,
|
||||
"~:y1": 188,
|
||||
"~:x2": 921,
|
||||
"~:y2": 247
|
||||
}
|
||||
},
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#7798ff",
|
||||
"~:fill-opacity": 1
|
||||
}
|
||||
],
|
||||
"~:flip-x": null,
|
||||
"~:height": 59,
|
||||
"~:flip-y": null
|
||||
}
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862a51a84a91": {
|
||||
"~#shape": {
|
||||
"~:y": 188,
|
||||
"~:hide-fill-on-export": false,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:hide-in-viewer": true,
|
||||
"~:name": "Badge",
|
||||
"~:width": 61,
|
||||
"~:type": "~:frame",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 860,
|
||||
"~:y": 188
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 921,
|
||||
"~:y": 188
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 921,
|
||||
"~:y": 247
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 860,
|
||||
"~:y": 247
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:component-root": true,
|
||||
"~:show-content": true,
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a51a84a91",
|
||||
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:component-id": "~ue117f7f6-433c-807e-8004-862a51a90ef5",
|
||||
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:strokes": [],
|
||||
"~:x": 860,
|
||||
"~:main-instance": true,
|
||||
"~:proportion": 1,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 860,
|
||||
"~:y": 188,
|
||||
"~:width": 61,
|
||||
"~:height": 59,
|
||||
"~:x1": 860,
|
||||
"~:y1": 188,
|
||||
"~:x2": 921,
|
||||
"~:y2": 247
|
||||
}
|
||||
},
|
||||
"~:fills": [],
|
||||
"~:flip-x": null,
|
||||
"~:height": 59,
|
||||
"~:component-file": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
|
||||
"~:flip-y": null,
|
||||
"~:shapes": [
|
||||
"~ue117f7f6-433c-807e-8004-862a40b7caca"
|
||||
]
|
||||
}
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862a8c166257": {
|
||||
"~#shape": {
|
||||
"~:y": 97,
|
||||
"~:rx": 0,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:grow-type": "~:fixed",
|
||||
"~:hide-in-viewer": false,
|
||||
"~:name": "Avatar",
|
||||
"~:width": 66,
|
||||
"~:type": "~:rect",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 554,
|
||||
"~:y": 97
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 620,
|
||||
"~:y": 97
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 620,
|
||||
"~:y": 163
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 554,
|
||||
"~:y": 163
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:constraints-v": "~:scale",
|
||||
"~:constraints-h": "~:scale",
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a8c166257",
|
||||
"~:parent-id": "~ue117f7f6-433c-807e-8004-862a9b5374b6",
|
||||
"~:frame-id": "~ue117f7f6-433c-807e-8004-862a9b5374b6",
|
||||
"~:strokes": [],
|
||||
"~:x": 554,
|
||||
"~:proportion": 1,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 554,
|
||||
"~:y": 97,
|
||||
"~:width": 66,
|
||||
"~:height": 66,
|
||||
"~:x1": 554,
|
||||
"~:y1": 97,
|
||||
"~:x2": 620,
|
||||
"~:y2": 163
|
||||
}
|
||||
},
|
||||
"~:fills": [
|
||||
{
|
||||
"~:fill-color": "#ff6ffc",
|
||||
"~:fill-opacity": 1
|
||||
}
|
||||
],
|
||||
"~:flip-x": null,
|
||||
"~:ry": 0,
|
||||
"~:height": 66,
|
||||
"~:flip-y": null
|
||||
}
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862a9b5374b6": {
|
||||
"~#shape": {
|
||||
"~:y": 97,
|
||||
"~:hide-fill-on-export": false,
|
||||
"~:transform": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:rotation": 0,
|
||||
"~:hide-in-viewer": true,
|
||||
"~:name": "Avatar",
|
||||
"~:width": 66,
|
||||
"~:type": "~:frame",
|
||||
"~:points": [
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 554,
|
||||
"~:y": 97
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 620,
|
||||
"~:y": 97
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 620,
|
||||
"~:y": 163
|
||||
}
|
||||
},
|
||||
{
|
||||
"~#point": {
|
||||
"~:x": 554,
|
||||
"~:y": 163
|
||||
}
|
||||
}
|
||||
],
|
||||
"~:component-root": true,
|
||||
"~:show-content": true,
|
||||
"~:proportion-lock": false,
|
||||
"~:transform-inverse": {
|
||||
"~#matrix": {
|
||||
"~:a": 1.0,
|
||||
"~:b": 0.0,
|
||||
"~:c": 0.0,
|
||||
"~:d": 1.0,
|
||||
"~:e": 0.0,
|
||||
"~:f": 0.0
|
||||
}
|
||||
},
|
||||
"~:id": "~ue117f7f6-433c-807e-8004-862a9b5374b6",
|
||||
"~:parent-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:component-id": "~ue117f7f6-433c-807e-8004-862a9b541a46",
|
||||
"~:frame-id": "~u00000000-0000-0000-0000-000000000000",
|
||||
"~:strokes": [],
|
||||
"~:x": 554,
|
||||
"~:main-instance": true,
|
||||
"~:proportion": 1,
|
||||
"~:selrect": {
|
||||
"~#rect": {
|
||||
"~:x": 554,
|
||||
"~:y": 97,
|
||||
"~:width": 66,
|
||||
"~:height": 66,
|
||||
"~:x1": 554,
|
||||
"~:y1": 97,
|
||||
"~:x2": 620,
|
||||
"~:y2": 163
|
||||
}
|
||||
},
|
||||
"~:fills": [],
|
||||
"~:flip-x": null,
|
||||
"~:height": 66,
|
||||
"~:component-file": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
|
||||
"~:flip-y": null,
|
||||
"~:shapes": [
|
||||
"~ue117f7f6-433c-807e-8004-862a8c166257"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"~:id": "~u015fda4f-caa6-8103-8004-862a00ddbe94",
|
||||
"~:name": "Page 1"
|
||||
}
|
||||
}
|
||||
105
frontend/playwright/data/assets/get-file-with-assets.json
Normal file
105
frontend/playwright/data/assets/get-file-with-assets.json
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
{
|
||||
"~:features":{
|
||||
"~#set":[
|
||||
"layout/grid",
|
||||
"styles/v2",
|
||||
"fdata/pointer-map",
|
||||
"fdata/objects-map",
|
||||
"components/v2",
|
||||
"fdata/shape-data-type"
|
||||
]
|
||||
},
|
||||
"~:permissions":{
|
||||
"~:type":"~:membership",
|
||||
"~:is-owner":true,
|
||||
"~:is-admin":true,
|
||||
"~:can-edit":true,
|
||||
"~:can-read":true,
|
||||
"~:is-logged":true
|
||||
},
|
||||
"~:has-media-trimmed":false,
|
||||
"~:comment-thread-seqn":0,
|
||||
"~:name":"Lorem ipsum",
|
||||
"~:revn":14,
|
||||
"~:modified-at":"~m1718718464651",
|
||||
"~:id":"~u015fda4f-caa6-8103-8004-862a00dd4f31",
|
||||
"~:is-shared":false,
|
||||
"~:version":49,
|
||||
"~:project-id":"~u0515a066-e303-8169-8004-73eb401b5d55",
|
||||
"~:created-at":"~m1718718275492",
|
||||
"~:data":{
|
||||
"~:colors":{
|
||||
"~ue117f7f6-433c-807e-8004-862aa7732f9c":{
|
||||
"~:path":"",
|
||||
"~:color":"#ff6ffc",
|
||||
"~:name":"Rosita",
|
||||
"~:modified-at":"~m1718718452317",
|
||||
"~:opacity":1,
|
||||
"~:id":"~ue117f7f6-433c-807e-8004-862aa7732f9c"
|
||||
},
|
||||
"~ue117f7f6-433c-807e-8004-862ab306fa2b":{
|
||||
"~:path":"",
|
||||
"~:color":"#7798ff",
|
||||
"~:name":"#7798ff",
|
||||
"~:modified-at":"~m1718718461420",
|
||||
"~:opacity":1,
|
||||
"~:id":"~ue117f7f6-433c-807e-8004-862ab306fa2b"
|
||||
}
|
||||
},
|
||||
"~:typographies":{
|
||||
"~ue117f7f6-433c-807e-8004-862ab6ae29d8":{
|
||||
"~:line-height":"1.2",
|
||||
"~:font-style":"normal",
|
||||
"~:text-transform":"none",
|
||||
"~:font-id":"sourcesanspro",
|
||||
"~:font-size":"14",
|
||||
"~:font-weight":"400",
|
||||
"~:name":"Source Sans Pro Regular",
|
||||
"~:modified-at":"~m1718718464655",
|
||||
"~:font-variant-id":"regular",
|
||||
"~:id":"~ue117f7f6-433c-807e-8004-862ab6ae29d8",
|
||||
"~:letter-spacing":"0",
|
||||
"~:font-family":"sourcesanspro"
|
||||
}
|
||||
},
|
||||
"~:pages":[
|
||||
"~u015fda4f-caa6-8103-8004-862a00ddbe94"
|
||||
],
|
||||
"~:components":{
|
||||
"~#penpot/pointer":[
|
||||
"~u015fda4f-caa6-8103-8004-862a9e4b4d4b",
|
||||
{
|
||||
"~:created-at":"~m1718718436653"
|
||||
}
|
||||
]
|
||||
},
|
||||
"~:id":"~u015fda4f-caa6-8103-8004-862a00dd4f31",
|
||||
"~:options":{
|
||||
"~:components-v2":true
|
||||
},
|
||||
"~:recent-colors":[
|
||||
{
|
||||
"~:color":"#b5b1b4",
|
||||
"~:opacity":1
|
||||
},
|
||||
{
|
||||
"~:color":"#ff6ffc",
|
||||
"~:opacity":1
|
||||
},
|
||||
{
|
||||
"~:color":"#7798ff",
|
||||
"~:opacity":1
|
||||
}
|
||||
],
|
||||
"~:pages-index":{
|
||||
"~u015fda4f-caa6-8103-8004-862a00ddbe94":{
|
||||
"~#penpot/pointer":[
|
||||
"~u015fda4f-caa6-8103-8004-862a9e4ad279",
|
||||
{
|
||||
"~:created-at":"~m1718718436653"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -43,13 +43,14 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||
this.presentUserListItems = page.getByTestId("active-users-list").getByAltText("Princesa Leia");
|
||||
this.viewport = page.getByTestId("viewport");
|
||||
this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`);
|
||||
this.toolbarOptions = page.getByTestId("toolbar-options");
|
||||
this.toolbarOptions = page.getByTestId("toolbar-options");
|
||||
this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
|
||||
this.toggleToolbarButton = page.getByRole("button", { name: "Toggle toolbar" });
|
||||
this.colorpicker = page.getByTestId("colorpicker");
|
||||
this.layers = page.getByTestId("layer-tree");
|
||||
this.palette = page.getByTestId("palette");
|
||||
this.sidebar = page.getByTestId("left-sidebar");
|
||||
this.rightSidebar = page.getByTestId("right-sidebar");
|
||||
this.selectionRect = page.getByTestId("workspace-selection-rect");
|
||||
this.horizontalScrollbar = page.getByTestId("horizontal-scrollbar");
|
||||
this.librariesModal = page.getByTestId("libraries-modal");
|
||||
|
|
@ -119,7 +120,7 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||
}
|
||||
|
||||
async moveSelectionToShape(name) {
|
||||
await this.page.locator('rect.viewport-selrect').hover();
|
||||
await this.page.locator("rect.viewport-selrect").hover();
|
||||
await this.page.mouse.down();
|
||||
await this.viewport.getByTestId(name).first().hover({ force: true });
|
||||
await this.page.mouse.up();
|
||||
|
|
@ -170,9 +171,7 @@ export class WorkspacePage extends BaseWebSocketPage {
|
|||
}
|
||||
|
||||
async clickColorPalette(clickOptions = {}) {
|
||||
await this.palette
|
||||
.getByRole("button", { name: "Color Palette (Alt+P)" })
|
||||
.click(clickOptions);
|
||||
await this.palette.getByRole("button", { name: "Color Palette (Alt+P)" }).click(clickOptions);
|
||||
}
|
||||
|
||||
async clickTogglePalettesVisibility(clickOptions = {}) {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 152 KiB |
124
frontend/playwright/ui/visual-specs/workspace.spec.js
Normal file
124
frontend/playwright/ui/visual-specs/workspace.spec.js
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
import { test, expect } from "@playwright/test";
|
||||
import { WorkspacePage } from "../pages/WorkspacePage";
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await WorkspacePage.init(page);
|
||||
});
|
||||
|
||||
const setupFileWithAssets = async (workspace) => {
|
||||
const fileId = "015fda4f-caa6-8103-8004-862a00dd4f31";
|
||||
const pageId = "015fda4f-caa6-8103-8004-862a00ddbe94";
|
||||
const fragments = {
|
||||
"015fda4f-caa6-8103-8004-862a9e4b4d4b": "assets/get-file-fragment-with-assets-components.json",
|
||||
"015fda4f-caa6-8103-8004-862a9e4ad279": "assets/get-file-fragmnet-with-assets-page.json",
|
||||
};
|
||||
|
||||
await workspace.setupEmptyFile();
|
||||
await workspace.mockRPC(/get\-file\?/, "assets/get-file-with-assets.json");
|
||||
|
||||
for (const [id, fixture] of Object.entries(fragments)) {
|
||||
await workspace.mockRPC(`get-file-fragment?file-id=*&fragment-id=${id}`, fixture);
|
||||
}
|
||||
|
||||
return { fileId, pageId };
|
||||
};
|
||||
|
||||
test("Shows the workspace correctly for a blank file", async ({ page }) => {
|
||||
const workspace = new WorkspacePage(page);
|
||||
await workspace.setupEmptyFile();
|
||||
|
||||
await workspace.goToWorkspace();
|
||||
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
});
|
||||
|
||||
test.describe("Design tab", () => {
|
||||
test("Shows the design tab when selecting a shape", async ({ page }) => {
|
||||
const workspace = new WorkspacePage(page);
|
||||
await workspace.setupEmptyFile();
|
||||
await workspace.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json");
|
||||
|
||||
await workspace.goToWorkspace({
|
||||
fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
|
||||
pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
|
||||
});
|
||||
|
||||
await workspace.clickLeafLayer("Rectangle");
|
||||
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
});
|
||||
|
||||
test("Shows expanded sections of the design tab", async ({ page }) => {
|
||||
const workspace = new WorkspacePage(page);
|
||||
await workspace.setupEmptyFile();
|
||||
await workspace.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json");
|
||||
|
||||
await workspace.goToWorkspace({
|
||||
fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
|
||||
pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
|
||||
});
|
||||
|
||||
await workspace.clickLeafLayer("Rectangle");
|
||||
await workspace.rightSidebar.getByTestId("add-stroke").click();
|
||||
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Assets tab", () => {
|
||||
test("Shows the libraries modal correctly", async ({ page }) => {
|
||||
const workspace = new WorkspacePage(page);
|
||||
await workspace.setupEmptyFile();
|
||||
await workspace.mockRPC("link-file-to-library", "workspace/link-file-to-library.json");
|
||||
await workspace.mockRPC(
|
||||
"get-team-shared-files?team-id=*",
|
||||
"workspace/get-team-shared-libraries-non-empty.json",
|
||||
);
|
||||
|
||||
await workspace.goToWorkspace();
|
||||
await workspace.clickAssets();
|
||||
await workspace.openLibrariesModal();
|
||||
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
|
||||
await workspace.clickLibrary("Testing library 1");
|
||||
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
});
|
||||
|
||||
test("Shows the assets correctly", async ({ page }) => {
|
||||
const workspace = new WorkspacePage(page);
|
||||
const { fileId, pageId } = await setupFileWithAssets(workspace);
|
||||
|
||||
await workspace.goToWorkspace({ fileId, pageId });
|
||||
|
||||
await workspace.clickAssets();
|
||||
await workspace.sidebar.getByRole("button", { name: "Components" }).click();
|
||||
await workspace.sidebar.getByRole("button", { name: "Colors" }).click();
|
||||
await workspace.sidebar.getByRole("button", { name: "Typographies" }).click();
|
||||
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
|
||||
await workspace.sidebar.getByTitle("List view").click();
|
||||
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Palette", () => {
|
||||
test("Shows the bottom palette expanded and collapsed", async ({ page }) => {
|
||||
const workspace = new WorkspacePage(page);
|
||||
const { fileId, pageId } = await setupFileWithAssets(workspace);
|
||||
|
||||
await workspace.goToWorkspace({ fileId, pageId });
|
||||
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
|
||||
await workspace.palette.getByRole("button", { name: "Typographies" }).click();
|
||||
await expect(workspace.palette.getByText("Source Sans Pro Regular")).toBeVisible();
|
||||
await expect(workspace.page).toHaveScreenshot();
|
||||
|
||||
await workspace.palette.getByRole("button", { name: "Color Palette" }).click();
|
||||
await expect(workspace.palette.getByRole("button", { name: "#7798ff" })).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
|
@ -169,6 +169,7 @@
|
|||
:expanded (> size 276))
|
||||
|
||||
:id "right-sidebar-aside"
|
||||
:data-testid "right-sidebar"
|
||||
:data-size (str size)
|
||||
:style #js {"--width" (if can-be-expanded? (dm/str size "px") 276)}}
|
||||
(when can-be-expanded?
|
||||
|
|
|
|||
|
|
@ -520,9 +520,11 @@
|
|||
:name "listing-style"}
|
||||
[:& radio-button {:icon i/view-as-list
|
||||
:value "list"
|
||||
:title (tr "workspace.assets.list-view")
|
||||
:id "opt-list"}]
|
||||
[:& radio-button {:icon i/flex-grid
|
||||
:value "grid"
|
||||
:title (tr "workspace.assets.grid-view")
|
||||
:id "opt-grid"}]]])
|
||||
|
||||
(when (and components-v2 (not read-only?) local?)
|
||||
|
|
|
|||
|
|
@ -3396,6 +3396,14 @@ msgstr "Sort"
|
|||
msgid "workspace.assets.typography"
|
||||
msgstr "Typographies"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/assets/components.cljs, src/app/main/wui/workspace/sidebar/options/menus/component.cljs
|
||||
msgid "workspace.assets.grid-view"
|
||||
msgstr "Grid view"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/assets/components.cljs, src/app/main/wui/workspace/sidebar/options/menus/component.cljs
|
||||
msgid "workspace.assets.list-view"
|
||||
msgstr "List view"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
|
||||
msgid "workspace.assets.typography.font-id"
|
||||
msgstr "Font"
|
||||
|
|
|
|||
|
|
@ -3523,6 +3523,14 @@ msgstr "Ordenar"
|
|||
msgid "workspace.assets.typography"
|
||||
msgstr "Tipografías"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/assets/components.cljs, src/app/main/wui/workspace/sidebar/options/menus/component.cljs
|
||||
msgid "workspace.assets.grid-view"
|
||||
msgstr "Ver como rejilla"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/assets/components.cljs, src/app/main/wui/workspace/sidebar/options/menus/component.cljs
|
||||
msgid "workspace.assets.list-view"
|
||||
msgstr "Ver como lista"
|
||||
|
||||
#: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
|
||||
msgid "workspace.assets.typography.font-id"
|
||||
msgstr "Fuente"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue