feuerwerk/tests/ui/svg-icons.test.ts

import { describe, expect, it } from 'vitest';
import { ASSET_TYPES } from '../../src/core/model/AssetTypes';
import {
  ASSET_ICON_SVG,
  GAME_ICON_SVG,
  LIST_ICON_SVG,
  PLUGINS_ICON_SVG,
} from '../../src/editor/panels/assetIcons';
import { HEADER_ICON_SVG } from '../../src/editor/panels/headerIcons';
import { TOOLBAR_ICON_SVG } from '../../src/editor/panels/toolbarIcons';
import { tintSvg } from '../../src/ui/svg';
import { SYMBOL_SVG } 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('icon files', () => {
  it('has a scene view symbol for every symbol (#175)', () => {
    expect(Object.keys(SYMBOL_SVG).sort()).toEqual([
      'behavior',
      'camera',
      'container',
      'particles',
      'rigidbody',
    ]);
  });

  it('has an asset panel icon for every asset type, each its own picture (#176)', () => {
    expect(Object.keys(ASSET_ICON_SVG).sort()).toEqual([...ASSET_TYPES].sort());
    expect(new Set(Object.values(ASSET_ICON_SVG)).size).toBe(ASSET_TYPES.length);
  });

  const icons = [
    ...Object.entries(SYMBOL_SVG).map(([name, svg]) => [`symbol ${name}`, svg]),
    ...Object.entries(ASSET_ICON_SVG).map(([name, svg]) => [`asset ${name}`, svg]),
    ['list tab', LIST_ICON_SVG],
    ['game tab', GAME_ICON_SVG],
    ['plugins tab', PLUGINS_ICON_SVG],
    ...Object.entries(TOOLBAR_ICON_SVG).map(([name, svg]) => [`toolbar ${name}`, svg]),
    ...Object.entries(HEADER_ICON_SVG).map(([name, svg]) => [`header ${name}`, svg]),
  ];

  // The magnet stands alone in the header, without the "Snap" it replaced (#194): a picture another
  // button already wears would say that button's thing.
  it('draws the snap switch as a magnet of its own, bent without arcs (#194)', () => {
    const others = [
      ...Object.values(ASSET_ICON_SVG),
      ...Object.values(TOOLBAR_ICON_SVG),
      LIST_ICON_SVG,
      GAME_ICON_SVG,
      PLUGINS_ICON_SVG,
    ];
    expect(others).not.toContain(HEADER_ICON_SVG.snap);
    expect(HEADER_ICON_SVG.snap).toContain('C');
    for (const { attrs } of tags(HEADER_ICON_SVG.snap).slice(1)) expect(attrs.d ?? '').not.toMatch(/[Aa]/);
  });

  it('has one icon per button of the top bar, each its own picture (#183)', () => {
    expect(Object.keys(TOOLBAR_ICON_SVG).sort()).toEqual(['menu', 'pause', 'play', 'redo', 'stop', 'undo']);
    expect(new Set(Object.values(TOOLBAR_ICON_SVG)).size).toBe(6);
  });

  // The bar carries no captions any more, so a picture shared with a tab or an asset type would be
  // the only thing left telling the two apart – and it would not.
  it('draws the top bar in pictures of its own, none of them an asset icon (#183)', () => {
    const others = [...Object.values(ASSET_ICON_SVG), LIST_ICON_SVG, GAME_ICON_SVG, PLUGINS_ICON_SVG];
    for (const svg of Object.values(TOOLBAR_ICON_SVG)) expect(others).not.toContain(svg);
  });

  // Pixi's parser draws an A in the middle of a path as a spike (the puzzle piece of #119); undo
  // and redo are the arcs of this set, so they are the ones that have to keep clear of it.
  it('bends the top bar arrows with cubic curves rather than arcs (#183)', () => {
    for (const svg of [TOOLBAR_ICON_SVG.undo, TOOLBAR_ICON_SVG.redo]) {
      expect(svg).toContain('C');
      for (const { attrs } of tags(svg).slice(1)) expect(attrs.d ?? '').not.toMatch(/[Aa]/);
    }
  });

  // 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 editor 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('draws the asset icons in the 16 units a list row and a button reserve', () => {
    for (const svg of [...Object.values(ASSET_ICON_SVG), LIST_ICON_SVG, GAME_ICON_SVG, PLUGINS_ICON_SVG])
      expect(tags(svg)[0]!.attrs.viewBox).toBe('-8 -8 16 16');
  });

  it('gives the List, Game and Plugins tabs a picture no asset type has (#176, #119)', () => {
    const tabs = [LIST_ICON_SVG, GAME_ICON_SVG, PLUGINS_ICON_SVG];
    for (const svg of tabs) expect(Object.values(ASSET_ICON_SVG)).not.toContain(svg);
    expect(new Set(tabs).size).toBe(tabs.length);
  });

  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');
  });
});