oier/collective-lists
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fase-14): offline chip + queued-op badge in global chrome (14.2.1-2)

Browse Source 
Adds an OfflineChip surfaced in the MobileTopBar (compact, icon-only)
and at the bottom of the DesktopSidebar (full pill with label). Hidden
while online. When `navigator.onLine` is false:

  - The chip mounts with the existing amber palette
  - A title tooltip explains the implication ("changes will sync when
    you reconnect")
  - If `pendingOpsCount > 0`, a small numeric badge is appended so the
    user sees the actual backlog size at a glance

`pendingOpsCount` is the existing store (kept in sync by SyncQueue);
nothing new wires up — we only surface what was already tracked.

OF-01 e2e: drives `context.setOffline(true)`, asserts the chip
appears, queues an INSERT, asserts the numeric badge renders, and
verifies the chip disappears when back online. Added alongside the
existing O-01/O-02 (banner-based) so we keep coverage of both surfaces.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Oier Bravo
2026-05-18 07:02:00 +02:00
parent a6e6915b0b
commit c8c7f9f8c9
4 changed files with 79 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/web/tests/e2e/offline.test.ts
View File

@@ -40,6 +40,37 @@ test.describe('Offline queue + reconnect flush', () => {
await context.setOffline(false);
});
test('OF-01: going offline shows the persistent chip + a queue badge', async ({
page,
context
}) => {
await loginAs(page, USERS.borja);
await page.goto(SEED_LIST_PATH);
await expect(page.getByPlaceholder(ADD_ITEM_PLACEHOLDER)).toBeVisible({ timeout: 15_000 });
// Online → chip hidden.
await expect(page.getByTestId('pwa-offline-chip')).toHaveCount(0);
await context.setOffline(true);
// At least one chip (mobile + desktop both mount; only the visible one
// matters but locator-count-based assertions need both).
await expect(page.getByTestId('pwa-offline-chip').first()).toBeVisible({ timeout: 3_000 });
const itemName = `OF-01-${Date.now()}`;
const input = page.getByPlaceholder(ADD_ITEM_PLACEHOLDER);
await input.fill(itemName);
await input.press('Enter');
// pending_ops should now contain at least the INSERT for the new item.
await expect(page.getByTestId('pwa-offline-chip-badge').first()).toHaveText(/\d+/, {
timeout: 3_000
});
await expect(page.getByText(itemName)).toBeVisible({ timeout: 3_000 });
await context.setOffline(false);
await expect(page.getByTestId('pwa-offline-chip')).toHaveCount(0, { timeout: 5_000 });
});
test('O-02: going back online flushes the queue to the server', async ({
browser,
context