Skip to content

Commit

Permalink
fix(@angular-devkit/build-angular): styles CSS files not available in…
Browse files Browse the repository at this point in the history
… unit tests

With this change we force styles to be extracted in css files during unit tests.

Closes #21054

(cherry picked from commit dc5a585)
  • Loading branch information
alan-agius4 committed Jun 9, 2021
1 parent 051119e commit 7604e62
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 7 deletions.
3 changes: 2 additions & 1 deletion packages/angular_devkit/build_angular/src/karma/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ async function initialize(
// * `outputPath` which is fixed for tests
// * `budgets` which might be incorrect due to extra dev libs
{
...((options as unknown) as BrowserBuilderOptions),
...(options as unknown as BrowserBuilderOptions),
outputPath: '',
budgets: undefined,
optimization: false,
Expand All @@ -58,6 +58,7 @@ async function initialize(
// https://github.com/webpack/webpack-dev-middleware/blob/698c9ae5e9bb9a013985add6189ff21c1a1ec185/src/index.js#L65
// https://github.com/webpack/webpack/blob/cde1b73e12eb8a77eb9ba42e7920c9ec5d29c2c9/lib/Compiler.js#L379-L388
watch: true,
extractCss: true,
},
context,
(wco) => [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -141,8 +141,8 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
codeCoverage: true,
});

const result = await harness.execute();
await result
await harness
.execute()
.pipe(
// In incremental mode, karma-coverage does not have the ability to mark a
// run as failed if code coverage does not pass. This is because it does
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { BASE_OPTIONS, KARMA_BUILDER_INFO, describeBuilder } from '../setup';

describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
describe('Option: "styles"', () => {
it('includes unnamed styles in compilation', async () => {
it(`processes 'styles.css' styles`, async () => {
await harness.writeFiles({
'src/styles.css': 'p {display: none}',
'src/app/app.component.ts': `
Expand Down Expand Up @@ -54,5 +54,80 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
const { result } = await harness.executeOnce();
expect(result?.success).toBeTrue();
});

it('processes style with bundleName', async () => {
await harness.writeFiles({
'src/dark-theme.css': '',
'src/app/app.module.ts': `
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`,
'src/app/app.component.ts': `
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
template: '<p *ngFor="let asset of css">{{ asset.content }}</p>'
})
export class AppComponent {
public assets = [
{ path: './dark-theme.css', content: '' },
];
constructor(private http: HttpClient) {
this.assets.forEach(asset => http.get(asset.path, { responseType: 'text' })
.subscribe(res => asset.content = res));
}
}`,
'src/app/app.component.spec.ts': `
import { TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
HttpClientModule
],
declarations: [
AppComponent
]
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
});`,
});

harness.useTarget('test', {
...BASE_OPTIONS,
styles: [
{
inject: false,
input: 'src/dark-theme.css',
bundleName: 'dark-theme',
},
],
});

const { result } = await harness.executeOnce();
expect(result?.success).toBeTrue();
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<title></title>
<base href="/" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
Expand All @@ -34,7 +35,6 @@
<script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
<!-- Dynamically replaced with <script> tags -->
%SCRIPTS%
<script src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
<script src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
<script src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
<script src="_karma_webpack_/main.js" crossorigin="anonymous"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<title>Karma DEBUG RUNNER</title>
<base href="/" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta
name="viewport"
Expand All @@ -36,7 +37,6 @@
<script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
<!-- Dynamically replaced with <script> tags -->
%SCRIPTS%
<script src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
<script src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
<script src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
<script src="_karma_webpack_/main.js" crossorigin="anonymous"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ function fallbackMiddleware() {
`/${KARMA_APPLICATION_PATH}/polyfills.js`,
`/${KARMA_APPLICATION_PATH}/polyfills-es5.js`,
`/${KARMA_APPLICATION_PATH}/scripts.js`,
`/${KARMA_APPLICATION_PATH}/styles.js`,
`/${KARMA_APPLICATION_PATH}/styles.css`,
`/${KARMA_APPLICATION_PATH}/vendor.js`,
];
if (request.url && alwaysServe.includes(request.url)) {
Expand Down

0 comments on commit 7604e62

Please sign in to comment.