Web app side tests (#369)

* adding tests * karma setup * got tests working * mocking working * set up coverage * cleaned up commit * moved tasks to appropriate places * added task for jenkins * change jenkins to cproc * testing jenkins build * testing builds * combined testing * finished build error * fixed testing reporting * added tests for coverage up to ~70% * up to 85% coverage * finished testing and clean up karma setup * reverted unintended changes * moved tests; added extraction function
microsoft · Nov 21, 2016 · 5660413 · 5660413
1 parent f427efc
commit 5660413
Show file tree

Hide file tree

Showing 22 changed files with 1,484 additions and 219 deletions.
diff --git a/karma-test-shim.js b/karma-test-shim.js
@@ -2,8 +2,8 @@
 // /*global jasmine, __karma__, window*/
 Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing.
 
-// Uncomment to get full stacktrace output. Sometimes helpful, usually not.
-Error.stackTraceLimit = Infinity; //
+// Uncomment to get full stacktrace output.
+// Error.stackTraceLimit = Infinity; //
 
 var builtPath = '/base/out/src/views/htmlcontent/dist/js/';
 
@@ -44,21 +44,9 @@ System.config({
 });
 
 System.import('lib/js/systemjs.config.js')
-  .then(importSystemJsExtras)
   .then(initTestBed)
   .then(initTesting);
 
-/** Optional SystemJS configuration extras. Keep going w/o it */
-function importSystemJsExtras(){
-  return System.import('lib/js/systemjs.config.extras.js')
-  .catch(function(reason) {
-    console.log(
-      'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.'
-    );
-    console.log(reason);
-  });
-}
-
 function initTestBed(){
   return Promise.all([
     System.import('@angular/core/testing'),

diff --git a/karma.conf.js b/karma.conf.js
@@ -7,8 +7,8 @@ module.exports = function(config) {
   var appSrcBase = 'src/views/htmlcontent/src/js/';       // app source TS files
   var appAssets  = 'base/out/src/views/htmlcontent/'; // component assets fetched by Angular's compiler
 
-  var testBase    = 'out/test/angular/';       // transpiled test JS and map files
-  var testSrcBase = 'test/angular/';       // test source TS files
+  var testBase    = 'out/src/views/htmlcontent/test/';       // transpiled test JS and map files
+  var testSrcBase = 'src/views/htmlcontent/test/';       // test source TS files
 
   config.set({
     basePath: path.join(__dirname),
@@ -19,18 +19,9 @@ module.exports = function(config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'), // click "Debug" in browser to see it
-      require('karma-htmlfile-reporter'), // crashing w/ strange socket error
       require('karma-junit-reporter')
     ],
 
-    customLaunchers: {
-      // From the CLI. Not used here but interesting
-      // chrome setup for travis CI using chromium
-      Chrome_travis_ci: {
-        base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
-    },
     files: [
       'out/src/views/htmlcontent/lib/js/jquery-1.7.min.js',
       'out/src/views/htmlcontent/lib/js/jquery.event.drag-2.2.js',
@@ -73,7 +64,6 @@ module.exports = function(config) {
       { pattern: 'out/src/views/htmlcontent/lib/js/@angular/**/*.js.map', included: false, watched: false },
 
       { pattern: 'out/src/views/htmlcontent/lib/js/systemjs.config.js', included: false, watched: false },
-      { pattern: 'out/src/views/htmlcontent/lib/js/systemjs.config.extras.js', included: false, watched: false },
       'karma-test-shim.js',
 
       // transpiled application & spec code paths loaded via module imports
@@ -97,25 +87,15 @@ module.exports = function(config) {
     // Proxied base paths for loading assets
     proxies: {
       // required for component assets fetched by Angular's compiler
-      "/dist/": 'base/out/src/views/htmlcontent/dist/'
+      "/dist/": 'base/out/src/views/htmlcontent/dist/',
+      "/base/out/src/views/htmlcontent/src/": '/base/out/src/views/htmlcontent/dist/'
     },
 
     exclude: [],
     preprocessors: {
       'out/src/views/htmlcontent/dist/**/!(*spec)*.js': 'coverage',
     },
-    // disabled HtmlReporter; suddenly crashing w/ strange socket error
-    reporters: ['progress', 'coverage', 'karma-remap-istanbul', 'junit'],//'html'],
-
-    // HtmlReporter configuration
-    htmlReporter: {
-      // Open this file to see results in browser
-      outputFile: '_test-output/tests.html',
-
-      // Optional
-      pageTitle: 'Unit Tests',
-      subPageTitle: __dirname
-    },
+    reporters: ['progress', 'coverage', 'karma-remap-istanbul', 'junit'],
     coverageReporter: {
       dir : 'coverage/',
       reporters: [
@@ -124,7 +104,9 @@ module.exports = function(config) {
     },
     remapIstanbulReporter: {
       reports: {
-        json: 'coverage/coverage-html.json'
+        json: 'coverage/coverage-html.json',
+        // uncomment below for html only coverage
+        // html: 'coverage/htmlcoverage/'
       }
     },
     junitReporter: {

diff --git a/src/views/htmlcontent/src/css/flexbox.css b/src/views/htmlcontent/src/css/flexbox.css
@@ -55,7 +55,7 @@ body {
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 /* testing

diff --git a/src/views/htmlcontent/src/html/app.html b/src/views/htmlcontent/src/html/app.html
@@ -1,13 +1,13 @@
 <div class="fullsize vertBox">
-    <div *ngIf="dataSets.length > 0" class="boxRow header collapsible" [class.collapsed]="!resultActive" (click)="resultActive = !resultActive">
+    <div *ngIf="dataSets.length > 0" id="resultspane" class="boxRow header collapsible" [class.collapsed]="!resultActive" (click)="resultActive = !resultActive">
         <span> {{Constants.resultPaneLabel}} </span>
         <span class="shortCut"> {{resultShortcut}} </span>
     </div>
     <div id="results" *ngIf="renderedDataSets.length > 0" class="results vertBox scrollable"
          (onScroll)="onScroll($event)" [scrollEnabled]="scrollEnabled" [class.hidden]="!resultActive">
         <div class="boxRow content horzBox slickgrid" *ngFor="let dataSet of renderedDataSets; let i = index"
             [style.max-height]="dataSet.maxHeight" [style.min-height]="dataSet.minHeight">
-            <slick-grid id="slickgrid_{{i}}" [columnDefinitions]="dataSet.columnDefinitions"
+            <slick-grid #slickgrid id="slickgrid_{{i}}" [columnDefinitions]="dataSet.columnDefinitions"
                         [ngClass]="i === activeGrid ? 'active' : ''"
                         [dataRows]="dataSet.dataRows"
                         (contextMenu)="openContextMenu($event, dataSet.batchId, dataSet.resultId, i)"
@@ -30,8 +30,8 @@
             </span>
         </div>
     </div>
-    <context-menu (clickEvent)="handleContextClick($event)"></context-menu>
-    <div class="boxRow header collapsible" [class.collapsed]="!messageActive" (click)="messageActive = !messageActive" style="position: relative">
+    <context-menu #contextmenu (clickEvent)="handleContextClick($event)"></context-menu>
+    <div id="messagepane" class="boxRow header collapsible" [class.collapsed]="!messageActive" (click)="messageActive = !messageActive" style="position: relative">
         <div id="messageResizeHandle" class="resizableHandle"></div>
         <span> {{Constants.messagePaneLabel}} </span>
         <span class="shortCut"> {{messageShortcut}} </span>
@@ -67,4 +67,4 @@
         </table>
     </div>
     <div id="resizeHandle" [class.hidden]="!resizing" [style.top]="resizeHandleTop"></div>
-</div>
+</div>
diff --git a/src/views/htmlcontent/src/html/contextmenu.component.html b/src/views/htmlcontent/src/html/contextmenu.component.html
@@ -1,4 +1,4 @@
-<ul class="contextMenu" style="display:none;position:absolute">
+<ul class="contextMenu" style="position:absolute" [class.hidden]="!visible" [style.top]="position.y" [style.left]="position.x">
     <li id="savecsv" (click)="handleContextActionClick('savecsv')" [class.disabled]="isDisabled"> {{Constants.saveCSVLabel}}
         <span style="float: right; color: lightgrey; padding-left: 10px">{{keys['event.saveAsCSV']}}</span></li>
     <li id="savejson" (click)="handleContextActionClick('savejson')" [class.disabled]="isDisabled"> {{Constants.saveJSONLabel}}

diff --git a/src/views/htmlcontent/src/js/app.module.ts b/src/views/htmlcontent/src/js/app.module.ts
@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  * ------------------------------------------------------------------------------------------ */
-import { NgModule }      from '@angular/core';
+import { NgModule, ValueProvider }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }   from '@angular/forms';
 import { HttpModule, JsonpModule } from '@angular/http';
@@ -17,6 +17,10 @@ import { ContextMenu } from './components/contextmenu.component';
 /**
  * Top level angular module, no actual content here
  */
+const WINDOW_PROVIDER: ValueProvider = {
+    provide: Window,
+    useValue: window
+};
 
 @NgModule({
   imports: [
@@ -25,6 +29,9 @@ import { ContextMenu } from './components/contextmenu.component';
               JsonpModule,
               FormsModule
            ],
+  providers: [
+    WINDOW_PROVIDER
+  ],
   declarations: [ AppComponent, SlickGrid, ScrollDirective, MouseDownDirective, ContextMenu],
   bootstrap:    [ AppComponent ]
 })

diff --git a/src/views/htmlcontent/src/js/components/app.component.spec.ts b/src/views/htmlcontent/src/js/components/app.component.spec.ts