chore: fix linting problems (#208)

Author: timdeschryver

.eslintrc.json

@@ -49,7 +49,7 @@
         ],
         "@typescript-eslint/no-unused-expressions": "error",
         "@typescript-eslint/prefer-function-type": "error",
-        "@typescript-eslint/quotes": ["error", "single"],
+        "@typescript-eslint/quotes": "off",
         "@typescript-eslint/type-annotation-spacing": "error",
         "@typescript-eslint/no-explicit-any": "off",
         "arrow-body-style": "error",
@@ -107,9 +107,10 @@
     },
     {
       "files": ["*.spec.ts"],
-      "extends": ["plugin:testing-library/angular", "plugin:jest-dom/recommended"],
+      "extends": ["plugin:jest/recommended"],
       "rules": {
-        "testing-library/prefer-explicit-assert": "error"
+        "jest/no-done-callback": "off",
+        "jest/expect-expect": "off"
       }
     },
     {

angular.json

@@ -71,7 +71,7 @@
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
-            "lintFilePatterns": ["apps/example-app/src/**/*.ts", "apps/example-app/src/**/*.html"]
+            "lintFilePatterns": ["apps/example-app/**/*.ts", "apps/example-app/**/*.html"]
           }
         },
         "test": {
@@ -106,11 +106,7 @@
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
-            "lintFilePatterns": [
-              "projects/testing-library/src/**/*.ts",
-              "projects/testing-library/src/**/*.html",
-              "projects/testing-library/src/**/*.html"
-            ]
+            "lintFilePatterns": ["projects/testing-library/**/*.ts", "projects/testing-library/**/*.html"]
           }
         },
         "build": {
@@ -159,11 +155,7 @@
         "lint": {
           "builder": "@nrwl/linter:eslint",
           "options": {
-            "lintFilePatterns": [
-              "projects/jest-utils/src/**/*.ts",
-              "projects/jest-utils/src/**/*.html",
-              "projects/jest-utils/src/**/*.html"
-            ]
+            "lintFilePatterns": ["projects/jest-utils/**/*.ts", "projects/jest-utils/**/*.html"]
           }
         },
         "build": {

apps/example-app/.eslintrc.json

@@ -28,6 +28,10 @@
       },
       "plugins": ["@angular-eslint/eslint-plugin", "@typescript-eslint"]
     },
+    {
+      "files": ["*.spec.ts"],
+      "extends": ["plugin:testing-library/angular", "plugin:jest-dom/recommended"]
+    },
     {
       "files": ["*.html"],
       "extends": ["plugin:@nrwl/nx/angular-template"],

apps/example-app/src/app/issues/issue-106.spec.ts

@@ -6,7 +6,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
   template: `<button (click)="toggleShow()" data-testid="toggle">toggle</button>
     <div *ngIf="show$ | async" data-testid="getme">Here I am</div>`,
 })
-export class TestSelectComponent {
+class TestSelectComponent {
   showSubj = new BehaviorSubject(false);
   show$ = this.showSubj.asObservable();
 

package.json

@@ -66,9 +66,10 @@
     "@typescript-eslint/eslint-plugin": "4.22.0",
     "@typescript-eslint/parser": "4.22.0",
     "cpy-cli": "^3.1.1",
-    "eslint": "7.24.0",
+    "eslint": "^7.25.0",
     "eslint-config-prettier": "8.2.0",
     "eslint-plugin-import": "latest",
+    "eslint-plugin-jest": "^24.3.5",
     "eslint-plugin-jest-dom": "3.8.0",
     "eslint-plugin-testing-library": "^4.0.1",
     "husky": "^4.2.5",

projects/jest-utils/.eslintrc.json

@@ -13,15 +13,15 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "lib",
+            "prefix": "atl",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
             "type": "element",
-            "prefix": "lib",
+            "prefix": "atl",
             "style": "kebab-case"
           }
         ]

projects/jest-utils/tests/create-mock.spec.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
+import { fireEvent, render } from '@testing-library/angular';
 
 import { createMock, provideMock, Mock } from '../src/public_api';
-import { render, fireEvent } from '../../testing-library/src/public_api';
 
 class FixtureService {
   constructor(private foo: string, public bar: string) {}
@@ -13,10 +13,10 @@ class FixtureService {
 }
 
 @Component({
-  selector: 'fixture',
+  selector: 'atl-fixture',
   template: ` <button (click)="print()">Print</button> `,
 })
-export class FixtureComponent {
+class FixtureComponent {
   constructor(private service: FixtureService) {}
 
   print() {
@@ -39,6 +39,7 @@ it('provides a mock service', async () => {
   expect(service.print).toHaveBeenCalledTimes(1);
 });
 
+// eslint-disable-next-line jest/expect-expect
 it('is possible to write a mock implementation', async (done) => {
   const { getByText } = await render(FixtureComponent, {
     providers: [provideMock(FixtureService)],

projects/testing-library/.eslintrc.json

@@ -13,15 +13,15 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "lib",
+            "prefix": ["atl"],
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
             "type": "element",
-            "prefix": "lib",
+            "prefix": ["atl"],
             "style": "kebab-case"
           }
         ]

projects/testing-library/src/lib/testing-library.ts

@@ -358,6 +358,7 @@ if (typeof afterEach === 'function' && !process.env.ATL_SKIP_AUTO_CLEANUP) {
   });
 }
 
+// TODO: rename to `atl-wrapper-component`
 // eslint-disable-next-line @angular-eslint/component-selector
 @Component({ selector: 'wrapper-component', template: '' })
 class WrapperComponent {}

projects/testing-library/tests/auto-cleanup.spec.ts

@@ -2,8 +2,8 @@ import { Component, Input } from '@angular/core';
 import { render } from '../src/public_api';
 
 @Component({
-  selector: 'fixture',
-  template: ` Hello {{ name }}! `,
+  selector: 'atl-fixture',
+  template: `Hello {{ name }}!`,
 })
 class FixtureComponent {
   @Input() name: string;

projects/testing-library/tests/config.spec.ts

@@ -4,7 +4,7 @@ import { render, configure } from '../src/public_api';
 import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
 
 @Component({
-  selector: 'app-fixture',
+  selector: 'atl-fixture',
   template: `
     <form [formGroup]="form" name="form">
       <div>

projects/testing-library/tests/debug.spec.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { render } from '../src/public_api';
 
 @Component({
-  selector: 'fixture',
+  selector: 'atl-fixture',
   template: `
     <p>rawr</p>
     <button data-testid="btn">I'm a button</button>
@@ -11,7 +11,7 @@ import { render } from '../src/public_api';
 class FixtureComponent {}
 
 test('debug', async () => {
-  jest.spyOn(console, 'log').mockImplementation(() => {});
+  jest.spyOn(console, 'log').mockImplementation();
   const { debug } = await render(FixtureComponent);
 
   debug();
@@ -21,7 +21,7 @@ test('debug', async () => {
 });
 
 test('debug allows to be called with an element', async () => {
-  jest.spyOn(console, 'log').mockImplementation(() => {});
+  jest.spyOn(console, 'log').mockImplementation();
   const { debug, getByTestId } = await render(FixtureComponent);
   const btn = getByTestId('btn');
 

projects/testing-library/tests/detect-changes.spec.ts

@@ -5,7 +5,7 @@ import { delay } from 'rxjs/operators';
 import { render, fireEvent } from '../src/public_api';
 
 @Component({
-  selector: 'fixture',
+  selector: 'atl-fixture',
   template: `
     <input type="text" data-testid="input" [formControl]="inputControl" />
     <button data-testid="button">{{ caption }}</button>

projects/testing-library/tests/find-by.spec.ts

@@ -4,7 +4,7 @@ import { render, screen } from '../src/public_api';
 import { mapTo } from 'rxjs/operators';
 
 @Component({
-  selector: 'fixture',
+  selector: 'atl-fixture',
   template: ` <div>{{ result | async }}</div> `,
 })
 class FixtureComponent {

projects/testing-library/tests/fire-event.spec.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { render, fireEvent } from '../src/public_api';
 
 @Component({
-  selector: 'fixture',
+  selector: 'atl-fixture',
   template: ` <input type="text" data-testid="input" /> `,
 })
 class FixtureComponent {}

projects/testing-library/tests/issues/188.spec.ts

@@ -5,7 +5,7 @@ import { render } from '../../src/public_api';
 @Component({
   template: `<h1>Hello {{ formattedName }}</h1>`,
 })
-export class BugOnChangeComponent implements OnChanges {
+class BugOnChangeComponent implements OnChanges {
   @Input() name: string;
 
   formattedName: string;

projects/testing-library/tests/issues/67.spec.ts

@@ -13,7 +13,7 @@ import { render } from '../../src/public_api';
     </div>
   `,
 })
-export class BugGetByLabelTextComponent {}
+class BugGetByLabelTextComponent {}
 
 it('first step to reproduce the bug: skip this test to avoid the error or remove the for attribute of label', async () => {
   expect(await render(BugGetByLabelTextComponent)).toBeDefined();

projects/testing-library/tests/navigate.spec.ts

@@ -4,7 +4,7 @@ import { Router } from '@angular/router';
 import { render } from '../src/public_api';
 
 @Component({
-  selector: 'fixture',
+  selector: 'atl-fixture',
   template: ``,
 })
 class FixtureComponent {}

projects/testing-library/tests/providers/component-provider.spec.ts

@@ -43,17 +43,17 @@ test('shows the provided service value with template syntax', async () => {
 });
 
 @Injectable()
-export class Service {
+class Service {
   foo() {
     return 'foo';
   }
 }
 
 @Component({
-  selector: 'fixture-component',
+  selector: 'atl-fixture',
   template: '{{service.foo()}}',
   providers: [Service],
 })
-export class FixtureComponent {
+class FixtureComponent {
   constructor(public service: Service) {}
 }

projects/testing-library/tests/providers/module-provider.spec.ts

@@ -53,16 +53,16 @@ test('shows the provided service value with template syntax', async () => {
 });
 
 @Injectable()
-export class Service {
+class Service {
   foo() {
     return 'foo';
   }
 }
 
 @Component({
-  selector: 'fixture-component',
+  selector: 'atl-fixture',
   template: '{{service.foo()}}',
 })
-export class FixtureComponent {
+class FixtureComponent {
   constructor(public service: Service) {}
 }

projects/testing-library/tests/render-template.spec.ts

@@ -1,5 +1,3 @@
-/* eslint-disable testing-library/no-container */
-/* eslint-disable testing-library/render-result-naming-convention */
 import { Directive, HostListener, ElementRef, Input, Output, EventEmitter, Component } from '@angular/core';
 
 import { render, fireEvent } from '../src/public_api';
@@ -8,7 +6,7 @@ import { render, fireEvent } from '../src/public_api';
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[onOff]',
 })
-export class OnOffDirective {
+class OnOffDirective {
   @Input() on = 'on';
   @Input() off = 'off';
   @Output() clicked = new EventEmitter<string>();
@@ -27,7 +25,7 @@ export class OnOffDirective {
   // eslint-disable-next-line @angular-eslint/directive-selector
   selector: '[update]',
 })
-export class UpdateInputDirective {
+class UpdateInputDirective {
   @Input()
   set update(value: any) {
     this.el.nativeElement.textContent = value;
@@ -41,7 +39,7 @@ export class UpdateInputDirective {
   selector: 'greeting',
   template: 'Hello {{ name }}!',
 })
-export class GreetingComponent {
+class GreetingComponent {
   @Input() name = 'World';
 }
 
@@ -59,7 +57,7 @@ test('the component renders', async () => {
   });
 
   expect(component.container.querySelector('greeting')).toBeInTheDocument();
-  expect(component.getByText('Hello Angular!'));
+  expect(component.getByText('Hello Angular!')).toBeInTheDocument();
 });
 
 test('the directive renders (compatibility with the deprecated signature)', async () => {
@@ -70,7 +68,7 @@ test('the directive renders (compatibility with the deprecated signature)', asyn
   expect(component.container.querySelector('[onoff]')).toBeInTheDocument();
 });
 
-test.only('uses the default props', async () => {
+test('uses the default props', async () => {
   const component = await render('<div onOff></div>', {
     declarations: [OnOffDirective],
   });

projects/testing-library/tests/render.spec.ts

@@ -13,7 +13,7 @@ import { TestBed } from '@angular/core/testing';
 import { render, fireEvent } from '../src/public_api';
 
 @Component({
-  selector: 'fixture',
+  selector: 'atl-fixture',
   template: `
     <input type="text" data-testid="input" />
     <button>button</button>
@@ -83,7 +83,7 @@ describe('animationModule', () => {
 
 describe('Angular component life-cycle hooks', () => {
   @Component({
-    selector: 'fixture',
+    selector: 'atl-fixture',
     template: ` {{ name }} `,
   })
   class FixtureWithNgOnChangesComponent implements OnInit, OnChanges {