Diagnostics: Basic chart tests and additional fake data points

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: If347312a688734df64e475f44cc2c54344fecb11
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2476622Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Cr-Commit-Position: refs/heads/master@{#818047}

chrome/test/data/webui/chromeos/diagnostics/realtime_cpu_chart_test.js

@@ -62,12 +62,44 @@ suite('RealtimeCpuChartTest', () => {
     return initializeRealtimeCpuChart(user, system).then(() => {
       const svg = realtimeCpuChartElement.$$('#chart');
       const boundary = realtimeCpuChartElement.$$('#defClip>rect');
+
+      // 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.$$('#chartGroup');
+
+      // Margins are in effect.
+      assertEquals(
+          `translate(${realtimeCpuChartElement.margin_.left},${
+              realtimeCpuChartElement.margin_.top})`,
+          chartGroup.getAttribute('transform'));
+    });
+  });
+
+  test('InitializePlot', () => {
+    const user = 10;
+    const system = 30;
+    return initializeRealtimeCpuChart(user, system).then(() => {
+      // yAxis is drawn.
+      assertTrue(!!realtimeCpuChartElement.$$('#gridLines>path.domain'));
+
+      // Correct number of yAxis ticks drawn.
+      assertEquals(
+          3,
+          realtimeCpuChartElement.shadowRoot
+              .querySelectorAll('#gridLines>g.tick')
+              .length);
+
+      // Plot lines are drawn.
+      assertTrue(!!realtimeCpuChartElement.$$('#plotGroup>path.user-line')
+                       .getAttribute('d'));
+      assertTrue(!!realtimeCpuChartElement.$$('#plotGroup>path.system-line')
+                       .getAttribute('d'));
     });
   });
 });

chromeos/components/diagnostics_ui/resources/fake_data.js

@@ -78,7 +78,27 @@ export const fakeCpuUsage = [
     cpu_temp_degrees_celcius: 109,
     percent_usage_system: 55,
     percent_usage_user: 24,
-  }
+  },
+  {
+    cpu_temp_degrees_celcius: 109,
+    percent_usage_system: 49,
+    percent_usage_user: 10,
+  },
+  {
+    cpu_temp_degrees_celcius: 161,
+    percent_usage_system: 1,
+    percent_usage_user: 99,
+  },
+  {
+    cpu_temp_degrees_celcius: 118,
+    percent_usage_system: 35,
+    percent_usage_user: 37,
+  },
+  {
+    cpu_temp_degrees_celcius: 110,
+    percent_usage_system: 26,
+    percent_usage_user: 30,
+  },
 ];
 
 /* @type {!Array<!MemoryUsage>} */