page rendering blocks karma html reporting on angular-cli app

I am very new to unit testing javascript applications, but have gotten started using the built in scaffolding provided by the angular-cli for an Angular 4.0.2 application.

The problem I am having is not that my tests do not run ... but that the browser window that shows up displays the web page being tested, and the tests are drawn in-line with that - in such a way where they are blocked from view because of the way the page is designed.

I have enclosed my karma.conf.js file below, as well as the test being run in this screenshot.

karma.conf.js

const
    path = require('path')
  , ExtractTextPlugin                             = require('extract-text-webpack-plugin')
  , cssOptions                                    = { sourceMap: false, importLoaders: 1, minimize: false }
  , scssOptions                                   = {
  sourceMap: false,
  includePaths: [
    path.join(process.cwd(), 'assets/styles' ),
    path.join(process.cwd(), 'src/styles')
  ]
};
// Karma configuration file, see link for more information
// http://ift.tt/2mVhPk7

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-webpack'),
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-html-reporter'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    webpack: {
      module: {
        rules: [
          {
            enforce: 'pre',
            test: /\.js$/,
            use: [
              { loader: 'source-map-loader' }
            ],
            exclude: [
              /\/node_modules\//
            ]
          },
          {
            test: /\.json$/,
            use: [
              { loader: 'json-loader' }
            ]
          },
          {
            test: /\.html$/,
            use: [
              { loader: 'raw-loader' }
            ]
          },
          {
            test: /\.(eot|svg)$/,
            use: [
              { loader: 'file-loader?name=[name].[hash:20].[ext]' }
            ]
          },
          {
            test: /\.(jpg|png|gif|otf|ttf|woff|woff2|cur|ani)$/,
            use: [
              { loader: 'url-loader?name=[name].[hash:20].[ext]&limit=10000' }
            ]
          },
          {
            exclude: [
            ],
            test: /\.css$/,
            use: [
              { loader: 'exports-loader?module.exports.toString()' },
              {
                loader: 'css-loader',
                options: cssOptions
              },
              {
                loader: 'postcss-loader',
                options: {
                  plugins: function () {
                    return [
                      require('precss'),
                      require('autoprefixer')
                    ];
                  }
                }
              }
            ]
          },
          {
            exclude: [
            ],
            test: /\.scss$|\.sass$/,
            use: [
              { loader: 'exports-loader?module.exports.toString()' },
              {
                loader: 'css-loader',
                options: cssOptions
              },
              {
                loader: 'postcss-loader',
                options: {
                  plugins: function () {
                    return [
                      require('precss'),
                      require('autoprefixer')
                    ];
                  }
                }
              },
              {
                loader: 'sass-loader',
                options: scssOptions
              }
            ]
          },
          {
            include: [
            ],
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
              use: [
                {
                  loader: 'css-loader',
                  options: cssOptions
                },
                {
                  loader: 'postcss-loader',
                  options: {
                    plugins: function () {
                      return [
                        require('precss'),
                        require('autoprefixer')
                      ];
                    }
                  }
                }
              ],
              fallback: 'style-loader',
              publicPath: ''
            })
          },
          {
            include: [
            ],
            test: /\.scss$|\.sass$/,
            use: ExtractTextPlugin.extract({
              use: [
                {
                  loader: 'css-loader',
                  options: cssOptions
                },
                {
                  loader: 'postcss-loader',
                  options: {
                    plugins: function () {
                      return [
                        require('precss'),
                        require('autoprefixer')
                      ];
                    }
                  }
                },
                {
                  loader: 'sass-loader',
                  options: scssOptions
                }
              ],
              fallback: 'style-loader',
              publicPath: ''
            })
          },
          {
            test: /\.ts$/,
            loader: '@ngtools/webpack'
          }
        ]
      }
    },
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_DISABLE,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

sidebar.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';

import { HostSideBarComponent } from './sidebar.component';

describe('HostSideBarComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        HostSideBarComponent
      ],
    }).compileComponents();
  }));

  it('should bootstrap angular', async(() => {
    const fixture = TestBed.createComponent(HostSideBarComponent);
    const component = fixture.debugElement.componentInstance;
    expect(component).toBeTruthy();
  }));
});