feat: add zone subpackage (#599)

Author: timdeschryver

angular.json

@@ -44,7 +44,12 @@
           "options": {
             "buildTarget": "testing-library:test-build-zoneless",
             "setupFiles": ["projects/testing-library/test-setup.ts"],
-            "include": ["**/*.spec.ts", "../zoneless/**/*.spec.ts", "../schematics/**/*.spec.ts"]
+            "include": [
+              "**/*.spec.ts",
+              "../zone/**/*.spec.ts",
+              "../zoneless/**/*.spec.ts",
+              "../schematics/**/*.spec.ts"
+            ]
           }
         },
         "lint": {

projects/testing-library/tsconfig.spec.json

@@ -3,7 +3,10 @@
   "compilerOptions": {
     "types": ["node"],
     "target": "ES2022",
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
+    "paths": {
+      "@testing-library/angular": ["./index.ts"]
+    }
   },
   "include": ["**/*.ts"]
 }

projects/testing-library/zone/index.ts

@@ -0,0 +1 @@
+export * from './src/public_api';

projects/testing-library/zone/ng-package.json

@@ -0,0 +1 @@
+{}

projects/testing-library/zone/src/public_api.ts

@@ -0,0 +1,9 @@
+/*
+ * Public API Surface of @testing-library/angular/zone
+ *
+ * This entry point re-exports the zone-based API of `@testing-library/angular`.
+ * It exists so codebases can explicitly opt in to the zone-based `render`,
+ * ahead of `@testing-library/angular/zoneless` becoming the default.
+ */
+
+export * from '@testing-library/angular';

projects/testing-library/zone/tests/zone.spec.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { test, expect } from 'vitest';
+import * as root from '../../index';
+import * as zone from '../index';
+import { render, screen } from '../index';
+
+test('re-exports the same public API as @testing-library/angular', () => {
+  const rootExports = root as Record<string, unknown>;
+  const zoneExports = zone as Record<string, unknown>;
+
+  expect(Object.keys(zoneExports).sort()).toEqual(Object.keys(rootExports).sort());
+
+  for (const key of Object.keys(rootExports)) {
+    expect(zoneExports[key]).toBe(rootExports[key]);
+  }
+});
+
+@Component({
+  selector: 'atl-fixture',
+  template: `<span>Hello {{ name }}</span>`,
+})
+class FixtureComponent {
+  name = 'world';
+}
+
+test('renders a component', async () => {
+  await render(FixtureComponent);
+
+  expect(screen.getByText('Hello world')).toBeInTheDocument();
+});