Skip to content

Commit dc5a585

Browse files
alan-agius4alan-agius4
committed
fix(@angular-devkit/build-angular): styles CSS files not available in unit tests
With this change we force styles to be extracted in css files during unit tests. Closes #21054
1 parent fe1825a commit dc5a585

File tree

6 files changed

+83
-7
lines changed

6 files changed

+83
-7
lines changed

‎packages/angular_devkit/build_angular/src/karma/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ async function initialize(
4343
// * `outputPath` which is fixed for tests
4444
// * `budgets` which might be incorrect due to extra dev libs
4545
{
46-
...((options as unknown) as BrowserBuilderOptions),
46+
...(options as unknown as BrowserBuilderOptions),
4747
outputPath: '',
4848
budgets: undefined,
4949
optimization: false,
@@ -58,6 +58,7 @@ async function initialize(
5858
// https://github.com/webpack/webpack-dev-middleware/blob/698c9ae5e9bb9a013985add6189ff21c1a1ec185/src/index.js#L65
5959
// https://github.com/webpack/webpack/blob/cde1b73e12eb8a77eb9ba42e7920c9ec5d29c2c9/lib/Compiler.js#L379-L388
6060
watch: true,
61+
extractCss: true,
6162
},
6263
context,
6364
(wco) => [

‎packages/angular_devkit/build_angular/src/karma/tests/options/code-coverage_spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -141,8 +141,8 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
141141
codeCoverage: true,
142142
});
143143

144-
const result = await harness.execute();
145-
await result
144+
await harness
145+
.execute()
146146
.pipe(
147147
// In incremental mode, karma-coverage does not have the ability to mark a
148148
// run as failed if code coverage does not pass. This is because it does

‎packages/angular_devkit/build_angular/src/karma/tests/options/styles_spec.ts

+76-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { BASE_OPTIONS, KARMA_BUILDER_INFO, describeBuilder } from '../setup';
1111

1212
describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
1313
describe('Option: "styles"', () => {
14-
it('includes unnamed styles in compilation', async () => {
14+
it(`processes 'styles.css' styles`, async () => {
1515
await harness.writeFiles({
1616
'src/styles.css': 'p {display: none}',
1717
'src/app/app.component.ts': `
@@ -54,5 +54,80 @@ describeBuilder(execute, KARMA_BUILDER_INFO, (harness) => {
5454
const { result } = await harness.executeOnce();
5555
expect(result?.success).toBeTrue();
5656
});
57+
58+
it('processes style with bundleName', async () => {
59+
await harness.writeFiles({
60+
'src/dark-theme.css': '',
61+
'src/app/app.module.ts': `
62+
import { BrowserModule } from '@angular/platform-browser';
63+
import { NgModule } from '@angular/core';
64+
import { HttpClientModule } from '@angular/common/http';
65+
import { AppComponent } from './app.component';
66+
@NgModule({
67+
declarations: [
68+
AppComponent
69+
],
70+
imports: [
71+
BrowserModule,
72+
HttpClientModule
73+
],
74+
providers: [],
75+
bootstrap: [AppComponent]
76+
})
77+
export class AppModule { }
78+
`,
79+
'src/app/app.component.ts': `
80+
import { Component } from '@angular/core';
81+
import { HttpClient } from '@angular/common/http';
82+
@Component({
83+
selector: 'app-root',
84+
template: '<p *ngFor="let asset of css">{{ asset.content }}</p>'
85+
})
86+
export class AppComponent {
87+
public assets = [
88+
{ path: './dark-theme.css', content: '' },
89+
];
90+
constructor(private http: HttpClient) {
91+
this.assets.forEach(asset => http.get(asset.path, { responseType: 'text' })
92+
.subscribe(res => asset.content = res));
93+
}
94+
}`,
95+
'src/app/app.component.spec.ts': `
96+
import { TestBed } from '@angular/core/testing';
97+
import { HttpClientModule } from '@angular/common/http';
98+
import { AppComponent } from './app.component';
99+
describe('AppComponent', () => {
100+
beforeEach(async () => {
101+
await TestBed.configureTestingModule({
102+
imports: [
103+
HttpClientModule
104+
],
105+
declarations: [
106+
AppComponent
107+
]
108+
}).compileComponents();
109+
});
110+
it('should create the app', () => {
111+
const fixture = TestBed.createComponent(AppComponent);
112+
const app = fixture.debugElement.componentInstance;
113+
expect(app).toBeTruthy();
114+
});
115+
});`,
116+
});
117+
118+
harness.useTarget('test', {
119+
...BASE_OPTIONS,
120+
styles: [
121+
{
122+
inject: false,
123+
input: 'src/dark-theme.css',
124+
bundleName: 'dark-theme',
125+
},
126+
],
127+
});
128+
129+
const { result } = await harness.executeOnce();
130+
expect(result?.success).toBeTrue();
131+
});
57132
});
58133
});

‎packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma-context.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<title></title>
1010
<base href="/" />
1111
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
12+
<link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
1213
<meta
1314
name="viewport"
1415
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
@@ -34,7 +35,6 @@
3435
<script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
3536
<!-- Dynamically replaced with <script> tags -->
3637
%SCRIPTS%
37-
<script src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
3838
<script src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
3939
<script src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
4040
<script src="_karma_webpack_/main.js" crossorigin="anonymous"></script>

‎packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma-debug.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<title>Karma DEBUG RUNNER</title>
1111
<base href="/" />
1212
<link href="favicon.ico" rel="icon" type="image/x-icon" />
13+
<link rel="stylesheet" href="_karma_webpack_/styles.css" crossorigin="anonymous" />
1314
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
1415
<meta
1516
name="viewport"
@@ -36,7 +37,6 @@
3637
<script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
3738
<!-- Dynamically replaced with <script> tags -->
3839
%SCRIPTS%
39-
<script src="_karma_webpack_/styles.js" crossorigin="anonymous"></script>
4040
<script src="_karma_webpack_/scripts.js" crossorigin="anonymous"></script>
4141
<script src="_karma_webpack_/vendor.js" crossorigin="anonymous"></script>
4242
<script src="_karma_webpack_/main.js" crossorigin="anonymous"></script>

‎packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ function fallbackMiddleware() {
301301
`/${KARMA_APPLICATION_PATH}/polyfills.js`,
302302
`/${KARMA_APPLICATION_PATH}/polyfills-es5.js`,
303303
`/${KARMA_APPLICATION_PATH}/scripts.js`,
304-
`/${KARMA_APPLICATION_PATH}/styles.js`,
304+
`/${KARMA_APPLICATION_PATH}/styles.css`,
305305
`/${KARMA_APPLICATION_PATH}/vendor.js`,
306306
];
307307
if (request.url && alwaysServe.includes(request.url)) {

0 commit comments

Comments
 (0)