80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
// @vitest-environment jsdom
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/react';
|
|
import { describe, expect, it, vi } from 'vitest';
|
|
|
|
import type { Transform } from '../src/features/ui-editor/types/Transform';
|
|
import { TransformEditor } from '../src/view/ui-editor/components/Inspector/Transform/TransformEditor';
|
|
|
|
const transform: Transform = {
|
|
anchor_min: [0, 0],
|
|
anchor_max: [1, 1],
|
|
offset_min: [10, 20],
|
|
offset_max: [30, 40],
|
|
};
|
|
|
|
function renderEditor(onChange = vi.fn()) {
|
|
return {
|
|
onChange,
|
|
...render(<TransformEditor transform={transform} onChange={onChange} />),
|
|
};
|
|
}
|
|
|
|
describe('TransformEditor corner offset controls', () => {
|
|
it('uses one X/Y input pair for the selected corner', () => {
|
|
renderEditor();
|
|
|
|
expect(
|
|
screen.getByRole('spinbutton', { name: '左上角偏移 X' }),
|
|
).toHaveProperty('value', '10');
|
|
expect(
|
|
screen.getByRole('spinbutton', { name: '左上角偏移 Y' }),
|
|
).toHaveProperty('value', '20');
|
|
expect(screen.getAllByRole('spinbutton')).toHaveLength(2);
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '右下角' }));
|
|
|
|
expect(
|
|
screen.getByRole('spinbutton', { name: '右下角偏移 X' }),
|
|
).toHaveProperty('value', '30');
|
|
expect(
|
|
screen.getByRole('spinbutton', { name: '右下角偏移 Y' }),
|
|
).toHaveProperty('value', '40');
|
|
});
|
|
|
|
it('writes the selected corner input back to the matching offset component', () => {
|
|
const { onChange } = renderEditor();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '右上角' }));
|
|
const xInput = screen.getByRole('spinbutton', {
|
|
name: '右上角偏移 X',
|
|
});
|
|
fireEvent.change(xInput, { target: { value: '55' } });
|
|
fireEvent.blur(xInput);
|
|
|
|
expect(onChange).toHaveBeenLastCalledWith({
|
|
...transform,
|
|
offset_max: [55, 40],
|
|
});
|
|
});
|
|
|
|
it('moves only the selected corner with direction keys', () => {
|
|
const { onChange } = renderEditor();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '右下角' }));
|
|
fireEvent.click(screen.getByRole('button', { name: '右下角向左' }));
|
|
expect(onChange).toHaveBeenLastCalledWith({
|
|
...transform,
|
|
offset_max: [29, 40],
|
|
});
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '右下角向上' }), {
|
|
shiftKey: true,
|
|
});
|
|
expect(onChange).toHaveBeenLastCalledWith({
|
|
...transform,
|
|
offset_max: [30, 30],
|
|
});
|
|
});
|
|
});
|