chromium/chrome/test/data/webui/chromeos/diagnostics/realtime_cpu_chart_test.ts

// Copyright 2020 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://diagnostics/realtime_cpu_chart.js';
import 'chrome://webui-test/chromeos/mojo_webui_test_support.js';

import {ChartPadding, RealtimeCpuChartElement} from 'chrome://diagnostics/realtime_cpu_chart.js';
import {assert} from 'chrome://resources/js/assert.js';
import {assertEquals, assertGT, assertTrue} from 'chrome://webui-test/chromeos/chai_assert.js';
import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';

import * as diagnostics_test_utils from './diagnostics_test_utils.js';

suite('realtimeCpuChartTestSuite', function() {
  let realtimeCpuChartElement: RealtimeCpuChartElement|null = null;

  setup(() => {
    document.body.innerHTML = window.trustedTypes!.emptyHTML;
  });

  teardown(() => {
    realtimeCpuChartElement?.remove();
    realtimeCpuChartElement = null;
  });

  function initializeRealtimeCpuChart(
      user: number, system: number): Promise<void> {
    // Add the element to the DOM.
    realtimeCpuChartElement =
        document.createElement(RealtimeCpuChartElement.is);
    assert(realtimeCpuChartElement);
    document.body.appendChild(realtimeCpuChartElement);
    realtimeCpuChartElement.user = user;
    realtimeCpuChartElement.system = system;

    return refreshGraph();
  }

  /**
   * Get frameDuration_ private member for testing.
   */
  function getFrameDuration() {
    assert(realtimeCpuChartElement);
    return realtimeCpuChartElement.getFrameDurationForTesting();
  }

  /**
   * Get padding_ private member for testing.
   */
  function getPaddings(): ChartPadding {
    assert(realtimeCpuChartElement);
    return realtimeCpuChartElement.getPaddingForTesting();
  }

  /**
   * Promise that resolves once at least one refresh interval has passed.
   */
  function refreshGraph(): Promise<void> {
    assert(realtimeCpuChartElement);

    return new Promise(resolve => {
      setTimeout(() => {
        flushTasks().then(() => {
          resolve();
        });
      }, getFrameDuration());
    });
  }

  test('InitializeRealtimeCpuChart', () => {
    const user = 10;
    const system = 30;
    return initializeRealtimeCpuChart(user, system).then(() => {
      assert(realtimeCpuChartElement);
      diagnostics_test_utils.assertElementContainsText(
          realtimeCpuChartElement.shadowRoot!.querySelector(
              '#legend-user>span'),
          `${user}`);
      diagnostics_test_utils.assertElementContainsText(
          realtimeCpuChartElement.shadowRoot!.querySelector(
              '#legend-system>span'),
          `${system}`);

      assertEquals(user, realtimeCpuChartElement.user);
      assertEquals(system, realtimeCpuChartElement.system);
    });
  });

  test('ChartAreaBoundary', () => {
    const user = 10;
    const system = 30;
    return initializeRealtimeCpuChart(user, system).then(() => {
      assert(realtimeCpuChartElement);
      const svg = realtimeCpuChartElement!.shadowRoot!.querySelector('#chart');
      assert(svg);
      const boundary =
          realtimeCpuChartElement.shadowRoot!.querySelector('#defClip>rect');
      assert(boundary);
      // Chart area boundary must fit within svg.
      assertGT(
          Number(svg.getAttribute('width')),
          Number(boundary.getAttribute('width')));
      assertGT(
          Number(svg.getAttribute('height')),
          Number(boundary.getAttribute('height')));

      const chartGroup =
          realtimeCpuChartElement.shadowRoot!.querySelector('#chartGroup');
      assert(chartGroup);
      // Margins are in effect.
      assertEquals(
          `translate(${getPaddings().left},${getPaddings().top})`,
          chartGroup.getAttribute('transform'));
    });
  });

  test('InitializePlot', () => {
    const user = 10;
    const system = 30;

    return initializeRealtimeCpuChart(user, system).then(() => {
      assert(realtimeCpuChartElement);
      // yAxis is drawn.
      assertTrue(!!realtimeCpuChartElement.shadowRoot!.querySelector(
          '#gridLines>path.domain'));

      // Correct number of yAxis ticks drawn.
      assertEquals(
          5,
          realtimeCpuChartElement.shadowRoot!
              .querySelectorAll('#gridLines>g.tick')
              .length);

      // Plot lines are drawn.
      assertTrue(
          !!realtimeCpuChartElement.shadowRoot!
                .querySelector('#plotGroup>path.user-area')!.getAttribute('d'));
      assertTrue(!!realtimeCpuChartElement.shadowRoot!
                       .querySelector(
                           '#plotGroup>path.system-area')!.getAttribute('d'));
    });
  });
});