Skip to content

Commit d33f0e9

Browse files
the-ultthe-ult
authored
chore(lint): add and apply eslint-plugin-testing-library (#201)
Closes #198
1 parent 25a4ca3 commit d33f0e9

13 files changed

+47
-37
lines changed

‎.eslintrc.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
},
3737
{
3838
"files": ["*.ts"],
39+
"plugins": ["eslint-plugin-import", "@angular-eslint/eslint-plugin", "@typescript-eslint"],
3940
"rules": {
4041
"@typescript-eslint/consistent-type-definitions": "error",
4142
"@typescript-eslint/dot-notation": "off",
@@ -102,8 +103,14 @@
102103
"markers": ["/"]
103104
}
104105
]
105-
},
106-
"plugins": ["eslint-plugin-import", "@angular-eslint/eslint-plugin", "@typescript-eslint"]
106+
}
107+
},
108+
{
109+
"files": ["*.spec.ts"],
110+
"extends": ["plugin:testing-library/angular", "plugin:jest-dom/recommended"],
111+
"rules": {
112+
"testing-library/prefer-explicit-assert": "error"
113+
}
107114
},
108115
{
109116
"files": ["*.html"],

‎apps/example-app/src/app/examples/00-single-component.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ test('renders the current value and can increment and decrement', async () => {
99
const decrementControl = screen.getByRole('button', { name: /decrement/i });
1010
const valueControl = screen.getByTestId('value');
1111

12-
expect(valueControl.textContent).toBe('0');
12+
expect(valueControl).toHaveTextContent('0');
1313

1414
fireEvent.click(incrementControl);
1515
fireEvent.click(incrementControl);
16-
expect(valueControl.textContent).toBe('2');
16+
expect(valueControl).toHaveTextContent('2');
1717

1818
fireEvent.click(decrementControl);
19-
expect(valueControl.textContent).toBe('1');
19+
expect(valueControl).toHaveTextContent('1');
2020
});

‎apps/example-app/src/app/examples/01-nested-component.spec.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ test('renders the current value and can increment and decrement', async () => {
1111
const decrementControl = screen.getByRole('button', { name: /decrement/i });
1212
const valueControl = screen.getByTestId('value');
1313

14-
expect(valueControl.textContent).toBe('0');
14+
expect(valueControl).toHaveTextContent('0');
1515

1616
fireEvent.click(incrementControl);
1717
fireEvent.click(incrementControl);
18-
expect(valueControl.textContent).toBe('2');
18+
expect(valueControl).toHaveTextContent('2');
1919

2020
fireEvent.click(decrementControl);
21-
expect(valueControl.textContent).toBe('1');
21+
expect(valueControl).toHaveTextContent('1');
2222
});

‎apps/example-app/src/app/examples/02-input-output.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ test('is possible to set input and listen for output', async () => {
1818
const sendControl = screen.getByRole('button', { name: /send/i });
1919
const valueControl = screen.getByTestId('value');
2020

21-
expect(valueControl.textContent).toBe('47');
21+
expect(valueControl).toHaveTextContent('47');
2222

2323
fireEvent.click(incrementControl);
2424
fireEvent.click(incrementControl);
2525
fireEvent.click(incrementControl);
26-
expect(valueControl.textContent).toBe('50');
26+
expect(valueControl).toHaveTextContent('50');
2727

2828
fireEvent.click(sendControl);
2929
expect(sendValue).toHaveBeenCalledTimes(1);
@@ -44,12 +44,12 @@ test('is possible to set input and listen for output with the template syntax',
4444
const sendControl = screen.getByRole('button', { name: /send/i });
4545
const valueControl = screen.getByTestId('value');
4646

47-
expect(valueControl.textContent).toBe('47');
47+
expect(valueControl).toHaveTextContent('47');
4848

4949
fireEvent.click(incrementControl);
5050
fireEvent.click(incrementControl);
5151
fireEvent.click(incrementControl);
52-
expect(valueControl.textContent).toBe('50');
52+
expect(valueControl).toHaveTextContent('50');
5353

5454
fireEvent.click(sendControl);
5555
expect(sendSpy).toHaveBeenCalledTimes(1);

‎apps/example-app/src/app/examples/05-component-provider.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ test('renders the current value and can increment and decrement', async () => {
1818
const decrementControl = screen.getByRole('button', { name: /decrement/i });
1919
const valueControl = screen.getByTestId('value');
2020

21-
expect(valueControl.textContent).toBe('0');
21+
expect(valueControl).toHaveTextContent('0');
2222

2323
fireEvent.click(incrementControl);
2424
fireEvent.click(incrementControl);
25-
expect(valueControl.textContent).toBe('2');
25+
expect(valueControl).toHaveTextContent('2');
2626

2727
fireEvent.click(decrementControl);
28-
expect(valueControl.textContent).toBe('1');
28+
expect(valueControl).toHaveTextContent('1');
2929
});
3030

3131
test('renders the current value and can increment and decrement with a mocked jest-utils service', async () => {
@@ -48,14 +48,14 @@ test('renders the current value and can increment and decrement with a mocked je
4848
const decrementControl = screen.getByRole('button', { name: /decrement/i });
4949
const valueControl = screen.getByTestId('value');
5050

51-
expect(valueControl.textContent).toBe('50');
51+
expect(valueControl).toHaveTextContent('50');
5252

5353
fireEvent.click(incrementControl);
5454
fireEvent.click(incrementControl);
55-
expect(valueControl.textContent).toBe('70');
55+
expect(valueControl).toHaveTextContent('70');
5656

5757
fireEvent.click(decrementControl);
58-
expect(valueControl.textContent).toBe('60');
58+
expect(valueControl).toHaveTextContent('60');
5959
});
6060

6161
test('renders the current value and can increment and decrement with provideMocked from jest-utils', async () => {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,12 @@ test('works with ngrx store', async () => {
2121
const decrementControl = screen.getByRole('button', { name: /decrement/i });
2222
const valueControl = screen.getByTestId('value');
2323

24-
expect(valueControl.textContent).toBe('0');
24+
expect(valueControl).toHaveTextContent('0');
2525

2626
fireEvent.click(incrementControl);
2727
fireEvent.click(incrementControl);
28-
expect(valueControl.textContent).toBe('20');
28+
expect(valueControl).toHaveTextContent('20');
2929

3030
fireEvent.click(decrementControl);
31-
expect(valueControl.textContent).toBe('10');
31+
expect(valueControl).toHaveTextContent('10');
3232
});

‎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
@@ -54,6 +54,7 @@ test('closes the dialog via the backdrop', async () => {
5454
await screen.findByRole('dialog');
5555
await screen.findByRole('heading', { name: /dialog title/i });
5656

57+
// eslint-disable-next-line testing-library/no-node-access
5758
fireEvent.click(document.querySelector('.cdk-overlay-backdrop'));
5859

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

‎apps/example-app/src/app/examples/16-input-getter-setter.spec.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ test('should run logic in the input setter and getter', async () => {
66
const valueControl = screen.getByTestId('value');
77
const getterValueControl = screen.getByTestId('value-getter');
88

9-
expect(valueControl.textContent).toBe('I am value from setter Angular');
10-
expect(getterValueControl.textContent).toBe('I am value from getter Angular');
9+
expect(valueControl).toHaveTextContent('I am value from setter Angular');
10+
expect(getterValueControl).toHaveTextContent('I am value from getter Angular');
1111
});
1212

1313
test('should run logic in the input setter and getter while re-rendering', async () => {
14-
const component = await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
14+
const { rerender } = await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
1515
const valueControl = screen.getByTestId('value');
1616
const getterValueControl = screen.getByTestId('value-getter');
1717

18-
expect(valueControl.textContent).toBe('I am value from setter Angular');
19-
expect(getterValueControl.textContent).toBe('I am value from getter Angular');
18+
expect(valueControl).toHaveTextContent('I am value from setter Angular');
19+
expect(getterValueControl).toHaveTextContent('I am value from getter Angular');
2020

21-
await component.rerender({ value: 'React' });
21+
await rerender({ value: 'React' });
2222

23-
expect(valueControl.textContent).toBe('I am value from setter React');
24-
expect(getterValueControl.textContent).toBe('I am value from getter React');
23+
expect(valueControl).toHaveTextContent('I am value from setter React');
24+
expect(getterValueControl).toHaveTextContent('I am value from getter React');
2525
});

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,23 @@ it('https://github.com/testing-library/angular-testing-library/issues/106', asyn
2020
const toggle = screen.getByTestId('toggle');
2121
const hiddenText = screen.queryByTestId('getme');
2222

23-
expect(hiddenText).toBeNull();
23+
expect(hiddenText).not.toBeInTheDocument();
2424
fireEvent.click(toggle);
2525

2626
// fails
2727
// await waitFor(() => expect(hiddenText).not.toBeNull());
2828

2929
// succeeds
30-
await waitFor(() => expect(screen.queryByTestId('getme')).not.toBeNull());
30+
await waitFor(() => expect(screen.queryByTestId('getme')).toBeInTheDocument());
3131
});
3232

3333
it('better https://github.com/testing-library/angular-testing-library/issues/106', async () => {
3434
await render(TestSelectComponent);
3535
const toggle = screen.getByTestId('toggle');
3636
const hiddenText = screen.queryByTestId('getme');
3737

38-
expect(hiddenText).toBeNull();
38+
expect(hiddenText).not.toBeInTheDocument();
3939
fireEvent.click(toggle);
4040

41-
screen.getByTestId('getme');
41+
expect(screen.getByTestId('getme')).toBeInTheDocument();
4242
});

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"compilerOptions": {
44
"outDir": "../../dist/out-tsc",
55
"module": "commonjs",
6-
"types": ["jest", "node"]
6+
"types": ["jest", "node", "@testing-library/jest-dom"]
77
},
88
"files": ["src/test-setup.ts"],
99
"include": ["**/*.spec.ts", "**/*.d.ts"]

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
"@nrwl/node": "12.0.3",
6262
"@nrwl/nx-plugin": "12.0.3",
6363
"@nrwl/workspace": "12.0.3",
64-
"@testing-library/jest-dom": "^5.11.0",
64+
"@testing-library/jest-dom": "^5.11.10",
6565
"@types/jest": "~26.0.3",
6666
"@types/node": "14.14.37",
6767
"@typescript-eslint/eslint-plugin": "4.22.0",
@@ -70,6 +70,8 @@
7070
"eslint": "7.24.0",
7171
"eslint-config-prettier": "8.2.0",
7272
"eslint-plugin-import": "latest",
73+
"eslint-plugin-jest-dom": "3.8.0",
74+
"eslint-plugin-testing-library": "^4.0.1",
7375
"husky": "^4.2.5",
7476
"jest": "^26.1.0",
7577
"jest-preset-angular": "8.4.0",

‎projects/jest-utils/tsconfig.spec.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"extends": "../../tsconfig.json",
33
"compilerOptions": {
44
"module": "commonjs",
5-
"types": ["node", "jest"]
5+
"types": ["node", "jest", "@testing-library/jest-dom"]
66
},
77
"files": ["test-setup.ts"],
88
"include": ["**/*.spec.ts", "**/*.d.ts"]

‎projects/testing-library/tsconfig.spec.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"extends": "../../tsconfig.json",
33
"compilerOptions": {
44
"module": "commonjs",
5-
"types": ["node", "jest"]
5+
"types": ["node", "jest", "@testing-library/jest-dom"]
66
},
77
"files": ["test-setup.ts"],
88
"include": ["**/*.spec.ts", "**/*.d.ts"]

0 commit comments

Comments
 (0)