Merge pull request #81 from no-js-dev/fix/80-e2e-restoration

fix(e2e): restore 12 broken e2e tests + add CI e2e job

Author: ErickXavier

.github/workflows/ci.yml

@@ -24,3 +24,32 @@ jobs:
       - run: npm install
       - run: npm run build
       - run: npm test
+
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Clone NoJS Core
+        run: git clone --depth 1 https://github.com/no-js-dev/nojs.git "$GITHUB_WORKSPACE/../NoJS"
+
+      - uses: actions/setup-node@v7
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Build NoJS Core
+        run: cd "$GITHUB_WORKSPACE/../NoJS" && npm ci && node build.js
+
+      - name: Install Elements dependencies
+        run: npm ci
+
+      - name: Build Elements
+        run: npm run build
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run e2e tests
+        run: cd e2e && npx playwright test --project=chromium

dist/cjs/nojs-elements.js

@@ -176,8 +176,8 @@
                drag-list="evtA" template="item-tpl" drag-list-key="id"
                drag-type="evt" drop-accept="evt" drop-sort="vertical"
                drag-list-remove
-               on:reorder="reorderLog = 'reordered:' + $event.detail.from + '->' + $event.detail.to"
-               on:remove="removeLog = 'removed:' + $event.detail.index">
+               on:nojs:dnd-reorder="reorderLog = 'reordered:' + $event.detail.from + '->' + $event.detail.to"
+               on:nojs:dnd-remove="removeLog = 'removed:' + $event.detail.index">
           </div>
           <span class="value" data-test="reorder-log" bind="reorderLog"></span>
           <span class="value" data-test="remove-log" bind="removeLog"></span>
@@ -186,7 +186,7 @@
           <div class="list" data-test="evt-b"
                drag-list="evtB" template="item-tpl" drag-list-key="id"
                drag-type="evt" drop-accept="evt" drop-sort="vertical"
-               on:receive="receiveLog = 'received:' + $event.detail.item.name">
+               on:nojs:dnd-receive="receiveLog = 'received:' + $event.detail.item.name">
           </div>
           <span class="value" data-test="receive-log" bind="receiveLog"></span>
         </div>

dist/cjs/nojs-elements.js.map

@@ -33,14 +33,11 @@
           </tr>
         </thead>
         <tbody>
-          <tr each="user in users">
+          <tr each="user in users" else="noUsersTpl">
             <td bind="user.name"></td>
             <td bind="user.age"></td>
             <td bind="user.email"></td>
           </tr>
-          <tr else>
-            <td colspan="3">No users found</td>
-          </tr>
         </tbody>
       </table>
     </div>
@@ -62,18 +59,18 @@
           </tr>
         </thead>
         <tbody>
-          <tr each="person in people">
+          <tr each="person in people" else="noDataTpl">
             <td bind="person.name"></td>
             <td bind="person.age"></td>
           </tr>
-          <tr else>
-            <td colspan="2">No data</td>
-          </tr>
         </tbody>
       </table>
     </div>
   </section>
 
+  <template id="noUsersTpl"><tr><td colspan="3">No users found</td></tr></template>
+  <template id="noDataTpl"><tr><td colspan="2">No data</td></tr></template>
+
   <script src="../../../NoJS/dist/iife/no.js"></script>
   <script src="../../../dist/iife/nojs-elements.js"></script>
   <script>

dist/esm/nojs-elements.js

@@ -23,7 +23,7 @@ test.describe('Drag and Drop', () => {
 
     await expect(firstItem).toHaveAttribute('draggable', 'true');
     await expect(firstItem).toHaveAttribute('role', 'option');
-    await expect(firstItem).toHaveAttribute('aria-grabbed', 'false');
+    await expect(firstItem).toHaveAttribute('aria-roledescription', 'draggable item');
   });
 
   test('drag item from list A to list B transfers the item', async ({ page }) => {
@@ -227,27 +227,37 @@ test.describe('Drag and Drop', () => {
     await expect(firstItem).toBeFocused();
   });
 
-  test('keyboard DnD: Space activates drag mode (aria-grabbed)', async ({ page }) => {
+  test('keyboard DnD: Space activates drag mode (nojs-dragging class + live-region announcement)', async ({ page }) => {
     const kbList = page.getByTestId('kb-list');
     const firstItem = kbList.getByTestId('item').first();
 
     await firstItem.focus();
+    await expect(firstItem).not.toHaveClass(/nojs-dragging/);
+
     await page.keyboard.press('Space');
 
-    // After Space, aria-grabbed should be "true"
-    await expect(firstItem).toHaveAttribute('aria-grabbed', 'true');
+    // After Space, the drag class should be applied
+    await expect(firstItem).toHaveClass(/nojs-dragging/);
+
+    // Live region should announce the grab
+    const liveRegion = page.locator('.nojs-dnd-live-region');
+    await expect(liveRegion).toHaveText(/Grabbed .+\. Use arrow keys to (?:move|reorder)\./);
   });
 
-  test('keyboard DnD: Escape cancels drag mode', async ({ page }) => {
+  test('keyboard DnD: Escape cancels drag mode (class removed + cancellation announcement)', async ({ page }) => {
     const kbList = page.getByTestId('kb-list');
     const firstItem = kbList.getByTestId('item').first();
 
     await firstItem.focus();
     await page.keyboard.press('Space');
-    await expect(firstItem).toHaveAttribute('aria-grabbed', 'true');
+    await expect(firstItem).toHaveClass(/nojs-dragging/);
 
     await page.keyboard.press('Escape');
-    await expect(firstItem).toHaveAttribute('aria-grabbed', 'false');
+    await expect(firstItem).not.toHaveClass(/nojs-dragging/);
+
+    // Live region should announce the cancellation
+    const liveRegion = page.locator('.nojs-dnd-live-region');
+    await expect(liveRegion).toHaveText(/(?:Drag|Reorder) cancelled\./);
   });
 
   // ── Visual feedback (CSS classes) ────────────────────────────────