wrolpi/app/src/components/ui/ui.test.js

import fs from 'fs';
import path from 'path';
import React from 'react';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {MantineProvider} from '@mantine/core';
import {IconMoodSmile} from '@tabler/icons-react';
import {ThemeContext} from '../../contexts/contexts';
import {cssVariablesResolver, mantineTheme, semanticColorNames} from '../../themes/mantine';
import {themeChoices} from '../../themes/names';
import {
    ActionInput,
    Button,
    Card,
    CardGroup,
    Confirm,
    Header,
    Icon,
    IconStack,
    Pagination,
    SearchBox,
    TabBar,
    tabClassName,
    IconButton,
    Label,
    Message,
    Modal,
    Panel,
    PathInput,
    Progress,
    resolveIconName,
    Statistic,
    StatisticGroup,
    Status,
    Table,
    ThemePicker,
    Toggle,
} from './index';

// The components need Mantine's provider, exactly as ThemeProvider supplies it.
const renderUI = (ui) => render(
    <MantineProvider theme={mantineTheme} cssVariablesResolver={cssVariablesResolver}>
        {ui}
    </MantineProvider>
);

describe('Icon', () => {
    it('renders a Semantic name as an SVG', () => {
        const {container} = renderUI(<Icon name='trash'/>);

        expect(container.querySelector('svg')).toBeInTheDocument();
    });

    it('accepts a Tabler component directly', () => {
        const {container} = renderUI(<Icon component={IconMoodSmile}/>);

        expect(container.querySelector('svg')).toBeInTheDocument();
    });

    it('maps every Semantic icon name the app uses', () => {
        // A name that falls through renders a fallback glyph, leaving a hole in the UI.
        const names = ['trash', 'warning sign', 'download', 'refresh', 'plus', 'edit', 'wifi',
            'search', 'lock', 'check', 'upload', 'play', 'folder', 'filter', 'file text',
            'external', 'disk', 'circle notched', 'terminal', 'eye'];

        const unmapped = names.filter(name => !resolveIconName(name));

        expect(unmapped).toEqual([]);
    });

    it('hides decorative icons from assistive technology but names labelled ones', () => {
        const {container} = renderUI(<><Icon name='trash'/><Icon name='trash' label='Delete'/></>);

        const [decorative, labelled] = [...container.querySelectorAll('svg')];
        expect(decorative).toHaveAttribute('aria-hidden', 'true');
        expect(labelled).toHaveAttribute('aria-label', 'Delete');
        expect(labelled).not.toHaveAttribute('aria-hidden');
    });

    it('maps every icon the theme choices ask for', () => {
        // Regression: the map was built by grepping literal name='...' strings, so icons
        // passed through a variable (the nav bar's picker) were missed and three of the
        // five theme choices rendered a fallback glyph.
        const unmapped = themeChoices.filter(choice => !resolveIconName(choice.icon));

        expect(unmapped.map(c => `${c.text}: ${c.icon}`)).toEqual([]);
    });

    it('maps every name the mimetype and file-suffix helpers can return', () => {
        // These two build icon names from arbitrary files in the user's library, so an
        // unmapped one is not hypothetical — it is a console error and a fallback glyph
        // the moment somebody opens a folder containing that file type.
        const common = fs.readFileSync(path.join(__dirname, '..', 'Common.js'), 'utf8');
        const section = common.slice(
            common.indexOf('export function mimetypeIconName'),
            common.indexOf('export function FileIcon'));
        const returned = [...new Set([...section.matchAll(/return '([^']+)'/g)].map(m => m[1]))];

        expect(returned.length).toBeGreaterThan(10);
        expect(returned.filter(name => !resolveIconName(name))).toEqual([]);
    });

    it('points every mapped name at a Tabler component that exists', () => {
        // A typo in the map resolves to undefined and renders the fallback glyph, which
        // looks like a design choice rather than a bug.
        const source = fs.readFileSync(path.join(__dirname, 'Icon.tsx'), 'utf8');
        const names = [...source.matchAll(/^ {4}'([^']+)': '([^']+)',$/gm)].map(m => m[1]);

        expect(names.length).toBeGreaterThan(100);
        expect(names.filter(name => !resolveIconName(name))).toEqual([]);
    });

    it('reports an unknown name instead of failing silently', () => {
        const error = jest.spyOn(console, 'error').mockImplementation(() => {});

        renderUI(<Icon name='not a real icon'/>);

        expect(error).toHaveBeenCalledWith(expect.stringContaining('not a real icon'));
        error.mockRestore();
    });
});

describe('Button', () => {
    it('renders a role as a themed button', () => {
        renderUI(<Button role='primary'>Download</Button>);

        expect(screen.getByRole('button', {name: 'Download'})).toBeInTheDocument();
    });

    it('marks destructive buttons so night mode can restyle them', () => {
        // The dashed-outline treatment lives in CSS keyed on this class; without it a
        // Delete button would stay filled red in night mode.
        renderUI(<Button role='danger'>Delete</Button>);

        expect(screen.getByRole('button', {name: 'Delete'})).toHaveClass('wrolpi-button-danger');
    });

    it('lets a call site override the role colors', () => {
        renderUI(<Button role='primary' variant='outline'>Odd one out</Button>);

        expect(screen.getByRole('button', {name: 'Odd one out'})).toHaveAttribute('data-variant', 'outline');
    });

    it('renders an icon alongside the label', () => {
        const {container} = renderUI(<Button role='save' icon='save'>Save</Button>);

        expect(container.querySelector('svg')).toBeInTheDocument();
        expect(screen.getByRole('button', {name: 'Save'})).toBeInTheDocument();
    });

    it('translates Semantic size names, which Mantine would otherwise ignore', () => {
        // Unmigrated call sites still pass size='tiny'.  Mantine drops a size it does not
        // recognise without warning, so the button quietly renders at the default size.
        renderUI(<><Button size='tiny'>Old</Button><Button size='sm'>New</Button></>);

        expect(screen.getByRole('button', {name: 'Old'})).toHaveAttribute('data-size', 'xs');
        // A Mantine size still passes through untouched.
        expect(screen.getByRole('button', {name: 'New'})).toHaveAttribute('data-size', 'sm');
    });

    it('renders an anchor when given an href, without being told twice', () => {
        /*
         * Mantine drops `href` unless it also gets `component='a'`, so a button carrying
         * only an href looked like a link and navigated nowhere.  Semantic spelled this
         * `as='a'`, so every migrated call site that kept just the href was silently
         * broken — a download button that downloads nothing.
         */
        renderUI(<>
            <Button href='/media/thing.pdf'>Download</Button>
            <IconButton icon='download' label='Save file' href='/media/other.pdf'/>
        </>);

        const link = screen.getByRole('link', {name: 'Download'});
        expect(link.tagName).toBe('A');
        expect(link).toHaveAttribute('href', '/media/thing.pdf');
        expect(screen.getByRole('link', {name: 'Save file'}).tagName).toBe('A');
    });

    it('forwards a ref to the underlying DOM element', () => {
        /*
         * Ported from the old Theme.test.js, which caught a real crash: Semantic's Button
         * was a class component, so a forwarded ref resolved to the class instance, and
         * anything that called `node.contains(...)` on the trigger -- a Modal or Popup
         * portal checking whether a click landed inside -- threw "contains is not a
         * function".  Our Tooltip and Menu targets rely on this ref too.
         */
        const ref = React.createRef();
        renderUI(<Button ref={ref}>Click</Button>);

        expect(ref.current).toBeInstanceOf(HTMLElement);
        expect(typeof ref.current.contains).toBe('function');
        expect(ref.current.tagName).toBe('BUTTON');
    });

    it('survives a document click while used as a modal trigger', () => {
        // The other half of that regression: the Control page crashed when the document
        // was clicked with a modal open whose trigger was a themed Button.
        renderUI(<>
            <Button>Open</Button>
            <Modal open onClose={jest.fn()}><Modal.Content>content</Modal.Content></Modal>
        </>);

        expect(() => document.body.dispatchEvent(new MouseEvent('click', {bubbles: true})))
            .not.toThrow();
    });

    it('is still a button when there is no href', () => {
        renderUI(<Button onClick={jest.fn()}>Save</Button>);

        expect(screen.getByRole('button', {name: 'Save'}).tagName).toBe('BUTTON');
    });

    it('gives icon-only buttons an accessible name', () => {
        renderUI(<IconButton icon='trash' label='Delete channel'/>);

        expect(screen.getByRole('button', {name: 'Delete channel'})).toBeInTheDocument();
    });
});

describe('Message', () => {
    it('announces errors assertively and other kinds politely', () => {
        renderUI(<><Message kind='error' title='Failed'/><Message kind='info' title='Working'/></>);

        expect(screen.getByRole('alert')).toHaveTextContent('Failed');
        expect(screen.getByRole('status')).toHaveTextContent('Working');
    });

    it('gives errors the dashed danger border in every theme', () => {
        renderUI(<Message kind='error' title='Failed'>Try again</Message>);

        expect(screen.getByRole('alert')).toHaveClass('wrolpi-message-error');
    });

    it('dismisses when asked', async () => {
        const onDismiss = jest.fn();
        renderUI(<Message title='Install the extension' onDismiss={onDismiss}/>);

        await userEvent.click(screen.getByRole('button', {name: 'Dismiss'}));

        expect(onDismiss).toHaveBeenCalled();
    });

    it('offers no dismiss button when the message cannot be cleared', () => {
        renderUI(<Message title='Refresh running'/>);

        expect(screen.queryByRole('button', {name: 'Dismiss'})).not.toBeInTheDocument();
    });

    it('renders a leading icon when given one', () => {
        const {container} = renderUI(<Message icon='puzzle piece' title='Extension'/>);

        expect(container.querySelector('.wrolpi-message-icon svg')).toBeInTheDocument();
    });
});

describe('Header', () => {
    it('renders the requested heading level', () => {
        renderUI(<Header as='h1'>Browser Extension</Header>);

        expect(screen.getByRole('heading', {level: 1, name: 'Browser Extension'})).toBeInTheDocument();
    });

    it('defaults to h3 so a call site that omits the level still nests sanely', () => {
        renderUI(<Header>Firefox</Header>);

        expect(screen.getByRole('heading', {level: 3, name: 'Firefox'})).toBeInTheDocument();
    });

    it('takes its size from the level, not from the call site', () => {
        // The class is what ui.css keys the type scale on; a call site passing its own
        // font-size is the thing this component exists to prevent.
        const {container} = renderUI(<Header as='h4'>Install steps</Header>);

        expect(container.querySelector('.wrolpi-header-h4')).toBeInTheDocument();
    });

    it('renders an icon and a subheader', () => {
        const {container} = renderUI(<Header icon='globe' subheader='Paste this into the extension'>
            This WROLPi's URL
        </Header>);

        expect(container.querySelector('svg')).toBeInTheDocument();
        expect(screen.getByText('Paste this into the extension')).toBeInTheDocument();
    });
});

describe('PathInput', () => {
    /*
     * These need no mocks at all -- no context, no API, no router.  That is the point of
     * putting the field in the library: the page that uses it needs a pile of provider and
     * fetch mocks, so its inputs were never covered, which is how a field shipped printing
     * its own prefix over its own value.
     */

    it('keeps the prefix out of the value', () => {
        // The bug this exists to prevent: the prefix must be its own element, never part of
        // the text the user is editing, so it cannot be typed over or submitted.
        renderUI(<PathInput prefix='/media/wrolpi/' label='Archive Directory'
                            value='archive/%(domain)s' onChange={jest.fn()}/>);

        const input = screen.getByLabelText(/Archive Directory/);
        expect(input).toHaveValue('archive/%(domain)s');
        expect(input.value).not.toContain('/media/wrolpi');
        // A sibling, not a child: an element inside the box could overlap it.
        expect(input.querySelector('*')).toBeNull();
        expect(screen.getByText('/media/wrolpi/')).not.toBe(input);
    });

    it('reports only what was typed, never the prefix', async () => {
        // Read the value inside the handler: React nulls `currentTarget` once the event has
        // been dispatched, so inspecting it afterwards from mock.calls throws.
        const seen = [];
        const onChange = jest.fn(event => seen.push(event.currentTarget.value));
        renderUI(<PathInput prefix='/media/wrolpi/' label='Map Directory' onChange={onChange}/>);

        await userEvent.type(screen.getByLabelText(/Map Directory/), 'map');

        expect(seen).toEqual(['m', 'ma', 'map']);
        seen.forEach(value => expect(value).not.toContain('/media/wrolpi'));
    });

    it('tells assistive technology what the path is relative to', () => {
        // Sighted users get that from the prefix; hiding it would leave everyone else
        // typing a relative path with no idea what it is relative to.
        renderUI(<PathInput prefix='/media/wrolpi/' label='Zims Directory' value='' onChange={jest.fn()}/>);

        expect(screen.getByLabelText(/Zims Directory/)).toHaveAccessibleDescription('/media/wrolpi/');
    });

    it('disables the input, not just the wrapper', async () => {
        const onChange = jest.fn();
        renderUI(<PathInput prefix='/media/wrolpi/' label='Videos Directory' disabled
                            value='videos' onChange={onChange}/>);

        const input = screen.getByLabelText(/Videos Directory/);
        expect(input).toBeDisabled();
        await userEvent.type(input, 'x');
        expect(onChange).not.toHaveBeenCalled();
    });

    it('marks an invalid path so the dashed danger treatment applies', () => {
        const {container} = renderUI(<PathInput prefix='/media/wrolpi/' label='Bad'
                                                error='Not a directory' value='' onChange={jest.fn()}/>);

        expect(container.querySelector('[data-error]')).toBeInTheDocument();
        expect(screen.getByText('Not a directory')).toBeInTheDocument();
    });

    it('reads out its help text as well as the prefix', () => {
        /*
         * Rendering the description on screen is not the same as announcing it.  Unless it is
         * referenced, a screen reader user hears the label and the prefix and never learns
         * what the field expects -- the help text is the part that explains the variables
         * these paths are allowed to contain.
         */
        renderUI(<PathInput
            prefix='/media/wrolpi/'
            label='Archive Directory'
            description='Accepts %(domain)s and %(tag)s.'
            value=''
            onChange={jest.fn()}
        />);

        expect(screen.getByLabelText(/Archive Directory/))
            .toHaveAccessibleDescription('/media/wrolpi/ Accepts %(domain)s and %(tag)s.');
    });

    it('announces the reason a path was rejected', () => {
        // The dashed border and red text carry the failure for sighted users; without the
        // error in the accessible description nothing carries it for anyone else.
        renderUI(<PathInput prefix='/media/wrolpi/' label='Zims Directory'
                            error='Not a directory' value='' onChange={jest.fn()}/>);

        const input = screen.getByLabelText(/Zims Directory/);
        expect(input).toHaveAccessibleDescription(/Not a directory/);
        expect(input).toBeInvalid();
    });

    it('is not marked invalid when there is nothing wrong with it', () => {
        renderUI(<PathInput prefix='/media/wrolpi/' label='Fine' value='' onChange={jest.fn()}/>);

        expect(screen.getByLabelText(/Fine/)).toBeValid();
    });

    it('forwards a ref to the input, for callers that focus it', () => {
        const ref = React.createRef();
        renderUI(<PathInput ref={ref} prefix='/media/wrolpi/' label='Focusable'
                            value='' onChange={jest.fn()}/>);

        expect(ref.current.tagName).toBe('INPUT');
    });
});

describe('no input reserves space for a section it cannot measure', () => {
    it('nothing passes leftSectionWidth="auto"', () => {
        /*
         * `leftSectionWidth` becomes `--input-padding-inline-start`, and
         * `padding-inline-start: auto` is not valid CSS -- it resolves to zero, so the
         * section prints straight over the value.  Five fields on the Settings page shipped
         * that way and were unreadable.  It fails silently, in CSS, at runtime only, which
         * is exactly the kind of thing worth a source check.
         */
        const offenders = [];
        const walk = (dir) => {
            for (const entry of fs.readdirSync(dir, {withFileTypes: true})) {
                const full = path.join(dir, entry.name);
                if (entry.isDirectory()) walk(full);
                // Specs are exempt: ui-layout.cy.js reproduces this exact mistake on
                // purpose, to prove its overlap check can still detect it.
                else if (/\.(js|jsx|tsx)$/.test(entry.name)
                    && !/\.test\.|\.cy\./.test(entry.name)) {
                    // Comments are stripped first: the component that replaced this
                    // pattern documents it by name, and prose about a mistake is not the
                    // mistake.
                    const source = fs.readFileSync(full, 'utf8')
                        .replace(/\/\*[\s\S]*?\*\//g, '')
                        .replace(/^\s*\/\/.*$/gm, '');
                    if (/leftSectionWidth\s*=\s*['"`]auto['"`]/.test(source)
                        || /rightSectionWidth\s*=\s*['"`]auto['"`]/.test(source)) {
                        offenders.push(path.relative(path.join(__dirname, '..', '..'), full));
                    }
                }
            }
        };
        walk(path.join(__dirname, '..', '..'));

        expect(offenders).toEqual([]);
    });
});

describe('the library stays mockable-free', () => {
    /*
     * The whole reason these 80-odd tests need no setup is that a library component takes
     * props and reaches for nothing else -- no module-level fetch, no API helper, no
     * ambient state it has to be lied to about.  Pages are the opposite: DomainEditPage
     * needs seven jest.mock calls before it will render at all, which is precisely why the
     * inputs on the Settings page had no test when they broke.
     *
     * That property is worth asserting rather than hoping for.  The day a library
     * component grows a fetch, the mock somebody has to add to keep this file passing
     * trips the first check, and the import trips the second.
     */

    const libraryFiles = () => fs.readdirSync(__dirname)
        .filter(name => /\.(ts|tsx)$/.test(name) && !/\.test\./.test(name))
        .map(name => [name, fs.readFileSync(path.join(__dirname, name), 'utf8')]);

    it('needs no module mocked to render any of it', () => {
        const source = fs.readFileSync(path.join(__dirname, 'ui.test.js'), 'utf8')
            .replace(/\/\*[\s\S]*?\*\//g, '')
            .replace(/^\s*\/\/.*$/gm, '');

        expect(source).not.toMatch(/jest\.mock\s*\(/);
    });

    it('asks the network for nothing', () => {
        const offenders = libraryFiles()
            .filter(([, source]) => /\bfetch\s*\(|\bapiCall\b|\baxios\b/
                .test(source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '')))
            .map(([name]) => name);

        expect(offenders).toEqual([]);
    });

    it('reads ambient state only in the theme controls', () => {
        /*
         * ThemePicker and MediaFilterToggle are the deliberate exception -- a control whose
         * entire job is to show and change the current theme has to know it.  Their tests
         * pass a real ThemeContext.Provider holding plain values, which is supplying data,
         * not mocking a module.  Everything else takes props.
         */
        const offenders = libraryFiles()
            .filter(([name]) => name !== 'ThemePicker.tsx')
            .filter(([, source]) => /useContext\s*\(/.test(source))
            .map(([name]) => name);

        expect(offenders).toEqual([]);
    });
});

describe('ActionInput', () => {
    it('joins the input and its action into one control', () => {
        const {container} = renderUI(
            <ActionInput label='URL' value='https://wrolpi.local' readOnly
                         action={<Button role='cancel'>Copy</Button>}/>
        );

        expect(container.querySelector('.wrolpi-action-input')).toBeInTheDocument();
        expect(screen.getByRole('textbox', {name: 'URL'})).toHaveValue('https://wrolpi.local');
        expect(screen.getByRole('button', {name: 'Copy'})).toBeInTheDocument();
    });

    it('is a plain input when no action is given', () => {
        const {container} = renderUI(<ActionInput label='URL'/>);

        expect(container.querySelector('.wrolpi-action-input')).not.toBeInTheDocument();
        expect(screen.getByRole('textbox', {name: 'URL'})).toBeInTheDocument();
    });
});

describe('Progress', () => {
    it('reports its value to assistive technology', () => {
        renderUI(<Progress percent={62}/>);

        const bar = screen.getByRole('progressbar');
        expect(bar).toHaveAttribute('aria-valuenow', '62');
        expect(bar).toHaveTextContent('62%');
    });

    it('keeps its percent text readable on every bar colour', () => {
        /*
         * Ported from Theme.test.js, which asserted Semantic's `inverted-progress-text`
         * class across all fourteen colours and both modes.  That class is gone; the
         * mechanism now is that the text always takes `--text` while light mode lightens
         * the fill beneath it, because the text sits across both the filled and unfilled
         * halves of the bar.
         */
        const css = fs.readFileSync(path.join(__dirname, 'ui.css'), 'utf8');

        expect(css).toMatch(/\.wrolpi-progress-text\s*{[^}]*color:\s*var\(--text\)/);
        expect(css).toMatch(/html\[data-theme="light"] \.wrolpi-progress-fill\s*{[^}]*brightness/);
    });

    it('clamps values outside 0-100', () => {
        // A download reporting 103% must not overflow its container.
        renderUI(<><Progress percent={150}/><Progress percent={-20}/></>);

        const [high, low] = screen.getAllByRole('progressbar');
        expect(high).toHaveAttribute('aria-valuenow', '100');
        expect(low).toHaveAttribute('aria-valuenow', '0');
    });

    it('survives a missing percentage', () => {
        renderUI(<Progress percent={undefined}/>);

        expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '0');
    });

    it('reports no value when the size is unknown', () => {
        // Semantic called this `indicating`.  An upload that has not reported its size
        // would otherwise sit at 0% and read as stalled, and `aria-valuenow=0` would tell
        // a screen reader the same wrong thing.
        renderUI(<Progress indeterminate label='Uploading…'/>);

        const bar = screen.getByRole('progressbar');
        expect(bar).not.toHaveAttribute('aria-valuenow');
        expect(bar).toHaveClass('wrolpi-progress-indeterminate');
    });

    it('shows arbitrary label text instead of the percentage', () => {
        renderUI(<Progress percent={40} label='2.1 GB / 5.3 GB'/>);

        expect(screen.getByRole('progressbar')).toHaveTextContent('2.1 GB / 5.3 GB');
    });
});

describe('Status', () => {
    it('names the state in a class so themes can encode it differently', () => {
        // Night mode has no hue to spend, so it encodes status by brightness.
        const {container} = renderUI(<Status kind='failed'>failed</Status>);

        expect(container.querySelector('.wrolpi-status-failed')).toBeInTheDocument();
    });
});

describe('Label', () => {
    it('supports every Semantic color', () => {
        const {container} = renderUI(<>
            {semanticColorNames.map(color => <Label key={color} color={color}>{color}</Label>)}
        </>);

        expect(container.querySelectorAll('.wrolpi-label')).toHaveLength(semanticColorNames.length);
    });
});

describe('Label as a tag', () => {
    it('is a plain chip unless asked to be a tag', () => {
        // The same component carries the count badges in the Tags table -- file, zim, channel
        // and domain counts -- and a pointed left edge on a number reads as an arrow.
        const {container} = renderUI(<Label color='blue'>1,432</Label>);

        expect(container.querySelector('.wrolpi-label')).toBeInTheDocument();
        expect(container.querySelector('.wrolpi-tag')).not.toBeInTheDocument();
    });

    it('takes the tag shape when asked', () => {
        const {container} = renderUI(<Label tag color='blue'>Water</Label>);

        expect(container.querySelector('.wrolpi-tag')).toBeInTheDocument();
    });

    it('leaves the text colour to the stylesheet', () => {
        // Every label routes its text colour through `--label-text` so that night and amber,
        // which replace the fill with their own, can replace the text colour with it.  An
        // inline `color` could not be overridden by either.
        const {container} = renderUI(<Label tag color='blue'>Water</Label>);

        expect(container.querySelector('.wrolpi-label').style.color).toBe('');
    });
});

describe('Table', () => {
    it('renders a Semantic-shaped compound table', () => {
        renderUI(<Table>
            <Table.Header>
                <Table.Row><Table.HeaderCell>URL</Table.HeaderCell></Table.Row>
            </Table.Header>
            <Table.Body>
                <Table.Row><Table.Cell>example.com</Table.Cell></Table.Row>
            </Table.Body>
        </Table>);

        expect(screen.getByRole('columnheader', {name: 'URL'})).toBeInTheDocument();
        expect(screen.getByRole('cell', {name: 'example.com'})).toBeInTheDocument();
    });

    it('marks failed rows for the danger border', () => {
        const {container} = renderUI(<Table>
            <Table.Body>
                <Table.Row failed><Table.Cell>broken</Table.Cell></Table.Row>
            </Table.Body>
        </Table>);

        expect(container.querySelector('.wrolpi-row-failed')).toBeInTheDocument();
    });

    it('makes a sortable column a keyboard-reachable button that announces its state', async () => {
        // A click handler on the <th> alone is unreachable by keyboard, and the arrow
        // glyph says nothing to a screen reader.
        const onSort = jest.fn();
        renderUI(<Table>
            <Table.Header>
                <Table.Row>
                    <Table.HeaderCell sorted='descending' onSort={onSort}>Size</Table.HeaderCell>
                    <Table.HeaderCell onSort={jest.fn()}>Name</Table.HeaderCell>
                    <Table.HeaderCell>Actions</Table.HeaderCell>
                </Table.Row>
            </Table.Header>
        </Table>);

        expect(screen.getByRole('columnheader', {name: /Size/})).toHaveAttribute('aria-sort', 'descending');
        // Sortable but not currently sorted.
        expect(screen.getByRole('columnheader', {name: /Name/})).toHaveAttribute('aria-sort', 'none');
        // Not sortable at all.
        expect(screen.getByRole('columnheader', {name: 'Actions'})).not.toHaveAttribute('aria-sort');

        await userEvent.click(screen.getByRole('button', {name: /Size/}));
        expect(onSort).toHaveBeenCalled();
    });

    it('keeps wide tables from scrolling the page sideways', () => {
        const {container} = renderUI(<Table><Table.Body>
            <Table.Row><Table.Cell>wide</Table.Cell></Table.Row>
        </Table.Body></Table>);

        expect(container.querySelector('.wrolpi-table-scroll')).toBeInTheDocument();
    });
});

describe('Card', () => {
    it('draws a mimetype accent from a token, not a hex', () => {
        // File cards carry the mimetype's colour on their top edge so a grid of results is
        // scannable by kind.  Semantic did this with `<Card color='violet'>`; two migrated
        // files had dropped the accent because our Card had no equivalent.
        const {container} = renderUI(<Card title='Water Storage.pdf' color='red'/>);

        expect(container.firstChild).toHaveStyle({borderBottom: '3px solid var(--red)'});
    });

    it('has no accent when no colour is given', () => {
        const {container} = renderUI(<Card title='Plain'/>);

        expect(container.firstChild.style.borderBottom).toBe('');
    });
});

describe('CardGroup', () => {
    it('renders every card it is given', () => {
        renderUI(<CardGroup>
            <Card title='One'/>
            <Card title='Two'/>
            <Card title='Three'/>
        </CardGroup>);

        expect(screen.getByText('One')).toBeInTheDocument();
        expect(screen.getByText('Two')).toBeInTheDocument();
        expect(screen.getByText('Three')).toBeInTheDocument();
    });

    it('lays cards out on a track no narrower than minWidth', () => {
        // The default suits file results; a group of wide cards raises it.  If the value were
        // dropped the grid would fall back to one column, which is how a card wall becomes a
        // list on a desktop.
        const {container} = renderUI(<CardGroup minWidth={320}><Card title='One'/></CardGroup>);

        expect(container.querySelector('.wrolpi-card-group'))
            .toHaveStyle({gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))'});
    });
});

describe('Statistic', () => {
    it('shows the value and its label', () => {
        renderUI(<Statistic value='87.4 GiB' label='Free space'/>);

        expect(screen.getByText('87.4 GiB')).toBeInTheDocument();
        expect(screen.getByText('Free space')).toBeInTheDocument();
    });

    it('colours the value from a token, not a hex', () => {
        // Status turns load, temperature and IO wait red or orange.  A hex here would not
        // remap in night mode, putting a green or orange pixel on a red-only screen.
        const {container} = renderUI(<Statistic value='3.9' label='1 Min. Load' color='red'/>);

        expect(container.querySelector('.wrolpi-statistic-value')).toHaveStyle({color: 'var(--red)'});
    });

    it('leaves the value in body text when no colour is given', () => {
        const {container} = renderUI(<Statistic value='0.4' label='1 Min. Load'/>);

        expect(container.querySelector('.wrolpi-statistic-value').style.color).toBe('');
    });

    it('renders a zero rather than nothing', () => {
        // `pending_downloads` is 0 on an idle WROLPi, and a falsy check would blank the cell.
        renderUI(<Statistic value={0} label='Downloading'/>);

        expect(screen.getByText('0')).toBeInTheDocument();
    });

    it('forwards the props its wrappers spread onto it', () => {
        // `LoadStatistic` and the four Status wrappers (`CPUTemperatureStatistic`,
        // `FanRPMStatistic`, `IOWaitStatistic`, `UptimeStatistic`) all end in `{...props}`.
        // Statistic destructured a fixed five and dropped the rest on the floor, so anything
        // a caller passed through a wrapper vanished with no error anywhere.
        renderUI(<Statistic value='42' label='Fan RPM' title='Reported by the fan connector'/>);

        expect(screen.getByTitle('Reported by the fan connector')).toBeInTheDocument();
    });
});

describe('StatisticGroup', () => {
    it('gives each statistic its own cell', () => {
        const {container} = renderUI(<StatisticGroup>
            <Statistic value='1,432' label='Videos'/>
            <Statistic value='896' label='Archives'/>
        </StatisticGroup>);

        expect(container.querySelectorAll('.wrolpi-statistic-cell')).toHaveLength(2);
    });

    it('leaves a cell empty when its statistic renders nothing', () => {
        // `FanRPMStatistic` returns null on a device with no fan connector, which is most of
        // them.  The group cannot know that in advance, so the cell is still emitted and
        // `.wrolpi-statistic-cell:empty` takes it back out -- which only works while the cell
        // has nothing of its own inline for that rule to have to outrank.
        const Nothing = () => null;
        const {container} = renderUI(<StatisticGroup>
            <Statistic value='1,432' label='Videos'/>
            <Nothing/>
        </StatisticGroup>);

        const cells = container.querySelectorAll('.wrolpi-statistic-cell');
        expect(cells[1].childNodes).toHaveLength(0);
        expect(cells[1].getAttribute('style')).toBeNull();
    });

    it('draws no chrome of its own, in markup or in style', () => {
        // The group is spacing only: the statistics sit on whatever surface they were dropped
        // onto and take its colour.  An inline border or background here would override the
        // stylesheet and could not be themed, so nothing may set one.
        const {container} = renderUI(<StatisticGroup>
            <Statistic value='1,432' label='Videos'/>
            <Statistic value='896' label='Archives'/>
        </StatisticGroup>);

        const group = container.querySelector('.wrolpi-statistic-group');
        expect(group.style.border).toBe('');
        expect(group.style.background).toBe('');
        expect(group.style.backgroundColor).toBe('');
        for (const cell of container.querySelectorAll('.wrolpi-statistic-cell')) {
            expect(cell.getAttribute('style')).toBeNull();
        }
    });

    it('still passes a style from the caller through', () => {
        const {container} = renderUI(<StatisticGroup style={{maxWidth: 600}}>
            <Statistic value='1,432' label='Videos'/>
        </StatisticGroup>);

        expect(container.querySelector('.wrolpi-statistic-group')).toHaveStyle({maxWidth: '600px'});
    });
});

describe('Panel', () => {
    it('marks danger zones', () => {
        const {container} = renderUI(<Panel danger>Destructive actions</Panel>);

        expect(container.querySelector('.wrolpi-panel-danger')).toBeInTheDocument();
    });
});

describe('Toggle', () => {
    it('carries the class its unchecked-track rule needs', () => {
        // Mantine writes --switch-bg onto the track element, so the token override has to
        // be a CSS rule scoped to this class rather than a style on the root.  Without it
        // the unchecked track falls back to Mantine's gray — a non-red pixel in night mode.
        const {container} = renderUI(<Toggle label='Hotspot'/>);

        expect(container.querySelector('.wrolpi-switch')).toBeInTheDocument();
    });

    it('exposes the switch role and reports its state', async () => {
        const onChange = jest.fn();
        renderUI(<Toggle label='Hotspot' checked={false} onChange={onChange}/>);

        const toggle = screen.getByRole('switch', {name: 'Hotspot'});
        expect(toggle).not.toBeChecked();
        await userEvent.click(toggle);

        expect(onChange).toHaveBeenCalled();
    });
});

describe('ThemePicker', () => {
    const renderPicker = (themeContext = {}) => {
        const setTheme = jest.fn();
        const value = {
            savedTheme: null,
            setTheme,
            mediaFilterEnabled: false,
            setMediaFilterEnabled: jest.fn(),
            ...themeContext,
        };
        render(
            <MantineProvider theme={mantineTheme} cssVariablesResolver={cssVariablesResolver}>
                <ThemeContext.Provider value={value}><ThemePicker/></ThemeContext.Provider>
            </MantineProvider>
        );
        return setTheme;
    };

    it('offers every theme plus following the system', () => {
        renderPicker();

        const options = screen.getAllByRole('radio').map(o => o.textContent);
        ['System', 'Light', 'Dark', 'Night', 'Amber'].forEach(name => {
            expect(options.some(text => text.startsWith(name))).toBe(true);
        });
    });

    it('marks the saved theme as selected', () => {
        renderPicker({savedTheme: 'night'});

        const night = screen.getAllByRole('radio').find(o => o.textContent.startsWith('Night'));
        expect(night).toHaveAttribute('aria-checked', 'true');
    });

    it('treats a user who has never chosen as following the system', () => {
        renderPicker({savedTheme: null});

        const system = screen.getAllByRole('radio').find(o => o.textContent.startsWith('System'));
        expect(system).toHaveAttribute('aria-checked', 'true');
    });

    it('applies the theme a user picks', async () => {
        const setTheme = renderPicker();

        await userEvent.click(screen.getAllByRole('radio').find(o => o.textContent.startsWith('Amber')));

        expect(setTheme).toHaveBeenCalledWith('amber');
    });

    it('explains what night mode is for', () => {
        // Users need to know it filters media too, not just the interface.
        renderPicker();

        expect(screen.getByText(/night vision/i)).toBeInTheDocument();
    });

    it('offers the media filter toggle in a theme that has one', () => {
        renderPicker({
            theme: 'night',
            mediaFilter: {id: 'night-red', defaultOn: true, label: 'Filter media to red',
                description: 'Videos, images, documents, and maps are remapped to red.'},
            mediaFilterEnabled: true,
        });

        expect(screen.getByRole('switch', {name: /filter media to red/i})).toBeChecked();
    });

    it('offers no toggle in a theme with no filter to offer', () => {
        // Light and dark have no monochrome media treatment, so there is nothing to say.
        renderPicker({theme: 'light', mediaFilter: undefined, mediaFilterEnabled: false});

        expect(screen.queryByRole('switch')).not.toBeInTheDocument();
    });

    it('turns the filter off when the user flips the toggle', async () => {
        const setMediaFilterEnabled = jest.fn();
        renderPicker({
            theme: 'night',
            mediaFilter: {id: 'night-red', defaultOn: true, label: 'Filter media to red',
                description: 'Videos, images, documents, and maps are remapped to red.'},
            mediaFilterEnabled: true,
            setMediaFilterEnabled,
        });

        await userEvent.click(screen.getByRole('switch', {name: /filter media to red/i}));

        expect(setMediaFilterEnabled).toHaveBeenCalledWith(false);
    });
});

describe('Pagination', () => {
    it('reports the current page and moves when one is clicked', async () => {
        const onPageChange = jest.fn();
        renderUI(<Pagination activePage={3} totalPages={12} onPageChange={onPageChange}/>);

        await userEvent.click(screen.getByRole('button', {name: 'Page 5'}));

        expect(onPageChange).toHaveBeenCalledWith(5);
    });

    it('still renders one page when the total is unknown', () => {
        // Downloads render the paginator before the first response arrives; collapsing to
        // nothing and back shifts the whole page.
        renderUI(<Pagination activePage={1} totalPages={undefined} onPageChange={jest.fn()}/>);

        expect(screen.getByRole('button', {name: 'Page 1'})).toBeInTheDocument();
    });
});

describe('TabBar', () => {
    it('marks the active tab with a class the themes key on', () => {
        const {container} = renderUI(<TabBar>
            <button className={tabClassName(true)}>Videos</button>
            <button className={tabClassName(false)}>Channels</button>
        </TabBar>);

        expect(container.querySelectorAll('.wrolpi-tab')).toHaveLength(2);
        expect(container.querySelectorAll('.wrolpi-tab-active')).toHaveLength(1);
    });
});

describe('SearchBox', () => {
    const results = {
        directories: {name: 'Directories', results: [{title: 'videos/'}]},
        channels: {name: 'Channels', results: [
            {title: 'videos/Wranglerstar', description: 'Wranglerstar'},
            {title: 'videos/RoseRed', description: 'RoseRed Homestead'},
        ]},
    };

    it('submits what was typed', async () => {
        const onSubmit = jest.fn();
        renderUI(<SearchBox value='axe' onChange={jest.fn()} onSubmit={onSubmit}/>);

        await userEvent.type(screen.getByRole('textbox'), '{Enter}');

        expect(onSubmit).toHaveBeenCalledWith('axe');
    });

    it('shows suggestions under their group headings', async () => {
        renderUI(<SearchBox value='vid' onChange={jest.fn()} results={results}
                            onResultSelect={jest.fn()}/>);

        await userEvent.click(screen.getByRole('combobox'));

        expect(screen.getByText('Directories')).toBeInTheDocument();
        expect(screen.getAllByRole('option')).toHaveLength(3);
    });

    it('selects a suggestion by click', async () => {
        const onResultSelect = jest.fn();
        renderUI(<SearchBox value='vid' onChange={jest.fn()} results={results}
                            onResultSelect={onResultSelect}/>);
        await userEvent.click(screen.getByRole('combobox'));

        await userEvent.click(screen.getByText('videos/Wranglerstar'));

        expect(onResultSelect).toHaveBeenCalledWith(
            expect.objectContaining({title: 'videos/Wranglerstar'}));
    });

    it('moves through suggestions with the arrow keys and takes one with Enter', async () => {
        const onResultSelect = jest.fn();
        const onSubmit = jest.fn();
        renderUI(<SearchBox value='vid' onChange={jest.fn()} results={results}
                            onResultSelect={onResultSelect} onSubmit={onSubmit}/>);

        const input = screen.getByRole('combobox');
        await userEvent.click(input);
        await userEvent.keyboard('{ArrowDown}{ArrowDown}{Enter}');

        expect(onResultSelect).toHaveBeenCalledWith(
            expect.objectContaining({title: 'videos/Wranglerstar'}));
        // Enter took the highlighted suggestion instead of submitting the raw text.
        expect(onSubmit).not.toHaveBeenCalled();
    });

    it('wraps around rather than stranding the user at the end of the list', async () => {
        const onResultSelect = jest.fn();
        renderUI(<SearchBox value='vid' onChange={jest.fn()} results={results}
                            onResultSelect={onResultSelect}/>);

        await userEvent.click(screen.getByRole('combobox'));
        await userEvent.keyboard('{ArrowUp}{Enter}');

        expect(onResultSelect).toHaveBeenCalledWith(
            expect.objectContaining({title: 'videos/RoseRed'}));
    });

    it('lets a caller render a suggestion its own way', async () => {
        // The search suggestions render a tag as a chip rather than a line of text; a
        // dropped resultRenderer loses that presentation silently.
        renderUI(<SearchBox value='vid' onChange={jest.fn()} results={results}
                            onResultSelect={jest.fn()}
                            resultRenderer={result => <em>{`custom: ${result.title}`}</em>}/>);

        await userEvent.click(screen.getByRole('combobox'));

        expect(screen.getByText('custom: videos/Wranglerstar').tagName).toBe('EM');
        // The default title/description markup is replaced, not wrapped.
        expect(document.querySelector('.wrolpi-searchbox-result-title')).not.toBeInTheDocument();
    });

    it('closes on Escape without clearing what was typed', async () => {
        const onChange = jest.fn();
        renderUI(<SearchBox value='vid' onChange={onChange} results={results}
                            onResultSelect={jest.fn()}/>);
        await userEvent.click(screen.getByRole('combobox'));

        await userEvent.keyboard('{Escape}');

        expect(screen.queryByRole('option')).not.toBeInTheDocument();
        expect(screen.getByRole('combobox')).toHaveValue('vid');
        expect(onChange).not.toHaveBeenCalled();
    });

    it('says it is searching rather than "no results" while suggestions are pending', async () => {
        renderUI(<SearchBox value='vid' onChange={jest.fn()} results={{}} loading
                            onResultSelect={jest.fn()}/>);

        await userEvent.click(screen.getByRole('combobox'));

        expect(screen.getByText(/searching/i)).toBeInTheDocument();
    });

    it('clears the input and submits the empty search', async () => {
        const onChange = jest.fn();
        const onSubmit = jest.fn();
        renderUI(<SearchBox value='axe' onChange={onChange} onSubmit={onSubmit} clearable/>);

        await userEvent.click(screen.getByRole('button', {name: 'Clear search'}));

        expect(onChange).toHaveBeenCalledWith('');
        expect(onSubmit).toHaveBeenCalledWith('');
    });

    it('is a plain search field when no suggestions are wired up', () => {
        // Without this, a box that can never show options still claims to be a combobox.
        renderUI(<SearchBox value='' onChange={jest.fn()} onSubmit={jest.fn()}/>);

        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
        expect(screen.getByRole('textbox')).toBeInTheDocument();
    });
});

describe('IconStack', () => {
    it('names the pair once, and hides the corner glyph from assistive tech', () => {
        const {container} = renderUI(
            <IconStack corner={<Icon name='question'/>} label='WiFi status unknown'>
                <Icon name='wifi'/>
            </IconStack>
        );

        expect(screen.getByRole('img', {name: 'WiFi status unknown'})).toBeInTheDocument();
        expect(container.querySelector('.wrolpi-icon-stack-corner')).toHaveAttribute('aria-hidden', 'true');
    });
});

describe('Confirm', () => {
    it('names the action on its confirming button', async () => {
        const onConfirm = jest.fn();
        renderUI(<Confirm open destructive title='Delete channel?' confirmLabel='Delete'
                          onConfirm={onConfirm}/>);

        await userEvent.click(screen.getByRole('button', {name: 'Delete'}));

        expect(onConfirm).toHaveBeenCalled();
    });

    it('styles a destructive confirmation as destructive', () => {
        renderUI(<Confirm open destructive confirmLabel='Wipe' title='Wipe history?'/>);

        expect(screen.getByRole('button', {name: 'Wipe'})).toHaveClass('wrolpi-button-danger');
    });
});