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/src/app/issues/issue-222.spec.ts

@@ -7,7 +7,7 @@ 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/.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",
@@ -67,15 +67,15 @@
  "@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-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');
  });
 });

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

@@ -12,25 +12,25 @@ class FixtureComponent {
 }
 
 describe('screen', () => {
- test('waits for element to be added to the DOM', async () => {
+ it('waits for element to be added to the DOM', async () => {
  await render(FixtureComponent);
  await expect(screen.findByText('I am visible')).resolves.toBeTruthy();
  });
 
- test('rejects when something cannot be found', async () => {
+ it('rejects when something cannot be found', async () => {
  await render(FixtureComponent);
  await expect(screen.findByText('I am invisible', {}, { timeout: 40 })).rejects.toThrow('x');
  });
 });
 
 describe('rendered component', () => {
- test('waits for element to be added to the DOM', async () => {
- const { findByText } = await render(FixtureComponent);
- await expect(findByText('I am visible')).resolves.toBeTruthy();
+ it('waits for element to be added to the DOM', async () => {
+ await render(FixtureComponent);
+ await expect(screen.findByText('I am visible')).resolves.toBeTruthy();
  });
 
- test('rejects when something cannot be found', async () => {
- const { findByText } = await render(FixtureComponent);
- await expect(findByText('I am invisible', {}, { timeout: 40 })).rejects.toThrow('x');
+ it('rejects when something cannot be found', async () => {
+ await render(FixtureComponent);
+ await expect(screen.findByText('I am invisible', {}, { timeout: 40 })).rejects.toThrow('x');
  });
 });