add tests for item drag and drop

.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

package.json

@@ -28,9 +28,10 @@
     "format-check": "prettier --check .",
     "lint": "eslint .",
     "lint-styles": "stylelint public/styles/*",
-    "test": "playwright test",
+    "test": "playwright test --project Chromium",
-    "test-ui": "playwright test --ui",
+    "test-coverage": "bash scripts/test-coverage.sh",
-    "test-coverage": "bash scripts/test-coverage.sh"
+    "test-e2e": "playwright test",
+    "test-ui": "playwright test --ui"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

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');
+  const addCustomTodoList = page.locator('.todo-frame.-custom .add');
-  await add.click();
+  await addCustomTodoList.click();
 
   const title = page.locator('.todo-custom-list > .header > .title');
   await expect(title).toHaveText('...');

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);
+});