@sovereignfs/ui 0.41.0 → 0.54.0

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './Table';
+
+const meta = {
+  title: 'Components/Table',
+  component: Table,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Thin, styled wrappers around the native table elements. Not a data grid — no sort/filter/virtualization. Horizontal scroll (masked-edge fade, hidden scrollbar) at any viewport size.',
+      },
+    },
+  },
+  args: { children: null },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+const ROWS = [
+  { name: 'sovereign-tasks', status: 'Active', version: '1.4.2' },
+  { name: 'sovereign-ledger', status: 'Active', version: '2.0.0' },
+  { name: 'sovereign-shopper', status: 'Disabled', version: '0.9.1' },
+];
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Plugin</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Version</TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {ROWS.map((row) => (
+          <TableRow key={row.name}>
+            <TableCell>{row.name}</TableCell>
+            <TableCell>{row.status}</TableCell>
+            <TableCell>{row.version}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const WithoutHeader: Story = {
+  render: () => (
+    <Table>
+      <TableBody>
+        {ROWS.map((row) => (
+          <TableRow key={row.name}>
+            <TableCell>{row.name}</TableCell>
+            <TableCell>{row.status}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const LongContent: Story = {
+  render: () => (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Plugin</TableHeaderCell>
+          <TableHeaderCell>Description</TableHeaderCell>
+          <TableHeaderCell>Author</TableHeaderCell>
+          <TableHeaderCell>Repository</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Version</TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {ROWS.map((row) => (
+          <TableRow key={row.name}>
+            <TableCell>{row.name}</TableCell>
+            <TableCell>A longer description column to force horizontal overflow</TableCell>
+            <TableCell>sovereign-community</TableCell>
+            <TableCell>github.com/sovereignfs/{row.name}</TableCell>
+            <TableCell>{row.status}</TableCell>
+            <TableCell>{row.version}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const NarrowViewport: Story = {
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+  render: () => (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Plugin</TableHeaderCell>
+          <TableHeaderCell>Description</TableHeaderCell>
+          <TableHeaderCell>Author</TableHeaderCell>
+          <TableHeaderCell>Repository</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+          <TableHeaderCell>Version</TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {ROWS.map((row) => (
+          <TableRow key={row.name}>
+            <TableCell>{row.name}</TableCell>
+            <TableCell>A longer description column to force horizontal overflow</TableCell>
+            <TableCell>sovereign-community</TableCell>
+            <TableCell>github.com/sovereignfs/{row.name}</TableCell>
+            <TableCell>{row.status}</TableCell>
+            <TableCell>{row.version}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+import styles from './Table.module.css';
+
+export interface TableProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Table — thin, styled wrappers around the native table elements.
+ *
+ * Not a data grid: no sort, filter, or virtualization. `Table` wraps its
+ * content in a horizontally-scrolling container (masked-edge fade, hidden
+ * scrollbar — same technique as `NavTabs`) so a table wider than its
+ * container scrolls instead of overflowing the page, at any viewport size.
+ */
+export function Table({ children, className }: TableProps) {
+  return (
+    <div className={styles.scrollContainer}>
+      <table className={[styles.table, className].filter(Boolean).join(' ')}>{children}</table>
+    </div>
+  );
+}
+
+export function TableHead({ children }: { children: ReactNode }) {
+  return <thead className={styles.head}>{children}</thead>;
+}
+
+export function TableBody({ children }: { children: ReactNode }) {
+  return <tbody className={styles.body}>{children}</tbody>;
+}
+
+export function TableRow({ children }: { children: ReactNode }) {
+  return <tr className={styles.row}>{children}</tr>;
+}
+
+export function TableHeaderCell({ children, ...rest }: ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th className={styles.th} {...rest}>
+      {children}
+    </th>
+  );
+}
+
+export function TableCell({ children, ...rest }: TdHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td className={styles.td} {...rest}>
+      {children}
+    </td>
+  );
+}

package/src/components/Table/__tests__/Table.test.tsx

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../Table';
+
+afterEach(cleanup);
+
+function Demo() {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeaderCell>Name</TableHeaderCell>
+          <TableHeaderCell>Status</TableHeaderCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Alpha</TableCell>
+          <TableCell>Active</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Beta</TableCell>
+          <TableCell>Disabled</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+}
+
+describe('Table', () => {
+  it('renders a real table element', () => {
+    render(<Demo />);
+    expect(screen.getByRole('table')).toBeDefined();
+  });
+
+  it('renders header cells with columnheader role', () => {
+    render(<Demo />);
+    expect(screen.getAllByRole('columnheader').map((el) => el.textContent)).toEqual([
+      'Name',
+      'Status',
+    ]);
+  });
+
+  it('renders the correct number of body rows and cells', () => {
+    render(<Demo />);
+    expect(screen.getAllByRole('row').length).toBe(3); // 1 header + 2 body
+    expect(screen.getAllByRole('cell').length).toBe(4);
+  });
+});

package/src/components/Tabs/Tabs.module.css

@@ -12,7 +12,12 @@
 
 .tab {
   flex-shrink: 0;
-  padding: var(--sv-space-2) var(--sv-space-4);
+  /* 36px rendered height, matching this scale's other 36px controls (Input,
+     Select). Vertical padding hardcoded to hit the exact height, same
+     reasoning as Button — accounting for the 2px border-bottom below,
+     which (content-box) adds to the rendered height on top of font-size +
+     padding. */
+  padding: 10px var(--sv-space-4);
   border: none;
   border-bottom: 2px solid transparent;
   /* Negative margin pulls the 2px border flush with the tablist border-bottom */

package/src/components/Toggle/Toggle.module.css

@@ -1,5 +1,10 @@
 .track {
-  /* 38×22px pill — spec dimensions */
+  /* 38×22px pill — spec dimensions. Sizing audit: despite the component
+     name, this renders as a binary pill switch (role="switch"), not a
+     pressable toggle button — reviewed against this scale's other compact
+     controls with that in mind. Kept dimensions unchanged, generously
+     sized for touch-friendliness. (The name vs. actual behavior mismatch
+     is a separate, pre-existing naming note, not addressed here.) */
   display: inline-flex;
   align-items: center;
   width: 38px;

package/src/components/Typography/Typography.module.css

@@ -0,0 +1,47 @@
+.h1 {
+  margin: 0;
+  font-size: var(--sv-font-size-2xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h2 {
+  margin: 0;
+  font-size: var(--sv-font-size-xl);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h3 {
+  margin: 0;
+  font-size: var(--sv-font-size-lg);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.h4 {
+  margin: 0;
+  font-size: var(--sv-font-size-md);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.body {
+  margin: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-primary);
+}
+
+.caption {
+  margin: 0;
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+}
+
+.label {
+  font-size: var(--sv-font-size-label);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}

package/src/components/Typography/Typography.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Typography } from './Typography';
+
+const meta = {
+  title: 'Components/Typography',
+  component: Typography,
+  parameters: { layout: 'padded' },
+  args: {
+    variant: 'body',
+    children: 'The quick brown fox',
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const H1: Story = {
+  args: { variant: 'h1' },
+};
+
+export const H2: Story = {
+  args: { variant: 'h2' },
+};
+
+export const H3: Story = {
+  args: { variant: 'h3' },
+};
+
+export const H4: Story = {
+  args: { variant: 'h4' },
+};
+
+export const Body: Story = {
+  args: { variant: 'body' },
+};
+
+export const Caption: Story = {
+  args: { variant: 'caption' },
+};
+
+export const LabelVariant: Story = {
+  name: 'Label',
+  args: { variant: 'label', children: 'Section label' },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="h2">Heading 2</Typography>
+      <Typography variant="h3">Heading 3</Typography>
+      <Typography variant="h4">Heading 4</Typography>
+      <Typography variant="body">
+        Body copy — the default reading size for paragraphs and descriptions.
+      </Typography>
+      <Typography variant="caption">Caption — secondary, supporting copy.</Typography>
+      <Typography variant="label">Section label</Typography>
+    </div>
+  ),
+};

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,30 @@
+import type { ElementType, ReactNode } from 'react';
+import styles from './Typography.module.css';
+
+export type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'caption' | 'label';
+
+const DEFAULT_TAG: Record<TypographyVariant, ElementType> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  body: 'p',
+  caption: 'p',
+  label: 'span',
+};
+
+export interface TypographyProps {
+  variant: TypographyVariant;
+  children: ReactNode;
+  /** Override the rendered tag while keeping the variant's visual style —
+   * e.g. `variant="h1" as="div"` to avoid a second `<h1>` on a page that
+   * already has one. */
+  as?: ElementType;
+  className?: string;
+}
+
+/** Typography — text bound to the design system's font-size/weight scale. */
+export function Typography({ variant, children, as, className }: TypographyProps) {
+  const Tag = as ?? DEFAULT_TAG[variant];
+  return <Tag className={[styles[variant], className].filter(Boolean).join(' ')}>{children}</Tag>;
+}

package/src/components/Typography/__tests__/Typography.test.tsx

@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { Typography } from '../Typography';
+
+afterEach(cleanup);
+
+describe('Typography', () => {
+  it('renders the default tag for each variant', () => {
+    render(<Typography variant="h1">Title</Typography>);
+    expect(screen.getByText('Title').tagName).toBe('H1');
+  });
+
+  it('renders body as a <p> by default', () => {
+    render(<Typography variant="body">Body copy</Typography>);
+    expect(screen.getByText('Body copy').tagName).toBe('P');
+  });
+
+  it('renders label as a <span> by default', () => {
+    render(<Typography variant="label">Section</Typography>);
+    expect(screen.getByText('Section').tagName).toBe('SPAN');
+  });
+
+  it('overrides the rendered tag via `as` while keeping the variant class', () => {
+    render(
+      <Typography variant="h1" as="div">
+        Title
+      </Typography>,
+    );
+    const el = screen.getByText('Title');
+    expect(el.tagName).toBe('DIV');
+    expect(el.className).toContain('h1');
+  });
+});

package/src/hooks/__tests__/useCarouselRouteSync.test.tsx

@@ -0,0 +1,126 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render } from '@testing-library/react';
+import { useCarouselRouteSync } from '../useCarouselRouteSync';
+
+const SLIDES = ['/a', '/b', '/c'];
+function indexForPathname(pathname: string) {
+  const i = SLIDES.indexOf(pathname);
+  return i === -1 ? 0 : i;
+}
+function pathForIndex(index: number) {
+  return SLIDES[index] ?? '/a';
+}
+
+function Harness({
+  pathname,
+  onNavigate,
+  onResult,
+}: {
+  pathname: string;
+  onNavigate: (path: string) => void;
+  onResult: (result: { activeIndex: number; onSettle: (i: number) => void }) => void;
+}) {
+  const result = useCarouselRouteSync({ indexForPathname, pathForIndex, pathname, onNavigate });
+  onResult(result);
+  return <span data-testid="active">{result.activeIndex}</span>;
+}
+
+afterEach(cleanup);
+
+describe('useCarouselRouteSync', () => {
+  it('initializes activeIndex from the current pathname', () => {
+    const onNavigate = vi.fn();
+    const { getByTestId } = render(
+      <Harness pathname="/b" onNavigate={onNavigate} onResult={() => {}} />,
+    );
+    expect(getByTestId('active').textContent).toBe('1');
+    expect(onNavigate).not.toHaveBeenCalled();
+  });
+
+  it('an external pathname change (tapped Link, browser back/forward) updates activeIndex without calling onNavigate', () => {
+    const onNavigate = vi.fn();
+    const { getByTestId, rerender } = render(
+      <Harness pathname="/a" onNavigate={onNavigate} onResult={() => {}} />,
+    );
+    expect(getByTestId('active').textContent).toBe('0');
+
+    rerender(<Harness pathname="/c" onNavigate={onNavigate} onResult={() => {}} />);
+    expect(getByTestId('active').textContent).toBe('2');
+    expect(onNavigate).not.toHaveBeenCalled();
+  });
+
+  it("onSettle calls onNavigate with pathForIndex's output and updates activeIndex synchronously", () => {
+    const onNavigate = vi.fn();
+    let latest: { activeIndex: number; onSettle: (i: number) => void } = {
+      activeIndex: -1,
+      onSettle: () => {},
+    };
+    const { getByTestId } = render(
+      <Harness
+        pathname="/a"
+        onNavigate={onNavigate}
+        onResult={(r) => {
+          latest = r;
+        }}
+      />,
+    );
+
+    act(() => void latest.onSettle(2));
+
+    expect(getByTestId('active').textContent).toBe('2');
+    expect(onNavigate).toHaveBeenCalledWith('/c');
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+  });
+
+  it('does NOT re-trigger the external-nav branch on the pathname-effect run that follows its own onSettle-driven navigation', () => {
+    // This is the isInternalNav dance: onSettle navigates via onNavigate; the
+    // caller's router then re-renders this hook with the new pathname — that
+    // pathname change must be recognized as "our own settle, already
+    // applied" and NOT reprocessed as an external nav. Both existing plugins'
+    // code comments describe a real double-flicker bug from getting this
+    // wrong, so this is the highest-value assertion in this file.
+    const onNavigate = vi.fn();
+    let latest: { activeIndex: number; onSettle: (i: number) => void } = {
+      activeIndex: -1,
+      onSettle: () => {},
+    };
+    const { getByTestId, rerender } = render(
+      <Harness
+        pathname="/a"
+        onNavigate={onNavigate}
+        onResult={(r) => {
+          latest = r;
+        }}
+      />,
+    );
+
+    // Settle on /b (index 1) — this is the carousel's own gesture-driven navigation.
+    act(() => void latest.onSettle(1));
+    expect(getByTestId('active').textContent).toBe('1');
+    expect(onNavigate).toHaveBeenCalledWith('/b');
+
+    // The caller's router "commits" the navigation by re-rendering with the
+    // new pathname (exactly what onNavigate's real router.replace would
+    // eventually cause). If this were misidentified as an external nav, the
+    // effect would recompute indexForPathname('/b') anyway — same value, so
+    // a bug here wouldn't show up as a *wrong* index, only as an extra,
+    // redundant setState (the actual symptom in the original bug was a
+    // visible re-snap/flicker, not a wrong end state) — so this test also
+    // asserts onNavigate is never called a second time as a side effect of
+    // that re-render, which would happen if the effect treated it as new
+    // settle-worthy input rather than a no-op resync.
+    rerender(<Harness pathname="/b" onNavigate={onNavigate} onResult={(r) => (latest = r)} />);
+
+    expect(getByTestId('active').textContent).toBe('1');
+    expect(onNavigate).toHaveBeenCalledTimes(1);
+  });
+
+  it('an unrecognized pathname falls back to index 0', () => {
+    const onNavigate = vi.fn();
+    const { getByTestId } = render(
+      <Harness pathname="/unknown" onNavigate={onNavigate} onResult={() => {}} />,
+    );
+    expect(getByTestId('active').textContent).toBe('0');
+  });
+});

package/src/hooks/__tests__/useIsOffline.test.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render } from '@testing-library/react';
+import { useIsOffline } from '../useIsOffline';
+
+function Harness() {
+  const isOffline = useIsOffline();
+  return <span data-testid="out">{String(isOffline)}</span>;
+}
+
+describe('useIsOffline', () => {
+  beforeEach(() => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: true });
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('reflects navigator.onLine after mount', () => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('true');
+  });
+
+  it('does not report offline when navigator.onLine is true', () => {
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('false');
+  });
+
+  it('flips on the offline event', () => {
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('false');
+    act(() => window.dispatchEvent(new Event('offline')));
+    expect(getByTestId('out').textContent).toBe('true');
+  });
+
+  it('flips back on the online event', () => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const { getByTestId } = render(<Harness />);
+    expect(getByTestId('out').textContent).toBe('true');
+    act(() => window.dispatchEvent(new Event('online')));
+    expect(getByTestId('out').textContent).toBe('false');
+  });
+
+  it('removes its listeners on unmount', () => {
+    const removeSpy = vi.spyOn(window, 'removeEventListener');
+    const { unmount } = render(<Harness />);
+    unmount();
+    expect(removeSpy).toHaveBeenCalledWith('offline', expect.any(Function));
+    expect(removeSpy).toHaveBeenCalledWith('online', expect.any(Function));
+  });
+});

package/src/hooks/__tests__/useOfflineTileState.test.tsx

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render } from '@testing-library/react';
+import { useOfflineTileState } from '../useOfflineTileState';
+
+function Harness({
+  offline,
+  deviceOnlyAvailable,
+}: {
+  offline: 'offline-first' | 'device-only' | undefined;
+  deviceOnlyAvailable: boolean;
+}) {
+  const state = useOfflineTileState(offline, deviceOnlyAvailable);
+  return <span data-testid="out">{String(state)}</span>;
+}
+
+describe('useOfflineTileState', () => {
+  beforeEach(() => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: true });
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('is null for a no-tier app while online', () => {
+    const { getByTestId } = render(<Harness offline={undefined} deviceOnlyAvailable={false} />);
+    expect(getByTestId('out').textContent).toBe('null');
+  });
+
+  it('connectivity-dims a no-tier app while offline', () => {
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const { getByTestId } = render(<Harness offline={undefined} deviceOnlyAvailable={false} />);
+    expect(getByTestId('out').textContent).toBe('connectivity-dimmed');
+  });
+
+  it('never dims an offline-first app, online or offline', () => {
+    const online = render(<Harness offline="offline-first" deviceOnlyAvailable={false} />);
+    expect(online.getByTestId('out').textContent).toBe('null');
+    cleanup();
+
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const offline = render(<Harness offline="offline-first" deviceOnlyAvailable={false} />);
+    expect(offline.getByTestId('out').textContent).toBe('null');
+  });
+
+  it('capability-restricts a device-only app when unavailable, regardless of connectivity', () => {
+    const online = render(<Harness offline="device-only" deviceOnlyAvailable={false} />);
+    expect(online.getByTestId('out').textContent).toBe('capability-restricted');
+    cleanup();
+
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const offline = render(<Harness offline="device-only" deviceOnlyAvailable={false} />);
+    expect(offline.getByTestId('out').textContent).toBe('capability-restricted');
+  });
+
+  it('is not restricted for a device-only app when available, and not dimmed offline either', () => {
+    const online = render(<Harness offline="device-only" deviceOnlyAvailable={true} />);
+    expect(online.getByTestId('out').textContent).toBe('null');
+    cleanup();
+
+    // Availability is a capability signal, not a connectivity one — a
+    // device-only app that IS available behaves like offline-first once the
+    // capability question is settled.
+    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
+    const offline = render(<Harness offline="device-only" deviceOnlyAvailable={true} />);
+    expect(offline.getByTestId('out').textContent).toBe('null');
+  });
+});