src/app/common/components/chart-v2/chart-v2.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { UtcDatePipe } from '../../pipes/utcdate';
+import { AbbrPipe } from '../../pipes/abbr';
+import { MockService } from '../../../utils/mock';
+import { ThemeService } from '../../services/theme.service';
 import { ChartV2Component } from './chart-v2.component';
 
 describe('ChartV2Component', () => {
@@ -8,14 +12,46 @@ describe('ChartV2Component', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ChartV2Component],
+      declarations: [ChartV2Component, UtcDatePipe, AbbrPipe],
+      providers: [
+        {
+          provide: ThemeService,
+          useValue: MockService(ThemeService),
+        },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ChartV2Component);
     component = fixture.componentInstance;
-    fixture.detectChanges();
+    component.rawData = {
+      id: 'views',
+      label: 'Pageviews',
+      permissions: ['admin', 'user'],
+      unit: 'usd',
+      description: '',
+      visualisation: {
+        type: 'chart',
+        segments: [
+          {
+            buckets: [
+              {
+                key: 1567296000000,
+                date: '2019-09-01T00:00:00+00:00',
+                value: 11,
+              },
+              {
+                key: 1567382400000,
+                date: '2019-09-02T00:00:00+00:00',
+                value: 12,
+              },
+            ],
+          },
+        ],
+      },
+    };
   });
 
   it('should create', () => {

src/app/common/components/page-layout/page-layout.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { Component, Input } from '@angular/core';
 import { PageLayoutComponent } from './page-layout.component';
 
+@Component({
+  selector: 'm-sidebarMenu',
+  template: '',
+})
+class SidebarMenuComponentMock {
+  @Input() catId;
+}
+
 describe('PageLayoutComponent', () => {
   let component: PageLayoutComponent;
   let fixture: ComponentFixture<PageLayoutComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [PageLayoutComponent],
+      declarations: [PageLayoutComponent, SidebarMenuComponentMock],
     }).compileComponents();
   }));
 

src/app/common/components/shadowbox-header/shadowbox-header.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  Component,
+  Input,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ViewChild,
+  ElementRef,
+  HostListener,
+} from '@angular/core';
 
 import { ShadowboxHeaderComponent } from './shadowbox-header.component';
 

src/app/common/components/shadowbox-header/shadowbox-header.component.ts

@@ -70,7 +70,8 @@ export class ShadowboxHeaderComponent implements AfterViewInit {
     const firstMetric = <HTMLElement>(
       document.querySelector('.m-shadowboxLayout__headerItem')
     );
-    this.childClientWidth = firstMetric.clientWidth;
+    // TODO: figure out how to avoid test failure "Cannot read property 'clientWidth' of null"
+    this.childClientWidth = firstMetric ? firstMetric.clientWidth : 160;
 
     this.shadowboxHeaderContainer = this.shadowboxHeaderContainerEl.nativeElement;
     this.isOverflown =

src/app/common/components/shadowbox-layout/shadowbox-layout.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { Component, Input } from '@angular/core';
 import { ShadowboxLayoutComponent } from './shadowbox-layout.component';
 
+@Component({
+  selector: 'm-shadowboxHeader',
+  template: '',
+})
+class ShadowboxHeaderComponentMock {
+  @Input() isScrollable;
+}
+
 describe('ShadowboxLayoutComponent', () => {
   let component: ShadowboxLayoutComponent;
   let fixture: ComponentFixture<ShadowboxLayoutComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ShadowboxLayoutComponent],
+      declarations: [ShadowboxLayoutComponent, ShadowboxHeaderComponentMock],
     }).compileComponents();
   }));
 

src/app/common/components/sidebar-menu/sidebar-menu.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, Input } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Session } from '../../../services/session';
 import { sessionMock } from '../../../../tests/session-mock.spec';
 import { SidebarMenuComponent } from './sidebar-menu.component';
+import sidebarMenuCategories from './sidebar-menu-categories.default';
 
 describe('SidebarMenuComponent', () => {
   let component: SidebarMenuComponent;
@@ -19,6 +21,7 @@ describe('SidebarMenuComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(SidebarMenuComponent);
     component = fixture.componentInstance;
+    component.catId = 'analytics';
     // component.user = sessionMock.user;
     fixture.detectChanges();
   });

src/app/common/components/sidebar-menu/sidebar-menu.component.ts

@@ -52,7 +52,6 @@ export class SidebarMenuComponent implements OnInit {
 
   grantPermissionsAndFindActiveCat() {
     // this.cat.forEach(this.cat => {
-
     this.cat.header['permissionGranted'] = this.cat.header.permissions
       ? this.checkForRoleMatch(this.cat.header.permissions)
       : true;

src/app/modules/analytics/v2/components/benchmark/benchmark.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TooltipComponentMock } from '../../../../../mocks/common/components/tooltip/tooltip.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { AnalyticsBenchmarkComponent } from './benchmark.component';
 
@@ -8,7 +10,8 @@ describe('AnalyticsBenchmarkComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AnalyticsBenchmarkComponent],
+      declarations: [AnalyticsBenchmarkComponent, TooltipComponentMock],
+      // schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
   }));
 

src/app/modules/analytics/v2/dashboard.component.html

 <m-pageLayout navId="analytics">
-  <!-- TODOOJM: uncomment me -->
-  <!-- <div class="m-analyticsDashboard" *ngIf="ready$ | async" m-pageLayout__main> -->
-  <div class="m-analyticsDashboard" m-pageLayout__main>
+  <div class="m-analyticsDashboard" *ngIf="ready$ | async" m-pageLayout__main>
     <m-dashboardLayout>
       <ng-container m-dashboardLayout__header>
         <div>

src/app/modules/analytics/v2/dashboard.component.scss

@@ -5,8 +5,6 @@ m-analytics__dashboard {
 }
 
 .m-analytics__spinnerContainer {
-  // TODOOJM: remove display none
-  display: none !important;
   height: 30%;
   width: 100%;
   display: flex;

src/app/modules/analytics/v2/dashboard.service.ts

@@ -198,17 +198,16 @@ export class AnalyticsDashboardService {
         const dashboard = response.dashboard;
         this.ready$.next(true);
 
-        // TODOOJM: uncomment
         this.updateState({
           ..._state,
-          // category: dashboard.category,
-          // description: dashboard.description,
-          // timespan: dashboard.timespan,
-          // timespans: dashboard.timespans,
-          // filter: dashboard.filter,
-          // filters: dashboard.filters,
-          // metric: dashboard.metric,
-          // metrics: dashboard.metrics,
+          category: dashboard.category,
+          description: dashboard.description,
+          timespan: dashboard.timespan,
+          timespans: dashboard.timespans,
+          filter: dashboard.filter,
+          filters: dashboard.filters,
+          metric: dashboard.metric,
+          metrics: dashboard.metrics,
         });
         this.loading$.next(false);
       });
@@ -239,14 +238,13 @@ export class AnalyticsDashboardService {
   //   return channelSearch;
   // }
 
-  // TODOOJM: uncomment
   updateCategory(category: string) {
-    // this.updateState({
-    //   ..._state,
-    //   category,
-    //   description: null,
-    //   metrics: [],
-    // });
+    this.updateState({
+      ..._state,
+      category,
+      description: null,
+      metrics: [],
+    });
   }
   updateTimespan(timespan: string) {
     this.updateState({

src/app/modules/analytics/v2/layouts/layout-summary/layout-summary.component.ts

@@ -67,34 +67,32 @@ export class AnalyticsLayoutSummaryComponent implements OnInit {
     // TODO: confirm how permissions/security will work
     this.fakeTiles = fakeData[3].tiles;
 
-    // TODO: uncomment this boost backlog stuff when endpoint is ready.
+    // TODO: enable boost backlog stuff when endpoint is ready.
     // Ideally the response will be formatted as an array of 4 objs,
     // each with id, label, and value (in hours)
     // this.boosts = fakeData[4].boosts.buckets;
     // this.boostRows = [this.boosts.slice(0, 2), this.boosts.slice(2, 4)];
 
-    // TODOOJM uncomment me
-    // this.getTiles();
+    this.getTiles();
     this.loading = false;
   }
-  // TODOOJM uncomment everything below
-  // async getTiles() {
-  //   this.tiles.forEach(tile => {
-  //     this.client
-  //       .get(tile.endpoint)
-  //       .then((response: any) => {
-  //         this.formatResponse(tile, response);
-  //       })
-  //       .catch(e => {
-  //         console.error(e);
-  //       });
-  //   });
-  // }
+  async getTiles() {
+    this.tiles.forEach(tile => {
+      this.client
+        .get(tile.endpoint)
+        .then((response: any) => {
+          this.formatResponse(tile, response);
+        })
+        .catch(e => {
+          console.error(e);
+        });
+    });
+  }
 
-  // formatResponse(tile, response) {
-  //   const metric = response.dashboard.metrics.find(m => m.id === tile.id);
-  //   tile['metric'] = metric;
-  //   tile['value'] = metric.visualisation.segments[0].buckets.slice(-1).value;
-  //   tile['description'] = response.description;
-  // }
+  formatResponse(tile, response) {
+    const metric = response.dashboard.metrics.find(m => m.id === tile.id);
+    tile['metric'] = metric;
+    tile['value'] = metric.visualisation.segments[0].buckets.slice(-1).value;
+    tile['description'] = response.description;
+  }
 }