55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import { describe, expect, it } from 'vitest';
|
||
import { SYMBOL_SVG, tintSvg } from '../../src/viewport/symbolIcons';
|
||
|
||
/** Opening tags as name + attributes; the files are flat, so no real XML parser is needed. */
|
||
function tags(svg: string): { name: string; attrs: Record<string, string> }[] {
|
||
return [...svg.matchAll(/<([a-z]+)([^>]*?)\/?>/g)].map(([, name, rest]) => ({
|
||
name: name!,
|
||
attrs: Object.fromEntries([...rest!.matchAll(/([a-zA-Z-]+)="([^"]*)"/g)].map(([, k, v]) => [k!, v!])),
|
||
}));
|
||
}
|
||
|
||
describe('scene view symbol icons (#175)', () => {
|
||
const icons = Object.entries(SYMBOL_SVG);
|
||
|
||
it('has a file for every symbol', () => {
|
||
expect(Object.keys(SYMBOL_SVG).sort()).toEqual([
|
||
'behavior',
|
||
'camera',
|
||
'container',
|
||
'particles',
|
||
'rigidbody',
|
||
]);
|
||
});
|
||
|
||
// Pixi draws the file's coordinates as they are and ignores the viewBox, so the viewBox only
|
||
// shows the file right elsewhere – centred on the origin, it matches what the scene view draws.
|
||
it.each(icons)('%s is centred on its origin', (_, svg) => {
|
||
const root = tags(svg)[0]!;
|
||
expect(root.name).toBe('svg');
|
||
const [x, y, w, h] = root.attrs.viewBox!.split(' ').map(Number);
|
||
expect([x, y]).toEqual([-w! / 2, -h! / 2]);
|
||
expect([Number(root.attrs.width), Number(root.attrs.height)]).toEqual([w, h]);
|
||
});
|
||
|
||
it.each(icons)('%s uses only what the Pixi parser draws like a browser', (_, svg) => {
|
||
for (const { name, attrs } of tags(svg).slice(1)) {
|
||
// polygon and polyline read their points as whole numbers; groups would carry transforms,
|
||
// which the parser ignores.
|
||
expect(['path', 'circle', 'rect', 'ellipse', 'line']).toContain(name);
|
||
expect(attrs.transform).toBeUndefined();
|
||
// Without a fill a browser fills black, Pixi does not fill at all once there is a stroke.
|
||
expect(attrs.fill, `${name} states its fill`).toBeDefined();
|
||
for (const paint of [attrs.fill, attrs.stroke].filter((p) => p !== undefined))
|
||
expect(paint).toMatch(/^(none|currentColor|#[0-9a-f]{6})$/);
|
||
}
|
||
});
|
||
|
||
it('puts the theme colour where the file says currentColor', () => {
|
||
expect(tintSvg('<path fill="currentColor" stroke="currentColor"/>', 0x0000ff)).toBe(
|
||
'<path fill="#0000ff" stroke="#0000ff"/>',
|
||
);
|
||
for (const [, svg] of icons) expect(tintSvg(svg, 0xb066ff)).not.toContain('currentColor');
|
||
});
|
||
});
|