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: `
{{ 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: `
{{ 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 }}
+ -
+
+
`,
})
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/12-service-component.ts b/apps/example-app/src/app/examples/12-service-component.ts
index 2aed1657..1746eb2c 100644
--- a/apps/example-app/src/app/examples/12-service-component.ts
+++ b/apps/example-app/src/app/examples/12-service-component.ts
@@ -19,7 +19,7 @@ export class CustomersService {
@Component({
standalone: true,
imports: [AsyncPipe, NgForOf],
- 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: `
{{ 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: '',
})
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(
- ``,
+ ``,
{
imports: [ComponentWithAttributeSelectorComponent],
},
diff --git a/apps/example-app/src/app/examples/17-component-with-attribute-selector.ts b/apps/example-app/src/app/examples/17-component-with-attribute-selector.ts
index ac2a25d3..930032c4 100644
--- a/apps/example-app/src/app/examples/17-component-with-attribute-selector.ts
+++ b/apps/example-app/src/app/examples/17-component-with-attribute-selector.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
@Component({
standalone: true,
- selector: 'app-fixture-component-with-attribute-selector[value]',
+ selector: 'atl-fixture-component-with-attribute-selector[value]',
template: ` {{ 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
- `,
+ `,
standalone: true,
imports: [StandaloneComponent],
})
diff --git a/apps/example-app/src/app/examples/20-test-harness.spec.ts b/apps/example-app/src/app/examples/20-test-harness.spec.ts
index 6e4d9e3a..4a88a580 100644
--- a/apps/example-app/src/app/examples/20-test-harness.spec.ts
+++ b/apps/example-app/src/app/examples/20-test-harness.spec.ts
@@ -6,9 +6,8 @@ import userEvent from '@testing-library/user-event';
import { HarnessComponent } from './20-test-harness';
-// eslint-disable-next-line jest/no-disabled-tests
test.skip('can be used with TestHarness', async () => {
- const view = await render(``, {
+ const view = await render(``, {
imports: [HarnessComponent],
});
const loader = TestbedHarnessEnvironment.documentRootLoader(view.fixture);
@@ -21,7 +20,6 @@ test.skip('can be used with TestHarness', async () => {
expect(await snackbarHarness.getMessage()).toMatch(/Pizza Party!!!/i);
});
-// eslint-disable-next-line jest/no-disabled-tests
test.skip('can be used in combination with TestHarness', async () => {
const user = userEvent.setup();
diff --git a/apps/example-app/src/app/examples/20-test-harness.ts b/apps/example-app/src/app/examples/20-test-harness.ts
index 08d6afd7..8e5e4071 100644
--- a/apps/example-app/src/app/examples/20-test-harness.ts
+++ b/apps/example-app/src/app/examples/20-test-harness.ts
@@ -3,7 +3,7 @@ import { MatButtonModule } from '@angular/material/button';
import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
@Component({
- selector: 'app-harness',
+ selector: 'atl-harness',
standalone: true,
imports: [MatButtonModule, MatSnackBarModule],
template: `
diff --git a/apps/example-app/src/app/examples/21-deferable-view.component.ts b/apps/example-app/src/app/examples/21-deferable-view.component.ts
index ce47a586..7b66d85a 100644
--- a/apps/example-app/src/app/examples/21-deferable-view.component.ts
+++ b/apps/example-app/src/app/examples/21-deferable-view.component.ts
@@ -1,7 +1,7 @@
import { Component } from '@angular/core';
@Component({
- selector: 'app-deferable-view-child',
+ selector: 'atl-deferable-view-child',
template: ` Hello from deferred child component
`,
standalone: true,
})
@@ -10,7 +10,7 @@ export class DeferableViewChildComponent {}
@Component({
template: `
@defer (on timer(2s)) {
-
+
} @placeholder {
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/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 0f8aad87..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",
@@ -36,75 +36,73 @@
"@angular/platform-browser": "19.0.1",
"@angular/platform-browser-dynamic": "19.0.1",
"@angular/router": "19.0.1",
- "@ngrx/store": "19.0.0-beta.0",
- "@nx/angular": "20.1.3",
+ "@ngrx/store": "19.0.0",
+ "@nx/angular": "20.3.0",
"@testing-library/dom": "^10.4.0",
"rxjs": "7.8.0",
- "tslib": "~2.3.1",
+ "tslib": "~2.8.1",
"zone.js": "^0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "19.0.1",
"@angular-devkit/core": "19.0.1",
"@angular-devkit/schematics": "19.0.1",
- "@angular-eslint/builder": "18.3.0",
- "@angular-eslint/eslint-plugin": "18.0.1",
- "@angular-eslint/eslint-plugin-template": "18.0.1",
- "@angular-eslint/schematics": "18.3.0",
- "@angular-eslint/template-parser": "18.0.1",
- "@angular/cli": "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",
- "@nx/eslint": "20.1.3",
- "@nx/eslint-plugin": "20.1.3",
- "@nx/jest": "20.1.3",
- "@nx/node": "20.1.3",
- "@nx/plugin": "20.1.3",
- "@nx/workspace": "20.1.3",
+ "@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.2.0",
- "@testing-library/jest-dom": "^5.16.5",
- "@testing-library/user-event": "^14.4.3",
+ "@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.14",
"@types/node": "22.10.1",
- "@types/testing-library__jasmine-dom": "^1.3.0",
- "@typescript-eslint/eslint-plugin": "7.16.0",
- "@typescript-eslint/parser": "7.16.0",
- "@typescript-eslint/utils": "^7.16.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/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.7.0",
- "jest-preset-angular": "14.4.1",
+ "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",
+ "lint-staged": "^15.3.0",
+ "ng-mocks": "^14.13.1",
"ng-packagr": "19.0.1",
- "nx": "20.1.3",
- "postcss": "^8.4.5",
+ "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.6.2"
+ "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 0c34aa8a..159ac414 100644
--- a/projects/testing-library/src/lib/models.ts
+++ b/projects/testing-library/src/lib/models.ts
@@ -243,7 +243,7 @@ export interface RenderComponentOptions | { [alias: string]: unknown };
+ componentInputs?: Partial | Record;
/**
* @description
@@ -466,7 +466,7 @@ 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 {
/**
diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index 7c7de892..f498a893 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/projects/testing-library/src/lib/testing-library.ts
@@ -119,7 +119,8 @@ export async function render(
await TestBed.compileComponents();
- for (const { provide, ...provider } of componentProviders) {
+ // 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);
}
@@ -559,7 +560,7 @@ async function waitForWrapper(
let inFakeAsync = true;
try {
tick(0);
- } catch (err) {
+ } catch {
inFakeAsync = false;
}
diff --git a/projects/testing-library/test-setup.ts b/projects/testing-library/test-setup.ts
index 8d79c74b..be311bfe 100644
--- a/projects/testing-library/test-setup.ts
+++ b/projects/testing-library/test-setup.ts
@@ -4,5 +4,4 @@ import { TextEncoder, TextDecoder } from 'util';
setupZoneTestEnv();
-// eslint-disable-next-line @typescript-eslint/naming-convention
Object.assign(global, { TextDecoder, TextEncoder });
diff --git a/projects/testing-library/tests/debug.spec.ts b/projects/testing-library/tests/debug.spec.ts
index e1ad1dff..63ab7e67 100644
--- a/projects/testing-library/tests/debug.spec.ts
+++ b/projects/testing-library/tests/debug.spec.ts
@@ -14,11 +14,11 @@ test('debug', async () => {
jest.spyOn(console, 'log').mockImplementation();
const { debug } = await render(FixtureComponent);
- // eslint-disable-next-line testing-library/no-debug
+ // eslint-disable-next-line testing-library/no-debugging-utils
debug();
expect(console.log).toHaveBeenCalledWith(expect.stringContaining('rawr'));
- (console.log).mockRestore();
+ (console.log as any).mockRestore();
});
test('debug allows to be called with an element', async () => {
@@ -26,10 +26,10 @@ test('debug allows to be called with an element', async () => {
const { debug } = await render(FixtureComponent);
const btn = screen.getByTestId('btn');
- // eslint-disable-next-line testing-library/no-debug
+ // eslint-disable-next-line testing-library/no-debugging-utils
debug(btn);
expect(console.log).not.toHaveBeenCalledWith(expect.stringContaining('rawr'));
expect(console.log).toHaveBeenCalledWith(expect.stringContaining(`I'm a button`));
- (console.log).mockRestore();
+ (console.log as any).mockRestore();
});
diff --git a/projects/testing-library/tests/issues/issue-280.spec.ts b/projects/testing-library/tests/issues/issue-280.spec.ts
index 5e59534a..711cbec3 100644
--- a/projects/testing-library/tests/issues/issue-280.spec.ts
+++ b/projects/testing-library/tests/issues/issue-280.spec.ts
@@ -48,12 +48,12 @@ test('navigate to second page and back', async () => {
expect(await screen.findByText('Navigate')).toBeInTheDocument();
expect(await screen.findByText('first page')).toBeInTheDocument();
- userEvent.click(await screen.findByText('go to second'));
+ await userEvent.click(await screen.findByText('go to second'));
expect(await screen.findByText('second page')).toBeInTheDocument();
expect(await screen.findByText('navigate back')).toBeInTheDocument();
- userEvent.click(await screen.findByText('navigate back'));
+ await userEvent.click(await screen.findByText('navigate back'));
expect(await screen.findByText('first page')).toBeInTheDocument();
});
diff --git a/projects/testing-library/tests/issues/issue-389.spec.ts b/projects/testing-library/tests/issues/issue-389.spec.ts
index 03f25f74..626d3889 100644
--- a/projects/testing-library/tests/issues/issue-389.spec.ts
+++ b/projects/testing-library/tests/issues/issue-389.spec.ts
@@ -6,7 +6,6 @@ import { render, screen } from '../../src/public_api';
template: `Hello {{ name }}`,
})
class TestComponent {
- // eslint-disable-next-line @angular-eslint/no-input-rename
@Input('aliasName') name = '';
}
diff --git a/projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts b/projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts
index 2da43b32..7be9913e 100644
--- a/projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts
+++ b/projects/testing-library/tests/issues/issue-396-standalone-stub-child.spec.ts
@@ -42,7 +42,6 @@ class ChildComponent {}
selector: 'atl-child',
template: `Hello from stub`,
standalone: true,
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property, @typescript-eslint/naming-convention
host: { 'collision-id': StubComponent.name },
})
class StubComponent {}
diff --git a/projects/testing-library/tests/issues/issue-398-component-without-host-id.spec.ts b/projects/testing-library/tests/issues/issue-398-component-without-host-id.spec.ts
index 4508d642..c775a2ab 100644
--- a/projects/testing-library/tests/issues/issue-398-component-without-host-id.spec.ts
+++ b/projects/testing-library/tests/issues/issue-398-component-without-host-id.spec.ts
@@ -15,9 +15,7 @@ test('should re-create the app', async () => {
selector: 'atl-fixture',
standalone: true,
template: 'My title
',
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: {
- // eslint-disable-next-line @typescript-eslint/naming-convention
'[attr.id]': 'null', // this breaks the cleaning up of tests
},
})
diff --git a/projects/testing-library/tests/issues/issue-422-view-already-destroyed.spec.ts b/projects/testing-library/tests/issues/issue-422-view-already-destroyed.spec.ts
index 05e6e11a..c4fa7a37 100644
--- a/projects/testing-library/tests/issues/issue-422-view-already-destroyed.spec.ts
+++ b/projects/testing-library/tests/issues/issue-422-view-already-destroyed.spec.ts
@@ -9,6 +9,7 @@ test('declaration specific dependencies should be available for components', asy
template: `Test
`,
})
class TestComponent {
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
constructor(_elementRef: ElementRef) {}
}
diff --git a/projects/testing-library/tests/issues/issue-437.spec.ts b/projects/testing-library/tests/issues/issue-437.spec.ts
index 2d0e7c51..dbf2506b 100644
--- a/projects/testing-library/tests/issues/issue-437.spec.ts
+++ b/projects/testing-library/tests/issues/issue-437.spec.ts
@@ -24,7 +24,6 @@ test('issue #437', async () => {
{ imports: [MatSidenavModule] },
);
- // eslint-disable-next-line testing-library/prefer-explicit-assert
await screen.findByTestId('test-button');
await user.click(screen.getByTestId('test-button'));
@@ -51,7 +50,6 @@ test('issue #437 with fakeTimers', async () => {
{ imports: [MatSidenavModule] },
);
- // eslint-disable-next-line testing-library/prefer-explicit-assert
await screen.findByTestId('test-button');
await user.click(screen.getByTestId('test-button'));
diff --git a/projects/testing-library/tests/issues/issue-493.spec.ts b/projects/testing-library/tests/issues/issue-493.spec.ts
index a49bc804..5d0e1237 100644
--- a/projects/testing-library/tests/issues/issue-493.spec.ts
+++ b/projects/testing-library/tests/issues/issue-493.spec.ts
@@ -22,6 +22,6 @@ test('succeeds', async () => {
})
class DummyComponent {
value = input.required();
- // @ts-ignore
+ // @ts-expect-error http is unused but needed for the test
constructor(private http: HttpClient) {}
}
diff --git a/projects/testing-library/tests/providers/component-provider.spec.ts b/projects/testing-library/tests/providers/component-provider.spec.ts
index 3c3ec0cf..9290d5bd 100644
--- a/projects/testing-library/tests/providers/component-provider.spec.ts
+++ b/projects/testing-library/tests/providers/component-provider.spec.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Provider } from '@angular/core';
import { Component } from '@angular/core';
import { render, screen } from '../../src/public_api';
@@ -42,6 +42,24 @@ test('shows the provided service value with template syntax', async () => {
expect(screen.getByText('bar')).toBeInTheDocument();
});
+test('flatten the nested array of component providers', async () => {
+ const provideService = (): Provider => [
+ {
+ provide: Service,
+ useValue: {
+ foo() {
+ return 'bar';
+ },
+ },
+ },
+ ];
+ await render(FixtureComponent, {
+ componentProviders: [provideService()],
+ });
+
+ expect(screen.getByText('bar')).toBeInTheDocument();
+});
+
@Injectable()
class Service {
foo() {
diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts
index 52d318ca..dc54ac5d 100644
--- a/projects/testing-library/tests/render.spec.ts
+++ b/projects/testing-library/tests/render.spec.ts
@@ -37,7 +37,7 @@ describe('DTL functionality', () => {
it('creates queries and events', async () => {
const view = await render(FixtureComponent);
- /// We wish to test the utility function from `render` here.
+ // We wish to test the utility function from `render` here.
// eslint-disable-next-line testing-library/prefer-screen-queries
fireEvent.input(view.getByTestId('input'), { target: { value: 'a super awesome input' } });
// eslint-disable-next-line testing-library/prefer-screen-queries
@@ -72,7 +72,6 @@ describe('component with child', () => {
@Component({
selector: 'atl-child-fixture',
template: `A mock child fixture`,
- // eslint-disable-next-line @angular-eslint/no-host-metadata-property, @typescript-eslint/naming-convention
host: { 'collision-id': MockChildFixtureComponent.name },
})
class MockChildFixtureComponent {}
@@ -287,19 +286,19 @@ describe('on', () => {
// eslint-disable-next-line @typescript-eslint/no-empty-function
function _test(_on: OutputRefKeysWithCallback) {}
- // @ts-expect-error
+ // @ts-expect-error wrong event type
_test({ event: fnWithNumberArg });
_test({ event: fnWithVoidArg });
- // @ts-expect-error
+ // @ts-expect-error wrong event type
_test({ event: fnWithNumberArg });
_test({ event: fnWithMouseEventArg });
- // @ts-expect-error
+ // @ts-expect-error wrong event type
_test({ event: fnWithNumberArg });
_test({ event: fnWithStringArg });
- // @ts-expect-error
+ // @ts-expect-error wrong event type
_test({ event: fnWithNumberArg });
_test({ event: fnWithMouseEventArg });
@@ -392,11 +391,11 @@ describe('Angular component life-cycle hooks', () => {
const view = await render(FixtureWithNgOnChangesComponent, { componentProperties });
- /// We wish to test the utility function from `render` here.
+ // We wish to test the utility function from `render` here.
// eslint-disable-next-line testing-library/prefer-screen-queries
expect(view.getByText('Sarah')).toBeInTheDocument();
expect(nameChanged).toHaveBeenCalledWith('Sarah', true);
- /// expect `nameChanged` to be called before `nameInitialized`
+ // expect `nameChanged` to be called before `nameInitialized`
expect(nameChanged.mock.invocationCallOrder[0]).toBeLessThan(nameInitialized.mock.invocationCallOrder[0]);
expect(nameChanged).toHaveBeenCalledTimes(1);
});
@@ -408,11 +407,11 @@ describe('Angular component life-cycle hooks', () => {
const view = await render(FixtureWithNgOnChangesComponent, { componentInputs: componentInput });
- /// We wish to test the utility function from `render` here.
+ // We wish to test the utility function from `render` here.
// eslint-disable-next-line testing-library/prefer-screen-queries
expect(view.getByText('Sarah')).toBeInTheDocument();
expect(nameChanged).toHaveBeenCalledWith('Sarah', true);
- /// expect `nameChanged` to be called before `nameInitialized`
+ // expect `nameChanged` to be called before `nameInitialized`
expect(nameChanged.mock.invocationCallOrder[0]).toBeLessThan(nameInitialized.mock.invocationCallOrder[0]);
expect(nameChanged).toHaveBeenCalledTimes(1);
});