From 00da8bde1b2b5eb446b837164dadaffaf0c4f05e Mon Sep 17 00:00:00 2001
From: Danila Poyarkov <dev@dannote.net>
Date: Fri, 13 Mar 2026 13:40:12 +0300
Subject: [PATCH] Add E2E test for fill color change (#100)

The fill color bug was caused by a missing `ref` import in FillPicker.vue,
introduced in 37da83a and fixed in 3b32b4d. Add a regression test that
opens the color picker, clicks the color area, and verifies the node's
fill color updates.
---
 tests/e2e/design-panel.spec.ts | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/tests/e2e/design-panel.spec.ts b/tests/e2e/design-panel.spec.ts
index 60c2d7861..906eb281a 100644
--- a/tests/e2e/design-panel.spec.ts
+++ b/tests/e2e/design-panel.spec.ts
@@ -87,6 +87,31 @@ test('fill item shows color swatch', async () => {
   await expect(swatch).toBeVisible()
 })
 
+test('clicking color area changes fill color', async () => {
+  const id = await getSelectedId()
+  const before = await getNode(id!)
+
+  const swatch = fillSection().locator('[data-test-id="fill-picker-swatch"]').first()
+  await swatch.click()
+
+  const colorArea = page.locator('.cursor-crosshair').first()
+  await expect(colorArea).toBeVisible({ timeout: 5000 })
+
+  const box = await colorArea.boundingBox()
+  await page.mouse.click(box!.x + box!.width - 10, box!.y + 10)
+  await canvas.waitForRender()
+  await page.waitForTimeout(100)
+
+  const after = await getNode(id!)
+  const c1 = before!.fills[0].color
+  const c2 = after!.fills[0].color
+  expect(c1.r !== c2.r || c1.g !== c2.g || c1.b !== c2.b).toBe(true)
+
+  // Close popover — click the swatch again to toggle it off
+  await swatch.click()
+  await canvas.waitForRender()
+})
+
 test('adding a stroke creates stroke section item', async () => {
   const addBtn = strokeSection().locator('[data-test-id="stroke-section-add"]')
   await addBtn.click()