test(e2e): fix "delete a todo" tests

Playwright cann't mock requests that are intercepted by a service worker

SEE microsoft/playwright#1090

e2e/todo/delete.spec.ts

@@ -1,43 +1,35 @@
 import { faker } from '@faker-js/faker';
 import { expect, test } from '@playwright/test';
 
-import type { Todo } from '../../src/features/todo/todoSlice';
+import db from '../../db.json';
 
-let db: Todo[] = Array.from({ length: 34 }, (_, index) => ({
-  id: faker.datatype.uuid(),
-  task: `${String(index + 1).padStart(2, '0')} ${faker.lorem.sentence()}`,
-  completed: faker.datatype.boolean(),
-}));
+const byPageRoute = /\/api\/todos(?:\?_page=\d+)?$/;
+const byIdRoute =
+  /\/api\/todos\/(?<id>[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})/;
 
 test.describe('delete a todo', () => {
-  let todo: Todo;
-
   test.beforeEach(async ({ page }) => {
-    await page.route('**/api/todos?**', (route) => {
+    await page.route(byPageRoute, (route) => {
       const url = new URL(route.request().url());
       const page = Number.parseInt(url.searchParams.get('_page')) || 1;
       const limit = 10;
-      const todos = db.slice(limit * (page - 1), limit * page);
-      todo = faker.random.arrayElement(todos);
+      const slice = db.todos.slice(limit * (page - 1), limit * page);
 
       return route.fulfill({
         status: 200,
         contentType: 'application/json',
-        body: JSON.stringify(todos),
+        body: JSON.stringify(slice),
         headers: {
-          'x-total-count': String(db.length),
+          'x-total-count': String(db.todos.length),
         },
       });
     });
 
-    await page.route('**/api/todos/**', (route) => {
-      const result =
-        /\/api\/todos\/(?<id>[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})/.exec(
-          route.request().url(),
-        );
+    await page.route(byIdRoute, (route) => {
+      const result = byIdRoute.exec(route.request().url());
       const { id } = result.groups;
 
-      db = db.filter((todo) => todo.id !== id);
+      db.todos = db.todos.filter((todo) => todo.id !== id);
 
       return route.fulfill({
         status: 200,
@@ -47,44 +39,42 @@ test.describe('delete a todo', () => {
     });
 
     await page.goto('/', { waitUntil: 'networkidle' });
-
-    await page
-      .locator('[aria-label="Todos navigation"] li:nth-last-child(2)')
-      .click();
-
-    await page.waitForLoadState('networkidle');
   });
 
   test('click the remove button', async ({ page }) => {
-    await page
-      .locator(`[data-testid="todo-${todo.id}"] >> text=Remove`)
-      .click();
+    const itemIndex = faker.datatype.number({ min: 0, max: 9 });
+    const $todo = page.locator('[data-testid="list-todo"] li').nth(itemIndex);
+    const task = await $todo.locator('*:nth-child(2)').nth(0).innerText();
 
-    await expect(page.locator(`text=${todo.task}`)).not.toBeVisible();
+    await $todo.locator('text=Remove').click();
+
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.locator(`text="${task}"`)).not.toBeVisible();
   });
 
   test('empty the last page', async ({ page }) => {
-    const lastPage = await page.$eval(
+    const $lastPage = page.locator(
       '[aria-label="Todos navigation"] li:nth-last-child(2)',
-      (el: HTMLLIElement) => el.innerText,
     );
-    const $list = await page.locator('[data-testid="list-todo"] li');
+    const lastPage = Number(await $lastPage.innerText());
 
-    for (let i = 0; i < 4; i++) {
+    await $lastPage.click();
+
+    await page.waitForLoadState('networkidle');
+
+    const $list = page.locator('[data-testid="list-todo"] li');
+    const count = await $list.count();
+
+    for (let i = 0; i < count; i++) {
       await $list.last().locator('text=Remove').click();
+
+      await page.waitForLoadState('networkidle');
     }
 
-    await page.waitForLoadState('networkidle');
+    const newLastPage = Number(await $lastPage.innerText());
 
-    await expect(
-      page.locator(`button:has-text("${lastPage}")`),
-    ).not.toBeVisible();
-    await expect(
-      page.$eval(
-        '[aria-label="Todos navigation"] li:nth-last-child(2)',
-        (item: HTMLLIElement) => Number(item.innerText),
-      ),
-    ).resolves.toBeLessThanOrEqual(Number(lastPage) - 1);
+    expect(newLastPage).toBeLessThanOrEqual(lastPage - 1);
   });
 
   test('fetch todos from next page', async ({ page }) => {