fix(@angular-devkit/build-angular): karma builder now serves global styles

Closes: #11072

Author: alan-agius4

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-context.html

@@ -30,6 +30,7 @@
   <script type="text/javascript" src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
   <!-- Dynamically replaced with <script> tags -->
   %SCRIPTS%
+  <script type="text/javascript" src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
   <script type="text/javascript" src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
   <script type="text/javascript" src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
   <script type="text/javascript" src="_karma_webpack_/main.js" crossorigin="anonymous"></script>

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-debug.html

@@ -32,6 +32,7 @@
   <script type="text/javascript" src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
   <!-- Dynamically replaced with <script> tags -->
   %SCRIPTS%
+  <script type="text/javascript" src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
   <script type="text/javascript" src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
   <script type="text/javascript" src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
   <script type="text/javascript" src="_karma_webpack_/main.js" crossorigin="anonymous"></script>

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts

@@ -125,9 +125,6 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
   config.middleware = config.middleware || [];
   config.middleware.push('@angular-devkit/build-angular--fallback');
 
-  // Delete global styles entry, we don't want to load them.
-  delete webpackConfig.entry.styles;
-
   // The webpack tier owns the watch behavior so we want to force it in the config.
   webpackConfig.watch = !config.singleRun;
   if (config.singleRun) {
@@ -198,6 +195,7 @@ const init: any = (config: any, emitter: any, customFileHandlers: any) => {
           '/_karma_webpack_/runtime.js',
           '/_karma_webpack_/polyfills.js',
           '/_karma_webpack_/scripts.js',
+          '/_karma_webpack_/styles.js',
           '/_karma_webpack_/vendor.js',
         ];
         if (alwaysServe.indexOf(req.url) != -1) {

packages/angular_devkit/build_angular/test/karma/styles_spec_large.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import { runTargetSpec } from '@angular-devkit/architect/testing';
+import { tap } from 'rxjs/operators';
+import { host, karmaTargetSpec } from '../utils';
+
+
+describe('Karma Builder global styles', () => {
+  beforeEach(done => host.initialize().toPromise().then(done, done.fail));
+  afterEach(done => host.restore().toPromise().then(done, done.fail));
+
+  it('works', (done) => {
+    host.writeMultipleFiles({
+      'src/styles.css': 'p {display: none}',
+      'src/app/app.component.ts': `
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          template: '<p>Hello World</p>'
+        })
+        export class AppComponent {
+        }
+       `,
+      'src/app/app.component.spec.ts': `
+        import { TestBed, async } from '@angular/core/testing';
+        import { HttpModule } from '@angular/http';
+        import { AppComponent } from './app.component';
+
+        describe('AppComponent', () => {
+          beforeEach(async(() => {
+            TestBed.configureTestingModule({
+              imports: [
+                HttpModule
+              ],
+              declarations: [
+                AppComponent
+              ]
+            }).compileComponents();
+          }));
+
+          it('should not contain text that is hidden via css', async(() => {
+            const fixture = TestBed.createComponent(AppComponent);
+            expect(fixture.nativeElement.innerText).not.toContain('Hello World');
+          }));
+        });`,
+    });
+
+    runTargetSpec(host, karmaTargetSpec).pipe(
+      tap(buildEvent => expect(buildEvent.success).toBe(true)),
+    ).toPromise().then(done, done.fail);
+  });
+});