Merge pull request #515 from madeindjs/WF-32

test(ui): add E2E test for JSON viewer. WF-32

tests/e2e/presets/jsonviewer/main.py

@@ -0,0 +1,14 @@
+import writer as wf
+
+initial_state = wf.init_state({
+    "json": {
+        "bool": True,
+        "array": [1,2,3,4],
+        "obj": {
+            "key": "value",
+            "nested": {
+                "foo": "bar"
+            }
+        }
+    },
+})

tests/e2e/presets/jsonviewer/ui.json

@@ -0,0 +1,42 @@
+{
+	"metadata": {
+		"writer_version": "0.6.2rc3"
+	},
+	"components": {
+		"root": {
+			"id": "root",
+			"type": "root",
+			"content": {
+				"appName": "Hello",
+				"emptinessColor": "#ffffff"
+			},
+			"isCodeManaged": false,
+			"position": 0
+		},
+		"bb4d0e86-619e-4367-a180-be28ab6059f4": {
+			"id": "bb4d0e86-619e-4367-a180-be28ab6059f4",
+			"type": "page",
+			"content": {
+				"pageMode": "",
+				"key": "main"
+			},
+			"isCodeManaged": false,
+			"position": 0,
+			"parentId": "root"
+		},
+		"fa1r81mv2rrdhfh9": {
+			"id": "fa1r81mv2rrdhfh9",
+			"type": "jsonviewer",
+			"content": {
+				"data": "{\"name\":\"JSON Viewer\",\"description\":\"A JSON tree viewer where you can expand the keys.\",\"sample\":{\"description\":\"This sample is opened by default\",\"bool\":true,\"null\":null,\"list\":[1,\"two\",{\"key\":3}]},\"sampleClosed\":{\"description\":\"This sample is not opened by default\"},\"createdAt\":\"2024-08-13T20:45:15.668Z\"}",
+				"initialDepth": "0"
+			},
+			"isCodeManaged": false,
+			"position": 0,
+			"parentId": "bb4d0e86-619e-4367-a180-be28ab6059f4",
+			"handlers": {},
+			"visible": true
+		}
+	}
+}
+

tests/e2e/tests/jsonviewer.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("JSON viewer", () => {
+	let url: string;
+
+	test.beforeAll(async ({ request }) => {
+		const response = await request.post(`/preset/jsonviewer`);
+		expect(response.ok()).toBeTruthy();
+		({ url } = await response.json());
+	});
+
+	test.afterAll(async ({ request }) => {
+		await request.delete(url);
+	});
+
+	test.beforeEach(async ({ page }) => {
+		await page.goto(url);
+		test.setTimeout(5000);
+	});
+
+	test("should controle the depth open", async ({ page }) => {
+		await page.locator(".CoreJsonViewer").click();
+		await page.locator(".BuilderTemplateInput").first().click();
+
+		expect(await page.locator(".CoreJsonViewer details[open]").count()).toBe(0);
+
+		await page.getByRole("combobox").first().fill("1");
+		expect(await page.locator(".CoreJsonViewer details[open]").count()).toBe(1);
+
+		await page.getByRole("combobox").first().fill("-1");
+		expect(await page.locator(".CoreJsonViewer details[open]").count()).toBe(5);
+	});
+});