68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
|
// @vitest-environment jsdom
|
|||
|
|
import { describe, it, expect, vi, afterEach } from 'vitest';
|
|||
|
|
import { render, screen, cleanup, fireEvent } from '@testing-library/react';
|
|||
|
|
import GeneralSection from '../settings/GeneralSection';
|
|||
|
|
import ZoomOverrideField from '../fields/ZoomOverrideField';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* The admin switches for the lightbox zoom (#467): one site-wide toggle in
|
|||
|
|
* Settings › General, and an inherit / on / off choice per page and album.
|
|||
|
|
* The YAML they produce is covered by the page builder round-trip tests.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
afterEach(cleanup);
|
|||
|
|
|
|||
|
|
describe('Settings › General › Photo zoom', () => {
|
|||
|
|
const renderWith = (settings: Record<string, unknown>) => {
|
|||
|
|
const update = vi.fn();
|
|||
|
|
render(<GeneralSection settings={settings} update={update} updateMany={vi.fn()} />);
|
|||
|
|
return { update, row: screen.getByRole('button', { name: /Photo zoom/ }) };
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
it('is shown off when settings.yaml says nothing, and switches it on', () => {
|
|||
|
|
const { update, row } = renderWith({});
|
|||
|
|
expect(row.getAttribute('aria-pressed')).toBe('false');
|
|||
|
|
fireEvent.click(row);
|
|||
|
|
expect(update).toHaveBeenCalledWith('zoom', true);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
it('switches it off again', () => {
|
|||
|
|
const { update, row } = renderWith({ zoom: true });
|
|||
|
|
expect(row.getAttribute('aria-pressed')).toBe('true');
|
|||
|
|
fireEvent.click(row);
|
|||
|
|
expect(update).toHaveBeenCalledWith('zoom', false);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
describe('ZoomOverrideField', () => {
|
|||
|
|
const renderField = (value: boolean | undefined) => {
|
|||
|
|
const onChange = vi.fn();
|
|||
|
|
render(
|
|||
|
|
<ZoomOverrideField
|
|||
|
|
id="z"
|
|||
|
|
value={value}
|
|||
|
|
onChange={onChange}
|
|||
|
|
inheritLabel="Inherit"
|
|||
|
|
hint="hint"
|
|||
|
|
/>,
|
|||
|
|
);
|
|||
|
|
return { onChange, select: screen.getByLabelText('Photo zoom') as HTMLSelectElement };
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
it('shows the three states', () => {
|
|||
|
|
expect(renderField(undefined).select.value).toBe('');
|
|||
|
|
cleanup();
|
|||
|
|
expect(renderField(true).select.value).toBe('on');
|
|||
|
|
cleanup();
|
|||
|
|
expect(renderField(false).select.value).toBe('off');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
it('reports true, false, and undefined for inherit', () => {
|
|||
|
|
const { onChange, select } = renderField(undefined);
|
|||
|
|
fireEvent.change(select, { target: { value: 'on' } });
|
|||
|
|
fireEvent.change(select, { target: { value: 'off' } });
|
|||
|
|
fireEvent.change(select, { target: { value: '' } });
|
|||
|
|
expect(onChange.mock.calls).toEqual([[true], [false], [undefined]]);
|
|||
|
|
});
|
|||
|
|
});
|