28 lines
1.8 KiB
TypeScript
28 lines
1.8 KiB
TypeScript
import { readFileSync } from 'node:fs';
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
const app = readFileSync(new URL('../../src/app/App.tsx', import.meta.url), 'utf8');
|
|
const layout = readFileSync(new URL('../../src/styles/layout.css', import.meta.url), 'utf8');
|
|
|
|
describe('Header connection indicator', () => {
|
|
it('places the compact connection state directly before the client name in every header', () => {
|
|
expect(app).toContain('const headerContext = <div className="app-header-context">{connectionIndicator}{headerClientName &&');
|
|
expect(app).toContain('{readerToolbar}{headerContext}');
|
|
expect(app).toContain('</span>{headerContext}</div>');
|
|
expect(app).not.toContain('connection-pill');
|
|
expect(app).not.toContain('Server connected');
|
|
});
|
|
|
|
it('uses a red and green square with only the current state emphasized', () => {
|
|
expect(app).toContain('connection-state-square is-offline');
|
|
expect(app).toContain('connection-state-square is-online');
|
|
expect(app).toContain("backendStatus === 'connected' ? 'Server connection available'");
|
|
expect(app).toContain("'No server connection'");
|
|
expect(layout).toMatch(/\.connection-state-square\s*\{[^}]*width:\s*9px;[^}]*height:\s*9px;[^}]*border-radius:\s*0;/s);
|
|
expect(layout).toMatch(/\.connection-state-square\.is-offline\s*\{[^}]*background:\s*var\(--state-offline\);/s);
|
|
expect(layout).toMatch(/\.connection-state-square\.is-online\s*\{[^}]*background:\s*var\(--state-online\);/s);
|
|
expect(layout).toMatch(/\.connection-connected \.connection-state-square\.is-online\s*\{[^}]*opacity:\s*1;/s);
|
|
expect(layout).toMatch(/\.connection-unavailable \.connection-state-square\.is-offline,[\s\S]*?\.connection-checking \.connection-state-square\.is-offline\s*\{[^}]*opacity:\s*1;/s);
|
|
});
|
|
});
|