fix: fix ESLint installation and fix linter findings

Author: philenius

.eslintrc.json

@@ -129,12 +129,14 @@ View and edit the live demo Angular app on <a href="https://codesandbox.io/s/ngx
 ### Recreate project from scratch
 
 ```bash
-npm install -g @angular/cli@^17
+npm install -g @angular/cli@^18
 ng new ngx-annotate-text-workspace
 cd ngx-annotate-text-workspace/
 ng generate library ngx-annotate-text
-ng add @angular-eslint/schematics
-npm install prettier
+ng add angular-eslint@^18
+ng g angular-eslint:add-eslint-to-project ngx-annotate-text-workspace
+ng g angular-eslint:add-eslint-to-project ngx-annotate-text
+npm install prettier --save-dev
 ng build ngx-annotate-text
 ng lint
 ng test ngx-annotate-text

README.md

@@ -120,7 +120,8 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["projects/ngx-annotate-text/**/*.ts", "projects/ngx-annotate-text/**/*.html"]
+            "lintFilePatterns": ["projects/ngx-annotate-text/**/*.ts", "projects/ngx-annotate-text/**/*.html"],
+            "eslintConfig": "projects/ngx-annotate-text/eslint.config.js"
           }
         }
       }

angular.json

@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = 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: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);

eslint.config.js

@@ -0,0 +1,32 @@
+// @ts-check
+const tseslint = require("typescript-eslint");
+const rootConfig = require("../../eslint.config.js");
+
+module.exports = tseslint.config(
+  ...rootConfig,
+  {
+    files: ["**/*.ts"],
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "lib",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "lib",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    rules: {},
+  }
+);

projects/ngx-annotate-text/.eslintrc.json

@@ -18,8 +18,8 @@ describe('AnnotationRendererComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(NgxAnnotationRendererComponent);
     component = fixture.componentInstance;
-    component.clickAnnotation = () => {};
-    component.removeAnnotation = () => {};
+    component.clickAnnotation = jasmine.createSpy('clickAnnotation');
+    component.removeAnnotation = jasmine.createSpy('removeAnnotation');
     fixture.detectChanges();
   });
 
@@ -86,8 +86,6 @@ describe('AnnotationRendererComponent', () => {
   });
 
   it("should call the callback function 'removeAnnotation' when a user clicks on the remove button", async () => {
-    spyOn(component, 'removeAnnotation');
-
     const annotation = new Annotation(0, 13, 'City', 'rgb(60, 65, 75)');
     annotation.text = 'San Francisco';
     component.annotation = annotation;
@@ -97,14 +95,11 @@ describe('AnnotationRendererComponent', () => {
 
     fixture.nativeElement.querySelector('button.remove-annotation').click();
 
-    fixture.whenStable().then(() => {
-      expect(component.removeAnnotation).toHaveBeenCalledWith(annotation);
-    });
+    await fixture.whenStable();
+    expect(component.removeAnnotation).toHaveBeenCalledWith(annotation);
   });
 
   it("should call the callback function 'clickAnnotation' when a user clicks on the annotation's box", async () => {
-    spyOn(component, 'clickAnnotation');
-
     const annotation = new Annotation(0, 13, 'City', 'rgb(60, 65, 75)');
     annotation.text = 'San Francisco';
     component.annotation = annotation;
@@ -113,14 +108,11 @@ describe('AnnotationRendererComponent', () => {
 
     fixture.nativeElement.querySelector('button.annotation-parent').click();
 
-    fixture.whenStable().then(() => {
-      expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
-    });
+    await fixture.whenStable();
+    expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
   });
 
   it("should call the callback function 'clickAnnotation' when the user clicks on the annotation's text", async () => {
-    spyOn(component, 'clickAnnotation');
-
     const annotation = new Annotation(0, 11, 'City', 'rgb(0, 255, 255)');
     annotation.text = 'Los Angeles';
     component.annotation = annotation;
@@ -129,14 +121,11 @@ describe('AnnotationRendererComponent', () => {
 
     fixture.nativeElement.querySelector('span.annotation-content').click();
 
-    fixture.whenStable().then(() => {
-      expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
-    });
+    await fixture.whenStable();
+    expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
   });
 
   it("should call the callback function 'clickAnnotation' when the user clicks on the annotation's label", async () => {
-    spyOn(component, 'clickAnnotation');
-
     const annotation = new Annotation(0, 9, 'City', 'rgb(255, 255, 0)');
     annotation.text = 'Frankfurt';
     component.annotation = annotation;
@@ -145,8 +134,7 @@ describe('AnnotationRendererComponent', () => {
 
     fixture.nativeElement.querySelector('span.annotation-label').click();
 
-    fixture.whenStable().then(() => {
-      expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
-    });
+    await fixture.whenStable();
+    expect(component.clickAnnotation).toHaveBeenCalledWith(annotation);
   });
 });

projects/ngx-annotate-text/eslint.config.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
+ 
 import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Annotation } from '../../models/annotation.model';

projects/ngx-annotate-text/src/lib/components/annotation-renderer/annotation-renderer.component.spec.ts

@@ -7,7 +7,6 @@ import { FormsModule } from '@angular/forms';
 import { NgxAnnotationRendererComponentInterface } from '../../projects/ngx-annotate-text/src/lib/models/annotation-renderer-component.model';
 
 @Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'app-root',
   standalone: true,
   imports: [NgxAnnotateTextModule, FormsModule],

projects/ngx-annotate-text/src/lib/components/ngx-annotate-text/ngx-annotate-text.component.spec.ts

@@ -13,7 +13,9 @@ describe('MyAnnotationRendererComponent', () => {
     fixture = TestBed.createComponent(MyAnnotationRendererComponent);
     component = fixture.componentInstance;
     component.annotation = new Annotation(7, 12, 'noun', 'red');
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     component.clickAnnotation = () => {};
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     component.removeAnnotation = () => {};
     fixture.detectChanges();
   });