From 40ac583e1f2979dd765bf1f7c132c15b6287f779 Mon Sep 17 00:00:00 2001
From: Morris Brodersen <mb@morrisbrodersen.de>
Date: Wed, 1 Jan 2025 15:43:57 +0100
Subject: [PATCH] add tests for item drag and drop

---
 .github/workflows/pipeline.yml     |  3 ++
 package.json                       |  7 ++--
 test/e2e/addCustomTodoList.test.js |  4 +--
 test/e2e/dragAndDropItems.test.js  | 55 ++++++++++++++++++++++++++++++
 4 files changed, 64 insertions(+), 5 deletions(-)
 create mode 100644 test/e2e/dragAndDropItems.test.js

diff --git a/.github/workflows/pipeline.yml b/.github/workflows/pipeline.yml
index 814dcac..e5a7bc4 100644
--- a/.github/workflows/pipeline.yml
+++ b/.github/workflows/pipeline.yml
@@ -19,6 +19,9 @@ jobs:
       - run: npm run test-coverage
         env:
           CI: true
+      - run: npm run test-e2e
+        env:
+          CI: true
   deploy:
     if: github.ref == 'refs/heads/main'
     needs: check
diff --git a/package.json b/package.json
index 1a5dd77..f1610e9 100644
--- a/package.json
+++ b/package.json
@@ -28,9 +28,10 @@
     "format-check": "prettier --check .",
     "lint": "eslint .",
     "lint-styles": "stylelint public/styles/*",
-    "test": "playwright test",
-    "test-ui": "playwright test --ui",
-    "test-coverage": "bash scripts/test-coverage.sh"
+    "test": "playwright test --project Chromium",
+    "test-coverage": "bash scripts/test-coverage.sh",
+    "test-e2e": "playwright test",
+    "test-ui": "playwright test --ui"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
diff --git a/test/e2e/addCustomTodoList.test.js b/test/e2e/addCustomTodoList.test.js
index 89197f4..f1feabc 100644
--- a/test/e2e/addCustomTodoList.test.js
+++ b/test/e2e/addCustomTodoList.test.js
@@ -4,8 +4,8 @@ import '../coverage.js';
 test('Add custom to-do list', async ({ page }) => {
   await page.goto('http://localhost:8080');
 
-  const add = page.locator('.todo-frame.-custom .add');
-  await add.click();
+  const addCustomTodoList = page.locator('.todo-frame.-custom .add');
+  await addCustomTodoList.click();
 
   const title = page.locator('.todo-custom-list > .header > .title');
   await expect(title).toHaveText('...');
diff --git a/test/e2e/dragAndDropItems.test.js b/test/e2e/dragAndDropItems.test.js
new file mode 100644
index 0000000..d3a9a1f
--- /dev/null
+++ b/test/e2e/dragAndDropItems.test.js
@@ -0,0 +1,55 @@
+import { expect, test } from '@playwright/test';
+import '../coverage.js';
+
+test("Reorder items inside today's list", async ({ page }) => {
+  // given
+  await page.goto('http://localhost:8080');
+
+  const input = page.locator('.-today .todo-item-input > input');
+
+  await input.focus();
+  await input.fill('Item A');
+  await page.keyboard.press('Enter');
+
+  await input.focus();
+  await input.fill('Item B');
+  await page.keyboard.press('Enter');
+
+  const itemA = page.getByText('Item A');
+  const itemB = page.getByText('Item B');
+
+  // when
+  await itemA.dragTo(itemB);
+
+  // then
+  const firstItem = page.locator('.-today .todo-item').first();
+  const secondItem = page.locator('.-today .todo-item').last();
+
+  await expect(firstItem).toHaveText('Item B');
+  await expect(secondItem).toHaveText('Item A');
+});
+
+test('Drag and drop from today to new custom list', async ({ page }) => {
+  // given
+  await page.goto('http://localhost:8080');
+
+  const input = page.locator('.-today .todo-item-input > input');
+
+  await input.focus();
+  await input.fill('Item A');
+  await page.keyboard.press('Enter');
+
+  const addCustomTodoList = page.locator('.todo-frame.-custom .add');
+  await addCustomTodoList.click();
+
+  const itemA = page.getByText('Item A');
+  const customList = page.locator('.todo-custom-list');
+
+  // when
+  await itemA.dragTo(customList, { targetPosition: { x: 0, y: 100 } });
+
+  // then
+  const movedItem = page.locator('.todo-custom-list .todo-item');
+  await expect(movedItem).toHaveText('Item A');
+  await page.waitForTimeout(100);
+});