front_end/ui/kit/icons/Icon.test.ts

// Copyright 2023 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {
  renderElementIntoDOM,
} from '../../../testing/DOMHelpers.js';
import {createIcon, Icon} from '../kit.js';

function getSpanElement(icon: Icon): HTMLSpanElement {
  const {shadowRoot} = icon;
  assert.isNotNull(shadowRoot);
  const span = shadowRoot.querySelector('span');
  assert.instanceOf(span, HTMLSpanElement);
  return span;
}

describe('Icon', () => {
  describe('Icon', () => {
    it('constructs a sub-aligned 20x20 icon by default', () => {
      const icon = new Icon();
      renderElementIntoDOM(icon);
      assert.strictEqual(window.getComputedStyle(icon).verticalAlign, 'sub');
      assert.strictEqual(icon.getBoundingClientRect().width, 20);
      assert.strictEqual(icon.getBoundingClientRect().height, 20);
    });

    for (const name of ['triangle-up', 'triangle-down', 'triangle-left', 'triangle-right']) {
      it(`constructs a baseline-aligned 14x14 icon for "${name}"`, () => {
        const icon = new Icon();
        icon.name = name;
        renderElementIntoDOM(icon);
        assert.strictEqual(window.getComputedStyle(icon).verticalAlign, 'baseline');
        assert.strictEqual(icon.getBoundingClientRect().width, 14);
        assert.strictEqual(icon.getBoundingClientRect().height, 14);
      });
    }

    describe('data', () => {
      it('can be used to set name and style', () => {
        const icon = new Icon();
        icon.data = {iconName: 'foo', color: 'red', width: '14px', height: '14px'};
        assert.strictEqual(icon.name, 'foo');
        assert.strictEqual(icon.style.color, 'red');
        assert.strictEqual(icon.style.width, '14px');
        assert.strictEqual(icon.style.height, '14px');
      });

      it('can be used to set path and style', () => {
        const icon = new Icon();
        icon.data = {iconPath: 'file:///path/to/bar.svg', color: 'darkblue', width: '8pt', height: '8pt'};
        assert.strictEqual(icon.name, 'file:///path/to/bar.svg');
        assert.strictEqual(icon.style.color, 'darkblue');
        assert.strictEqual(icon.style.width, '8pt');
        assert.strictEqual(icon.style.height, '8pt');
      });
    });

    describe('name', () => {
      it('is initially unset', () => {
        const icon = new Icon();
        assert.isNull(icon.name);
      });

      it('can be set and unset', () => {
        const icon = new Icon();
        icon.name = 'foobar';
        icon.name = null;
        assert.isNull(icon.name);
      });

      it('reflects the "name" attribute', () => {
        const icon = new Icon();
        icon.setAttribute('name', 'bar');
        assert.strictEqual(icon.name, 'bar');
      });

      it('is reflected to the "name" attribute', () => {
        const icon = new Icon();
        icon.name = 'foo';
        assert.strictEqual(icon.getAttribute('name'), 'foo');
      });

      it('accepts a `.svg` URL that is used verbatim for the icon URL', () => {
        const icon = new Icon();
        icon.name = 'devtools://path/to/images/file.svg';
        renderElementIntoDOM(icon);
        const span = getSpanElement(icon);
        assert.strictEqual(window.getComputedStyle(span).maskImage, 'url("devtools://path/to/images/file.svg")');
      });

      it('accepts an icon name and resolves that via `--image-file-<name>` CSS variables', () => {
        const icon = new Icon();
        icon.name = 'bar';
        icon.style.setProperty('--image-file-bar', 'url(http://foo/bar.svg)');
        renderElementIntoDOM(icon);
        const span = getSpanElement(icon);
        assert.strictEqual(window.getComputedStyle(span).maskImage, 'url("http://foo/bar.svg")');
      });
    });

    describe('role', () => {
      it('is initially presentation', () => {
        const icon = new Icon();
        assert.strictEqual(icon.role, 'presentation');
      });
    });
  });

  describe('create', () => {
    it('constructs a new Icon with the given `name`', () => {
      const icon = createIcon('bin');
      assert.strictEqual(icon.name, 'bin');
    });

    it('constructs a new Icon with the given `className`', () => {
      const icon = createIcon('select-element', 'my-awesome-class');
      assert.isTrue(icon.classList.contains('my-awesome-class'));
    });
  });
});