chore: migrate to eslint flat config

Author: timdeschryver

.eslintignore

@@ -38,6 +38,8 @@ jobs:
         run: npm run build -- --skip-nx-cache
       - name: test
         run: npm run test
+      - name: lint
+        run: npm run lint
       - name: Release
         if: github.repository == 'testing-library/angular-testing-library' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta')
         run: npx semantic-release

.eslintrc.json

@@ -98,7 +98,7 @@ counter.component.ts
 
 ```ts
 @Component({
-  selector: 'app-counter',
+  selector: 'atl-counter',
   template: `
     <span>{{ hello() }}</span>
     <button (click)="decrement()">-</button>

.github/workflows/ci.yml

@@ -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;

README.md

@@ -0,0 +1,8 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
+import rootConfig from "../../eslint.config.mjs";
+
+export default tseslint.config(
+  ...rootConfig,
+);

apps/example-app-karma/.eslintrc.json

@@ -1,5 +1,4 @@
 declare module '@testing-library/jasmine-dom' {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
   const JasmineDOM: any;
   export default JasmineDOM;
 }

apps/example-app-karma/eslint.config.cjs

@@ -29,7 +29,7 @@ it('should display invalid message and submit button must be disabled', async ()
 });
 
 @Component({
-  selector: 'app-login',
+  selector: 'atl-login',
   standalone: true,
   imports: [ReactiveFormsModule, NgIf],
   template: `
@@ -51,7 +51,7 @@ class LoginComponent {
   });
 
   constructor(private fb: FormBuilder) {}
-  
+
   get email(): FormControl {
     return this.form.get('email') as FormControl;
   }

apps/example-app-karma/eslint.config.mjs

@@ -7,9 +7,9 @@ it('can rerender component', async () => {
     },
   });
 
-  expect(screen.getByText('Hello Sarah')).toBeTruthy();
+  expect(screen.getByText('Hello Sarah')).toBeInTheDocument();
 
   await rerender({ componentProperties: { name: 'Mark' } });
 
-  expect(screen.getByText('Hello Mark')).toBeTruthy();
+  expect(screen.getByText('Hello Mark')).toBeInTheDocument();
 });

apps/example-app-karma/jasmine-dom.d.ts

@@ -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;

apps/example-app-karma/src/app/examples/login-form.spec.ts

@@ -0,0 +1,8 @@
+// @ts-check
+
+import tseslint from "typescript-eslint";
+import rootConfig from "../../eslint.config.mjs";
+
+export default tseslint.config(
+  ...rootConfig,
+);

apps/example-app-karma/src/app/issues/rerender.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable */
 export default {
   displayName: {
     name: 'Example App',

apps/example-app/.eslintrc.json

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-fixture',
+  selector: 'atl-fixture',
   standalone: true,
   template: `
     <button (click)="value = value - 1">Decrement</button>

apps/example-app/eslint.config.cjs

@@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   standalone: true,
-  selector: 'app-button',
+  selector: 'atl-button',
   template: ' <button (click)="raise.emit()">{{ name }}</button> ',
 })
 export class NestedButtonComponent {
@@ -12,7 +12,7 @@ export class NestedButtonComponent {
 
 @Component({
   standalone: true,
-  selector: 'app-value',
+  selector: 'atl-value',
   template: ' <span data-testid="value">{{ value }}</span> ',
 })
 export class NestedValueComponent {
@@ -21,11 +21,11 @@ export class NestedValueComponent {
 
 @Component({
   standalone: true,
-  selector: 'app-fixture',
+  selector: 'atl-fixture',
   template: `
-    <app-button (raise)="value = value - 1" name="Decrement" />
-    <app-value [value]="value" />
-    <app-button (raise)="value = value + 1" name="Increment" />
+    <atl-button (raise)="value = value - 1" name="Decrement" />
+    <atl-value [value]="value" />
+    <atl-button (raise)="value = value + 1" name="Increment" />
   `,
   imports: [NestedButtonComponent, NestedValueComponent],
 })

apps/example-app/eslint.config.mjs

@@ -36,7 +36,7 @@ test.skip('is possible to set input and listen for output with the template synt
   const user = userEvent.setup();
   const sendSpy = jest.fn();
 
-  await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" />', {
+  await render('<atl-fixture [value]="47" (sendValue)="sendValue($event)" />', {
     imports: [InputOutputComponent],
     on: {
       sendValue: sendSpy,
@@ -94,7 +94,7 @@ test('is possible to set input and listen for output with the template syntax (d
   const user = userEvent.setup();
   const sendSpy = jest.fn();
 
-  await render('<app-fixture [value]="47" (sendValue)="sendValue($event)" />', {
+  await render('<atl-fixture [value]="47" (sendValue)="sendValue($event)" />', {
     imports: [InputOutputComponent],
     componentProperties: {
       sendValue: sendSpy,

apps/example-app/jest.config.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   standalone: true,
-  selector: 'app-fixture',
+  selector: 'atl-fixture',
   template: `
     <button (click)="value = value - 1">Decrement</button>
     <span data-testid="value">{{ value }}</span>

apps/example-app/src/app/examples/00-single-component.ts

@@ -4,7 +4,7 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   standalone: true,
-  selector: 'app-fixture',
+  selector: 'atl-fixture',
   imports: [ReactiveFormsModule, NgForOf, NgIf],
   template: `
     <form [formGroup]="form" name="form">