diff --git a/apps/example-app/src/app/examples/05-component-provider.ts b/apps/example-app/src/app/examples/05-component-provider.ts
index 1f345b94..2d66b070 100644
--- a/apps/example-app/src/app/examples/05-component-provider.ts
+++ b/apps/example-app/src/app/examples/05-component-provider.ts
@@ -21,7 +21,7 @@ export class CounterService {
@Component({
standalone: true,
- selector: 'app-fixture',
+ selector: 'atl-fixture',
template: `
Decrement
{{ counter.value() }}
diff --git a/apps/example-app/src/app/examples/06-with-ngrx-store.ts b/apps/example-app/src/app/examples/06-with-ngrx-store.ts
index b1db1d46..8702843c 100644
--- a/apps/example-app/src/app/examples/06-with-ngrx-store.ts
+++ b/apps/example-app/src/app/examples/06-with-ngrx-store.ts
@@ -18,7 +18,7 @@ const selectValue = createSelector(
@Component({
standalone: true,
imports: [AsyncPipe],
- selector: 'app-fixture',
+ selector: 'atl-fixture',
template: `
Decrement
{{ value | async }}
diff --git a/apps/example-app/src/app/examples/07-with-ngrx-mock-store.ts b/apps/example-app/src/app/examples/07-with-ngrx-mock-store.ts
index 7754bf1c..915a88d8 100644
--- a/apps/example-app/src/app/examples/07-with-ngrx-mock-store.ts
+++ b/apps/example-app/src/app/examples/07-with-ngrx-mock-store.ts
@@ -10,10 +10,12 @@ export const selectItems = createSelector(
@Component({
standalone: true,
imports: [AsyncPipe, NgForOf],
- selector: 'app-fixture',
+ selector: 'atl-fixture',
template: `
- {{ item }}
+
+ {{ item }}
+
`,
})
diff --git a/apps/example-app/src/app/examples/08-directive.spec.ts b/apps/example-app/src/app/examples/08-directive.spec.ts
index 8b70b38c..28a41e98 100644
--- a/apps/example-app/src/app/examples/08-directive.spec.ts
+++ b/apps/example-app/src/app/examples/08-directive.spec.ts
@@ -6,7 +6,7 @@ import { SpoilerDirective } from './08-directive';
test('it is possible to test directives with container component', async () => {
@Component({
- template: `
`,
+ template: `
`,
imports: [SpoilerDirective],
standalone: true,
})
@@ -32,7 +32,7 @@ test('it is possible to test directives with container component', async () => {
test('it is possible to test directives', async () => {
const user = userEvent.setup();
- await render('
', {
+ await render('
', {
imports: [SpoilerDirective],
});
@@ -55,7 +55,7 @@ test('it is possible to test directives with props', async () => {
const hidden = 'SPOILER ALERT';
const visible = 'There is nothing to see here ...';
- await render('
', {
+ await render('
', {
imports: [SpoilerDirective],
componentProperties: {
hidden,
@@ -80,7 +80,7 @@ test('it is possible to test directives with props in template', async () => {
const hidden = 'SPOILER ALERT';
const visible = 'There is nothing to see here ...';
- await render(`
`, {
+ await render(`
`, {
imports: [SpoilerDirective],
});
diff --git a/apps/example-app/src/app/examples/08-directive.ts b/apps/example-app/src/app/examples/08-directive.ts
index 40548b1e..63efe415 100644
--- a/apps/example-app/src/app/examples/08-directive.ts
+++ b/apps/example-app/src/app/examples/08-directive.ts
@@ -2,7 +2,7 @@ import { Directive, HostListener, ElementRef, Input, OnInit } from '@angular/cor
@Directive({
standalone: true,
- selector: '[appSpoiler]',
+ selector: '[atlSpoiler]',
})
export class SpoilerDirective implements OnInit {
@Input() hidden = 'SPOILER';
diff --git a/apps/example-app/src/app/examples/09-router.ts b/apps/example-app/src/app/examples/09-router.ts
index 888d7fdf..e46773be 100644
--- a/apps/example-app/src/app/examples/09-router.ts
+++ b/apps/example-app/src/app/examples/09-router.ts
@@ -6,7 +6,7 @@ import { map } from 'rxjs/operators';
@Component({
standalone: true,
imports: [RouterLink, RouterOutlet],
- selector: 'app-main',
+ selector: 'atl-main',
template: `
Load one | Load two |
Load three |
@@ -21,7 +21,7 @@ export class RootComponent {}
@Component({
standalone: true,
imports: [RouterLink, AsyncPipe],
- selector: 'app-detail',
+ selector: 'atl-detail',
template: `
Detail {{ id | async }}
@@ -40,7 +40,7 @@ export class DetailComponent {
@Component({
standalone: true,
- selector: 'app-detail-hidden',
+ selector: 'atl-detail-hidden',
template: ' You found the treasure! ',
})
export class HiddenDetailComponent {}
diff --git a/apps/example-app/src/app/examples/10-inject-token-dependency.ts b/apps/example-app/src/app/examples/10-inject-token-dependency.ts
index 6a17d538..f7b2f661 100644
--- a/apps/example-app/src/app/examples/10-inject-token-dependency.ts
+++ b/apps/example-app/src/app/examples/10-inject-token-dependency.ts
@@ -4,7 +4,7 @@ export const DATA = new InjectionToken<{ text: string }>('Components Data');
@Component({
standalone: true,
- selector: 'app-fixture',
+ selector: 'atl-fixture',
template: ' {{ data.text }} ',
})
export class DataInjectedComponent {
diff --git a/apps/example-app/src/app/examples/11-ng-content.spec.ts b/apps/example-app/src/app/examples/11-ng-content.spec.ts
index 2f910252..468a3f29 100644
--- a/apps/example-app/src/app/examples/11-ng-content.spec.ts
+++ b/apps/example-app/src/app/examples/11-ng-content.spec.ts
@@ -5,7 +5,7 @@ import { CellComponent } from './11-ng-content';
test('it is possible to test ng-content without selector', async () => {
const projection = 'it should be showed into a p element!';
- await render(`${projection} `, {
+ await render(`${projection} `, {
imports: [CellComponent],
});
diff --git a/apps/example-app/src/app/examples/11-ng-content.ts b/apps/example-app/src/app/examples/11-ng-content.ts
index d4446839..0dd668bc 100644
--- a/apps/example-app/src/app/examples/11-ng-content.ts
+++ b/apps/example-app/src/app/examples/11-ng-content.ts
@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
standalone: true,
- selector: 'app-fixture',
+ selector: 'atl-fixture',
template: `
diff --git a/apps/example-app/src/app/examples/13-scrolling.component.ts b/apps/example-app/src/app/examples/13-scrolling.component.ts
index 7d7b2e7c..6a36ed8f 100644
--- a/apps/example-app/src/app/examples/13-scrolling.component.ts
+++ b/apps/example-app/src/app/examples/13-scrolling.component.ts
@@ -4,7 +4,7 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
@Component({
standalone: true,
imports: [ScrollingModule],
- selector: 'app-cdk-virtual-scroll-overview-example',
+ selector: 'atl-cdk-virtual-scroll-overview-example',
template: `
{{ item }}
diff --git a/apps/example-app/src/app/examples/14-async-component.spec.ts b/apps/example-app/src/app/examples/14-async-component.spec.ts
index b54740a2..5cfd3e0e 100644
--- a/apps/example-app/src/app/examples/14-async-component.spec.ts
+++ b/apps/example-app/src/app/examples/14-async-component.spec.ts
@@ -3,7 +3,6 @@ import { render, screen, fireEvent } from '@testing-library/angular';
import { AsyncComponent } from './14-async-component';
-// eslint-disable-next-line jest/no-disabled-tests
test.skip('can use fakeAsync utilities', fakeAsync(async () => {
await render(AsyncComponent);
diff --git a/apps/example-app/src/app/examples/14-async-component.ts b/apps/example-app/src/app/examples/14-async-component.ts
index f87732ad..64d7aaa2 100644
--- a/apps/example-app/src/app/examples/14-async-component.ts
+++ b/apps/example-app/src/app/examples/14-async-component.ts
@@ -6,7 +6,7 @@ import { delay, filter, mapTo } from 'rxjs/operators';
@Component({
standalone: true,
imports: [AsyncPipe, NgIf],
- selector: 'app-fixture',
+ selector: 'atl-fixture',
template: `
Load
{{ data }}
diff --git a/apps/example-app/src/app/examples/15-dialog.component.spec.ts b/apps/example-app/src/app/examples/15-dialog.component.spec.ts
index 97ad829a..017afdcf 100644
--- a/apps/example-app/src/app/examples/15-dialog.component.spec.ts
+++ b/apps/example-app/src/app/examples/15-dialog.component.spec.ts
@@ -38,7 +38,7 @@ test('closes the dialog via the backdrop', async () => {
const dialogTitleControl = await screen.findByRole('heading', { name: /dialog title/i });
expect(dialogTitleControl).toBeInTheDocument();
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, testing-library/no-node-access
+ // eslint-disable-next-line testing-library/no-node-access
await user.click(document.querySelector('.cdk-overlay-backdrop')!);
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
diff --git a/apps/example-app/src/app/examples/15-dialog.component.ts b/apps/example-app/src/app/examples/15-dialog.component.ts
index f6c89703..029ee64e 100644
--- a/apps/example-app/src/app/examples/15-dialog.component.ts
+++ b/apps/example-app/src/app/examples/15-dialog.component.ts
@@ -4,7 +4,7 @@ import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dial
@Component({
standalone: true,
imports: [MatDialogModule],
- selector: 'app-dialog-overview-example',
+ selector: 'atl-dialog-overview-example',
template: 'Open dialog ',
})
export class DialogComponent {
@@ -18,7 +18,7 @@ export class DialogComponent {
@Component({
standalone: true,
imports: [MatDialogModule],
- selector: 'app-dialog-overview-example-dialog',
+ selector: 'atl-dialog-overview-example-dialog',
template: `
Dialog Title
Dialog content
diff --git a/apps/example-app/src/app/examples/16-input-getter-setter.ts b/apps/example-app/src/app/examples/16-input-getter-setter.ts
index a9097a48..4c189000 100644
--- a/apps/example-app/src/app/examples/16-input-getter-setter.ts
+++ b/apps/example-app/src/app/examples/16-input-getter-setter.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
@Component({
standalone: true,
- selector: 'app-fixture',
+ selector: 'atl-fixture',
template: `
{{ derivedValue }}
{{ value }}
diff --git a/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts b/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts
index ba69f70a..f33dee3e 100644
--- a/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts
+++ b/apps/example-app/src/app/examples/17-component-with-attribute-selector.spec.ts
@@ -5,7 +5,7 @@ import { ComponentWithAttributeSelectorComponent } from './17-component-with-att
// for components with attribute selectors!
test('is possible to set input of component with attribute selector through template', async () => {
await render(
- `{{ value }} `,
})
export class ComponentWithAttributeSelectorComponent {
diff --git a/apps/example-app/src/app/examples/19-standalone-component.ts b/apps/example-app/src/app/examples/19-standalone-component.ts
index efcf0884..95eae3d5 100644
--- a/apps/example-app/src/app/examples/19-standalone-component.ts
+++ b/apps/example-app/src/app/examples/19-standalone-component.ts
@@ -1,17 +1,17 @@
import { Component, Input } from '@angular/core';
@Component({
- selector: 'app-standalone',
+ selector: 'atl-standalone',
template: `Standalone Component
`,
standalone: true,
})
export class StandaloneComponent {}
@Component({
- selector: 'app-standalone-with-child',
+ selector: 'atl-standalone-with-child',
template: `Hi {{ name }}
This has a child
- Hello from deferred child component
`,
standalone: true,
})
@@ -10,7 +10,7 @@ export class DeferableViewChildComponent {}
@Component({
template: `
@defer (on timer(2s)) {
- Hello from placeholder
} @loading {
diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
index 470e639d..355e8ae4 100644
--- a/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
+++ b/apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts
@@ -60,7 +60,7 @@ test('output emits a value', async () => {
age: '45',
},
on: {
- submit: submitFn,
+ submitValue: submitFn,
},
});
diff --git a/apps/example-app/src/app/examples/22-signal-inputs.component.ts b/apps/example-app/src/app/examples/22-signal-inputs.component.ts
index dfe6bd03..27ed23b7 100644
--- a/apps/example-app/src/app/examples/22-signal-inputs.component.ts
+++ b/apps/example-app/src/app/examples/22-signal-inputs.component.ts
@@ -2,7 +2,7 @@ import { Component, computed, input, model, numberAttribute, output } from '@ang
import { FormsModule } from '@angular/forms';
@Component({
- selector: 'app-signal-input',
+ selector: 'atl-signal-input',
template: `
{{ greetings() }} {{ name() }} of {{ age() }} years old
{{ greetingMessage() }}
@@ -18,11 +18,11 @@ export class SignalInputComponent {
});
age = input.required({ transform: numberAttribute });
name = model.required();
- submit = output();
+ submitValue = output();
greetingMessage = computed(() => `${this.greetings()} ${this.name()} of ${this.age()} years old`);
submitName() {
- this.submit.emit(this.name());
+ this.submitValue.emit(this.name());
}
}
diff --git a/apps/example-app/src/app/examples/23-host-directive.spec.ts b/apps/example-app/src/app/examples/23-host-directive.spec.ts
new file mode 100644
index 00000000..32892992
--- /dev/null
+++ b/apps/example-app/src/app/examples/23-host-directive.spec.ts
@@ -0,0 +1,22 @@
+import { aliasedInput, render, screen } from '@testing-library/angular';
+import { HostDirectiveComponent } from './23-host-directive';
+
+test('can set input properties of host directives using aliasedInput', async () => {
+ await render(HostDirectiveComponent, {
+ inputs: {
+ ...aliasedInput('atlText', 'Hello world'),
+ },
+ });
+
+ expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+});
+
+test('can set input properties of host directives using componentInputs', async () => {
+ await render(HostDirectiveComponent, {
+ componentInputs: {
+ atlText: 'Hello world',
+ },
+ });
+
+ expect(screen.getByText(/hello world/i)).toBeInTheDocument();
+});
diff --git a/apps/example-app/src/app/examples/23-host-directive.ts b/apps/example-app/src/app/examples/23-host-directive.ts
new file mode 100644
index 00000000..3e201c75
--- /dev/null
+++ b/apps/example-app/src/app/examples/23-host-directive.ts
@@ -0,0 +1,21 @@
+import { Component, Directive, ElementRef, input, OnInit } from '@angular/core';
+
+@Directive({
+ selector: '[atlText]',
+})
+export class TextDirective implements OnInit {
+ atlText = input('');
+
+ constructor(private el: ElementRef) {}
+
+ ngOnInit() {
+ this.el.nativeElement.textContent = this.atlText();
+ }
+}
+
+@Component({
+ selector: 'atl-host-directive',
+ template: ``,
+ hostDirectives: [{ directive: TextDirective, inputs: ['atlText'] }],
+})
+export class HostDirectiveComponent {}
diff --git a/apps/example-app/src/test-setup.ts b/apps/example-app/src/test-setup.ts
index 0da94a0a..96bfd347 100644
--- a/apps/example-app/src/test-setup.ts
+++ b/apps/example-app/src/test-setup.ts
@@ -1,2 +1,4 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import '@testing-library/jest-dom';
+
+setupZoneTestEnv();
diff --git a/eslint.config.cjs b/eslint.config.cjs
new file mode 100644
index 00000000..9e951e7a
--- /dev/null
+++ b/eslint.config.cjs
@@ -0,0 +1,7 @@
+// @ts-check
+
+// TODO - https://github.com/nrwl/nx/issues/22576
+
+/** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigPromise} */
+const config = (async () => (await import('./eslint.config.mjs')).default)();
+module.exports = config;
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..95e031ac
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,66 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import angular from "angular-eslint";
+import jestDom from 'eslint-plugin-jest-dom';
+import testingLibrary from 'eslint-plugin-testing-library';
+
+export default tseslint.config(
+ {
+ files: ["**/*.ts"],
+ extends: [
+ eslint.configs.recommended,
+ ...tseslint.configs.recommended,
+ ...tseslint.configs.stylistic,
+ ...angular.configs.tsRecommended,
+ ],
+ processor: angular.processInlineTemplates,
+ rules: {
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ type: "attribute",
+ prefix: "atl",
+ style: "camelCase",
+ },
+ ],
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ type: "element",
+ prefix: "atl",
+ style: "kebab-case",
+ },
+ ],
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-unused-vars": [
+ "error",
+ {
+ "argsIgnorePattern": "^_",
+ "varsIgnorePattern": "^_",
+ "caughtErrorsIgnorePattern": "^_"
+ }
+ ],
+ // These are needed for test cases
+ "@angular-eslint/prefer-standalone": "off",
+ "@angular-eslint/no-input-rename": "off",
+ "@angular-eslint/no-input-rename": "off",
+ },
+ },
+ {
+ files: ["**/*.spec.ts"],
+ extends: [
+ jestDom.configs["flat/recommended"],
+ testingLibrary.configs["flat/angular"],
+ ],
+ },
+ {
+ files: ["**/*.html"],
+ extends: [
+ ...angular.configs.templateRecommended,
+ ...angular.configs.templateAccessibility,
+ ],
+ rules: {},
+ }
+);
diff --git a/jest.config.ts b/jest.config.ts
index 0830aab5..f5c10f47 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -1,5 +1,5 @@
-const { getJestProjects } = require('@nx/jest');
+const { getJestProjectsAsync } = require('@nx/jest');
-export default {
- projects: getJestProjects(),
-};
+export default async () => ({
+ projects: await getJestProjectsAsync(),
+});
diff --git a/nx.json b/nx.json
index df534f76..a308e678 100644
--- a/nx.json
+++ b/nx.json
@@ -82,7 +82,7 @@
}
},
"@nx/eslint:lint": {
- "inputs": ["default", "{workspaceRoot}/.eslintrc.json"],
+ "inputs": ["default", "{workspaceRoot}/eslint.config.cjs"],
"cache": true
}
},
@@ -96,7 +96,7 @@
"!{projectRoot}/karma.conf.js",
"!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
"!{projectRoot}/jest.config.[jt]s",
- "!{projectRoot}/.eslintrc.json",
+ "!{projectRoot}/eslint.config.cjs",
"!{projectRoot}/src/test-setup.[jt]s"
]
},
diff --git a/package.json b/package.json
index 235d0eca..bbf0e3c8 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
"build": "nx run-many --target=build --projects=testing-library",
"build:schematics": "tsc -p ./projects/testing-library/tsconfig.schematics.json",
"test": "nx run-many --target=test --all --parallel=1",
- "lint": "nx workspace-lint && nx lint",
+ "lint": "nx run-many --all --target=lint",
"e2e": "nx e2e",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
@@ -27,83 +27,82 @@
"prepare": "git config core.hookspath .githooks"
},
"dependencies": {
- "@angular/animations": "18.0.0",
- "@angular/cdk": "18.0.0",
- "@angular/common": "18.0.0",
- "@angular/compiler": "18.0.0",
- "@angular/core": "18.0.0",
- "@angular/material": "18.0.0",
- "@angular/platform-browser": "18.0.0",
- "@angular/platform-browser-dynamic": "18.0.0",
- "@angular/router": "18.0.0",
- "@ngrx/store": "18.0.0-beta.1",
- "@nx/angular": "19.1.0",
- "@testing-library/dom": "^10.0.0",
+ "@angular/animations": "19.0.1",
+ "@angular/cdk": "19.0.1",
+ "@angular/common": "19.0.1",
+ "@angular/compiler": "19.0.1",
+ "@angular/core": "19.0.1",
+ "@angular/material": "19.0.1",
+ "@angular/platform-browser": "19.0.1",
+ "@angular/platform-browser-dynamic": "19.0.1",
+ "@angular/router": "19.0.1",
+ "@ngrx/store": "19.0.0",
+ "@nx/angular": "20.3.0",
+ "@testing-library/dom": "^10.4.0",
"rxjs": "7.8.0",
- "tslib": "~2.3.1",
- "zone.js": "0.14.2"
+ "tslib": "~2.8.1",
+ "zone.js": "^0.15.0"
},
"devDependencies": {
- "@angular-devkit/build-angular": "18.0.1",
- "@angular-devkit/core": "18.0.1",
- "@angular-devkit/schematics": "18.0.1",
- "@angular-eslint/builder": "17.3.0",
- "@angular-eslint/eslint-plugin": "17.3.0",
- "@angular-eslint/eslint-plugin-template": "17.3.0",
- "@angular-eslint/schematics": "17.5.1",
- "@angular-eslint/template-parser": "17.3.0",
- "@angular/cli": "~18.0.0",
- "@angular/compiler-cli": "18.0.0",
- "@angular/forms": "18.0.0",
- "@angular/language-service": "18.0.0",
- "@nx/eslint": "19.1.0",
- "@nx/eslint-plugin": "19.1.0",
- "@nx/jest": "19.1.0",
- "@nx/node": "19.1.0",
- "@nx/plugin": "19.1.0",
- "@nx/workspace": "19.1.0",
- "@schematics/angular": "18.0.1",
- "@testing-library/jasmine-dom": "^1.2.0",
- "@testing-library/jest-dom": "^5.16.5",
- "@testing-library/user-event": "^14.4.3",
+ "@angular-devkit/build-angular": "19.0.1",
+ "@angular-devkit/core": "19.0.1",
+ "@angular-devkit/schematics": "19.0.1",
+ "@angular-eslint/builder": "19.0.2",
+ "@angular-eslint/eslint-plugin": "19.0.2",
+ "@angular-eslint/eslint-plugin-template": "19.0.2",
+ "@angular-eslint/schematics": "19.0.2",
+ "@angular-eslint/template-parser": "19.0.2",
+ "@angular/cli": "~19.0.6",
+ "@angular/compiler-cli": "19.0.1",
+ "@angular/forms": "19.0.1",
+ "@angular/language-service": "19.0.1",
+ "@eslint/eslintrc": "^2.1.1",
+ "@nx/eslint": "20.3.0",
+ "@nx/eslint-plugin": "20.3.0",
+ "@nx/jest": "20.3.0",
+ "@nx/node": "20.3.0",
+ "@nx/plugin": "20.3.0",
+ "@nx/workspace": "20.3.0",
+ "@schematics/angular": "18.2.9",
+ "@testing-library/jasmine-dom": "^1.3.3",
+ "@testing-library/jest-dom": "^6.6.3",
+ "@testing-library/user-event": "^14.5.2",
"@types/jasmine": "4.3.1",
- "@types/jest": "29.5.1",
- "@types/node": "18.16.9",
- "@types/testing-library__jasmine-dom": "^1.3.0",
- "@typescript-eslint/eslint-plugin": "7.3.0",
- "@typescript-eslint/parser": "7.3.0",
- "autoprefixer": "^10.4.0",
- "cpy-cli": "^3.1.1",
- "eslint": "8.57.0",
- "eslint-config-prettier": "9.0.0",
- "eslint-plugin-import": "~2.25.4",
- "eslint-plugin-jasmine": "~4.1.3",
- "eslint-plugin-jest": "^27.6.3",
- "eslint-plugin-jest-dom": "~4.0.1",
- "eslint-plugin-testing-library": "~5.0.1",
+ "@types/jest": "29.5.14",
+ "@types/node": "22.10.1",
+ "@types/testing-library__jasmine-dom": "^1.3.4",
+ "@typescript-eslint/types": "^8.19.0",
+ "@typescript-eslint/utils": "^8.19.0",
+ "angular-eslint": "^19.0.2",
+ "autoprefixer": "^10.4.20",
+ "cpy-cli": "^5.0.0",
+ "eslint": "^9.8.0",
+ "eslint-plugin-jest-dom": "~5.5.0",
+ "eslint-plugin-testing-library": "~7.1.1",
"jasmine-core": "4.2.0",
"jasmine-spec-reporter": "7.0.0",
"jest": "29.7.0",
- "jest-environment-jsdom": "29.5.0",
- "jest-preset-angular": "14.1.0",
+ "jest-environment-jsdom": "29.7.0",
+ "jest-preset-angular": "14.4.2",
"karma": "6.4.0",
- "karma-chrome-launcher": "^3.1.0",
+ "karma-chrome-launcher": "^3.2.0",
"karma-coverage": "^2.2.1",
"karma-jasmine": "5.1.0",
"karma-jasmine-html-reporter": "2.0.0",
- "lint-staged": "^12.1.6",
- "ng-mocks": "^14.11.0",
- "ng-packagr": "18.0.0",
- "nx": "19.1.0",
- "postcss": "^8.4.5",
+ "lint-staged": "^15.3.0",
+ "ng-mocks": "^14.13.1",
+ "ng-packagr": "19.0.1",
+ "nx": "20.3.0",
+ "postcss": "^8.4.49",
"postcss-import": "14.1.0",
"postcss-preset-env": "7.5.0",
"postcss-url": "10.1.3",
"prettier": "2.6.2",
- "rimraf": "^3.0.2",
- "semantic-release": "^18.0.0",
+ "rimraf": "^5.0.10",
+ "semantic-release": "^24.2.1",
"ts-jest": "29.1.0",
"ts-node": "10.9.1",
- "typescript": "5.4.5"
+ "typescript": "5.6.2",
+ "typescript-eslint": "^8.19.0"
}
}
diff --git a/projects/testing-library/.eslintrc.json b/projects/testing-library/.eslintrc.json
deleted file mode 100644
index 5a9d6905..00000000
--- a/projects/testing-library/.eslintrc.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
- "extends": "../../.eslintrc.json",
- "ignorePatterns": ["!**/*"],
- "overrides": [
- {
- "files": ["*.ts"],
- "rules": {
- "@typescript-eslint/ban-ts-comment": "off",
- "@typescript-eslint/no-unused-vars": [
- "error",
- {
- "argsIgnorePattern": "^_",
- "varsIgnorePattern": "^_",
- "caughtErrorsIgnorePattern": "^_"
- }
- ]
- }
- },
- {
- "files": ["*.ts"],
- "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
- "parserOptions": {
- "project": ["projects/testing-library/tsconfig.*?.json"]
- },
- "rules": {
- "@typescript-eslint/ban-ts-comment": "off",
- "@angular-eslint/directive-selector": [
- "error",
- {
- "type": "attribute",
- "prefix": "atl",
- "style": "camelCase"
- }
- ],
- "@angular-eslint/component-selector": [
- "error",
- {
- "type": "element",
- "prefix": "atl",
- "style": "kebab-case"
- }
- ]
- }
- },
- {
- "files": ["*.spec.ts"],
- "env": {
- "jest": true
- },
- "extends": ["plugin:jest/recommended", "plugin:jest/style", "plugin:jest-dom/recommended"],
- "rules": {
- "jest/consistent-test-it": ["error"],
- "jest/expect-expect": "off"
- }
- },
- {
- "files": ["*.html"],
- "extends": ["plugin:@nx/angular-template"],
- "rules": {}
- }
- ]
-}
diff --git a/projects/testing-library/eslint.config.cjs b/projects/testing-library/eslint.config.cjs
new file mode 100644
index 00000000..9e951e7a
--- /dev/null
+++ b/projects/testing-library/eslint.config.cjs
@@ -0,0 +1,7 @@
+// @ts-check
+
+// TODO - https://github.com/nrwl/nx/issues/22576
+
+/** @type {import('@typescript-eslint/utils/ts-eslint').FlatConfig.ConfigPromise} */
+const config = (async () => (await import('./eslint.config.mjs')).default)();
+module.exports = config;
diff --git a/projects/testing-library/eslint.config.mjs b/projects/testing-library/eslint.config.mjs
new file mode 100644
index 00000000..8f627dbf
--- /dev/null
+++ b/projects/testing-library/eslint.config.mjs
@@ -0,0 +1,8 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
+import rootConfig from "../../eslint.config.mjs";
+
+export default tseslint.config(
+ ...rootConfig,
+);
diff --git a/projects/testing-library/jest.config.ts b/projects/testing-library/jest.config.ts
index 189e52f8..bc5a665d 100644
--- a/projects/testing-library/jest.config.ts
+++ b/projects/testing-library/jest.config.ts
@@ -1,4 +1,3 @@
-/* eslint-disable */
export default {
displayName: {
name: 'ATL',
diff --git a/projects/testing-library/package.json b/projects/testing-library/package.json
index 2852d027..0c3abd6c 100644
--- a/projects/testing-library/package.json
+++ b/projects/testing-library/package.json
@@ -29,6 +29,7 @@
"migrations": "./schematics/migrations/migrations.json"
},
"peerDependencies": {
+ "@angular/animations": ">= 17.0.0",
"@angular/common": ">= 17.0.0",
"@angular/platform-browser": ">= 17.0.0",
"@angular/router": ">= 17.0.0",
diff --git a/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts b/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts
index a3c0fd1e..ebc3922a 100644
--- a/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts
+++ b/projects/testing-library/schematics/migrations/dtl-as-dev-dependency/index.spec.ts
@@ -16,7 +16,6 @@ test('adds DTL to devDependencies', async () => {
});
test('ignores if DTL is already listed as a dev dependency', async () => {
- // eslint-disable-next-line @typescript-eslint/naming-convention
const tree = await setup({ devDependencies: { '@testing-library/dom': '^9.0.0' } });
const pkg = tree.readContent('package.json');
@@ -24,7 +23,6 @@ test('ignores if DTL is already listed as a dev dependency', async () => {
});
test('ignores if DTL is already listed as a dependency', async () => {
- // eslint-disable-next-line @typescript-eslint/naming-convention
const tree = await setup({ dependencies: { '@testing-library/dom': '^11.0.0' } });
const pkg = tree.readContent('package.json');
diff --git a/projects/testing-library/schematics/ng-add/index.ts b/projects/testing-library/schematics/ng-add/index.ts
index d961e150..868d2031 100644
--- a/projects/testing-library/schematics/ng-add/index.ts
+++ b/projects/testing-library/schematics/ng-add/index.ts
@@ -32,9 +32,9 @@ function addDependency(packageName: string, version: string, dependencyType: Nod
};
}
-export function installDependencies(packageManager = 'npm') {
+export function installDependencies() {
return (_tree: Tree, context: SchematicContext) => {
- context.addTask(new NodePackageInstallTask({ packageManager }));
+ context.addTask(new NodePackageInstallTask());
context.logger.info(
`Correctly installed @testing-library/angular.
diff --git a/projects/testing-library/schematics/ng-add/schema.ts b/projects/testing-library/schematics/ng-add/schema.ts
index dc146334..b0dcd227 100644
--- a/projects/testing-library/schematics/ng-add/schema.ts
+++ b/projects/testing-library/schematics/ng-add/schema.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface Schema {
installJestDom: boolean;
installUserEvent: boolean;
diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts
index 19567281..159ac414 100644
--- a/projects/testing-library/src/lib/models.ts
+++ b/projects/testing-library/src/lib/models.ts
@@ -215,7 +215,7 @@ export interface RenderComponentOptions | { [alias: string]: unknown };
+ componentInputs?: Partial | Record;
/**
* @description
@@ -254,10 +254,11 @@ export interface RenderComponentOptions;
@@ -292,7 +293,7 @@ export interface RenderComponentOptions { ... }
* await render(AppComponent, {
* on: {
- * send: (_v:any) => void
+ * send: (value) => sendValue(value)
* }
* })
*/
@@ -465,13 +466,14 @@ export interface ComponentOverride {
providers: any[];
}
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export interface RenderTemplateOptions
extends RenderComponentOptions {
/**
* @description
* An Angular component to wrap the component in.
* The template will be overridden with the `template` option.
+ * NOTE: A standalone component cannot be used as a wrapper.
*
* @default
* `WrapperComponent`, an empty component that strips the `ng-version` attribute
diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index fbe94f21..f498a893 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/projects/testing-library/src/lib/testing-library.ts
@@ -2,7 +2,6 @@ import {
ApplicationInitStatus,
ChangeDetectorRef,
Component,
- isStandalone,
NgZone,
OnChanges,
OutputRef,
@@ -10,6 +9,7 @@ import {
SimpleChange,
SimpleChanges,
Type,
+ isStandalone,
} from '@angular/core';
import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -27,14 +27,15 @@ import {
waitForOptions as dtlWaitForOptions,
within as dtlWithin,
} from '@testing-library/dom';
+import { getConfig } from './config';
import {
ComponentOverride,
+ OutputRefKeysWithCallback,
RenderComponentOptions,
RenderResult,
RenderTemplateOptions,
- OutputRefKeysWithCallback,
+ Config,
} from './models';
-import { getConfig } from './config';
type SubscribedOutput = readonly [key: keyof T, callback: (v: any) => void, subscription: OutputRefSubscription];
@@ -71,7 +72,7 @@ export async function render(
on = {},
componentProviders = [],
childComponentOverrides = [],
- componentImports: componentImports,
+ componentImports,
excludeComponentDeclaration = false,
routes = [],
removeAngularAttributes = false,
@@ -82,7 +83,9 @@ export async function render(
configureTestBed = () => {
/* noop*/
},
- } = { ...globalConfig, ...renderOptions };
+ } = { ...globalConfig, ...renderOptions } as RenderComponentOptions &
+ RenderTemplateOptions &
+ Config;
dtlConfigure({
eventWrapper: (cb) => {
@@ -116,12 +119,10 @@ export async function render(
await TestBed.compileComponents();
- componentProviders
- .reduce((acc, provider) => acc.concat(provider), [] as any[])
- .forEach((p: any) => {
- const { provide, ...provider } = p;
- TestBed.overrideProvider(provide, provider);
- });
+ // Angular supports nested arrays of providers, so we need to flatten them to emulate the same behavior.
+ for (const { provide, ...provider } of componentProviders.flat(Infinity)) {
+ TestBed.overrideProvider(provide, provider);
+ }
const componentContainer = createComponentFixture(sut, wrapper);
@@ -158,7 +159,9 @@ export async function render(
let result;
if (zone) {
- await zone.run(() => (result = doNavigate()));
+ await zone.run(() => {
+ result = doNavigate();
+ });
} else {
result = doNavigate();
}
@@ -199,7 +202,7 @@ export async function render(
if (removeAngularAttributes) {
createdFixture.nativeElement.removeAttribute('ng-version');
const idAttribute = createdFixture.nativeElement.getAttribute('id');
- if (idAttribute && idAttribute.startsWith('root')) {
+ if (idAttribute?.startsWith('root')) {
createdFixture.nativeElement.removeAttribute('id');
}
}
@@ -207,7 +210,9 @@ export async function render(
mountedFixtures.add(createdFixture);
let isAlive = true;
- createdFixture.componentRef.onDestroy(() => (isAlive = false));
+ createdFixture.componentRef.onDestroy(() => {
+ isAlive = false;
+ });
if (hasOnChangesHook(createdFixture.componentInstance) && Object.keys(properties).length > 0) {
const changes = getChangesObj(null, componentProperties);
@@ -227,7 +232,7 @@ export async function render(
return createdFixture;
};
- const fixture = await renderFixture(componentProperties, allInputs, componentOutputs, on);
+ const fixture = await renderFixture(componentProperties, allInputs as any, componentOutputs, on);
if (deferBlockStates) {
if (Array.isArray(deferBlockStates)) {
@@ -318,10 +323,15 @@ export async function render(
},
debugElement: fixture.debugElement,
container: fixture.nativeElement,
- debug: (element = fixture.nativeElement, maxLength, options) =>
- Array.isArray(element)
- ? element.forEach((e) => console.log(dtlPrettyDOM(e, maxLength, options)))
- : console.log(dtlPrettyDOM(element, maxLength, options)),
+ debug: (element = fixture.nativeElement, maxLength, options) => {
+ if (Array.isArray(element)) {
+ for (const e of element) {
+ console.log(dtlPrettyDOM(e, maxLength, options));
+ }
+ } else {
+ console.log(dtlPrettyDOM(element, maxLength, options));
+ }
+ },
...replaceFindWithFindAndDetectChanges(dtlGetQueriesForElement(fixture.nativeElement, queries)),
};
}
@@ -423,9 +433,11 @@ function overrideComponentImports(sut: Type | string, imports:
}
function overrideChildComponentProviders(componentOverrides: ComponentOverride[]) {
- componentOverrides?.forEach(({ component, providers }) => {
- TestBed.overrideComponent(component, { set: { providers } });
- });
+ if (componentOverrides) {
+ for (const { component, providers } of componentOverrides) {
+ TestBed.overrideComponent(component, { set: { providers } });
+ }
+ }
}
function hasOnChangesHook(componentInstance: SutType): componentInstance is SutType & OnChanges {
@@ -439,13 +451,10 @@ function hasOnChangesHook(componentInstance: SutType): componentInstanc
function getChangesObj(oldProps: Record | null, newProps: Record) {
const isFirstChange = oldProps === null;
- return Object.keys(newProps).reduce(
- (changes, key) => ({
- ...changes,
- [key]: new SimpleChange(isFirstChange ? null : oldProps[key], newProps[key], isFirstChange),
- }),
- {} as Record,
- );
+ return Object.keys(newProps).reduce((changes, key) => {
+ changes[key] = new SimpleChange(isFirstChange ? null : oldProps[key], newProps[key], isFirstChange);
+ return changes;
+ }, {} as Record);
}
function update(
@@ -461,10 +470,12 @@ function update(
const componentInstance = fixture.componentInstance as Record;
const simpleChanges: SimpleChanges = {};
- for (const key of prevRenderedKeys) {
- if (!partialUpdate && !Object.prototype.hasOwnProperty.call(newValues, key)) {
- simpleChanges[key] = new SimpleChange(componentInstance[key], undefined, false);
- delete componentInstance[key];
+ if (!partialUpdate) {
+ for (const key of prevRenderedKeys) {
+ if (!Object.prototype.hasOwnProperty.call(newValues, key)) {
+ simpleChanges[key] = new SimpleChange(componentInstance[key], undefined, false);
+ delete componentInstance[key];
+ }
}
}
@@ -487,12 +498,16 @@ function addAutoDeclarations(
wrapper,
}: Pick, 'declarations' | 'excludeComponentDeclaration' | 'wrapper'>,
) {
+ const nonStandaloneDeclarations = declarations?.filter((d) => !isStandalone(d));
if (typeof sut === 'string') {
- return [...declarations, wrapper];
+ if (wrapper && isStandalone(wrapper)) {
+ return nonStandaloneDeclarations;
+ }
+ return [...nonStandaloneDeclarations, wrapper];
}
const components = () => (excludeComponentDeclaration || isStandalone(sut) ? [] : [sut]);
- return [...declarations, ...components()];
+ return [...nonStandaloneDeclarations, ...components()];
}
function addAutoImports(
@@ -545,7 +560,7 @@ async function waitForWrapper(
let inFakeAsync = true;
try {
tick(0);
- } catch (err) {
+ } catch {
inFakeAsync = false;
}
@@ -616,7 +631,7 @@ if (typeof process === 'undefined' || !process.env?.ATL_SKIP_AUTO_CLEANUP) {
}
}
-@Component({ selector: 'atl-wrapper-component', template: '' })
+@Component({ selector: 'atl-wrapper-component', template: '', standalone: false })
class WrapperComponent {}
/**
@@ -643,7 +658,7 @@ function replaceFindWithFindAndDetectChanges>(orig
* Call detectChanges for all fixtures
*/
function detectChangesForMountedFixtures() {
- mountedFixtures.forEach((fixture) => {
+ for (const fixture of mountedFixtures) {
try {
fixture.detectChanges();
} catch (err: any) {
@@ -651,7 +666,7 @@ function detectChangesForMountedFixtures() {
throw err;
}
}
- });
+ }
}
/**
diff --git a/projects/testing-library/test-setup.ts b/projects/testing-library/test-setup.ts
index 600d0857..be311bfe 100644
--- a/projects/testing-library/test-setup.ts
+++ b/projects/testing-library/test-setup.ts
@@ -1,6 +1,7 @@
-import 'jest-preset-angular/setup-jest';
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
import '@testing-library/jest-dom';
import { TextEncoder, TextDecoder } from 'util';
-// eslint-disable-next-line @typescript-eslint/naming-convention
+setupZoneTestEnv();
+
Object.assign(global, { TextDecoder, TextEncoder });
diff --git a/projects/testing-library/tests/config.spec.ts b/projects/testing-library/tests/config.spec.ts
index bb8c61fc..041d991a 100644
--- a/projects/testing-library/tests/config.spec.ts
+++ b/projects/testing-library/tests/config.spec.ts
@@ -13,6 +13,7 @@ import { ReactiveFormsModule, FormBuilder } from '@angular/forms';