Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit ff4149e

Browse files
timdeschryvertimdeschryver
committedNov 30, 2024··
fix: update Angular 19
1 parent b0dcf25 commit ff4149e

File tree

10 files changed

+103
-85
lines changed

10 files changed

+103
-85
lines changed
 

‎.github/workflows/ci.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ jobs:
3333
with:
3434
node-version: ${{ matrix.node-version }}
3535
- name: install
36-
run: npm install
36+
run: npm install --force
3737
- name: build
3838
run: npm run build -- --skip-nx-cache
3939
- name: test

‎package.json

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -27,35 +27,35 @@
2727
"prepare": "git config core.hookspath .githooks"
2828
},
2929
"dependencies": {
30-
"@angular/animations": "18.2.13",
31-
"@angular/cdk": "18.2.14",
32-
"@angular/common": "18.2.13",
33-
"@angular/compiler": "18.2.13",
34-
"@angular/core": "18.2.13",
35-
"@angular/material": "18.2.14",
36-
"@angular/platform-browser": "18.2.13",
37-
"@angular/platform-browser-dynamic": "18.2.13",
38-
"@angular/router": "18.2.13",
39-
"@ngrx/store": "18.0.2",
30+
"@angular/animations": "19.0.1",
31+
"@angular/cdk": "19.0.1",
32+
"@angular/common": "19.0.1",
33+
"@angular/compiler": "19.0.1",
34+
"@angular/core": "19.0.1",
35+
"@angular/material": "19.0.1",
36+
"@angular/platform-browser": "19.0.1",
37+
"@angular/platform-browser-dynamic": "19.0.1",
38+
"@angular/router": "19.0.1",
39+
"@ngrx/store": "19.0.0-beta.0",
4040
"@nx/angular": "20.1.3",
41-
"@testing-library/dom": "^10.0.0",
41+
"@testing-library/dom": "^10.4.0",
4242
"rxjs": "7.8.0",
4343
"tslib": "~2.3.1",
44-
"zone.js": "0.14.10"
44+
"zone.js": "^0.15.0"
4545
},
4646
"devDependencies": {
47-
"@angular-devkit/build-angular": "18.2.9",
48-
"@angular-devkit/core": "18.2.9",
49-
"@angular-devkit/schematics": "18.2.9",
47+
"@angular-devkit/build-angular": "19.0.1",
48+
"@angular-devkit/core": "19.0.1",
49+
"@angular-devkit/schematics": "19.0.1",
5050
"@angular-eslint/builder": "18.3.0",
5151
"@angular-eslint/eslint-plugin": "18.0.1",
5252
"@angular-eslint/eslint-plugin-template": "18.0.1",
5353
"@angular-eslint/schematics": "18.3.0",
5454
"@angular-eslint/template-parser": "18.0.1",
55-
"@angular/cli": "~18.2.0",
56-
"@angular/compiler-cli": "18.2.13",
57-
"@angular/forms": "18.2.13",
58-
"@angular/language-service": "18.2.13",
55+
"@angular/cli": "19.0.1",
56+
"@angular/compiler-cli": "19.0.1",
57+
"@angular/forms": "19.0.1",
58+
"@angular/language-service": "19.0.1",
5959
"@nx/eslint": "20.1.3",
6060
"@nx/eslint-plugin": "20.1.3",
6161
"@nx/jest": "20.1.3",
@@ -86,15 +86,15 @@
8686
"jasmine-spec-reporter": "7.0.0",
8787
"jest": "29.7.0",
8888
"jest-environment-jsdom": "29.7.0",
89-
"jest-preset-angular": "14.1.0",
89+
"jest-preset-angular": "14.4.1",
9090
"karma": "6.4.0",
9191
"karma-chrome-launcher": "^3.1.0",
9292
"karma-coverage": "^2.2.1",
9393
"karma-jasmine": "5.1.0",
9494
"karma-jasmine-html-reporter": "2.0.0",
9595
"lint-staged": "^12.1.6",
9696
"ng-mocks": "^14.11.0",
97-
"ng-packagr": "18.2.1",
97+
"ng-packagr": "19.0.1",
9898
"nx": "20.1.3",
9999
"postcss": "^8.4.5",
100100
"postcss-import": "14.1.0",
@@ -105,6 +105,6 @@
105105
"semantic-release": "^18.0.0",
106106
"ts-jest": "29.1.0",
107107
"ts-node": "10.9.1",
108-
"typescript": "5.5.4"
108+
"typescript": "5.6.2"
109109
}
110110
}

‎projects/testing-library/src/lib/testing-library.ts

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {
3333
RenderResult,
3434
RenderTemplateOptions,
3535
OutputRefKeysWithCallback,
36+
Config,
3637
} from './models';
3738
import { getConfig } from './config';
3839

@@ -82,7 +83,9 @@ export async function render<SutType, WrapperType = SutType>(
8283
configureTestBed = () => {
8384
/* noop*/
8485
},
85-
} = { ...globalConfig, ...renderOptions };
86+
} = { ...globalConfig, ...renderOptions } as RenderComponentOptions<SutType> &
87+
RenderTemplateOptions<WrapperType> &
88+
Config;
8689

8790
dtlConfigure({
8891
eventWrapper: (cb) => {
@@ -227,7 +230,7 @@ export async function render<SutType, WrapperType = SutType>(
227230
return createdFixture;
228231
};
229232

230-
const fixture = await renderFixture(componentProperties, allInputs, componentOutputs, on);
233+
const fixture = await renderFixture(componentProperties, allInputs as any, componentOutputs, on);
231234

232235
if (deferBlockStates) {
233236
if (Array.isArray(deferBlockStates)) {
@@ -487,12 +490,13 @@ function addAutoDeclarations<SutType>(
487490
wrapper,
488491
}: Pick<RenderTemplateOptions<any>, 'declarations' | 'excludeComponentDeclaration' | 'wrapper'>,
489492
) {
493+
const nonStandaloneDeclarations = declarations?.filter((d) => !isStandalone(d));
490494
if (typeof sut === 'string') {
491-
return [...declarations, wrapper];
495+
return [...nonStandaloneDeclarations, wrapper];
492496
}
493497

494498
const components = () => (excludeComponentDeclaration || isStandalone(sut) ? [] : [sut]);
495-
return [...declarations, ...components()];
499+
return [...nonStandaloneDeclarations, ...components()];
496500
}
497501

498502
function addAutoImports<SutType>(

‎projects/testing-library/test-setup.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
import 'jest-preset-angular/setup-jest';
1+
import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
22
import '@testing-library/jest-dom';
33
import { TextEncoder, TextDecoder } from 'util';
44

5+
setupZoneTestEnv();
6+
57
// eslint-disable-next-line @typescript-eslint/naming-convention
68
Object.assign(global, { TextDecoder, TextEncoder });

‎projects/testing-library/tests/find-by.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import { Component } from '@angular/core';
22
import { timer } from 'rxjs';
33
import { render, screen } from '../src/public_api';
44
import { mapTo } from 'rxjs/operators';
5+
import { AsyncPipe } from '@angular/common';
56

67
@Component({
78
selector: 'atl-fixture',
89
template: ` <div>{{ result | async }}</div> `,
10+
imports: [AsyncPipe],
911
})
1012
class FixtureComponent {
1113
result = timer(30).pipe(mapTo('I am visible'));

‎projects/testing-library/tests/integration.spec.ts

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { of, BehaviorSubject } from 'rxjs';
44
import { debounceTime, switchMap, map, startWith } from 'rxjs/operators';
55
import { render, screen, waitFor, waitForElementToBeRemoved, within } from '../src/lib/testing-library';
66
import userEvent from '@testing-library/user-event';
7+
import { AsyncPipe, NgForOf } from '@angular/common';
78

89
const DEBOUNCE_TIME = 1_000;
910

@@ -21,6 +22,25 @@ class ModalService {
2122
}
2223
}
2324

25+
@Component({
26+
selector: 'atl-table',
27+
template: `
28+
<table>
29+
<tr *ngFor="let entity of entities">
30+
<td>{{ entity.name }}</td>
31+
<td>
32+
<button (click)="edit.next(entity.name)">Edit</button>
33+
</td>
34+
</tr>
35+
</table>
36+
`,
37+
imports: [NgForOf],
38+
})
39+
class TableComponent {
40+
@Input() entities: any[] = [];
41+
@Output() edit = new EventEmitter<string>();
42+
}
43+
2444
@Component({
2545
template: `
2646
<h1>Entities Title</h1>
@@ -31,6 +51,7 @@ class ModalService {
3151
</label>
3252
<atl-table [entities]="entities | async" (edit)="editEntityClicked($event)"></atl-table>
3353
`,
54+
imports: [TableComponent, AsyncPipe],
3455
})
3556
class EntitiesComponent {
3657
query = new BehaviorSubject<string>('');
@@ -55,22 +76,6 @@ class EntitiesComponent {
5576
}
5677
}
5778

58-
@Component({
59-
selector: 'atl-table',
60-
template: `
61-
<table>
62-
<tr *ngFor="let entity of entities">
63-
<td>{{ entity.name }}</td>
64-
<td><button (click)="edit.next(entity.name)">Edit</button></td>
65-
</tr>
66-
</table>
67-
`,
68-
})
69-
class TableComponent {
70-
@Input() entities: any[] = [];
71-
@Output() edit = new EventEmitter<string>();
72-
}
73-
7479
const entities = [
7580
{
7681
id: 1,
@@ -91,7 +96,6 @@ async function setup() {
9196
const user = userEvent.setup();
9297

9398
await render(EntitiesComponent, {
94-
declarations: [TableComponent],
9599
providers: [
96100
{
97101
provide: EntitiesService,

‎projects/testing-library/tests/issues/issue-280.spec.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import { Location } from '@angular/common';
22
import { Component, NgModule } from '@angular/core';
3-
import { RouterModule, Routes } from '@angular/router';
3+
import { RouterLink, RouterModule, RouterOutlet, Routes } from '@angular/router';
44
import { RouterTestingModule } from '@angular/router/testing';
55
import userEvent from '@testing-library/user-event';
66
import { render, screen } from '../../src/public_api';
77

88
@Component({
9-
template: `<div>Navigate</div>
9+
template: ` <div>Navigate</div>
1010
<router-outlet></router-outlet>`,
11+
imports: [RouterOutlet],
1112
})
1213
class MainComponent {}
1314

1415
@Component({
15-
template: `<div>first page</div>
16+
template: ` <div>first page</div>
1617
<a routerLink="/second">go to second</a>`,
18+
imports: [RouterLink],
1719
})
1820
class FirstComponent {}
1921

@@ -35,7 +37,6 @@ const routes: Routes = [
3537
];
3638

3739
@NgModule({
38-
declarations: [FirstComponent, SecondComponent],
3940
imports: [RouterModule.forRoot(routes)],
4041
exports: [RouterModule],
4142
})

‎projects/testing-library/tests/render-template.spec.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ class GreetingComponent {
4545

4646
test('the directive renders', async () => {
4747
const view = await render('<div onOff></div>', {
48-
declarations: [OnOffDirective],
48+
imports: [OnOffDirective],
4949
});
5050

5151
// eslint-disable-next-line testing-library/no-container
@@ -54,7 +54,7 @@ test('the directive renders', async () => {
5454

5555
test('the component renders', async () => {
5656
const view = await render('<greeting name="Angular"></greeting>', {
57-
declarations: [GreetingComponent],
57+
imports: [GreetingComponent],
5858
});
5959

6060
// eslint-disable-next-line testing-library/no-container
@@ -64,7 +64,7 @@ test('the component renders', async () => {
6464

6565
test('uses the default props', async () => {
6666
await render('<div onOff></div>', {
67-
declarations: [OnOffDirective],
67+
imports: [OnOffDirective],
6868
});
6969

7070
fireEvent.click(screen.getByText('init'));
@@ -74,7 +74,7 @@ test('uses the default props', async () => {
7474

7575
test('overrides input properties', async () => {
7676
await render('<div onOff on="hello"></div>', {
77-
declarations: [OnOffDirective],
77+
imports: [OnOffDirective],
7878
});
7979

8080
fireEvent.click(screen.getByText('init'));
@@ -85,7 +85,7 @@ test('overrides input properties', async () => {
8585
test('overrides input properties via a wrapper', async () => {
8686
// `bar` will be set as a property on the wrapper component, the property will be used to pass to the directive
8787
await render('<div onOff [on]="bar"></div>', {
88-
declarations: [OnOffDirective],
88+
imports: [OnOffDirective],
8989
componentProperties: {
9090
bar: 'hello',
9191
},
@@ -100,7 +100,7 @@ test('overrides output properties', async () => {
100100
const clicked = jest.fn();
101101

102102
await render('<div onOff (clicked)="clicked($event)"></div>', {
103-
declarations: [OnOffDirective],
103+
imports: [OnOffDirective],
104104
componentProperties: {
105105
clicked,
106106
},
@@ -116,7 +116,7 @@ test('overrides output properties', async () => {
116116
describe('removeAngularAttributes', () => {
117117
it('should remove angular attributes', async () => {
118118
await render('<div onOff (clicked)="clicked($event)"></div>', {
119-
declarations: [OnOffDirective],
119+
imports: [OnOffDirective],
120120
removeAngularAttributes: true,
121121
});
122122

@@ -126,7 +126,7 @@ describe('removeAngularAttributes', () => {
126126

127127
it('is disabled by default', async () => {
128128
await render('<div onOff (clicked)="clicked($event)"></div>', {
129-
declarations: [OnOffDirective],
129+
imports: [OnOffDirective],
130130
});
131131

132132
expect(document.querySelector('[ng-version]')).not.toBeNull();
@@ -136,7 +136,7 @@ describe('removeAngularAttributes', () => {
136136

137137
test('updates properties and invokes change detection', async () => {
138138
const view = await render<{ value: string }>('<div [update]="value" ></div>', {
139-
declarations: [UpdateInputDirective],
139+
imports: [UpdateInputDirective],
140140
componentProperties: {
141141
value: 'value1',
142142
},

‎projects/testing-library/tests/render.spec.ts

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -47,33 +47,31 @@ describe('DTL functionality', () => {
4747
});
4848
});
4949

50-
describe('standalone', () => {
50+
describe('components', () => {
5151
@Component({
5252
selector: 'atl-fixture',
5353
template: ` {{ name }} `,
5454
})
55-
class StandaloneFixtureComponent {
55+
class FixtureWithInputComponent {
5656
@Input() name = '';
5757
}
5858

59-
it('renders standalone component', async () => {
60-
await render(StandaloneFixtureComponent, { componentProperties: { name: 'Bob' } });
59+
it('renders component', async () => {
60+
await render(FixtureWithInputComponent, { componentProperties: { name: 'Bob' } });
6161
expect(screen.getByText('Bob')).toBeInTheDocument();
6262
});
6363
});
6464

65-
describe('standalone with child', () => {
65+
describe('component with child', () => {
6666
@Component({
6767
selector: 'atl-child-fixture',
6868
template: `<span>A child fixture</span>`,
69-
standalone: true,
7069
})
7170
class ChildFixtureComponent {}
7271

7372
@Component({
7473
selector: 'atl-child-fixture',
7574
template: `<span>A mock child fixture</span>`,
76-
standalone: true,
7775
// eslint-disable-next-line @angular-eslint/no-host-metadata-property, @typescript-eslint/naming-convention
7876
host: { 'collision-id': MockChildFixtureComponent.name },
7977
})
@@ -83,18 +81,17 @@ describe('standalone with child', () => {
8381
selector: 'atl-parent-fixture',
8482
template: `<h1>Parent fixture</h1>
8583
<div><atl-child-fixture></atl-child-fixture></div> `,
86-
standalone: true,
8784
imports: [ChildFixtureComponent],
8885
})
8986
class ParentFixtureComponent {}
9087

91-
it('renders the standalone component with a mocked child', async () => {
88+
it('renders the component with a mocked child', async () => {
9289
await render(ParentFixtureComponent, { componentImports: [MockChildFixtureComponent] });
9390
expect(screen.getByText('Parent fixture')).toBeInTheDocument();
9491
expect(screen.getByText('A mock child fixture')).toBeInTheDocument();
9592
});
9693

97-
it('renders the standalone component with child', async () => {
94+
it('renders the component with child', async () => {
9895
await render(ParentFixtureComponent);
9996
expect(screen.getByText('Parent fixture')).toBeInTheDocument();
10097
expect(screen.getByText('A child fixture')).toBeInTheDocument();
@@ -118,7 +115,6 @@ describe('childComponentOverrides', () => {
118115
@Component({
119116
selector: 'atl-child-fixture',
120117
template: `<span>{{ simpleService.value }}</span>`,
121-
standalone: true,
122118
providers: [MySimpleService],
123119
})
124120
class NestedChildFixtureComponent {
@@ -128,7 +124,6 @@ describe('childComponentOverrides', () => {
128124
@Component({
129125
selector: 'atl-parent-fixture',
130126
template: `<atl-child-fixture></atl-child-fixture>`,
131-
standalone: true,
132127
imports: [NestedChildFixtureComponent],
133128
})
134129
class ParentFixtureComponent {}
@@ -190,22 +185,22 @@ describe('componentOutputs', () => {
190185
});
191186

192187
describe('on', () => {
193-
@Component({ template: ``, standalone: true })
188+
@Component({ template: `` })
194189
class TestFixtureWithEventEmitterComponent {
195190
@Output() readonly event = new EventEmitter<void>();
196191
}
197192

198-
@Component({ template: ``, standalone: true })
193+
@Component({ template: `` })
199194
class TestFixtureWithDerivedEventComponent {
200195
@Output() readonly event = fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click');
201196
}
202197

203-
@Component({ template: ``, standalone: true })
198+
@Component({ template: `` })
204199
class TestFixtureWithFunctionalOutputComponent {
205200
readonly event = output<string>();
206201
}
207202

208-
@Component({ template: ``, standalone: true })
203+
@Component({ template: `` })
209204
class TestFixtureWithFunctionalDerivedEventComponent {
210205
readonly event = outputFromObservable(fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click'));
211206
}
@@ -313,20 +308,31 @@ describe('on', () => {
313308
});
314309
});
315310

316-
describe('animationModule', () => {
311+
describe('excludeComponentDeclaration', () => {
312+
@Component({
313+
selector: 'atl-fixture',
314+
template: `
315+
<input type="text" data-testid="input" />
316+
<button>button</button>
317+
`,
318+
standalone: false,
319+
})
320+
class NotStandaloneFixtureComponent {}
321+
317322
@NgModule({
318-
declarations: [FixtureComponent],
323+
declarations: [NotStandaloneFixtureComponent],
319324
})
320325
class FixtureModule {}
321-
describe('excludeComponentDeclaration', () => {
322-
it('does not throw if component is declared in an imported module', async () => {
323-
await render(FixtureComponent, {
324-
imports: [FixtureModule],
325-
excludeComponentDeclaration: true,
326-
});
326+
327+
it('does not throw if component is declared in an imported module', async () => {
328+
await render(NotStandaloneFixtureComponent, {
329+
imports: [FixtureModule],
330+
excludeComponentDeclaration: true,
327331
});
328332
});
333+
});
329334

335+
describe('animationModule', () => {
330336
it('adds NoopAnimationsModule by default', async () => {
331337
await render(FixtureComponent);
332338
const noopAnimationsModule = TestBed.inject(NoopAnimationsModule);
@@ -458,14 +464,12 @@ describe('DebugElement', () => {
458464

459465
describe('initialRoute', () => {
460466
@Component({
461-
standalone: true,
462467
selector: 'atl-fixture2',
463468
template: `<button>Secondary Component</button>`,
464469
})
465470
class SecondaryFixtureComponent {}
466471

467472
@Component({
468-
standalone: true,
469473
selector: 'atl-router-fixture',
470474
template: `<router-outlet></router-outlet>`,
471475
imports: [RouterModule],
@@ -502,7 +506,6 @@ describe('initialRoute', () => {
502506

503507
it('allows initially rendering a specific route with query parameters', async () => {
504508
@Component({
505-
standalone: true,
506509
selector: 'atl-query-param-fixture',
507510
template: `<p>paramPresent$: {{ paramPresent$ | async }}</p>`,
508511
imports: [NgIf, AsyncPipe],

‎projects/testing-library/tests/wait-for-element-to-be-removed.spec.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { Component, OnInit } from '@angular/core';
22
import { render, screen, waitForElementToBeRemoved } from '../src/public_api';
33
import { timer } from 'rxjs';
4+
import { NgIf } from '@angular/common';
45

56
@Component({
67
selector: 'atl-fixture',
78
template: ` <div *ngIf="visible" data-testid="im-here">👋</div> `,
9+
imports: [NgIf],
810
})
911
class FixtureComponent implements OnInit {
1012
visible = true;

0 commit comments

Comments
 (0)
Please sign in to comment.