Skip to content

Commit 221bf42

Browse files
the-ultthe-ult
authored
chore(lint): re-enable eslint plugin angular (#237)
1 parent 0cbd0fb commit 221bf42

30 files changed

+224
-157
lines changed

‎.eslintrc.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"root": true,
33
"ignorePatterns": ["**/*"],
4-
"plugins": ["@nrwl/nx"],
4+
"plugins": ["@nrwl/nx", "testing-library"],
55
"overrides": [
66
{
77
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -102,20 +102,20 @@
102102
]
103103
}
104104
},
105-
{
106-
"files": ["*.spec.ts"],
107-
"extends": ["plugin:jest/recommended"],
108-
"rules": {
109-
"jest/expect-expect": "off"
110-
}
111-
},
112105
{
113106
"files": ["*.html"],
114107
"rules": {}
115108
},
116109
{
117110
"files": ["*.ts", "*.js"],
118111
"extends": ["prettier"]
112+
},
113+
{
114+
"files": ["*.spec.ts"],
115+
"extends": ["plugin:testing-library/angular"],
116+
"rules": {
117+
"testing-library/prefer-explicit-assert": "error"
118+
}
119119
}
120120
]
121121
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@
2727
]
2828
}
2929
},
30+
{
31+
"files": ["*.spec.ts"],
32+
"env": {
33+
"jasmine": true
34+
},
35+
"plugins": ["jasmine"],
36+
"extends": ["plugin:jasmine/recommended"]
37+
},
3038
{
3139
"files": ["*.html"],
3240
"extends": ["plugin:@nrwl/nx/angular-template"],

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ it('https://github.com/testing-library/angular-testing-library/issues/222', asyn
77
},
88
});
99

10-
screen.getByText('Hello Sarah');
10+
expect(screen.getByText('Hello Sarah')).toBeTruthy();
1111
rerender({ name: 'Mark' });
12-
screen.getByText('Hello Mark');
12+
13+
expect(screen.getByText('Hello Mark')).toBeTruthy();
1314
});

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"include": ["**/*.ts"],
4+
"compilerOptions": {
5+
"types": ["jasmine", "node", "@testing-library/jasmine-dom"]
6+
}
7+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"extends": "./tsconfig.json",
33
"compilerOptions": {
44
"outDir": "./out-tsc/spec",
5-
"types": ["jasmine", "node"]
5+
"types": ["jasmine", "node", "@testing-library/jasmine-dom"]
66
},
77
"files": ["src/test.ts", "src/polyfills.ts"],
8-
"include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
8+
"include": ["**/*.spec.ts", "**/*.d.ts"]
99
}

‎apps/example-app/.eslintrc.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,17 @@
2727
]
2828
}
2929
},
30+
{
31+
"files": ["*.spec.ts"],
32+
"env": {
33+
"jest": true
34+
},
35+
"extends": ["plugin:jest/recommended", "plugin:jest/style", "plugin:jest-dom/recommended"],
36+
"rules": {
37+
"jest/consistent-test-it": ["error"],
38+
"jest/expect-expect": "off"
39+
}
40+
},
3041
{
3142
"files": ["*.html"],
3243
"extends": ["plugin:@nrwl/nx/angular-template"],

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { ComponentWithProviderComponent } from './examples/05-component-provider
2121
import { WithNgRxStoreComponent, reducer } from './examples/06-with-ngrx-store';
2222
import { WithNgRxMockStoreComponent } from './examples/07-with-ngrx-mock-store';
2323
import { MasterComponent, DetailComponent, HiddenDetailComponent } from './examples/09-router';
24+
import { ScrollingModule } from '@angular/cdk/scrolling';
2425

2526
function reducerItems() {
2627
return ['One', 'Two', 'Three'];
@@ -53,6 +54,7 @@ function reducerItems() {
5354
MatSidenavModule,
5455
MatToolbarModule,
5556
AppRoutingModule,
57+
ScrollingModule,
5658
StoreModule.forRoot({
5759
value: reducer,
5860
items: reducerItems,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,5 @@ test('works with provideMockStore', async () => {
2323

2424
fireEvent.click(screen.getByText(/seven/i));
2525

26-
expect(store.dispatch).toBeCalledWith({ type: '[Item List] send', item: 'Seven' });
26+
expect(store.dispatch).toHaveBeenCalledWith({ type: '[Item List] send', item: 'Seven' });
2727
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ test('renders the provided customers with manual mock', async () => {
2929
});
3030

3131
const listItems = screen.getAllByRole('listitem');
32-
expect(listItems.length).toBe(customers.length);
32+
expect(listItems).toHaveLength(customers.length);
3333

3434
customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i')));
3535
});
@@ -59,7 +59,7 @@ test('renders the provided customers with createMock', async () => {
5959
});
6060

6161
const listItems = screen.getAllByRole('listitem');
62-
expect(listItems.length).toBe(customers.length);
62+
expect(listItems).toHaveLength(customers.length);
6363

6464
customers.forEach((customer) => screen.getByText(new RegExp(customer.name, 'i')));
6565
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ test('closes the dialog via the backdrop', async () => {
3737

3838
// using fireEvent because of:
3939
// unable to click element as it has or inherits pointer-events set to "none"
40+
// eslint-disable-next-line testing-library/no-node-access
4041
fireEvent.click(document.querySelector('.cdk-overlay-backdrop'));
4142

4243
await waitForElementToBeRemoved(() => screen.getByRole('dialog'));

‎package.json

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@
5050
},
5151
"devDependencies": {
5252
"@angular-devkit/build-angular": "12.1.0",
53-
"@angular-eslint/eslint-plugin": "~12.0.0",
54-
"@angular-eslint/eslint-plugin-template": "~12.0.0",
55-
"@angular-eslint/template-parser": "~12.0.0",
53+
"@angular-eslint/eslint-plugin": "~12.2.0",
54+
"@angular-eslint/eslint-plugin-template": "~12.2.0",
55+
"@angular-eslint/template-parser": "~12.2.0",
5656
"@angular/cli": "12.1.0",
5757
"@angular/compiler-cli": "12.1.1",
5858
"@angular/language-service": "12.1.1",
@@ -63,19 +63,21 @@
6363
"@nrwl/node": "12.5.1",
6464
"@nrwl/nx-plugin": "12.5.1",
6565
"@nrwl/workspace": "12.5.1",
66+
"@testing-library/jasmine-dom": "^1.2.0",
6667
"@testing-library/jest-dom": "^5.11.10",
6768
"@types/jasmine": "~3.5.0",
6869
"@types/jest": "^26.0.23",
6970
"@types/node": "14.14.37",
70-
"@typescript-eslint/eslint-plugin": "4.22.0",
71-
"@typescript-eslint/parser": "4.22.0",
71+
"@typescript-eslint/eslint-plugin": "4.28.2",
72+
"@typescript-eslint/parser": "4.28.2",
7273
"cpy-cli": "^3.1.1",
7374
"eslint": "^7.25.0",
74-
"eslint-config-prettier": "8.2.0",
75-
"eslint-plugin-import": "^2.23.4",
76-
"eslint-plugin-jest": "^24.3.5",
77-
"eslint-plugin-jest-dom": "3.8.0",
78-
"eslint-plugin-testing-library": "^4.0.1",
75+
"eslint-config-prettier": "8.3.0",
76+
"eslint-plugin-import": "2.23.4",
77+
"eslint-plugin-jasmine": "^4.1.2",
78+
"eslint-plugin-jest": "24.3.6",
79+
"eslint-plugin-jest-dom": "3.9.0",
80+
"eslint-plugin-testing-library": "4.9.0",
7981
"husky": "^6.0.0",
8082
"jasmine-core": "~3.7.0",
8183
"jasmine-spec-reporter": "~5.0.0",

‎projects/jest-utils/.eslintrc.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,17 @@
2727
]
2828
}
2929
},
30+
{
31+
"files": ["*.spec.ts"],
32+
"env": {
33+
"jest": true
34+
},
35+
"extends": ["plugin:jest/recommended", "plugin:jest/style", "plugin:jest-dom/recommended"],
36+
"rules": {
37+
"jest/consistent-test-it": ["error"],
38+
"jest/expect-expect": "off"
39+
}
40+
},
3041
{
3142
"files": ["*.html"],
3243
"extends": ["plugin:@nrwl/nx/angular-template"],

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Component } from '@angular/core';
22
import { TestBed } from '@angular/core/testing';
3-
import { fireEvent, render } from '@testing-library/angular';
3+
import { fireEvent, render, screen } from '@testing-library/angular';
44

55
import { createMock, provideMock, Mock } from '../src/public_api';
66

@@ -30,22 +30,22 @@ test('mocks all functions', () => {
3030
});
3131

3232
test('provides a mock service', async () => {
33-
const { getByText } = await render(FixtureComponent, {
33+
await render(FixtureComponent, {
3434
providers: [provideMock(FixtureService)],
3535
});
3636
const service = TestBed.inject(FixtureService);
3737

38-
fireEvent.click(getByText('Print'));
38+
fireEvent.click(screen.getByText('Print'));
3939
expect(service.print).toHaveBeenCalledTimes(1);
4040
});
4141

4242
test('is possible to write a mock implementation', async () => {
43-
const { getByText } = await render(FixtureComponent, {
43+
await render(FixtureComponent, {
4444
providers: [provideMock(FixtureService)],
4545
});
4646

4747
const service = TestBed.inject(FixtureService) as Mock<FixtureService>;
4848

49-
fireEvent.click(getByText('Print'));
49+
fireEvent.click(screen.getByText('Print'));
5050
expect(service.print).toHaveBeenCalled();
5151
});

‎projects/testing-library/.eslintrc.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,17 @@
2727
]
2828
}
2929
},
30+
{
31+
"files": ["*.spec.ts"],
32+
"env": {
33+
"jest": true
34+
},
35+
"extends": ["plugin:jest/recommended", "plugin:jest/style", "plugin:jest-dom/recommended"],
36+
"rules": {
37+
"jest/consistent-test-it": ["error"],
38+
"jest/expect-expect": "off"
39+
}
40+
},
3041
{
3142
"files": ["*.html"],
3243
"extends": ["plugin:@nrwl/nx/angular-template"],

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ class FixtureComponent {
1010
}
1111

1212
describe('Angular auto clean up - previous components only get cleanup up on init (based on root-id)', () => {
13-
test('first', async () => {
13+
it('first', async () => {
1414
await render(FixtureComponent, {
1515
componentProperties: {
1616
name: 'first',
1717
},
1818
});
1919
});
2020

21-
test('second', async () => {
21+
it('second', async () => {
2222
await render(FixtureComponent, {
2323
componentProperties: {
2424
name: 'second',
@@ -29,13 +29,13 @@ describe('Angular auto clean up - previous components only get cleanup up on ini
2929
});
3030

3131
describe('ATL auto clean up - after each test the containers get removed', () => {
32-
test('first', async () => {
32+
it('first', async () => {
3333
await render(FixtureComponent, {
3434
removeAngularAttributes: true,
3535
});
3636
});
3737

38-
test('second', () => {
39-
expect(document.body.innerHTML).toEqual('');
38+
it('second', () => {
39+
expect(document.body).toBeEmptyDOMElement();
4040
});
4141
});

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component } from '@angular/core';
2-
import { render } from '../src/public_api';
2+
import { render, screen } from '../src/public_api';
33

44
@Component({
55
selector: 'atl-fixture',
@@ -14,20 +14,22 @@ test('debug', async () => {
1414
jest.spyOn(console, 'log').mockImplementation();
1515
const { debug } = await render(FixtureComponent);
1616

17+
// eslint-disable-next-line testing-library/no-debug
1718
debug();
1819

19-
expect(console.log).toBeCalledWith(expect.stringContaining('rawr'));
20+
expect(console.log).toHaveBeenCalledWith(expect.stringContaining('rawr'));
2021
(<any>console.log).mockRestore();
2122
});
2223

2324
test('debug allows to be called with an element', async () => {
2425
jest.spyOn(console, 'log').mockImplementation();
25-
const { debug, getByTestId } = await render(FixtureComponent);
26-
const btn = getByTestId('btn');
26+
const { debug } = await render(FixtureComponent);
27+
const btn = screen.getByTestId('btn');
2728

29+
// eslint-disable-next-line testing-library/no-debug
2830
debug(btn);
2931

30-
expect(console.log).not.toBeCalledWith(expect.stringContaining('rawr'));
31-
expect(console.log).toBeCalledWith(expect.stringContaining(`I'm a button`));
32+
expect(console.log).not.toHaveBeenCalledWith(expect.stringContaining('rawr'));
33+
expect(console.log).toHaveBeenCalledWith(expect.stringContaining(`I'm a button`));
3234
(<any>console.log).mockRestore();
3335
});

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
22
import { fakeAsync, tick } from '@angular/core/testing';
33
import { FormControl, ReactiveFormsModule } from '@angular/forms';
44
import { delay } from 'rxjs/operators';
5-
import { render, fireEvent } from '../src/public_api';
5+
import { render, fireEvent, screen } from '../src/public_api';
66

77
@Component({
88
selector: 'atl-fixture',
@@ -21,23 +21,23 @@ class FixtureComponent implements OnInit {
2121
}
2222

2323
describe('detectChanges', () => {
24-
test('does not recognize change if execution is delayed', async () => {
25-
const { getByTestId } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
24+
it('does not recognize change if execution is delayed', async () => {
25+
await render(FixtureComponent, { imports: [ReactiveFormsModule] });
2626

27-
fireEvent.input(getByTestId('input'), {
27+
fireEvent.input(screen.getByTestId('input'), {
2828
target: {
2929
value: 'What a great day!',
3030
},
3131
});
32-
expect(getByTestId('button').innerHTML).toBe('Button');
32+
expect(screen.getByTestId('button').innerHTML).toBe('Button');
3333
});
3434

35-
test('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => {
36-
const { getByTestId, detectChanges } = await render(FixtureComponent, {
35+
it('exposes detectChanges triggering a change detection cycle', fakeAsync(async () => {
36+
const { detectChanges } = await render(FixtureComponent, {
3737
imports: [ReactiveFormsModule],
3838
});
3939

40-
fireEvent.input(getByTestId('input'), {
40+
fireEvent.input(screen.getByTestId('input'), {
4141
target: {
4242
value: 'What a great day!',
4343
},
@@ -46,19 +46,19 @@ describe('detectChanges', () => {
4646
tick(500);
4747
detectChanges();
4848

49-
expect(getByTestId('button').innerHTML).toBe('Button updated after 400ms');
49+
expect(screen.getByTestId('button').innerHTML).toBe('Button updated after 400ms');
5050
}));
5151

52-
test('does not throw on a destroyed fixture', async () => {
53-
const { getByTestId, fixture } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
52+
it('does not throw on a destroyed fixture', async () => {
53+
const { fixture } = await render(FixtureComponent, { imports: [ReactiveFormsModule] });
5454

5555
fixture.destroy();
5656

57-
fireEvent.input(getByTestId('input'), {
57+
fireEvent.input(screen.getByTestId('input'), {
5858
target: {
5959
value: 'What a great day!',
6060
},
6161
});
62-
expect(getByTestId('button').innerHTML).toBe('Button');
62+
expect(screen.getByTestId('button').innerHTML).toBe('Button');
6363
});
6464
});

0 commit comments

Comments
 (0)