Fix most tests that break with es2020 output. (#5991)

The migration to spec_bundle() will require we configure the TypeScript
compiler to output to JavaScript 'es2020'. There is one pattern of code
that we often use that will break:

in my_utilities.ts:
```
export function myFuncToSpyOn() {
  // Some code.
}
```

in my_test.ts:
```
import * as my_utilities from './my_utilities'

spyOn(my_utilities, 'myFuncToSpyOn').and.returnValue(1);
```

The Jasmine library will complain: 
`Error: <spyOn> : myFuncToSpyOn is not declared writable or has no
setter`

Jasmine is aware of the issue but can't provide a fix:
* jasmine/jasmine#1942
* https://jasmine.github.io/pages/faq.html#module-spy

Instead they suggest we refactor our code so that the functions being
spied on are wrapped in some Class or other Object.

This PR does exactly that, for the most part doing the most simple of
wrapping:

now in my_utilities.ts:
```
// No longer exported.
function myFuncToSpyOn() {
  // Some code.
}

export const MyUtilities = {
  myFuncToSpyOn
}
```

now in my_test.ts:
```
import {MyUtilities} from './my_utilities'

spyOn(MyUtilities, 'myFuncToSpyOn').and.returnValue(1);
```

The change has a bit of bigger blast radius because not only do the
tests need to be changed but so does every other file (test or not) that
are using the utility functions.

Author: bmd3k

tensorboard/webapp/widgets/line_chart_v2/lib/coordinator.ts

@@ -15,7 +15,7 @@ limitations under the License.
 
 import {Rect, Scale, ScaleType} from './internal_types';
 import {createScale} from './scale';
-import {convertRectToExtent} from './utils';
+import {ChartUtils} from './utils';
 
 /**
  * A stateful convenient utility around scale for converting coordinate systems.
@@ -109,7 +109,7 @@ export class Coordinator {
     dataCoordinate: [number, number]
   ): [number, number] {
     const rect = rectInUiCoordinate;
-    const domain = convertRectToExtent(this.currentViewBoxRect);
+    const domain = ChartUtils.convertRectToExtent(this.currentViewBoxRect);
     return [
       this.xScale.forward(
         domain.x,

tensorboard/webapp/widgets/line_chart_v2/lib/renderer/renderer_test.ts

@@ -17,7 +17,7 @@ import {Polyline} from '../internal_types';
 import {assertSvgPathD} from '../testing';
 import {ThreeCoordinator} from '../threejs_coordinator';
 import {SvgRenderer} from './svg_renderer';
-import {ThreeRenderer} from './threejs_renderer';
+import {TEST_ONLY, ThreeRenderer} from './threejs_renderer';
 
 describe('line_chart_v2/lib/renderer test', () => {
   const SVG_NS = 'http://www.w3.org/2000/svg';
@@ -326,7 +326,7 @@ describe('line_chart_v2/lib/renderer test', () => {
 
     beforeEach(() => {
       scene = new THREE.Scene();
-      spyOn(THREE, 'Scene').and.returnValue(scene);
+      spyOn(TEST_ONLY.ThreeWrapper, 'createScene').and.returnValue(scene);
 
       const canvas = document.createElement('canvas');
       const coordinator = new ThreeCoordinator();

tensorboard/webapp/widgets/line_chart_v2/lib/renderer/svg_renderer.ts

@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 
 import {Point, Polyline, Rect} from '../internal_types';
-import {arePolylinesEqual} from '../utils';
+import {ChartUtils} from '../utils';
 import {
   CirclePaintOption,
   LinePaintOption,
@@ -110,7 +110,7 @@ export class SvgRenderer implements ObjectRenderer<CacheValue> {
       (dom) => {
         if (
           !cachedLine?.data ||
-          !arePolylinesEqual(polyline, cachedLine?.data)
+          !ChartUtils.arePolylinesEqual(polyline, cachedLine?.data)
         ) {
           const data = this.createPathDString(polyline);
           dom.setAttribute('d', data);

tensorboard/webapp/widgets/line_chart_v2/lib/renderer/threejs_renderer.ts

@@ -17,7 +17,7 @@ import * as THREE from 'three';
 import {hsl, interpolateHsl} from '../../../../third_party/d3';
 import {Point, Polyline, Rect} from '../internal_types';
 import {ThreeCoordinator} from '../threejs_coordinator';
-import {arePolylinesEqual, isOffscreenCanvasSupported} from '../utils';
+import {ChartUtils} from '../utils';
 import {
   CirclePaintOption,
   LinePaintOption,
@@ -260,9 +260,15 @@ function updateObject(
   return true;
 }
 
+const ThreeWrapper = {
+  createScene: () => {
+    return new THREE.Scene();
+  },
+};
+
 export class ThreeRenderer implements ObjectRenderer<CacheValue> {
   private readonly renderer: THREE.WebGLRenderer;
-  private readonly scene = new THREE.Scene();
+  private readonly scene = ThreeWrapper.createScene();
   private backgroundColor: string = '#fff';
 
   constructor(
@@ -271,7 +277,10 @@ export class ThreeRenderer implements ObjectRenderer<CacheValue> {
     devicePixelRatio: number,
     onContextLost?: EventListener
   ) {
-    if (isOffscreenCanvasSupported() && canvas instanceof OffscreenCanvas) {
+    if (
+      ChartUtils.isOffscreenCanvasSupported() &&
+      canvas instanceof OffscreenCanvas
+    ) {
       // THREE.js require the style object which Offscreen canvas lacks.
       (canvas as any).style = (canvas as any).style || {};
     }
@@ -347,7 +356,7 @@ export class ThreeRenderer implements ObjectRenderer<CacheValue> {
         if (
           width !== prevWidth ||
           !prevPolyline ||
-          !arePolylinesEqual(prevPolyline, polyline)
+          !ChartUtils.arePolylinesEqual(prevPolyline, polyline)
         ) {
           updateThickPolylineGeometry(geometry, polyline, width);
         }
@@ -497,3 +506,7 @@ export class ThreeRenderer implements ObjectRenderer<CacheValue> {
     this.renderer.dispose();
   }
 }
+
+export const TEST_ONLY = {
+  ThreeWrapper,
+};

tensorboard/webapp/widgets/line_chart_v2/lib/utils.ts

@@ -15,7 +15,7 @@ limitations under the License.
 
 import {Extent, Polyline, Rect} from './internal_types';
 
-export function convertRectToExtent(rect: Rect): Extent {
+function convertRectToExtent(rect: Rect): Extent {
   return {
     x: [rect.x, rect.x + rect.width],
     y: [rect.y, rect.y + rect.height],
@@ -39,15 +39,15 @@ let cachedIsWebGl2Supported = false;
   }
 }
 
-export function isWebGl2Supported(): boolean {
+function isWebGl2Supported(): boolean {
   return cachedIsWebGl2Supported;
 }
 
-export function isOffscreenCanvasSupported(): boolean {
+function isOffscreenCanvasSupported(): boolean {
   return self.hasOwnProperty('OffscreenCanvas');
 }
 
-export function arePolylinesEqual(lineA: Polyline, lineB: Polyline) {
+function arePolylinesEqual(lineA: Polyline, lineB: Polyline) {
   if (lineA.length !== lineB.length) {
     return false;
   }
@@ -60,11 +60,19 @@ export function arePolylinesEqual(lineA: Polyline, lineB: Polyline) {
   return true;
 }
 
-export function areExtentsEqual(extentA: Extent, extentB: Extent): boolean {
+function areExtentsEqual(extentA: Extent, extentB: Extent): boolean {
   return (
     extentA.x[0] === extentB.x[0] &&
     extentA.x[1] === extentB.x[1] &&
     extentA.y[0] === extentB.y[0] &&
     extentA.y[1] === extentB.y[1]
   );
 }
+
+export const ChartUtils = {
+  convertRectToExtent,
+  isWebGl2Supported,
+  isOffscreenCanvasSupported,
+  arePolylinesEqual,
+  areExtentsEqual,
+};

tensorboard/webapp/widgets/line_chart_v2/line_chart_component.ts

@@ -43,7 +43,7 @@ import {
   ScaleType,
 } from './lib/public_types';
 import {createScale} from './lib/scale';
-import {isOffscreenCanvasSupported} from './lib/utils';
+import {ChartUtils} from './lib/utils';
 import {WorkerChart} from './lib/worker/worker_chart';
 import {
   computeDataSeriesExtent,
@@ -385,7 +385,8 @@ export class LineChartComponent
     }
 
     const useWorker =
-      rendererType !== RendererType.SVG && isOffscreenCanvasSupported();
+      rendererType !== RendererType.SVG &&
+      ChartUtils.isOffscreenCanvasSupported();
     const klass = useWorker ? WorkerChart : ChartImpl;
     this.lineChart = new klass(params);
   }

tensorboard/webapp/widgets/line_chart_v2/line_chart_internal_utils.ts

@@ -18,7 +18,7 @@ import {
   DataSeriesMetadataMap,
   RendererType,
 } from './lib/public_types';
-import {isWebGl2Supported} from './lib/utils';
+import {ChartUtils} from './lib/utils';
 
 /**
  * Returns extent, min and max values of each dimensions, of all data series points.
@@ -79,7 +79,9 @@ export function getRendererType(
     case RendererType.SVG:
       return RendererType.SVG;
     case RendererType.WEBGL:
-      return isWebGl2Supported() ? RendererType.WEBGL : RendererType.SVG;
+      return ChartUtils.isWebGl2Supported()
+        ? RendererType.WEBGL
+        : RendererType.SVG;
     default:
       const _ = preferredRendererType as never;
       throw new Error(`Unknown rendererType: ${preferredRendererType}`);

tensorboard/webapp/widgets/line_chart_v2/line_chart_internal_utils_test.ts

@@ -16,7 +16,7 @@ limitations under the License.
 import {RendererType, ScaleType} from './lib/public_types';
 import {createScale} from './lib/scale';
 import {buildMetadata, buildSeries} from './lib/testing';
-import * as libUtils from './lib/utils';
+import {ChartUtils} from './lib/utils';
 import {
   computeDataSeriesExtent,
   getRendererType,
@@ -465,12 +465,12 @@ describe('line_chart_v2/line_chart_internal_utils test', () => {
     });
 
     it('returns webgl if webgl2 is supported', () => {
-      spyOn(libUtils, 'isWebGl2Supported').and.returnValue(true);
+      spyOn(ChartUtils, 'isWebGl2Supported').and.returnValue(true);
       expect(getRendererType(RendererType.WEBGL)).toBe(RendererType.WEBGL);
     });
 
     it('returns svg if webgl2 is not supported', () => {
-      spyOn(libUtils, 'isWebGl2Supported').and.returnValue(false);
+      spyOn(ChartUtils, 'isWebGl2Supported').and.returnValue(false);
       expect(getRendererType(RendererType.WEBGL)).toBe(RendererType.SVG);
     });
   });

tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_utils.ts

@@ -39,7 +39,7 @@ function getNumLeadingZerosInFractional(value: number): number {
   return 0;
 }
 
-export function getStandardTicks(
+function getStandardTicks(
   scale: Scale,
   formatter: Formatter,
   maxMinorTickCount: number,
@@ -57,7 +57,7 @@ export function getStandardTicks(
   };
 }
 
-export function getTicksForTemporalScale(
+function getTicksForTemporalScale(
   scale: Scale,
   formatter: Formatter,
   maxMinorTickCount: number,
@@ -87,7 +87,7 @@ export function getTicksForTemporalScale(
   };
 }
 
-export function getTicksForLinearScale(
+function getTicksForLinearScale(
   scale: LinearScale,
   formatter: Formatter,
   maxMinorTickCount: number,
@@ -181,7 +181,7 @@ const canvasForMeasure = document.createElement('canvas').getContext('2d');
  * @param marginBetweenAxis Optional required spacing between labels.
  * @returns Filtered minor ticks based on their visibilities.
  */
-export function filterTicksByVisibility(
+function filterTicksByVisibility(
   minorTicks: MinorTick[],
   getDomPos: (tick: MinorTick) => number,
   axis: 'x' | 'y',
@@ -223,3 +223,10 @@ export function filterTicksByVisibility(
     return true;
   });
 }
+
+export const AxisUtils = {
+  getStandardTicks,
+  getTicksForTemporalScale,
+  getTicksForLinearScale,
+  filterTicksByVisibility,
+};