78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { cleanup, fireEvent, render, screen } from '@testing-library/react';
|
|
import { afterEach, describe, expect, it, vi } from 'vitest';
|
|
import type { PPTLineElement } from '@openmaic/dsl';
|
|
import { LineFormatToolbar } from '../../src/ui/line/LineFormatToolbar';
|
|
|
|
const line: PPTLineElement = {
|
|
id: 'line-1',
|
|
type: 'line',
|
|
left: 100,
|
|
top: 80,
|
|
width: 2,
|
|
start: [0, 0],
|
|
end: [120, 80],
|
|
style: 'solid',
|
|
color: '#333333',
|
|
points: ['', 'arrow'],
|
|
};
|
|
|
|
afterEach(cleanup);
|
|
|
|
function renderToolbar(element: PPTLineElement = line) {
|
|
const onChange = vi.fn();
|
|
render(<LineFormatToolbar element={element} locale="zh-CN" onChange={onChange} />);
|
|
return { onChange };
|
|
}
|
|
|
|
describe('LineFormatToolbar', () => {
|
|
it('dispatches each discrete line formatting change as one element update', () => {
|
|
const { onChange } = renderToolbar();
|
|
|
|
fireEvent.change(screen.getByRole('combobox', { name: '线条类型' }), {
|
|
target: { value: 'curve' },
|
|
});
|
|
fireEvent.change(screen.getByRole('combobox', { name: '线宽' }), { target: { value: '6' } });
|
|
fireEvent.change(screen.getByRole('combobox', { name: '线条样式' }), {
|
|
target: { value: 'dashed' },
|
|
});
|
|
fireEvent.change(screen.getByRole('combobox', { name: '起点样式' }), {
|
|
target: { value: 'dot' },
|
|
});
|
|
fireEvent.change(screen.getByRole('combobox', { name: '终点样式' }), {
|
|
target: { value: '' },
|
|
});
|
|
|
|
expect(onChange).toHaveBeenNthCalledWith(1, [
|
|
{
|
|
type: 'element.update',
|
|
id: 'line-1',
|
|
props: { broken: undefined, broken2: undefined, curve: [60, 40], cubic: undefined },
|
|
},
|
|
]);
|
|
expect(onChange).toHaveBeenNthCalledWith(2, [
|
|
{ type: 'element.update', id: 'line-1', props: { width: 6 } },
|
|
]);
|
|
expect(onChange).toHaveBeenNthCalledWith(3, [
|
|
{ type: 'element.update', id: 'line-1', props: { style: 'dashed' } },
|
|
]);
|
|
expect(onChange).toHaveBeenNthCalledWith(4, [
|
|
{ type: 'element.update', id: 'line-1', props: { points: ['dot', 'arrow'] } },
|
|
]);
|
|
expect(onChange).toHaveBeenNthCalledWith(5, [
|
|
{ type: 'element.update', id: 'line-1', props: { points: ['', ''] } },
|
|
]);
|
|
});
|
|
|
|
it('commits a swatch color as one element update', () => {
|
|
const { onChange } = renderToolbar();
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: '线条颜色' }));
|
|
fireEvent.click(screen.getByRole('button', { name: '#ef4444' }));
|
|
|
|
expect(onChange).toHaveBeenCalledWith([
|
|
{ type: 'element.update', id: 'line-1', props: { color: '#ef4444' } },
|
|
]);
|
|
});
|
|
});
|