fix(tests): fix spec tests after angular v21 upgrade

.github/workflows/deploy.yml

@@ -26,10 +26,9 @@ jobs:
           # create the bundles required for studio-web
           # TODO: stop updating the bundle, keep the published one.
           npx nx bundle web-component
-      # Not compatible with Angular 21
-      #- name: Specs Test
-      #  run: |
-      #    npx nx test:once studio-web
+      - name: Specs Test
+        run: |
+          npx nx test:once studio-web
       - name: Build
         run: |
           npx nx build studio-web --configuration=production

.github/workflows/dev-preview.yml

@@ -26,9 +26,9 @@ jobs:
         run: |
           # create the bundles required for studio-web
           npx nx bundle web-component
-      #- name: Test
-      #  run: |
-      #    npx nx test:once studio-web
+      - name: Test
+        run: |
+          npx nx test:once studio-web
       - name: Build
         run: |
           sed -r -i  's:readalong-studio.mothertongues.org/:readalong-studio.mothertongues.org/dev/:g' packages/studio-web/src/environments/environment.prod.ts

.github/workflows/end-to-end-tests.yml

@@ -43,11 +43,10 @@ jobs:
           wait-on: sleep 15 # there is no reliable URL to wait for...
           command: npx nx test:once web-component
 
-      # Disabled since not compatible with Angular 21
-      #- name: Ng spec tests for studio-web
-      #  run: |
-      #    npx nx build web-component
-      #    npx nx test:once studio-web
+      - name: Ng spec tests for studio-web
+        run: |
+          npx nx build web-component
+          npx nx test:once studio-web
 
       - name: Check that i18n and l10n are up to date
         run: |

.github/workflows/windows-tests.yml

@@ -20,10 +20,10 @@ jobs:
       - run: npm install -g npm@latest
       - run: npm ci --verbose
       - run: npx update-browserslist-db@latest
-      #- name: Ng test for studio-web
-      #  run: |
-      #    npx nx build web-component
-      #    npx nx test:once studio-web
+      - name: Ng test for studio-web
+        run: |
+          npx nx build web-component
+          npx nx test:once studio-web
 
       - name: Cypress run for web-component
         uses: cypress-io/github-action@783cb3f07983868532cabaedaa1e6c00ff4786a8 # v7.1.9

packages/studio-web/src/test.ts

@@ -1,4 +1,20 @@
-// The testing environment is now initialized automatically by Angular, and the tests
-// are found automatically, so no need to do much here.
-
+// Angular no longer requires enumerating spec files here; the karma builder
+// finds them automatically.
+//
+// The test environment still needs to be initialized explicitly, though:
+// without it, the first NgModule compiled via TestBed silently leaves
+// Angular's internal module registry in a broken state (surfaces later as
+// `TypeError: Cannot read properties of null (reading 'ngModule')` from
+// completely unrelated tests). `@angular/platform-browser-dynamic/testing`
+// (the pre-v21 way to do this) no longer exists; this is its replacement.
 import "zone.js/testing";
+import { getTestBed } from "@angular/core/testing";
+import {
+  BrowserTestingModule,
+  platformBrowserTesting,
+} from "@angular/platform-browser/testing";
+
+getTestBed().initTestEnvironment(
+  BrowserTestingModule,
+  platformBrowserTesting(),
+);

packages/studio-web/tsconfig.spec.json

@@ -2,6 +2,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "moduleResolution": "bundler",
     "outDir": "./out-tsc/spec",
     "types": ["jasmine"]
   },