Embedded Single Card: scalar card line chart simplify testing (#6513)

Simplify testing for readability of scalar card line chart testing.

Author: bhuang1323

tensorboard/webapp/metrics/views/card_renderer/scalar_card_line_chart_test.ts

@@ -1379,10 +1379,7 @@ describe('scalar card line chart', () => {
           minStep: 0,
           maxStep: 100,
         };
-        const scalarCardComponent = fixture.debugElement.query(
-          By.directive(ScalarCardLineChartComponent)
-        );
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 20},
           end: null,
         };
@@ -1425,10 +1422,7 @@ describe('scalar card line chart', () => {
           minStep: 0,
           maxStep: 100,
         };
-        const scalarCardComponent = fixture.debugElement.query(
-          By.directive(ScalarCardLineChartComponent)
-        );
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 20},
           end: {step: 40},
         };
@@ -1446,10 +1440,7 @@ describe('scalar card line chart', () => {
           minStep: 0,
           maxStep: 100,
         };
-        const scalarCardComponent = fixture.debugElement.query(
-          By.directive(ScalarCardLineChartComponent)
-        );
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 20},
           end: null,
         };
@@ -1473,7 +1464,7 @@ describe('scalar card line chart', () => {
         testController.mouseMove(fakeEvent);
 
         // Simulate ngrx update from mouseMove;
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 25},
           end: null,
         };
@@ -1495,7 +1486,7 @@ describe('scalar card line chart', () => {
         testController.mouseMove(fakeEvent);
 
         // Simulate ngrx update from mouseMove;
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 30},
           end: null,
         };
@@ -1550,10 +1541,7 @@ describe('scalar card line chart', () => {
           minStep: 0,
           maxStep: 100,
         };
-        const scalarCardComponent = fixture.debugElement.query(
-          By.directive(ScalarCardLineChartComponent)
-        );
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 20},
           end: null,
         };
@@ -1716,10 +1704,7 @@ describe('scalar card line chart', () => {
 
         // Click the prospective fob to set the start time
         testController.prospectiveFobClicked(new MouseEvent('mouseclick'));
-        const scalarCardComponent = fixture.debugElement.query(
-          By.directive(ScalarCardLineChartComponent)
-        );
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 10},
           end: null,
         };
@@ -1743,7 +1728,7 @@ describe('scalar card line chart', () => {
 
         // Click the prospective fob to set the end time
         testController.prospectiveFobClicked(new MouseEvent('mouseclick'));
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 10},
           end: {step: 25},
         };
@@ -1783,10 +1768,7 @@ describe('scalar card line chart', () => {
           minStep: 10,
           maxStep: 30,
         };
-        const scalarCardComponent = fixture.debugElement.query(
-          By.directive(ScalarCardLineChartComponent)
-        );
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 20},
           end: null,
         };
@@ -1812,10 +1794,7 @@ describe('scalar card line chart', () => {
           minStep: 10,
           maxStep: 30,
         };
-        const scalarCardComponent = fixture.debugElement.query(
-          By.directive(ScalarCardLineChartComponent)
-        );
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 20},
           end: null,
         };
@@ -1839,7 +1818,7 @@ describe('scalar card line chart', () => {
         testController.mouseMove(fakeEvent);
 
         // Simulate ngrx update from mouseMove;
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 25},
           end: null,
         };
@@ -1867,9 +1846,7 @@ describe('scalar card line chart', () => {
           })
         );
 
-        expect(
-          scalarCardComponent.componentInstance.stepOrLinkedTimeSelection
-        ).toEqual({
+        expect(fixture.componentInstance.stepOrLinkedTimeSelection).toEqual({
           start: {step: 25},
           end: null,
         });
@@ -1883,10 +1860,7 @@ describe('scalar card line chart', () => {
           minStep: 10,
           maxStep: 30,
         };
-        const scalarCardComponent = fixture.debugElement.query(
-          By.directive(ScalarCardLineChartComponent)
-        );
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 20},
           end: null,
         };
@@ -1910,7 +1884,7 @@ describe('scalar card line chart', () => {
         testController.mouseMove(fakeEvent);
 
         // Simulate ngrx update from mouseMove
-        scalarCardComponent.componentInstance.stepOrLinkedTimeSelection = {
+        fixture.componentInstance.stepOrLinkedTimeSelection = {
           start: {step: 25},
           end: null,
         };