Renders sidebar-footer indicator with ahead/behind/pending state. Pure DOM; reuses shared/glyphs (four new status glyphs) and shared/relative-time. Status fetch happens in the wiring layer (Task 6.3). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
|
import { renderStatusIndicator } from '../vault-status';
|
|
|
|
describe('vault status indicator', () => {
|
|
it('renders "in sync" when ahead/behind/pending all zero', () => {
|
|
const el = document.createElement('div');
|
|
renderStatusIndicator(el, { ahead: 0, behind: 0, lastSyncAt: 1700000000, pendingItems: 0 });
|
|
expect(el.textContent).toMatch(/in sync/i);
|
|
});
|
|
|
|
it('renders "N ahead" when ahead is non-zero', () => {
|
|
const el = document.createElement('div');
|
|
renderStatusIndicator(el, { ahead: 3, behind: 0, lastSyncAt: 1700000000, pendingItems: 0 });
|
|
expect(el.textContent).toMatch(/3 ahead/i);
|
|
});
|
|
|
|
it('renders "N behind" when behind is non-zero', () => {
|
|
const el = document.createElement('div');
|
|
renderStatusIndicator(el, { ahead: 0, behind: 2, lastSyncAt: 1700000000, pendingItems: 0 });
|
|
expect(el.textContent).toMatch(/2 behind/i);
|
|
});
|
|
|
|
it('renders "N pending" when pendingItems is non-zero', () => {
|
|
const el = document.createElement('div');
|
|
renderStatusIndicator(el, { ahead: 0, behind: 0, lastSyncAt: 1700000000, pendingItems: 5 });
|
|
expect(el.textContent).toMatch(/5 pending/i);
|
|
});
|
|
|
|
it('renders "never synced" when lastSyncAt is null', () => {
|
|
const el = document.createElement('div');
|
|
renderStatusIndicator(el, { ahead: 0, behind: 0, lastSyncAt: null, pendingItems: 0 });
|
|
expect(el.textContent).toMatch(/never synced/i);
|
|
});
|
|
});
|