chromium/chrome/test/data/webui/cr_components/theme_color_picker/theme_color_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 'chrome://resources/cr_components/theme_color_picker/theme_color.js';

import type {ThemeColorElement} from 'chrome://resources/cr_components/theme_color_picker/theme_color.js';
import {assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
import {hasStyle, isVisible, microtasksFinished} from 'chrome://webui-test/test_util.js';


suite('CrComponentsThemeColorTest', () => {
  let colorElement: ThemeColorElement;

  setup(() => {
    document.body.innerHTML = window.trustedTypes!.emptyHTML;
    colorElement = document.createElement('cr-theme-color');
    document.body.appendChild(colorElement);
  });

  test('renders colors', async () => {
    colorElement.backgroundColor = {value: 0xffff0000};
    colorElement.foregroundColor = {value: 0xff00ff00};
    await microtasksFinished();

    assertTrue(hasStyle(colorElement.$.background, 'fill', 'rgb(255, 0, 0)'));
    assertTrue(hasStyle(colorElement.$.foreground, 'fill', 'rgb(0, 255, 0)'));
  });

  test('color can be checked', async () => {
    colorElement.checked = true;
    colorElement.style.width = '66px';
    colorElement.style.height = '66px';
    await microtasksFinished();

    const wrapper = colorElement.shadowRoot!.querySelector(
        'cr-theme-color-check-mark-wrapper')!;
    assertTrue(wrapper.checked);
  });

  test('color can be unchecked', async () => {
    colorElement.checked = false;
    colorElement.style.width = '66px';
    colorElement.style.height = '66px';
    await microtasksFinished();

    const wrapper = colorElement.shadowRoot!.querySelector(
        'cr-theme-color-check-mark-wrapper')!;
    assertFalse(wrapper.checked);
  });

  test('background color can be hidden', async () => {
    colorElement.backgroundColorHidden = true;
    await microtasksFinished();

    assertFalse(isVisible(colorElement.$.background));
  });

  test('background color can be shown', async () => {
    colorElement.backgroundColorHidden = false;
    await microtasksFinished();

    assertTrue(isVisible(colorElement.$.background));
  });
});