chore(lint): add and apply eslint-plugin-testing-library

.eslintrc.json

@@ -36,6 +36,7 @@
  },
  {
  "files": ["*.ts"],
+ "plugins": ["eslint-plugin-import", "@angular-eslint/eslint-plugin", "@typescript-eslint"],
  "rules": {
  "@typescript-eslint/consistent-type-definitions": "error",
  "@typescript-eslint/dot-notation": "off",
@@ -102,8 +103,14 @@
  "markers": ["/"]
  }
  ]
- },
- "plugins": ["eslint-plugin-import", "@angular-eslint/eslint-plugin", "@typescript-eslint"]
+ }
+ },
+ {
+ "files": ["*.spec.ts"],
+ "extends": ["plugin:testing-library/angular", "plugin:jest-dom/recommended"],
+ "rules": {
+ "testing-library/prefer-explicit-assert": "error"
+ }
  },
  {
  "files": ["*.html"],

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

@@ -9,12 +9,12 @@ test('renders the current value and can increment and decrement', async () => {
  const decrementControl = screen.getByRole('button', { name: /decrement/i });
  const valueControl = screen.getByTestId('value');
 
- expect(valueControl.textContent).toBe('0');
+ expect(valueControl).toHaveTextContent('0');
 
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
- expect(valueControl.textContent).toBe('2');
+ expect(valueControl).toHaveTextContent('2');
 
  fireEvent.click(decrementControl);
- expect(valueControl.textContent).toBe('1');
+ expect(valueControl).toHaveTextContent('1');
 });

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

@@ -11,12 +11,12 @@ test('renders the current value and can increment and decrement', async () => {
  const decrementControl = screen.getByRole('button', { name: /decrement/i });
  const valueControl = screen.getByTestId('value');
 
- expect(valueControl.textContent).toBe('0');
+ expect(valueControl).toHaveTextContent('0');
 
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
- expect(valueControl.textContent).toBe('2');
+ expect(valueControl).toHaveTextContent('2');
 
  fireEvent.click(decrementControl);
- expect(valueControl.textContent).toBe('1');
+ expect(valueControl).toHaveTextContent('1');
 });

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

@@ -18,12 +18,12 @@ test('is possible to set input and listen for output', async () => {
  const sendControl = screen.getByRole('button', { name: /send/i });
  const valueControl = screen.getByTestId('value');
 
- expect(valueControl.textContent).toBe('47');
+ expect(valueControl).toHaveTextContent('47');
 
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
- expect(valueControl.textContent).toBe('50');
+ expect(valueControl).toHaveTextContent('50');
 
  fireEvent.click(sendControl);
  expect(sendValue).toHaveBeenCalledTimes(1);
@@ -44,12 +44,12 @@ test('is possible to set input and listen for output with the template syntax',
  const sendControl = screen.getByRole('button', { name: /send/i });
  const valueControl = screen.getByTestId('value');
 
- expect(valueControl.textContent).toBe('47');
+ expect(valueControl).toHaveTextContent('47');
 
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
- expect(valueControl.textContent).toBe('50');
+ expect(valueControl).toHaveTextContent('50');
 
  fireEvent.click(sendControl);
  expect(sendSpy).toHaveBeenCalledTimes(1);

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

@@ -18,14 +18,14 @@ test('renders the current value and can increment and decrement', async () => {
  const decrementControl = screen.getByRole('button', { name: /decrement/i });
  const valueControl = screen.getByTestId('value');
 
- expect(valueControl.textContent).toBe('0');
+ expect(valueControl).toHaveTextContent('0');
 
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
- expect(valueControl.textContent).toBe('2');
+ expect(valueControl).toHaveTextContent('2');
 
  fireEvent.click(decrementControl);
- expect(valueControl.textContent).toBe('1');
+ expect(valueControl).toHaveTextContent('1');
 });
 
 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
  const decrementControl = screen.getByRole('button', { name: /decrement/i });
  const valueControl = screen.getByTestId('value');
 
- expect(valueControl.textContent).toBe('50');
+ expect(valueControl).toHaveTextContent('50');
 
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
- expect(valueControl.textContent).toBe('70');
+ expect(valueControl).toHaveTextContent('70');
 
  fireEvent.click(decrementControl);
- expect(valueControl.textContent).toBe('60');
+ expect(valueControl).toHaveTextContent('60');
 });
 
 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

@@ -21,12 +21,12 @@ test('works with ngrx store', async () => {
  const decrementControl = screen.getByRole('button', { name: /decrement/i });
  const valueControl = screen.getByTestId('value');
 
- expect(valueControl.textContent).toBe('0');
+ expect(valueControl).toHaveTextContent('0');
 
  fireEvent.click(incrementControl);
  fireEvent.click(incrementControl);
- expect(valueControl.textContent).toBe('20');
+ expect(valueControl).toHaveTextContent('20');
 
  fireEvent.click(decrementControl);
- expect(valueControl.textContent).toBe('10');
+ expect(valueControl).toHaveTextContent('10');
 });

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

@@ -6,20 +6,20 @@ test('should run logic in the input setter and getter', async () => {
  const valueControl = screen.getByTestId('value');
  const getterValueControl = screen.getByTestId('value-getter');
 
- expect(valueControl.textContent).toBe('I am value from setter Angular');
- expect(getterValueControl.textContent).toBe('I am value from getter Angular');
+ expect(valueControl).toHaveTextContent('I am value from setter Angular');
+ expect(getterValueControl).toHaveTextContent('I am value from getter Angular');
 });
 
 test('should run logic in the input setter and getter while re-rendering', async () => {
- const component = await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
+ const { rerender } = await render(InputGetterSetter, { componentProperties: { value: 'Angular' } });
  const valueControl = screen.getByTestId('value');
  const getterValueControl = screen.getByTestId('value-getter');
 
- expect(valueControl.textContent).toBe('I am value from setter Angular');
- expect(getterValueControl.textContent).toBe('I am value from getter Angular');
+ expect(valueControl).toHaveTextContent('I am value from setter Angular');
+ expect(getterValueControl).toHaveTextContent('I am value from getter Angular');
 
- await component.rerender({ value: 'React' });
+ await rerender({ value: 'React' });
 
- expect(valueControl.textContent).toBe('I am value from setter React');
- expect(getterValueControl.textContent).toBe('I am value from getter React');
+ expect(valueControl).toHaveTextContent('I am value from setter React');
+ expect(getterValueControl).toHaveTextContent('I am value from getter React');
 });

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

@@ -20,23 +20,23 @@ it('https://github.com/testing-library/angular-testing-library/issues/106', asyn
  const toggle = screen.getByTestId('toggle');
  const hiddenText = screen.queryByTestId('getme');
 
- expect(hiddenText).toBeNull();
+ expect(hiddenText).not.toBeInTheDocument();
  fireEvent.click(toggle);
 
  // fails
  // await waitFor(() => expect(hiddenText).not.toBeNull());
 
  // succeeds
- await waitFor(() => expect(screen.queryByTestId('getme')).not.toBeNull());
+ await waitFor(() => expect(screen.queryByTestId('getme')).toBeInTheDocument());
 });
 
 it('better https://github.com/testing-library/angular-testing-library/issues/106', async () => {
  await render(TestSelectComponent);
  const toggle = screen.getByTestId('toggle');
  const hiddenText = screen.queryByTestId('getme');
 
- expect(hiddenText).toBeNull();
+ expect(hiddenText).not.toBeInTheDocument();
  fireEvent.click(toggle);
 
- screen.getByTestId('getme');
+ expect(screen.getByTestId('getme')).toBeInTheDocument();
 });

apps/example-app/tsconfig.spec.json

@@ -3,7 +3,7 @@
  "compilerOptions": {
  "outDir": "../../dist/out-tsc",
  "module": "commonjs",
- "types": ["jest", "node"]
+ "types": ["jest", "node", "@testing-library/jest-dom"]
  },
  "files": ["src/test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]

package.json

@@ -61,7 +61,7 @@
  "@nrwl/node": "12.0.3",
  "@nrwl/nx-plugin": "12.0.3",
  "@nrwl/workspace": "12.0.3",
- "@testing-library/jest-dom": "^5.11.0",
+ "@testing-library/jest-dom": "^5.11.10",
  "@types/jest": "~26.0.3",
  "@types/node": "14.14.37",
  "@typescript-eslint/eslint-plugin": "4.22.0",
@@ -70,6 +70,8 @@
  "eslint": "7.24.0",
  "eslint-config-prettier": "8.2.0",
  "eslint-plugin-import": "latest",
+ "eslint-plugin-jest-dom": "3.8.0",
+ "eslint-plugin-testing-library": "^4.0.1",
  "husky": "^4.2.5",
  "jest": "^26.1.0",
  "jest-preset-angular": "8.4.0",

projects/jest-utils/tsconfig.spec.json

@@ -2,7 +2,7 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
  "module": "commonjs",
- "types": ["node", "jest"]
+ "types": ["node", "jest", "@testing-library/jest-dom"]
  },
  "files": ["test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]

projects/testing-library/tsconfig.spec.json

@@ -2,7 +2,7 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
  "module": "commonjs",
- "types": ["node", "jest"]
+ "types": ["node", "jest", "@testing-library/jest-dom"]
  },
  "files": ["test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]