diff --git a/src/components/shell/AppFooter.test.tsx b/src/components/shell/AppFooter.test.tsx
index 7374d2f0..c8700f7e 100644
--- a/src/components/shell/AppFooter.test.tsx
+++ b/src/components/shell/AppFooter.test.tsx
@@ -1,7 +1,11 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
import { renderToStaticMarkup } from 'react-dom/server';
import { describe, expect, it } from 'vitest';
import { AppFooter } from './AppFooter';
+const indexCssSource = readFileSync(fileURLToPath(new URL('../../index.css', import.meta.url)), 'utf8');
+
describe('AppFooter', () => {
it('renders online library status without announcing its decorative dot', () => {
const html = renderToStaticMarkup(
@@ -13,11 +17,17 @@ describe('AppFooter', () => {
);
expect(html).toContain('LIBRARY: 12 WORDS');
+ expect(html).toContain('app-footer-bar');
expect(html).toContain('STATUS:');
expect(html).toContain('Online');
expect(html).toContain('aria-hidden="true"');
});
+ it('gives the library status strip a raised surface and a visible edge', () => {
+ expect(indexCssSource).toMatch(/\.app-footer-bar\s*\{[^}]*border-top:\s*1px\s+solid\s+var\(--sf-border\)/s);
+ expect(indexCssSource).toMatch(/\.app-footer-bar\s*\{[^}]*background:\s*var\(--sf-surface-raised\)/s);
+ });
+
it('preserves the cache fallback labels', () => {
const offlineHtml = renderToStaticMarkup(
+