feat: zoneless ATL (#570)

Author: timdeschryver

projects/testing-library/schematics/collection.json

@@ -5,6 +5,11 @@
       "factory": "./ng-add",
       "schema": "./ng-add/schema.json",
       "description": "Add @testing-library/angular to your application"
+    },
+    "migrate-to-zoneless": {
+      "factory": "./migrate-to-zoneless",
+      "schema": "./migrate-to-zoneless/schema.json",
+      "description": "Migrate imports from @testing-library/angular to @testing-library/angular/zoneless"
     }
   }
 }

projects/testing-library/schematics/migrate-to-zoneless/index.spec.ts

@@ -0,0 +1,130 @@
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+import * as path from 'path';
+import { EmptyTree } from '@angular-devkit/schematics';
+import { test, expect } from 'vitest';
+
+test('migrates imports from @testing-library/angular to @testing-library/angular/zoneless', async () => {
+  const before = `
+import { render, screen } from '@testing-library/angular';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  it('should render', async () => {
+    await render(AppComponent);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+});
+`;
+
+  const after = `
+import { render, screen } from '@testing-library/angular/zoneless';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  it('should render', async () => {
+    await render(AppComponent);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+});
+`;
+
+  const tree = await setup({
+    'src/app.spec.ts': before,
+  });
+
+  expect(tree.readContent('src/app.spec.ts')).toBe(after);
+});
+
+test('migrates imports with double quotes', async () => {
+  const before = `import { render } from "@testing-library/angular";`;
+  const after = `import { render } from "@testing-library/angular/zoneless";`;
+
+  const tree = await setup({
+    'src/test.spec.ts': before,
+  });
+
+  expect(tree.readContent('src/test.spec.ts')).toBe(after);
+});
+
+test('migrates multiple imports in the same file', async () => {
+  const before = `
+import { render, screen } from '@testing-library/angular';
+import { fireEvent } from '@testing-library/angular';
+`;
+
+  const after = `
+import { render, screen } from '@testing-library/angular/zoneless';
+import { fireEvent } from '@testing-library/angular/zoneless';
+`;
+
+  const tree = await setup({
+    'src/multi.spec.ts': before,
+  });
+
+  expect(tree.readContent('src/multi.spec.ts')).toBe(after);
+});
+
+test('does not modify imports from other packages', async () => {
+  const before = `
+import { render } from '@testing-library/angular';
+import { screen } from '@testing-library/dom';
+import { Component } from '@angular/core';
+`;
+
+  const after = `
+import { render } from '@testing-library/angular/zoneless';
+import { screen } from '@testing-library/dom';
+import { Component } from '@angular/core';
+`;
+
+  const tree = await setup({
+    'src/other.spec.ts': before,
+  });
+
+  expect(tree.readContent('src/other.spec.ts')).toBe(after);
+});
+
+test('handles files without @testing-library/angular imports', async () => {
+  const content = `
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: '<h1>Hello</h1>'
+})
+export class AppComponent {}
+`;
+
+  const tree = await setup({
+    'src/regular.ts': content,
+  });
+
+  expect(tree.readContent('src/regular.ts')).toBe(content);
+});
+
+test('migrates multiple files', async () => {
+  const tree = await setup({
+    'src/file1.spec.ts': `import { render } from '@testing-library/angular';`,
+    'src/file2.spec.ts': `import { screen } from '@testing-library/angular';`,
+    'src/file3.spec.ts': `import { fireEvent } from '@testing-library/angular';`,
+  });
+
+  expect(tree.readContent('src/file1.spec.ts')).toBe(`import { render } from '@testing-library/angular/zoneless';`);
+  expect(tree.readContent('src/file2.spec.ts')).toBe(`import { screen } from '@testing-library/angular/zoneless';`);
+  expect(tree.readContent('src/file3.spec.ts')).toBe(`import { fireEvent } from '@testing-library/angular/zoneless';`);
+});
+
+async function setup(files: Record<string, string>) {
+  const collectionPath = path.join(__dirname, '../../../../dist/@testing-library/angular/schematics/collection.json');
+  const schematicRunner = new SchematicTestRunner('schematics', collectionPath);
+
+  const tree = new UnitTestTree(new EmptyTree());
+
+  for (const [filePath, content] of Object.entries(files)) {
+    tree.create(filePath, content);
+  }
+
+  await schematicRunner.runSchematic('migrate-to-zoneless', {}, tree);
+
+  return tree;
+}

projects/testing-library/schematics/migrate-to-zoneless/index.ts

@@ -0,0 +1,73 @@
+import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';
+import * as ts from 'typescript';
+
+export default function (): Rule {
+  return async (tree: Tree, context: SchematicContext) => {
+    context.logger.info('Migrating imports from @testing-library/angular to @testing-library/angular/zoneless...');
+
+    let filesUpdated = 0;
+
+    tree.visit((path) => {
+      if (!path.endsWith('.ts') || path.includes('node_modules')) {
+        return;
+      }
+
+      const content = tree.read(path);
+      if (!content) {
+        return;
+      }
+
+      const text = content.toString('utf-8');
+
+      if (!text.includes('@testing-library/angular')) {
+        return;
+      }
+
+      const sourceFile = ts.createSourceFile(path, text, ts.ScriptTarget.Latest, true);
+
+      const changes: { start: number; end: number; newText: string }[] = [];
+
+      function visit(node: ts.Node) {
+        if (ts.isImportDeclaration(node)) {
+          const moduleSpecifier = node.moduleSpecifier;
+
+          if (ts.isStringLiteral(moduleSpecifier) && moduleSpecifier.text === '@testing-library/angular') {
+            const fullText = moduleSpecifier.getFullText(sourceFile);
+            const quoteChar = fullText.trim()[0]; // ' or "
+
+            changes.push({
+              start: moduleSpecifier.getStart(sourceFile),
+              end: moduleSpecifier.getEnd(),
+              newText: `${quoteChar}@testing-library/angular/zoneless${quoteChar}`,
+            });
+          }
+        }
+
+        ts.forEachChild(node, visit);
+      }
+
+      visit(sourceFile);
+
+      if (changes.length > 0) {
+        changes.sort((a, b) => b.start - a.start);
+
+        let updatedText = text;
+        for (const change of changes) {
+          updatedText = updatedText.slice(0, change.start) + change.newText + updatedText.slice(change.end);
+        }
+
+        tree.overwrite(path, updatedText);
+        filesUpdated++;
+        context.logger.info(`Updated: ${path}`);
+      }
+    });
+
+    if (filesUpdated > 0) {
+      context.logger.info(`✓ Successfully migrated ${filesUpdated} file(s) to use @testing-library/angular/zoneless`);
+    } else {
+      context.logger.warn('No files found with @testing-library/angular imports.');
+    }
+
+    return tree;
+  };
+}

projects/testing-library/schematics/migrate-to-zoneless/schema.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "MigrateToZonelessSchema",
+  "title": "Migrate to Zoneless Schema",
+  "type": "object",
+  "description": "Migrate imports from @testing-library/angular to @testing-library/angular/zoneless",
+  "properties": {},
+  "required": []
+}

projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts

@@ -1,6 +1,7 @@
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import * as path from 'path';
 import { EmptyTree } from '@angular-devkit/schematics';
+import { test, expect } from 'vitest';
 
 test('adds DTL to devDependencies', async () => {
   const tree = await setup({});