chore: test-app is zoneless!

ngxtension · Jun 10, 2024 · 2ee3f70 · 2ee3f70
1 parent f466a58
commit 2ee3f70
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 12 deletions.
diff --git a/apps/test-app-e2e/src/e2e/resize.cy.ts b/apps/test-app-e2e/src/e2e/resize.cy.ts
@@ -3,9 +3,9 @@ describe('resize', () => {
 
 	it('should react to viewport resize', () => {
 		cy.viewport(500, 500);
-		cy.get('pre').should('contain.text', '"width": 485');
+		cy.get('pre').should('contain.text', '"width": 500');
 
 		cy.viewport(800, 800);
-		cy.get('pre').should('contain.text', '"width": 785');
+		cy.get('pre').should('contain.text', '"width": 800');
 	});
 });
diff --git a/apps/test-app/project.json b/apps/test-app/project.json
@@ -13,7 +13,6 @@
 				"outputPath": "dist/apps/test-app",
 				"index": "apps/test-app/src/index.html",
 				"browser": "apps/test-app/src/main.ts",
-				"polyfills": ["zone.js"],
 				"tsConfig": "apps/test-app/tsconfig.app.json",
 				"assets": ["apps/test-app/src/favicon.ico", "apps/test-app/src/assets"],
 				"styles": ["apps/test-app/src/styles.css"],

diff --git a/apps/test-app/src/app/app.component.ts b/apps/test-app/src/app/app.component.ts
@@ -32,7 +32,9 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 				<a routerLink="/active-element">Active Element</a>
 			</li>
 			<li>
-				<a routerLink="/document-visibility-state">Document Visibility State</a>
+				<a routerLink="/inject-document-visibility">
+					Document Visibility State
+				</a>
 			</li>
 
 			<li>

diff --git a/apps/test-app/src/app/app.config.ts b/apps/test-app/src/app/app.config.ts
@@ -1,9 +1,13 @@
-import { type ApplicationConfig } from '@angular/core';
+import {
+	provideExperimentalZonelessChangeDetection,
+	type ApplicationConfig,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideSvgSprites } from 'ngxtension/svg-sprite';
 
 export const appConfig: ApplicationConfig = {
 	providers: [
+		provideExperimentalZonelessChangeDetection(),
 		provideRouter([
 			{
 				path: 'resize',

diff --git a/apps/test-app/src/app/intl/intl.component.ts b/apps/test-app/src/app/intl/intl.component.ts
@@ -42,8 +42,8 @@ import {
 			=> {{ 'en' | displayNames: 'language' }}
 		</p>
 		<p>
-			<strong ngNonBindable>{{ 'en' | displayNames: 'script' }}</strong>
-			=> {{ 'en' | displayNames: 'script' }}
+			<strong ngNonBindable>{{ 'Hang' | displayNames: 'script' }}</strong>
+			=> {{ 'Hang' | displayNames: 'script' }}
 		</p>
 		<p>
 			<strong ngNonBindable>{{ 'en' | displayNames: 'region' }}</strong>

diff --git a/apps/test-app/src/app/track-by/track-by.component.ts b/apps/test-app/src/app/track-by/track-by.component.ts
@@ -5,6 +5,7 @@ import {
 	ElementRef,
 	ViewChild,
 	inject,
+	signal,
 } from '@angular/core';
 import { TrackById, TrackByProp } from 'ngxtension/trackby-id-prop';
 
@@ -30,13 +31,13 @@ import { TrackById, TrackByProp } from 'ngxtension/trackby-id-prop';
 		<button (click)="add()">add</button>
 		<hr />
 		<p id="without-track-by">
-			Without TrackBy mutations: {{ mutationsLength.withoutTrackBy }}
+			Without TrackBy mutations: {{ mutationsLength.withoutTrackBy() }}
 		</p>
 		<p id="with-track-by">
-			With TrackBy mutations: {{ mutationsLength.withTrackBy }}
+			With TrackBy mutations: {{ mutationsLength.withTrackBy() }}
 		</p>
 		<p id="with-track-by-prop">
-			With TrackBy prop mutations: {{ mutationsLength.withTrackByProp }}
+			With TrackBy prop mutations: {{ mutationsLength.withTrackByProp() }}
 		</p>
 	`,
 	imports: [NgFor, TrackById, TrackByProp],
@@ -47,13 +48,17 @@ export default class TrackByTest {
 		{ id: 2, firstName: 'Enea', lastName: 'Jahollari' },
 		{ id: 3, firstName: 'Daniele', lastName: 'Morosinotto' },
 	];
-	mutationsLength = { withTrackBy: 0, withTrackByProp: 0, withoutTrackBy: 0 };
+	mutationsLength = {
+		withTrackBy: signal(0),
+		withTrackByProp: signal(0),
+		withoutTrackBy: signal(0),
+	};
 
 	private destroyRef = inject(DestroyRef);
 	private mutationCallback =
 		(type: keyof typeof this.mutationsLength): MutationCallback =>
 		(mutations) => {
-			this.mutationsLength[type] += mutations.length;
+			this.mutationsLength[type].update((prev) => prev + mutations.length);
 		};
 
 	@ViewChild('parentNoTrackBy', { static: true }) set parentNoTrackBy({