61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
// @vitest-environment jsdom
|
|
import { render } from '@testing-library/react';
|
|
import type { PPTLineElement } from '@openmaic/dsl';
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
import { BaseLineElement } from '../../src/elements/line/BaseLineElement';
|
|
|
|
const line = {
|
|
id: 'shared-line',
|
|
type: 'line',
|
|
left: 0,
|
|
top: 0,
|
|
start: [0, 0],
|
|
end: [120, 40],
|
|
width: 4,
|
|
style: 'solid',
|
|
color: '#123456',
|
|
points: ['arrow', 'arrow'],
|
|
} as PPTLineElement;
|
|
|
|
function markerReferences(svg: SVGSVGElement): string[] {
|
|
const path = svg.querySelector(':scope > path');
|
|
return ['marker-start', 'marker-end'].map((attribute) => {
|
|
const reference = path?.getAttribute(attribute);
|
|
expect(reference).toMatch(/^url\(#.+\)$/);
|
|
return reference!.slice(5, -1);
|
|
});
|
|
}
|
|
|
|
describe('BaseLineElement marker ids', () => {
|
|
it('keeps marker references local to each render instance and stable while scaling', () => {
|
|
const { container, rerender } = render(
|
|
<div style={{ transform: 'scale(1)' }}>
|
|
<BaseLineElement elementInfo={line} animate={false} />
|
|
<BaseLineElement elementInfo={line} animate={false} />
|
|
</div>,
|
|
);
|
|
|
|
const before = Array.from(container.querySelectorAll('svg')).map((svg) => {
|
|
const references = markerReferences(svg);
|
|
const ownMarkerIds = Array.from(svg.querySelectorAll('marker'), (marker) => marker.id);
|
|
|
|
expect(references).toEqual(ownMarkerIds);
|
|
return references;
|
|
});
|
|
|
|
expect(new Set(before.flat()).size).toBe(4);
|
|
|
|
rerender(
|
|
<div style={{ transform: 'scale(1.75)' }}>
|
|
<BaseLineElement elementInfo={line} animate={false} />
|
|
<BaseLineElement elementInfo={line} animate={false} />
|
|
</div>,
|
|
);
|
|
|
|
const after = Array.from(container.querySelectorAll('svg')).map(markerReferences);
|
|
expect(after).toEqual(before);
|
|
expect((container.firstElementChild as HTMLElement).style.transform).toBe('scale(1.75)');
|
|
});
|
|
});
|