mirror of
https://github.com/lrnselfreliance/wrolpi.git
synced 2026-10-26 19:01:39 -04:00
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.
57 lines
2 KiB
JavaScript
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();
|
|
});
|
|
});
|