chore(lint): re-enable eslint plugin angular

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nrwl/nx", "testing-library"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -102,20 +102,20 @@
         ]
       }
     },
-    {
-      "files": ["*.spec.ts"],
-      "extends": ["plugin:jest/recommended"],
-      "rules": {
-        "jest/expect-expect": "off"
-      }
-    },
     {
       "files": ["*.html"],
       "rules": {}
     },
     {
       "files": ["*.ts", "*.js"],
       "extends": ["prettier"]
+    },
+    {
+      "files": ["*.spec.ts"],
+      "extends": ["plugin:testing-library/angular"],
+      "rules": {
+        "testing-library/prefer-explicit-assert": "error"
+      }
     }
   ]
 }

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

@@ -27,6 +27,14 @@
         ]
       }
     },
+    {
+      "files": ["*.spec.ts"],
+      "env": {
+        "jasmine": true
+      },
+      "plugins": ["jasmine"],
+      "extends": ["plugin:jasmine/recommended"]
+    },
     {
       "files": ["*.html"],
       "extends": ["plugin:@nrwl/nx/angular-template"],

apps/example-app-karma/src/app/issues/issue-222.spec.ts

@@ -7,7 +7,8 @@ it('https://github.com/testing-library/angular-testing-library/issues/222', asyn
     },
   });
 
-  screen.getByText('Hello Sarah');
+  expect(screen.getByText('Hello Sarah')).toBeTruthy();
   rerender({ name: 'Mark' });
-  screen.getByText('Hello Mark');
+
+  expect(screen.getByText('Hello Mark')).toBeTruthy();
 });

apps/example-app-karma/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "types": ["jasmine", "node", "@testing-library/jasmine-dom"]
+  }
+}

apps/example-app-karma/tsconfig.spec.json

@@ -2,8 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": ["jasmine", "node"]
+    "types": ["jasmine", "node", "@testing-library/jasmine-dom"]
   },
   "files": ["src/test.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }

apps/example-app/.eslintrc.json

@@ -27,6 +27,17 @@
         ]
       }
     },
+    {
+      "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:@nrwl/nx/angular-template"],

apps/example-app/src/app/app.module.ts

@@ -21,6 +21,7 @@ import { ComponentWithProviderComponent } from './examples/05-component-provider
 import { WithNgRxStoreComponent, reducer } from './examples/06-with-ngrx-store';
 import { WithNgRxMockStoreComponent } from './examples/07-with-ngrx-mock-store';
 import { MasterComponent, DetailComponent, HiddenDetailComponent } from './examples/09-router';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 function reducerItems() {
   return ['One', 'Two', 'Three'];
@@ -53,6 +54,7 @@ function reducerItems() {
     MatSidenavModule,
     MatToolbarModule,
     AppRoutingModule,
+    ScrollingModule,
     StoreModule.forRoot({
       value: reducer,
       items: reducerItems,

apps/example-app/src/app/examples/07-with-ngrx-mock-store.spec.ts

@@ -23,5 +23,5 @@ test('works with provideMockStore', async () => {
 
   fireEvent.click(screen.getByText(/seven/i));
 
-  expect(store.dispatch).toBeCalledWith({ type: '[Item List] send', item: 'Seven' });
+  expect(store.dispatch).toHaveBeenCalledWith({ type: '[Item List] send', item: 'Seven' });
 });

apps/example-app/src/app/examples/12-service-component.spec.ts

@@ -29,7 +29,7 @@ test('renders the provided customers with manual mock', async () => {
   });
 
   const listItems = screen.getAllByRole('listitem');
-  expect(listItems.length).toBe(customers.length);
+  expect(listItems).toHaveLength(customers.length);
 
   customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i')));
 });
@@ -59,7 +59,7 @@ test('renders the provided customers with createMock', async () => {
   });
 
   const listItems = screen.getAllByRole('listitem');
-  expect(listItems.length).toBe(customers.length);
+  expect(listItems).toHaveLength(customers.length);
 
   customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i')));
 });

apps/example-app/src/app/examples/15-dialog.component.spec.ts

@@ -37,6 +37,7 @@ test('closes the dialog via the backdrop', async () => {
 
   // using fireEvent because of:
   // unable to click element as it has or inherits pointer-events set to "none"
+  // eslint-disable-next-line testing-library/no-node-access
   fireEvent.click(document.querySelector('.cdk-overlay-backdrop'));
 
   await waitForElementToBeRemoved(() => screen.getByRole('dialog'));

package.json

@@ -50,9 +50,9 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "12.1.0",
-    "@angular-eslint/eslint-plugin": "~12.0.0",
-    "@angular-eslint/eslint-plugin-template": "~12.0.0",
-    "@angular-eslint/template-parser": "~12.0.0",
+    "@angular-eslint/eslint-plugin": "~12.2.0",
+    "@angular-eslint/eslint-plugin-template": "~12.2.0",
+    "@angular-eslint/template-parser": "~12.2.0",
     "@angular/cli": "12.1.0",
     "@angular/compiler-cli": "12.1.1",
     "@angular/language-service": "12.1.1",
@@ -63,19 +63,21 @@
     "@nrwl/node": "12.5.1",
     "@nrwl/nx-plugin": "12.5.1",
     "@nrwl/workspace": "12.5.1",
+    "@testing-library/jasmine-dom": "^1.2.0",
     "@testing-library/jest-dom": "^5.11.10",
     "@types/jasmine": "~3.5.0",
     "@types/jest": "^26.0.23",
     "@types/node": "14.14.37",
-    "@typescript-eslint/eslint-plugin": "4.22.0",
-    "@typescript-eslint/parser": "4.22.0",
+    "@typescript-eslint/eslint-plugin": "4.28.2",
+    "@typescript-eslint/parser": "4.28.2",
     "cpy-cli": "^3.1.1",
     "eslint": "^7.25.0",
-    "eslint-config-prettier": "8.2.0",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-jest": "^24.3.5",
-    "eslint-plugin-jest-dom": "3.8.0",
-    "eslint-plugin-testing-library": "^4.0.1",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-import": "2.23.4",
+    "eslint-plugin-jasmine": "^4.1.2",
+    "eslint-plugin-jest": "24.3.6",
+    "eslint-plugin-jest-dom": "3.9.0",
+    "eslint-plugin-testing-library": "4.9.0",
     "husky": "^6.0.0",
     "jasmine-core": "~3.7.0",
     "jasmine-spec-reporter": "~5.0.0",

projects/jest-utils/.eslintrc.json

@@ -27,6 +27,17 @@
         ]
       }
     },
+    {
+      "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:@nrwl/nx/angular-template"],

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { fireEvent, render } from '@testing-library/angular';
+import { fireEvent, render, screen } from '@testing-library/angular';
 
 import { createMock, provideMock, Mock } from '../src/public_api';
 
@@ -30,22 +30,22 @@ test('mocks all functions', () => {
 });
 
 test('provides a mock service', async () => {
-  const { getByText } = await render(FixtureComponent, {
+  await render(FixtureComponent, {
     providers: [provideMock(FixtureService)],
   });
   const service = TestBed.inject(FixtureService);
 
-  fireEvent.click(getByText('Print'));
+  fireEvent.click(screen.getByText('Print'));
   expect(service.print).toHaveBeenCalledTimes(1);
 });
 
 test('is possible to write a mock implementation', async () => {
-  const { getByText } = await render(FixtureComponent, {
+  await render(FixtureComponent, {
     providers: [provideMock(FixtureService)],
   });
 
   const service = TestBed.inject(FixtureService) as Mock<FixtureService>;
 
-  fireEvent.click(getByText('Print'));
+  fireEvent.click(screen.getByText('Print'));
   expect(service.print).toHaveBeenCalled();
 });

projects/testing-library/.eslintrc.json

@@ -27,6 +27,17 @@
         ]
       }
     },
+    {
+      "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:@nrwl/nx/angular-template"],

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

@@ -10,15 +10,15 @@ class FixtureComponent {
 }
 
 describe('Angular auto clean up - previous components only get cleanup up on init (based on root-id)', () => {
-  test('first', async () => {
+  it('first', async () => {
     await render(FixtureComponent, {
       componentProperties: {
         name: 'first',
       },
     });
   });
 
-  test('second', async () => {
+  it('second', async () => {
     await render(FixtureComponent, {
       componentProperties: {
         name: 'second',
@@ -29,13 +29,13 @@ describe('Angular auto clean up - previous components only get cleanup up on ini
 });
 
 describe('ATL auto clean up - after each test the containers get removed', () => {
-  test('first', async () => {
+  it('first', async () => {
     await render(FixtureComponent, {
       removeAngularAttributes: true,
     });
   });
 
-  test('second', () => {
-    expect(document.body.innerHTML).toEqual('');
+  it('second', () => {
+    expect(document.body).toBeEmptyDOMElement();
   });
 });

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { render } from '../src/public_api';
+import { render, screen } from '../src/public_api';
 
 @Component({
   selector: 'atl-fixture',
@@ -14,20 +14,22 @@ test('debug', async () => {
   jest.spyOn(console, 'log').mockImplementation();
   const { debug } = await render(FixtureComponent);
 
+  // eslint-disable-next-line testing-library/no-debug
   debug();
 
-  expect(console.log).toBeCalledWith(expect.stringContaining('rawr'));
+  expect(console.log).toHaveBeenCalledWith(expect.stringContaining('rawr'));
   (<any>console.log).mockRestore();
 });
 
 test('debug allows to be called with an element', async () => {
   jest.spyOn(console, 'log').mockImplementation();
-  const { debug, getByTestId } = await render(FixtureComponent);
-  const btn = getByTestId('btn');
+  const { debug } = await render(FixtureComponent);
+  const btn = screen.getByTestId('btn');
 
+  // eslint-disable-next-line testing-library/no-debug
   debug(btn);
 
-  expect(console.log).not.toBeCalledWith(expect.stringContaining('rawr'));
-  expect(console.log).toBeCalledWith(expect.stringContaining(`I'm a button`));
+  expect(console.log).not.toHaveBeenCalledWith(expect.stringContaining('rawr'));
+  expect(console.log).toHaveBeenCalledWith(expect.stringContaining(`I'm a button`));
   (<any>console.log).mockRestore();
 });

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

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { fakeAsync, tick } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { delay } from 'rxjs/operators';
-import { render, fireEvent } from '../src/public_api';
+import { render, fireEvent, screen } from '../src/public_api';
 
 @Component({
   selector: 'atl-fixture',
@@ -21,23 +21,23 @@ class FixtureComponent implements OnInit {
 }
 
 describe('detectChanges', () => {
-  test('does not recognize change if execution is delayed', async () => {
-    const { getByTestId } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
+  it('does not recognize change if execution is delayed', async () => {
+    await render(FixtureComponent, { imports: [ReactiveFormsModule] });
 
-    fireEvent.input(getByTestId('input'), {
+    fireEvent.input(screen.getByTestId('input'), {
       target: {
         value: 'What a great day!',
       },
     });
-    expect(getByTestId('button').innerHTML).toBe('Button');
+    expect(screen.getByTestId('button').innerHTML).toBe('Button');
   });
 
-  test('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => {
-    const { getByTestId, detectChanges } = await render(FixtureComponent, {
+  it('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => {
+    const { detectChanges } = await render(FixtureComponent, {
       imports: [ReactiveFormsModule],
     });
 
-    fireEvent.input(getByTestId('input'), {
+    fireEvent.input(screen.getByTestId('input'), {
       target: {
         value: 'What a great day!',
       },
@@ -46,19 +46,19 @@ describe('detectChanges', () => {
     tick(500);
     detectChanges();
 
-    expect(getByTestId('button').innerHTML).toBe('Button updated after 400ms');
+    expect(screen.getByTestId('button').innerHTML).toBe('Button updated after 400ms');
   }));
 
-  test('does not throw on a destroyed fixture', async () => {
-    const { getByTestId, fixture } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
+  it('does not throw on a destroyed fixture', async () => {
+    const { fixture } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
 
     fixture.destroy();
 
-    fireEvent.input(getByTestId('input'), {
+    fireEvent.input(screen.getByTestId('input'), {
       target: {
         value: 'What a great day!',
       },
     });
-    expect(getByTestId('button').innerHTML).toBe('Button');
+    expect(screen.getByTestId('button').innerHTML).toBe('Button');
   });
 });