Add screenshot tests for the overview page to catch UI regressions

frontend/app/common/constants/BUILD

@@ -31,6 +31,7 @@ ts_library(
         "testing.ts",
     ],
     deps = [
+        "@npm//@types/google.visualization",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )

frontend/app/common/constants/testing.ts

@@ -1,4 +1,8 @@
-import {DataTableCellValue, SimpleDataTable} from 'org_xprof/frontend/app/common/interfaces/data_table';
+import {
+  DataTableCellValue,
+  OverviewPageDataTuple,
+  SimpleDataTable,
+} from 'org_xprof/frontend/app/common/interfaces/data_table';
 
 class DataTableForTesting {
   // Note the constructor takes a js object (not a literal string)
@@ -303,6 +307,189 @@ export const GVIZ_FOR_TESTING = {
         return dt;
       },
       sum() {},
-    }
+    },
+  },
+};
+
+/** Mock overview page data for testing. */
+export const OVERVIEW_PAGE_DATA: OverviewPageDataTuple = [
+  {
+    'cols': [
+      {'id': 'operation', 'label': 'Operation', 'type': 'string'},
+      {'id': 'flopRate', 'label': 'GFLOPs/Sec', 'type': 'number'},
+    ],
+    'rows': [
+      {'c': [{'v': 'InfeedQueue/dequeue'}, {'v': 0}]},
+      {'c': [{'v': 'all-reduce.958'}, {'v': 1.39586}]},
+    ],
+    'p': {
+      'device_idle_time_percent': '1.1%',
+      'host_idle_time_percent': '59.7%',
+      'remark_color': 'black',
+    },
+  },
+  {
+    'cols': [
+      {'id': 'step', 'label': 'Step', 'type': 'string'},
+      {'id': 'infeedTimeMs', 'label': 'Infeed (in ms)', 'type': 'number'},
+    ],
+    'rows': [
+      {'c': [{'v': '1'}, {'v': 0.1886}]},
+      {'c': [{'v': '2'}, {'v': 0.18938}]},
+    ],
+    'p': {
+      'compute_ms_average': '84.46',
+      'idle_ms_average': '0.19',
+      'input_ms_average': '0.00',
+      'step_time_graph_column_ids': 'step,infeedTimeMs',
+    },
   },
+  {
+    'p': {
+      'host_count': '1',
+      'tpu_core_count': '2',
+      'is_training': 'true',
+    },
+  },
+  {
+    'p': {
+      'bottleneck': 'device',
+      'statement': '(1) Your program is NOT input-bound.',
+    },
+  },
+  {},
+  {'p': {'total_naps_line_0': '5.21 NAPs'}},
+  {
+    'cols': [
+      {'id': 'severity', 'label': 'severity', 'type': 'string'},
+      {'id': 'message', 'label': 'message', 'type': 'string'},
+    ],
+    'rows': [
+      {'c': [{'v': 'ERROR'}, {'v': 'error1'}]},
+      {'c': [{'v': 'ERROR'}, {'v': 'error2'}]},
+    ],
+  },
+  {},
+  {
+    'p': {
+      'decode_step_time_us_avg': '100',
+    },
+  },
+];
+
+/** Mock inference latency data for testing. */
+export const INFERENCE_LATENCY_DATA: SimpleDataTable = {
+  'cols': [
+    {
+      'id': 'percentile',
+      'label': 'Percentile',
+      'type': 'string',
+    },
+    {
+      'id': 'hostTimeMs',
+      'label': 'Host time (in ms)',
+      'type': 'number',
+    },
+    {
+      'id': 'deviceTimeMs',
+      'label': 'Device time (in ms)',
+      'type': 'number',
+    },
+    {
+      'id': 'hostDeviceCommunicationTimeMs',
+      'label': 'Host-device communication time (in ms)',
+      'type': 'number',
+    },
+    {
+      'id': 'total',
+      'label': 'Total',
+      'type': 'string',
+    },
+  ],
+  'rows': [
+    {
+      'c': [
+        {'v': 'Avg'},
+        {'v': '1.1'},
+        {'v': '8.477'},
+        {'v': '0.2'},
+        {'v': '9.777'},
+      ],
+    },
+    {
+      'c': [
+        {'v': '50.0%'},
+        {'v': '1.1'},
+        {'v': '8.513'},
+        {'v': '0.1'},
+        {'v': '9.713'},
+      ],
+    },
+  ],
 };
+
+/** Mock overview page data for screenshot testing. */
+export const OVERVIEW_PAGE_DATA_FOR_SCREENSHOT: OverviewPageDataTuple = [
+  {
+    'cols': [
+      {'id': 'operation', 'label': 'Operation', 'type': 'string'},
+      {'id': 'flopRate', 'label': 'GFLOPs/Sec', 'type': 'number'},
+    ],
+    'rows': [
+      {'c': [{'v': 'InfeedQueue/dequeue'}, {'v': 0}]},
+      {'c': [{'v': 'all-reduce.958'}, {'v': 1.39586}]},
+    ],
+    'p': {
+      'device_idle_time_percent': '1.1%',
+      'host_idle_time_percent': '59.7%',
+      'mxu_utilization_percent': '45.2',
+      'device_duty_cycle_percent': '88.5',
+      'hbm_utilization_percent': '32.1',
+      'remark_color': 'black',
+    },
+  },
+  {
+    'cols': [
+      {'id': 'step', 'label': 'Step', 'type': 'string'},
+      {'id': 'infeedTimeMs', 'label': 'Infeed (in ms)', 'type': 'number'},
+    ],
+    'rows': [
+      {'c': [{'v': '1'}, {'v': 84.1}]},
+      {'c': [{'v': '2'}, {'v': 85.2}]},
+      {'c': [{'v': '3'}, {'v': 83.9}]},
+      {'c': [{'v': '4'}, {'v': 86.5}]},
+      {'c': [{'v': '5'}, {'v': 84.8}]},
+      {'c': [{'v': '6'}, {'v': 85.1}]},
+      {'c': [{'v': '7'}, {'v': 84.2}]},
+      {'c': [{'v': '8'}, {'v': 85.5}]},
+      {'c': [{'v': '9'}, {'v': 84.7}]},
+      {'c': [{'v': '10'}, {'v': 85.0}]},
+    ],
+    'p': {
+      'steptime_ms_average': '84.46',
+      'steptime_ms_standard_deviation': '1.2',
+      'compute_ms_average': '84.46',
+      'idle_ms_average': '0.19',
+      'input_ms_average': '0.00',
+      'step_time_graph_column_ids': 'step,infeedTimeMs',
+    },
+  },
+  {
+    'p': {
+      'host_count': '1',
+      'tpu_core_count': '2',
+      'is_training': 'true',
+    },
+  },
+  {
+    'p': {
+      'bottleneck': 'device',
+      'statement': '(1) Your program is NOT input-bound.',
+    },
+  },
+  {},
+  {'p': {'total_naps_line_0': '5.21 NAPs'}},
+  {},
+  {},
+  {},
+];

frontend/app/components/overview_page/BUILD

@@ -43,3 +43,35 @@ sass_binary(
         "@org_xprof//frontend/app/styles:common",
     ],
 )
+
+filegroup(
+    name = "scuba_goldens",
+    srcs = glob(["scuba_goldens/**/*.png"]),
+)
+
+xprof_ng_module(
+    name = "screenshot_tests",
+    testonly = True,
+    srcs = [
+        "overview_page_screenshot_test.ts",
+    ],
+    tags = ["requires-net:external"],
+    deps = [
+        ":overview_page",
+        "//javascript/angular2/testing/catalyst/async",
+        # ksf,
+        "@npm//@angular/core",
+        "@org_xprof//frontend/app/common/angular:angular_platform-browser_animation",
+        "@npm//@angular/router",
+        "@npm//rxjs",
+        "@npm//safevalues",
+        "//third_party/javascript/safevalues/dom",
+        "//third_party/javascript/typings/jasmine",
+        "@org_xprof//frontend/app/common/constants:testing",
+        "@org_xprof//frontend/app/common/interfaces",
+        "@org_xprof//frontend/app/common/utils:testing",
+        "@org_xprof//frontend/app/components/smart_suggestion",
+        "@org_xprof//frontend/app/services/data_service_v2:data_service_v2_interface",
+        "@org_xprof//frontend/app/store",
+    ],
+)