wrolpi/app/src/components/VncToggle.test.js
Roland 2629891ebc
ui: Common.js and thirteen more files off Semantic
Phase 2, part 3.  Baseline 63 -> 50.

Common.js is the one that mattered: 51 files import it, so its Semantic usage
was propping up the rest of the migration.  Everything in it now comes from the
library -- Paginator, the two search inputs, DirectorySearch, TabLinks, the
toggles, the messages, APIButton, Breadcrumbs, SimpleAccordion, IframeViewer,
CardPoster, FileIcon, LoadStatistic, the theme menu, and the hotspot icons.

Also migrated: Placeholder, Apps, ArchivePreview, CbzViewer, AddToPlaylist,
TaggedDeleteConfirmModal, the collection edit/tag forms, and four inventory
components.

New in the library, all in the gallery and tested:

  SearchBox     Semantic's `<Search category>` with its grouped results shape
                kept, because four call sites already build it.  A real
                combobox rather than a div that listens for clicks.
  Pagination    Semantic's prop names; onPageChange gets the page number.
  TabBar        the strip only -- routing stays with the caller.
  IconStack     Semantic's IconGroup, named once for assistive technology.
  Table.HeaderCell sorted/onSort -- a real button carrying aria-sort.
  Button/IconButton translate Semantic's size names.

That last one is defensive: unmigrated callers still pass size='tiny', and
Mantine drops a size it does not recognise without a word, so the button
quietly renders at the wrong size.  Mapping here keeps the mixed state honest.

Three real bugs found and fixed on the way, none of them cosmetic:

  * `fileSuffixIconName` returned fourteen icon names the map did not have, so
    opening a folder with a PDF, a Word document or an archive in it logged an
    error and drew a fallback glyph.  All fourteen mapped, with a test that
    walks the mapper's own return values, and another asserting every mapped
    name resolves to a Tabler component that exists.
  * `Statistic` relied on Semantic's `Statistic.Group` for its spacing, so on
    the dashboard the load averages ran together into "1 MIN. LOAD5 MIN.
    LOAD15 MIN. LOAD".  It carries its own spacing now.
  * Semantic's inverted stylesheet colors every descendant of an inverted
    segment, so Toggle labels inherited #dddddd -- white pixels in night mode,
    on the Settings page, which is exactly where someone adjusts their WROLPi
    in the dark.  Restated from tokens.

The baseline ratchet gained a third assertion: a migrated file may still lean
on Semantic's CSS classes without importing the library, which the import check
cannot see and which would collapse silently when Phase 4 deletes the
stylesheet.  There is one such bridge today and it is now declared.
2026-08-08 18:04:00 -06:00

57 lines
2 KiB
JavaScript

import React from 'react';
import {render, screen} from '../test-utils';
import userEvent from '@testing-library/user-event';
import {VncToggle} from './Common';
const mockSetVnc = jest.fn();
let mockVncState = {on: false, desktopRunning: true};
jest.mock('../hooks/customHooks', () => ({
...jest.requireActual('../hooks/customHooks'),
useVnc: () => ({...mockVncState, setVnc: mockSetVnc}),
}));
describe('VncToggle', () => {
beforeEach(() => {
mockSetVnc.mockClear();
mockVncState = {on: false, desktopRunning: true};
});
it('starts VNC when the Desktop is running', async () => {
render(<VncToggle/>);
const toggle = screen.getByTestId('toggle');
expect(toggle).not.toBeDisabled();
await userEvent.click(toggle);
expect(mockSetVnc).toHaveBeenCalledWith(true);
});
it('is disabled while the Desktop is stopped', async () => {
mockVncState = {on: false, desktopRunning: false};
render(<VncToggle/>);
await userEvent.click(screen.getByTestId('toggle'));
expect(mockSetVnc).not.toHaveBeenCalled();
});
it('can always be stopped, even with the Desktop stopped', async () => {
// Otherwise a running VNC server would be stranded on with no way to stop it.
mockVncState = {on: true, desktopRunning: false};
render(<VncToggle/>);
const toggle = screen.getByTestId('toggle');
expect(toggle).toBeChecked();
await userEvent.click(toggle);
expect(mockSetVnc).toHaveBeenCalledWith(false);
});
it('renders checked when VNC is running', () => {
mockVncState = {on: true, desktopRunning: true};
render(<VncToggle/>);
expect(screen.getByTestId('toggle')).toBeChecked();
});
it('does nothing when VNC is unsupported', async () => {
mockVncState = {on: null, desktopRunning: true};
render(<VncToggle/>);
await userEvent.click(screen.getByTestId('toggle'));
expect(mockSetVnc).not.toHaveBeenCalled();
});
});