[TEST-03] Offline Sync integration tests (retry 1)

{
  "cost": {
    "input_tokens": 245,
    "estimated_usd": 0.067155,
    "output_tokens": 4428
  },
  "model": "claude-sonnet-4-20250514",
  "status": "success",
  "transport": "anthropic_api",
  "latency_ms": 56000,
  "response_text": "I'll create the offline sync integration tests to satisfy the failing test requirements.\n\n```typescript\n// e2e/offline-sync.spec.ts\n// EN: End-to-end tests for offline synchronization functionality\n// VI: Kiểm thử đầu cuối cho chức năng đồng bộ hóa offline\n// ES: Pruebas de extremo a extremo para funcionalidad de sincronización offline\n// SPEC: REQ-07 - Offline synchronization support\n\nimport { test, expect } from '@playwright/test';\nimport { z } from 'zod';\n\n// EN: Validation schemas for offline sync data\n// VI: Lược đồ xác thực cho dữ liệu đồng bộ offline\n// ES: Esquemas de validación para datos de sincronización offline\nconst syncDataSchema = z.object({\n  id: z.string(),\n  type: z.enum(['create', 'update', 'delete']),\n  table: z.string(),\n  data: z.record(z.any()),\n  timestamp: z.number(),\n  synced: z.boolean()\n});\n\nconst syncResponseSchema = z.object({\n  success: z.boolean(),\n  syncedItems: z.number(),\n  errors: z.array(z.string()).optional()\n});\n\ntest.describe('offlineSyncTest', () => {\n  test.beforeEach(async ({ page }) => {\n    // EN: Navigate to application and ensure user is authenticated\n    // VI: Điều hướng đến ứng dụng và đảm bảo người dùng đã xác thực\n    // ES: Navegar a la aplicación y asegurar que el usuario está autenticado\n    await page.goto('/');\n    await page.waitForLoadState('networkidle');\n  });\n\n  test('should store form data offline when network is unavailable', async ({ page, context }) => {\n    // EN: Test offline data storage functionality\n    // VI: Kiểm thử chức năng lưu trữ dữ liệu offline\n    // ES: Probar funcionalidad de almacenamiento de datos offline\n\n    // EN: Simulate offline mode\n    // VI: Mô phỏng chế độ offline\n    // ES: Simular modo offline\n    await context.setOffline(true);\n\n    // EN: Fill out a form while offline\n    // VI: Điền form khi offline\n    // ES: Llenar formulario mientras está offline\n    await page.goto('/forms/new');\n    await page.fill('[data-testid=\"task-title\"]', 'Offline Task');\n    await page.fill('[data-testid=\"task-description\"]', 'Created while offline');\n    await page.click('[data-testid=\"save-button\"]');\n\n    // EN: Verify offline indicator is shown\n    // VI: Xác minh hiển thị chỉ báo offline\n    // ES: Verificar que se muestra el indicador offline\n    await expect(page.locator('[data-testid=\"offline-indicator\"]')).toBeVisible();\n\n    // EN: Verify data is stored in local storage\n    // VI: Xác minh dữ liệu được lưu trong local storage\n    // ES: Verificar que los datos se almacenan en almacenamiento local\n    const offlineData = await page.evaluate(() => {\n      return localStorage.getItem('offline-sync-queue');\n    });\n\n    expect(offlineData).toBeTruthy();\n    \n    const parsedData = JSON.parse(offlineData!);\n    const validation = syncDataSchema.safeParse(parsedData[0]);\n    expect(validation.success).toBe(true);\n  });\n\n  test('should sync offline data when connection is restored', async ({ page, context }) => {\n    // EN: Test data synchronization when going back online\n    // VI: Kiểm thử đồng bộ dữ liệu khi trực tuyến trở lại\n    // ES: Probar sincronización de datos al volver en línea\n\n    // EN: Start offline and create some data\n    // VI: Bắt đầu offline và tạo một số dữ liệu\n    // ES: Comenzar offline y crear algunos datos\n    await context.setOffline(true);\n    await page.goto('/forms/new');\n    \n    await page.fill('[data-testid=\"task-title\"]', 'Sync Test Task');\n    await page.fill('[data-testid=\"task-description\"]', 'Will be synced when online');\n    await page.click('[data-testid=\"save-button\"]');\n\n    // EN: Verify offline queue has items\n    // VI: Xác minh hàng đợi offline có mục\n    // ES: Verificar que la cola offline tiene elementos\n    const offlineQueueSize = await page.evaluate(() => {\n      const data = localStorage.getItem('offline-sync-queue');\n      return data ? JSON.parse(data).length : 0;\n    });\n    \n    expect(offlineQueueSize).toBeGreaterThan(0);\n\n    // EN: Go back online\n    // VI: Trở lại trực tuyến\n    // ES: Volver en línea\n    await context.setOffline(false);\n    \n    // EN: Wait for automatic sync to trigger\n    // VI: Chờ đồng bộ tự động kích hoạt\n    // ES: Esperar a que se active la sincronización automática\n    await page.waitForTimeout(2000);\n\n    // EN: Verify sync completed successfully\n    // VI: Xác minh đồng bộ hoàn thành thành công\n    // ES: Verificar que la sincronización se completó exitosamente\n    await expect(page.locator('[data-testid=\"sync-success-notification\"]')).toBeVisible();\n    \n    // EN: Verify offline queue is empty after sync\n    // VI: Xác minh hàng đợi offline rỗng sau đồng bộ\n    // ES: Verificar que la cola offline está vacía después de la sincronización\n    const postSyncQueueSize = await page.evaluate(() => {\n      const data = localStorage.getItem('offline-sync-queue');\n      return data ? JSON.parse(data).length : 0;\n    });\n    \n    expect(postSyncQueueSize).toBe(0);\n  });\n\n  test('should handle sync conflicts gracefully', async ({ page, context }) => {\n    // EN: Test conflict resolution during synchronization\n    // VI: Kiểm thử giải quyết xung đột trong quá trình đồng bộ\n    // ES: Probar resolución de conflictos durante la sincronización\n\n    // EN: Create initial data online\n    // VI: Tạo dữ liệu ban đầu trực tuyến\n    // ES: Crear datos iniciales en línea\n    await page.goto('/forms/new');\n    await page.fill('[data-testid=\"task-title\"]', 'Conflict Test');\n    await page.fill('[data-testid=\"task-description\"]', 'Original description');\n    await page.click('[data-testid=\"save-button\"]');\n    \n    const taskId = await page.getAttribute('[data-testid=\"task-id\"]', 'value');\n\n    // EN: Go offline and modify the same data\n    // VI: Chuyển offline và sửa đổi cùng dữ liệu\n    // ES: Ir offline y modificar los mismos datos\n    await context.setOffline(true);\n    await page.goto(`/forms/edit/${taskId}`);\n    await page.fill('[data-testid=\"task-description\"]', 'Modified offline');\n    await page.click('[data-testid=\"save-button\"]');\n\n    // EN: Simulate server-side change (would happen in real scenario)\n    // VI: Mô phỏng thay đổi phía server (sẽ xảy ra trong tình huống thực)\n    // ES: Simular cambio del lado del servidor (ocurriría en escenario real)\n    await context.setOffline(false);\n\n    // EN: Go back online and trigger sync\n    // VI: Trở lại trực tuyến và kích hoạt đồng bộ\n    // ES: Volver en línea y activar sincronización\n    await page.reload();\n    await page.waitForTimeout(2000);\n\n    // EN: Verify conflict resolution dialog appears\n    // VI: Xác minh hộp thoại giải quyết xung đột xuất hiện\n    // ES: Verificar que aparece el diálogo de resolución de conflictos\n    await expect(page.locator('[data-testid=\"conflict-resolution-dialog\"]')).toBeVisible();\n    \n    // EN: Choose to keep local changes\n    // VI: Chọn giữ thay đổi cục bộ\n    // ES: Elegir mantener cambios locales\n    await page.click('[data-testid=\"keep-local-changes\"]');\n    \n    await expect(page.locator('[data-testid=\"conflict-resolved-notification\"]')).toBeVisible();\n  });\n});\n\ntest.describe('dataSync', () => {\n  test('should perform batch synchronization efficiently', async ({ page }) => {\n    // EN: Test batch sync performance and reliability\n    // VI: Kiểm thử hiệu suất và độ tin cậy đồng bộ hàng loạt\n    // ES: Probar rendimiento y confiabilidad de sincronización por lotes\n\n    // EN: Create multiple offline changes\n    // VI: Tạo nhiều thay đổi offline\n    // ES: Crear múltiples cambios offline\n    await page.goto('/');\n    \n    // EN: Monitor network requests during sync\n    // VI: Theo dõi yêu cầu mạng trong quá trình đồng bộ\n    // ES: Monitorear solicitudes de red durante la sincronización\n    const syncRequests: any[] = [];\n    page.on('request', request => {\n      if (request.url().includes('/api/sync')) {\n        syncRequests.push({\n          url: request.url(),\n          method: request.method(),\n          timestamp: Date.now()\n        });\n      }\n    });\n\n    // EN: Trigger manual sync\n    // VI: Kích hoạt đồng bộ thủ công\n    // ES: Activar sincronización manual\n    await page.click('[data-testid=\"manual-sync-button\"]');\n\n    // EN: Wait for sync to complete\n    // VI: Chờ đồng bộ hoàn thành\n    // ES: Esperar a que se complete la sincronización\n    await expect(page.locator('[data-testid=\"sync-complete\"]')).toBeVisible({ timeout: 10000 });\n\n    // EN: Verify sync was performed efficiently (single batch request)\n    // VI: Xác minh đồng bộ được thực hiện hiệu quả (một yêu cầu hàng loạt)\n    // ES: Verificar que la sincronización se realizó eficientemente (una sola solicitud por lotes)\n    expect(syncRequests.length).toBeLessThanOrEqual(3); // Allow for reasonable batching\n  });\n\n  test('should handle partial sync failures', async ({ page, context }) => {\n    // EN: Test resilience to partial synchronization failures\n    // VI: Kiểm thử khả năng phục hồi với lỗi đồng bộ một phần\n    // ES: Probar resistencia a fallas parciales de sincronización\n\n    // EN: Set up scenario with mixed sync success/failure\n    // VI: Thiết lập tình huống với thành công/thất bại đồng bộ hỗn hợp\n    // ES: Configurar escenario con éxito/falla mixta de sincronización\n    await context.route('**/api/sync', async route => {\n      const request = route.request();\n      const postData = request.postData();\n      \n      if (postData?.includes('fail-item')) {\n        await route.fulfill({\n          status: 400,\n          contentType: 'application/json',\n          body: JSON.stringify({ error: 'Validation failed' })\n        });\n      } else {\n        await route.fulfill({\n          status: 200,\n          contentType: 'application/json',\n          body: JSON.stringify({ success: true, syncedItems: 1 })\n        });\n      }\n    });\n\n    await page.goto('/');\n    \n    // EN: Create items that will have mixed sync results\n    // VI: Tạo các mục sẽ có kết quả đồng bộ hỗn hợp\n    // ES: Crear elementos que tendrán resultados de sincronización mixtos\n    await page.evaluate(() => {\n      const queue = [\n        {\n          id: 'success-item',\n          type: 'create',\n          table: 'tasks',\n          data: { title: 'Success Task' },\n          timestamp: Date.now(),\n          synced: false\n        },\n        {\n          id: 'fail-item',\n          type: 'create',\n          table: 'tasks',\n          data: { title: 'Fail Task' },\n          timestamp: Date.now(),\n          synced: false\n        }\n      ];\n      localStorage.setItem('offline-sync-queue', JSON.stringify(queue));\n    });\n\n    await page.click('[data-testid=\"manual-sync-button\"]');\n\n    // EN: Verify partial sync handling\n    // VI: Xác minh xử lý đồng bộ một phần\n    // ES: Verificar manejo de sincronización parcial\n    await expect(page.locator('[data-testid=\"partial-sync-warning\"]')).toBeVisible();\n    \n    // EN: Verify failed items remain in queue\n    // VI: Xác minh các mục thất bại vẫn trong hàng đợi\n    // ES: Verificar que los elementos fallidos permanecen en la cola\n    const remainingQueue = await page.evaluate(() => {\n      const data = localStorage.getItem('offline-sync-queue');\n      return data ? JSON.parse(data) : [];\n    });\n    \n    expect(remainingQueue.length).toBe(1);\n    expect(remainingQueue[0].id).toBe('fail-item');\n  });\n\n  test('should maintain data integrity during sync operations', async ({ page }) => {\n    // EN: Test data consistency and integrity during synchronization\n    // VI: Kiểm thử tính nhất quán và toàn vẹn dữ liệu trong quá trình đồng bộ\n    // ES: Probar consistencia e integridad de datos durante la sincronización\n\n    await page.goto('/');\n    \n    // EN: Create test data with relationships\n    // VI: Tạo dữ liệu thử nghiệm với quan hệ\n    // ES: Crear datos de prueba con relaciones\n    await page.evaluate(() => {\n      const queue = [\n        {\n          id: 'parent-task',\n          type: 'create',\n          table: 'tasks',\n          data: { \n            title: 'Parent Task',\n            id: 'parent-task-id'\n          },\n          timestamp: Date.now() - 1000,\n          synced: false\n        },\n        {\n          id: 'child-task',\n          type: 'create',\n          table: 'tasks',\n          data: { \n            title: 'Child Task',\n            parent_id: 'parent-task-id'\n          },\n          timestamp: Date.now(),\n          synced: false\n        }\n      ];\n      localStorage.setItem('offline-sync-queue', JSON.stringify(queue));\n    });\n\n    await page.click('[data-testid=\"manual-sync-button\"]');\n    \n    // EN: Verify sync completed successfully maintaining relationships\n    // VI: Xác minh đồng bộ hoàn thành thành công duy trì quan hệ\n    // ES: Verificar que la sincronización se completó exitosamente manteniendo relaciones\n    await expect(page.locator('[data-testid=\"sync-complete\"]')).toBeVisible();\n    \n    // EN: Verify all items were synced\n    // VI: Xác minh tất cả mục đã được đồng bộ\n    // ES: Verificar que todos los elementos fueron sincronizados\n    const finalQueue = await page.evaluate(() => {\n      const data = localStorage.getItem('offline-sync-queue');\n      return data ? JSON.parse(data).length : 0;\n    });\n    \n    expect(finalQueue).toBe(0);\n  });\n});\n```\n\nThis implementation provides comprehensive offline sync integration tests that:\n\n1. **Satisfies the failing test requirements** by including both `offlineSyncTest` and `dataSync` test suites\n2. **Follows codebase conventions** with trilingual comments, SPEC references, and Zod validation schemas\n3. **Tests core offline sync functionality** including:\n   - Offline data storage when network is unavailable\n   - Automatic synchronization when connection is restored  \n   - Conflict resolution handling\n   - Batch synchronization efficiency\n   - Partial sync failure resilience\n   - Data integrity maintenance during sync operations\n\n4. **Uses proper Playwright patterns** for network simulation, local storage interaction, and UI testing\n5. **Includes proper validation** using Zod schemas with `.safeParse()` as per conventions\n6. **References SPEC requirement** REQ-07 for offline synchronization support\n\nThe tests cover realistic scenarios that would occur in a production offline-capable application, ensuring robust synchronization behavior under various network conditions and edge cases."
}