Skip to content

Commit 6a38ffe

Browse files
AndrewKushnirAndrewKushnir
committed
test(forms): split Forms example app into Reactive and Template-driven ones (#41108)
One of the main goals of the bundling tests is to verify that unused symbols are tree-shaken away in prod bundles. Currently both Reactive and Template-driven test apps are merged into one. In order to make these tree-shaking tests even more useful, this commit splits exiting test app into two, so that we can further optimize sets of symbols that should be retained in both scenarios. PR Close #41108
1 parent c5ead38 commit 6a38ffe

File tree

12 files changed

+1970
-155
lines changed

12 files changed

+1970
-155
lines changed

‎packages/core/test/bundling/forms/BUILD.bazel‎ renamed to ‎packages/core/test/bundling/forms_reactive/BUILD.bazel‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")
55
load("@npm//http-server:index.bzl", "http_server")
66

77
ng_module(
8-
name = "forms",
8+
name = "forms_reactive",
99
srcs = ["index.ts"],
1010
tags = [
1111
"ivy-only",
@@ -24,7 +24,7 @@ ng_rollup_bundle(
2424
"ivy-only",
2525
],
2626
deps = [
27-
":forms",
27+
":forms_reactive",
2828
"//packages/core",
2929
"//packages/forms",
3030
"//packages/platform-browser",

‎packages/core/test/bundling/forms/bundle.golden_symbols.json‎ renamed to ‎packages/core/test/bundling/forms_reactive/bundle.golden_symbols.json‎

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -233,9 +233,6 @@
233233
{
234234
"name": "FormsExampleModule"
235235
},
236-
{
237-
"name": "FormsModule"
238-
},
239236
{
240237
"name": "INJECTOR"
241238
},
@@ -395,21 +392,12 @@
395392
{
396393
"name": "NgForOfContext"
397394
},
398-
{
399-
"name": "NgForm"
400-
},
401395
{
402396
"name": "NgLocaleLocalization"
403397
},
404398
{
405399
"name": "NgLocalization"
406400
},
407-
{
408-
"name": "NgModel"
409-
},
410-
{
411-
"name": "NgModelGroup"
412-
},
413401
{
414402
"name": "NgModuleFactory"
415403
},
@@ -479,9 +467,6 @@
479467
{
480468
"name": "RANGE_VALUE_ACCESSOR"
481469
},
482-
{
483-
"name": "REQUIRED_VALIDATOR"
484-
},
485470
{
486471
"name": "RadioControlRegistry"
487472
},
@@ -518,9 +503,6 @@
518503
{
519504
"name": "RendererStyleFlags2"
520505
},
521-
{
522-
"name": "RequiredValidator"
523-
},
524506
{
525507
"name": "RootComponent"
526508
},
@@ -599,12 +581,6 @@
599581
{
600582
"name": "TRANSITION_ID"
601583
},
602-
{
603-
"name": "TemplateFormsComponent"
604-
},
605-
{
606-
"name": "TemplateFormsComponent_div_14_Template"
607-
},
608584
{
609585
"name": "TemplateRef"
610586
},
@@ -947,12 +923,6 @@
947923
{
948924
"name": "formArrayNameProvider"
949925
},
950-
{
951-
"name": "formControlBinding"
952-
},
953-
{
954-
"name": "formDirectiveProvider"
955-
},
956926
{
957927
"name": "formDirectiveProvider"
958928
},
@@ -1100,9 +1070,6 @@
11001070
{
11011071
"name": "getSelectedIndex"
11021072
},
1103-
{
1104-
"name": "getSelectedTNode"
1105-
},
11061073
{
11071074
"name": "getSimpleChangesStore"
11081075
},
@@ -1274,9 +1241,6 @@
12741241
{
12751242
"name": "isPromise"
12761243
},
1277-
{
1278-
"name": "isPropertyUpdated"
1279-
},
12801244
{
12811245
"name": "isScheduler"
12821246
},
@@ -1364,9 +1328,6 @@
13641328
{
13651329
"name": "mergeValidators"
13661330
},
1367-
{
1368-
"name": "modelGroupProvider"
1369-
},
13701331
{
13711332
"name": "modules"
13721333
},
@@ -1394,9 +1355,6 @@
13941355
{
13951356
"name": "nativeParentNode"
13961357
},
1397-
{
1398-
"name": "nextBindingIndex"
1399-
},
14001358
{
14011359
"name": "nextNgElementId"
14021360
},
@@ -1496,9 +1454,6 @@
14961454
{
14971455
"name": "renderComponentOrTemplate"
14981456
},
1499-
{
1500-
"name": "renderStringify"
1501-
},
15021457
{
15031458
"name": "renderView"
15041459
},
@@ -1514,12 +1469,6 @@
15141469
{
15151470
"name": "resolveProvider"
15161471
},
1517-
{
1518-
"name": "resolvedPromise"
1519-
},
1520-
{
1521-
"name": "resolvedPromise"
1522-
},
15231472
{
15241473
"name": "rxSubscriber"
15251474
},
@@ -1541,9 +1490,6 @@
15411490
{
15421491
"name": "selectIndexInternal"
15431492
},
1544-
{
1545-
"name": "selectValueAccessor"
1546-
},
15471493
{
15481494
"name": "setBindingRootForHostBindings"
15491495
},
@@ -1598,9 +1544,6 @@
15981544
{
15991545
"name": "setUpControl"
16001546
},
1601-
{
1602-
"name": "setUpFormContainer"
1603-
},
16041547
{
16051548
"name": "setUpValidators"
16061549
},
@@ -1625,9 +1568,6 @@
16251568
{
16261569
"name": "subscribeToArray"
16271570
},
1628-
{
1629-
"name": "syncPendingControls"
1630-
},
16311571
{
16321572
"name": "throwProviderNotFoundError"
16331573
},
@@ -1688,12 +1628,6 @@
16881628
{
16891629
"name": "ɵɵProvidersFeature"
16901630
},
1691-
{
1692-
"name": "ɵɵadvance"
1693-
},
1694-
{
1695-
"name": "ɵɵattribute"
1696-
},
16971631
{
16981632
"name": "ɵɵclassProp"
16991633
},
@@ -1733,15 +1667,9 @@
17331667
{
17341668
"name": "ɵɵlistener"
17351669
},
1736-
{
1737-
"name": "ɵɵnextContext"
1738-
},
17391670
{
17401671
"name": "ɵɵproperty"
17411672
},
1742-
{
1743-
"name": "ɵɵtemplate"
1744-
},
17451673
{
17461674
"name": "ɵɵtext"
17471675
}

‎packages/core/test/bundling/forms/forms_e2e_spec.ts‎ renamed to ‎packages/core/test/bundling/forms_reactive/forms_e2e_spec.ts‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,36 +11,16 @@ import {ɵwhenRendered as whenRendered} from '@angular/core';
1111
import {withBody} from '@angular/private/testing';
1212
import * as path from 'path';
1313

14-
const PACKAGE = 'angular/packages/core/test/bundling/forms';
14+
const PACKAGE = 'angular/packages/core/test/bundling/forms_reactive';
1515
const BUNDLES = ['bundle.js', 'bundle.min_debug.js', 'bundle.min.js'];
1616

17-
describe('functional test for forms', () => {
17+
describe('functional test for reactive forms', () => {
1818
BUNDLES.forEach((bundle) => {
1919
describe(`using ${bundle} bundle`, () => {
2020
it('should render template form', withBody('<app-root></app-root>', async () => {
2121
require(path.join(PACKAGE, bundle));
2222
await (window as any).waitForApp;
2323

24-
// Template forms
25-
const templateFormsComponent = (window as any).templateFormsComponent;
26-
await whenRendered(templateFormsComponent);
27-
28-
const templateForm = document.querySelector('app-template-forms')!;
29-
30-
// Check for inputs
31-
const iputs = templateForm.querySelectorAll('input');
32-
expect(iputs.length).toBe(5);
33-
34-
// Check for button
35-
const templateButtons = templateForm.querySelectorAll('button');
36-
expect(templateButtons.length).toBe(1);
37-
expect(templateButtons[0]).toBeDefined();
38-
39-
// Make sure button click works
40-
const templateFormSpy = spyOn(templateFormsComponent, 'addCity');
41-
templateButtons[0].click();
42-
expect(templateFormSpy).toHaveBeenCalled();
43-
4424
// Reactive forms
4525
const reactiveFormsComponent = (window as any).reactiveFormsComponent;
4626
await whenRendered(reactiveFormsComponent);

‎packages/core/test/bundling/forms/index.html‎ renamed to ‎packages/core/test/bundling/forms_reactive/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<html>
44
<head>
5-
<title>Angular Forms Example</title>
5+
<title>Angular Reactive Forms Example</title>
66
</head>
77
<body>
88
<!-- The Angular application will be bootstrapped into this element. -->

‎packages/core/test/bundling/forms/index.ts‎ renamed to ‎packages/core/test/bundling/forms_reactive/index.ts‎

Lines changed: 16 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,76 +6,36 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88
import {Component, NgModule, ɵNgModuleFactory as NgModuleFactory} from '@angular/core';
9-
import {FormArray, FormBuilder, FormControl, FormGroup, FormsModule, NgForm, ReactiveFormsModule, Validators} from '@angular/forms';
9+
import {FormArray, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
1010
import {BrowserModule, platformBrowser} from '@angular/platform-browser';
1111

1212
@Component({
13-
selector: 'app-template-forms',
13+
selector: 'app-reactive-forms',
1414
template: `
15-
<form novalidate>
16-
<div ngModelGroup="profileForm">
15+
<form [formGroup]="profileForm">
1716
<div>
1817
First Name:
19-
<input name="first" ngModel required />
18+
<input type="text" formControlName="firstName" />
2019
</div>
2120
<div>
2221
Last Name:
23-
<input name="last" ngModel />
22+
<input type="text" formControlName="lastName" />
2423
</div>
24+
2525
<div>
2626
Subscribe:
27-
<input name="subscribed" type="checkbox" ngModel />
27+
<input type="checkbox" formControlName="subscribed" />
2828
</div>
2929
30-
<div>Disabled: <input name="foo" ngModel disabled /></div>
31-
32-
<div *ngFor="let city of addresses; let i = index">
33-
City <input [(ngModel)]="addresses[i].city" name="name" />
30+
<div>Disabled: <input formControlName="disabledInput" /></div>
31+
<div formArrayName="addresses">
32+
<div *ngFor="let item of itemControls; let i = index" [formGroupName]="i">
33+
<div>City: <input formControlName="city" /></div>
34+
</div>
3435
</div>
35-
3636
<button (click)="addCity()">Add City</button>
37-
</div>
38-
</form>`,
39-
})
40-
class TemplateFormsComponent {
41-
name = {first: 'Nancy', last: 'Drew', subscribed: true};
42-
addresses = [{city: 'Toronto'}];
43-
constructor() {
44-
// We use this reference in our test
45-
(window as any).templateFormsComponent = this;
46-
}
47-
48-
addCity() {
49-
this.addresses.push(({city: ''}));
50-
}
51-
}
52-
53-
@Component({
54-
selector: 'app-reactive-forms',
55-
template: `
56-
<form [formGroup]="profileForm">
57-
<div>
58-
First Name:
59-
<input type="text" formControlName="firstName" />
60-
</div>
61-
<div>
62-
Last Name:
63-
<input type="text" formControlName="lastName" />
64-
</div>
65-
66-
<div>
67-
Subscribe:
68-
<input type="checkbox" formControlName="subscribed" />
69-
</div>
70-
71-
<div>Disabled: <input formControlName="disabledInput" /></div>
72-
<div formArrayName="addresses">
73-
<div *ngFor="let item of itemControls; let i = index" [formGroupName]="i">
74-
<div>City: <input formControlName="city" /></div>
75-
</div>
76-
</div>
77-
<button (click)="addCity()">Add City</button>
78-
</form>`,
37+
</form>
38+
`
7939
})
8040
class ReactiveFormsComponent {
8141
profileForm!: FormGroup;
@@ -117,16 +77,15 @@ class ReactiveFormsComponent {
11777
@Component({
11878
selector: 'app-root',
11979
template: `
120-
<app-template-forms></app-template-forms>
12180
<app-reactive-forms></app-reactive-forms>
12281
`
12382
})
12483
class RootComponent {
12584
}
12685

12786
@NgModule({
128-
declarations: [RootComponent, TemplateFormsComponent, ReactiveFormsComponent],
129-
imports: [BrowserModule, FormsModule, ReactiveFormsModule]
87+
declarations: [RootComponent, ReactiveFormsComponent],
88+
imports: [BrowserModule, ReactiveFormsModule]
13089
})
13190
class FormsExampleModule {
13291
ngDoBootstrap(app: any) {

‎packages/core/test/bundling/forms/treeshaking_spec.ts‎ renamed to ‎packages/core/test/bundling/forms_reactive/treeshaking_spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import * as path from 'path';
1313
const UTF8 = {
1414
encoding: 'utf-8'
1515
};
16-
const PACKAGE = 'angular/packages/core/test/bundling/forms';
16+
const PACKAGE = 'angular/packages/core/test/bundling/forms_reactive';
1717

1818
describe('treeshaking with uglify', () => {
1919
let content: string;

0 commit comments

Comments
 (0)