diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-context.html b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-context.html index ec185d8d3e60..dd11e3efe33f 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-context.html +++ b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-context.html @@ -30,6 +30,7 @@ %SCRIPTS% + diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-debug.html b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-debug.html index 4f49e825a3d4..79d8708fdc87 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-debug.html +++ b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma-debug.html @@ -32,6 +32,7 @@ %SCRIPTS% + diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts index 92f4776ae7b6..1799ce53075e 100644 --- a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/karma.ts +++ b/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) { diff --git a/packages/angular_devkit/build_angular/test/karma/styles_spec_large.ts b/packages/angular_devkit/build_angular/test/karma/styles_spec_large.ts new file mode 100644 index 000000000000..899fbea31e53 --- /dev/null +++ b/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: '
Hello World
' + }) + 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); + }); +});