chore: extract hook setup (#10442)

packages/ng-schematics/src/schematics/ng-add/files/base/e2e/tests/app.__ext@dasherize__.ts.template

@@ -0,0 +1,22 @@
+<% if(testingFramework == 'node') { %>
+import * as assert from 'assert';
+import {describe, it} from 'node:test';
+<% } %><% if(testingFramework == 'mocha') { %>
+import * as assert from 'assert';
+<% } %>
+import {setupBrowserHooks, getBrowserState} from './utils';
+
+describe('App test', function () {
+  setupBrowserHooks();
+  it('is running', async function () {
+    const {page} = getBrowserState();
+    await page.goto('http://localhost:4200');
+    const element = await page.waitForSelector('text/sandbox app is running!');
+
+<% if(testingFramework == 'jasmine' || testingFramework == 'jest') { %>
+    expect(element).not.toBeNull();
+<% } %><% if(testingFramework == 'mocha' || testingFramework == 'node') { %>
+    assert.ok(element);
+<% } %>
+  });
+});

packages/ng-schematics/src/schematics/ng-add/files/base/e2e/tests/utils.ts.template

@@ -1,21 +1,12 @@
-import * as puppeteer from 'puppeteer';
 <% if(testingFramework == 'node') { %>
-import {
+import {before, beforeEach, after, afterEach} from 'node:test';
-  describe,
-  it,
-  before,
-  beforeEach,
-  after,
-  afterEach,
-} from 'node:test';
-<% } %><% if(testingFramework == 'mocha' || testingFramework == 'node') { %>
-import * as assert from 'assert';
 <% } %>
+import * as puppeteer from 'puppeteer';
 
-describe('App test', function () {
+let browser: puppeteer.Browser;
-  let browser: puppeteer.Browser;
+let page: puppeteer.Page;
-  let page: puppeteer.Page;
 
+export function setupBrowserHooks(): void {
 <% if(testingFramework == 'jasmine' || testingFramework == 'jest') { %>
   beforeAll(async () => {
     browser = await puppeteer.launch();
@@ -28,7 +19,6 @@ describe('App test', function () {
 
   beforeEach(async () => {
     page = await browser.newPage();
-    await page.goto('<%= baseUrl %>');
   });
 
   afterEach(async () => {
@@ -44,16 +34,19 @@ describe('App test', function () {
     await browser.close();
   });
 <% } %>
+}
 
-  it('is running', async function () {
+export function getBrowserState(): {
-    const element = await page.waitForSelector(
+  browser: puppeteer.Browser;
-      'text/<%= project %> app is running!'
+  page: puppeteer.Page;
+} {
+  if (!browser) {
+    throw new Error(
+      'No browser state found! Ensure `setupBrowserHooks()` is called.'
     );
-
+  }
-<% if(testingFramework == 'jasmine' || testingFramework == 'jest') { %>
+  return {
-    expect(element).not.toBeNull();
+    browser,
-<% } %><% if(testingFramework == 'mocha' || testingFramework == 'node') { %>
+    page,
-    assert.ok(element);
+  };
-<% } %>
+}
-  });
-});

packages/ng-schematics/src/schematics/ng-add/files/base/e2e/tsconfig.json.template

@@ -1,15 +1,11 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../tsconfig.json",
-  "compilerOptions": {
+  "compilerOptions": {<% if(testingFramework == 'jest') { %>
-<% if(testingFramework == 'jest') { %>
+    "esModuleInterop": true,<% } %><% if(testingFramework == 'node') { %>
-    "esModuleInterop": true,
-<% } %><% if(testingFramework == 'node') { %>
     "module": "CommonJS",
     "rootDir": "tests/",
-    "outDir": "test/",
+    "outDir": "build/",<% } %>
-<% } %>
     "types": ["<%= testingFramework %>"]
   },
-  "include": ["tests/**/*.e2e.ts"]
+  "include": ["tests/**/*.ts"]
 }

packages/ng-schematics/src/schematics/ng-add/files/node/e2e/.gitignore.template

@@ -1,3 +1,3 @@
 # Compiled e2e tests output Node auto resolves files in folders named 'test'
 
-test/
+build/

packages/ng-schematics/src/schematics/ng-add/index.ts

@@ -34,7 +34,7 @@ import {
   type NodePackage,
   updateAngularJsonScripts,
 } from '../utils/packages.js';
-import {type SchematicsOptions} from '../utils/types.js';
+import {TestingFramework, type SchematicsOptions} from '../utils/types.js';
 
 // You don't have to export the function as default. You can also have more than one rule
 // factory per file.
@@ -101,7 +101,11 @@ function addPuppeteerFiles(options: SchematicsOptions): Rule {
 
     return addBaseFiles(tree, context, {
       projects,
-      options,
+      options: {
+        ...options,
+        ext:
+          options.testingFramework === TestingFramework.Node ? 'test' : 'e2e',
+      },
     });
   };
 }

packages/ng-schematics/src/schematics/utils/files.ts

@@ -33,7 +33,11 @@ import {SchematicsOptions, TestingFramework} from './types.js';
 
 export interface FilesOptions {
   projects: any;
-  options: SchematicsOptions;
+  options: {
+    testingFramework: TestingFramework;
+    exportConfig?: boolean;
+    ext?: string;
+  };
   applyPath: string;
   relativeToWorkspacePath: string;
   movePath?: string;

packages/ng-schematics/test/src/ng-add.spec.ts

@@ -1,85 +1,14 @@
 import https from 'https';
-import {join} from 'path';
 
-import {JsonObject} from '@angular-devkit/core';
-import {
-  SchematicTestRunner,
-  UnitTestTree,
-} from '@angular-devkit/schematics/testing';
 import expect from 'expect';
 import sinon from 'sinon';
 
-const WORKSPACE_OPTIONS = {
+import {
-  name: 'workspace',
+  buildTestingTree,
-  newProjectRoot: 'projects',
+  getAngularJsonScripts,
-  version: '14.0.0',
+  getPackageJson,
-};
+  getProjectFile,
-
+} from './utils.js';
-const APPLICATION_OPTIONS = {
-  name: 'sandbox',
-};
-
-function getProjectFile(file: string): string {
-  return `/${WORKSPACE_OPTIONS.newProjectRoot}/${APPLICATION_OPTIONS.name}/${file}`;
-}
-
-function getAngularJsonScripts(
-  tree: UnitTestTree,
-  isDefault = true
-): {
-  builder: string;
-  configurations: Record<string, any>;
-  options: Record<string, any>;
-} {
-  const angularJson = tree.readJson('angular.json') as any;
-  const e2eScript = isDefault ? 'e2e' : 'puppeteer';
-  return angularJson['projects']?.[APPLICATION_OPTIONS.name]?.['architect'][
-    e2eScript
-  ];
-}
-
-function getPackageJson(tree: UnitTestTree): {
-  scripts: Record<string, string>;
-  devDependencies: string[];
-} {
-  const packageJson = tree.readJson('package.json') as JsonObject;
-  return {
-    scripts: packageJson['scripts'] as any,
-    devDependencies: Object.keys(
-      packageJson['devDependencies'] as Record<string, string>
-    ),
-  };
-}
-
-async function buildTestingTree(userOptions?: Record<string, any>) {
-  const runner = new SchematicTestRunner(
-    'schematics',
-    join(__dirname, '../../lib/schematics/collection.json')
-  );
-  const options = {
-    isDefaultTester: true,
-    exportConfig: false,
-    testingFramework: 'jasmine',
-    ...userOptions,
-  };
-  let workingTree: UnitTestTree;
-
-  // Build workspace
-  workingTree = await runner.runExternalSchematic(
-    '@schematics/angular',
-    'workspace',
-    WORKSPACE_OPTIONS
-  );
-  // Build dummy application
-  workingTree = await runner.runExternalSchematic(
-    '@schematics/angular',
-    'application',
-    APPLICATION_OPTIONS,
-    workingTree
-  );
-
-  return await runner.runSchematic('ng-add', options, workingTree);
-}
 
 describe('@puppeteer/ng-schematics: ng-add', () => {
   // Stop outgoing Request for version fetching
@@ -103,6 +32,7 @@ describe('@puppeteer/ng-schematics: ng-add', () => {
 
     expect(tree.files).toContain(getProjectFile('e2e/tsconfig.json'));
     expect(tree.files).toContain(getProjectFile('e2e/tests/app.e2e.ts'));
+    expect(tree.files).toContain(getProjectFile('e2e/tests/utils.ts'));
     expect(devDependencies).toContain('puppeteer');
     expect(scripts['e2e']).toBe('ng e2e');
     expect(builder).toBe('@puppeteer/ng-schematics:puppeteer');
@@ -198,6 +128,8 @@ describe('@puppeteer/ng-schematics: ng-add', () => {
     const {options} = getAngularJsonScripts(tree);
 
     expect(tree.files).toContain(getProjectFile('e2e/.gitignore'));
+    expect(tree.files).not.toContain(getProjectFile('e2e/tests/app.e2e.ts'));
+    expect(tree.files).toContain(getProjectFile('e2e/tests/app.test.ts'));
     expect(options['commands']).toEqual([
       [`tsc`, '-p', 'e2e/tsconfig.json'],
       ['node', '--test', 'e2e/'],

packages/ng-schematics/test/src/utils.ts

@@ -0,0 +1,81 @@
+import {join} from 'path';
+
+import {JsonObject} from '@angular-devkit/core';
+import {
+  SchematicTestRunner,
+  UnitTestTree,
+} from '@angular-devkit/schematics/testing';
+
+const WORKSPACE_OPTIONS = {
+  name: 'workspace',
+  newProjectRoot: 'projects',
+  version: '14.0.0',
+};
+
+const APPLICATION_OPTIONS = {
+  name: 'sandbox',
+};
+
+export function getProjectFile(file: string): string {
+  return `/${WORKSPACE_OPTIONS.newProjectRoot}/${APPLICATION_OPTIONS.name}/${file}`;
+}
+
+export function getAngularJsonScripts(
+  tree: UnitTestTree,
+  isDefault = true
+): {
+  builder: string;
+  configurations: Record<string, any>;
+  options: Record<string, any>;
+} {
+  const angularJson = tree.readJson('angular.json') as any;
+  const e2eScript = isDefault ? 'e2e' : 'puppeteer';
+  return angularJson['projects']?.[APPLICATION_OPTIONS.name]?.['architect'][
+    e2eScript
+  ];
+}
+
+export function getPackageJson(tree: UnitTestTree): {
+  scripts: Record<string, string>;
+  devDependencies: string[];
+} {
+  const packageJson = tree.readJson('package.json') as JsonObject;
+  return {
+    scripts: packageJson['scripts'] as any,
+    devDependencies: Object.keys(
+      packageJson['devDependencies'] as Record<string, string>
+    ),
+  };
+}
+
+export async function buildTestingTree(
+  userOptions?: Record<string, any>
+): Promise<UnitTestTree> {
+  const runner = new SchematicTestRunner(
+    'schematics',
+    join(__dirname, '../../lib/schematics/collection.json')
+  );
+  const options = {
+    isDefaultTester: true,
+    exportConfig: false,
+    testingFramework: 'jasmine',
+    ...userOptions,
+  };
+  let workingTree: UnitTestTree;
+
+  // Build workspace
+  workingTree = await runner.runExternalSchematic(
+    '@schematics/angular',
+    'workspace',
+    WORKSPACE_OPTIONS
+  );
+  // Build dummy application
+  workingTree = await runner.runExternalSchematic(
+    '@schematics/angular',
+    'application',
+    APPLICATION_OPTIONS,
+    workingTree
+  );
+
+  return await runner.runSchematic('ng-add', options, workingTree);
+}

packages/ng-schematics/tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "baseUrl": "tsconfig",
-    "lib": ["ES2018"],
     "module": "CommonJS",
     "noEmitOnError": true,
     "rootDir": "src/",
@@ -10,8 +9,7 @@
     "skipDefaultLibCheck": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "types": ["node"],
+    "types": ["node"]
-    "target": "ES6"
   },
   "include": ["src/**/*"],
   "exclude": ["src/**/files/**/*"],