Clean up deletion logic.

Author: RobJellinghaus

frontend/src/containers/TodoGraphQLRelay.tsx

@@ -59,8 +59,7 @@ export const TodoGraphQLRelay = () => {
         variables: { text },
         onCompleted: () => {
           setText('');
-          // Relay will automatically update the cache and re-render
-          window.location.reload(); // Simple refresh for now
+          // Remove the reload - let Relay handle it automatically
         },
         onError: (error) => {
           console.error('Error creating todo:', error);

tests/relay.spec.ts

@@ -4,36 +4,27 @@ import { loginAsTestUser } from '../testUtils';
 test.describe('Relay Todo Tests', () => {
   test.beforeEach(async ({ page }) => {
     await loginAsTestUser(page);
-    await page.click('text=Todos (REST)');
+    await page.click('a:has-text("Todos (REST")');
     await page.waitForLoadState('networkidle');
 
+    await page.screenshot({ path: "before-each-todo-relay-test-debug.png" });
+
+    var n = 1;
+
     // clean up any stale todos
-    while (((await page.locator('text=delete').all()).length) > 0) {
-      {
-          // Get all elements matching the locator
-          const deleteElements = await page.locator('text=delete').all();
-          console.log(`Found ${deleteElements.length} delete elements`);
-
-          for (let i = 0; i < deleteElements.length; i++) {
-            const element = deleteElements[i];
-            console.log(`Element ${i}:`);
-            console.log(`  innerHTML: ${await element.innerHTML()}`);
-            console.log(`  textContent: ${await element.textContent()}`);
-            console.log(`  isVisible: ${await element.isVisible()}`);
-            console.log(`  outerHTML: ${await element.evaluate(el => el.outerHTML)}`);
-          }
-      }
-
-      await page.screenshot({ path: 'todos-rest-delete-debug.png' });
-      console.log('text=delete is visible; clicking it');
-      await page.locator('text=delete').first().click();
+    while (((await page.locator('a:has-text("delete")').all()).length) > 0) {
+      console.log('a:has-text("delete") is visible; clicking it');
+      await page.locator('a:has-text("delete")').first().click();
       await page.waitForLoadState('networkidle');
       // Wait for stability, 1/10 sec
       await new Promise(resolve => setTimeout(resolve, 100));
+
+      await page.screenshot({ path: `after-todo-delete-number-${n}-debug.png`});
+      n++;
     }
 
     console.log('text=delete no longer visible, navigating to Todos (Relay)');
-    await page.click('text=Todos (Relay)');
+    await page.click('a:has-text("Todos (Relay")');
   });
 
   test('should display Relay todos page', async ({ page }) => {
@@ -47,35 +38,30 @@ test.describe('Relay Todo Tests', () => {
 
   test('should display existing todos', async ({ page }) => {
     // First add a todo via REST to ensure we have data
-    await page.click('text=Todos (REST)');
+    await page.click('a:has-text("Todos (REST")');
     await page.fill('input[placeholder="New todo..."]', 'Test Relay Display');
     await page.click('button:has-text("Add")');
     await expect(page.locator('text=Test Relay Display')).toBeVisible();
 
     // Now check if it shows up in Relay version
-    await page.click('text=Todos (Relay)');
-    // Take a screenshot for debugging
-    await page.screenshot({ path: 'todos-relay-page-1-debug.png' });
+    await page.click('a:has-text("Todos (Relay")');
     // Flip back to REST and shoot that
-    await page.click('text=Todos (REST)');
-    await page.screenshot({ path: 'todos-rest-page-1-debug.png' });
+    await page.click('a:has-text("Todos (REST)"');
     // And repeat
-    await page.click('text=Todos (Relay)');
-    await page.screenshot({ path: 'todos-relay-page-2-debug.png' });
+    await page.click('a:has-text("Todos (Relay)"');
 
     await expect(page.locator('text=Test Relay Display')).toBeVisible();
 
     // Clean up - delete the todo via REST
-    await page.click('text=Todos (REST)');
-    await page.click('text=delete');
-    await page.screenshot({ path: 'todos-rest-page-2-debug.png' });
+    await page.click('a:has-text("Todos (REST)"');
+    await page.click('a:has-text("delete)"');
 
     // Verify the todo is gone from REST page
     await expect(page.locator('text=Test Relay Display')).not.toBeVisible();
     await expect(page.locator('text=No todos, create one!')).toBeVisible();
 
     // Now verify that Relay page also shows empty state
-    await page.click('text=Todos (Relay)');
+    await page.click('a:has-text("Todos (Relay)"');
     await expect(page.locator('text=Test Relay Display')).not.toBeVisible();
     await expect(page.locator('text=No todos, create one!')).toBeVisible();
   });
@@ -101,33 +87,33 @@ test.describe('Relay Todo Tests', () => {
 
   test('should show disabled edit and delete links', async ({ page }) => {
     // First add a todo via REST to have something to test
-    await page.click('text=Todos (REST)');
+    await page.click('a:has-text("Todos (REST)"');
     await page.fill('input[placeholder="New todo..."]', 'Test Relay Actions');
     await page.click('button:has-text("Add")');
     await expect(page.locator('text=Test Relay Actions')).toBeVisible();
 
     // Go back to Relay page
-    await page.click('text=Todos (Relay)');
+    await page.click('a:has-text("Todos (Relay)"');
     await expect(page.locator('text=Test Relay Actions')).toBeVisible();
 
     // Check that edit and delete links are present but don't have functionality
     await expect(page.locator('a:has-text("edit")')).toBeVisible();
     await expect(page.locator('a:has-text("delete")')).toBeVisible();
 
     // Clean up
-    await page.click('text=Todos (REST)');
+    await page.click('a:has-text("Todos (REST)"');
     await page.click('text=delete');
   });
 
   test('should display todo information correctly', async ({ page }) => {
     // Add a todo via REST
-    await page.click('text=Todos (REST)');
+    await page.click('a:has-text("Todos (REST)"');
     await page.fill('input[placeholder="New todo..."]', 'Test Relay Info Display');
     await page.click('button:has-text("Add")');
     await expect(page.locator('text=Test Relay Info Display')).toBeVisible();
 
     // Check display in Relay version
-    await page.click('text=Todos (Relay)');
+    await page.click('a:has-text("Todos (Relay)"');
 
     // Check that todo text is displayed
     await expect(page.locator('text=Test Relay Info Display')).toBeVisible();
@@ -136,7 +122,7 @@ test.describe('Relay Todo Tests', () => {
     await expect(page.locator('text=#')).toBeVisible();
 
     // Clean up
-    await page.click('text=Todos (REST)');
+    await page.click('a:has-text("Todos (REST)"');
     await page.click('text=delete');
   });
 
@@ -147,14 +133,14 @@ test.describe('Relay Todo Tests', () => {
 
   test('should navigate properly between Todo implementations', async ({ page }) => {
     // Start at Relay page
-    await expect(page.locator('h1:has-text("Todos (Relay)")')).toBeVisible();
+    await expect(page.locator('h1:has-text("Todos (Relay)"')).toBeVisible();
 
     // Navigate to REST
-    await page.click('text=Todos (REST)');
+    await page.click('a:has-text("Todos (REST)"');
     await expect(page.locator('h1:has-text("Todos")')).toBeVisible();
 
     // Navigate back to Relay
-    await page.click('text=Todos (Relay)');
+    await page.click('a:has-text("Todos (Relay)"');
     await expect(page.locator('h1:has-text("Todos (Relay)")')).toBeVisible();
   });
 
@@ -170,6 +156,7 @@ test.describe('Relay Todo Tests', () => {
   });
 
   test('should allow adding a new todo item', async ({ page }) => {
+    await page.screenshot({ path: "should-allow-add-debug.png" });
     // Initially should show empty state
     await expect(page.locator('text=No todos, create one!')).toBeVisible();
 
@@ -194,7 +181,7 @@ test.describe('Relay Todo Tests', () => {
     await expect(page.locator('text=#')).toBeVisible();
 
     // Clean up by deleting via REST (since Relay delete isn't implemented yet)
-    await page.click('text=Todos (REST)');
+    await page.click('a:has-text("Todos (REST)"');
     await page.click('text=delete');
   });