chore(lint): re-enable eslint plugin angular (#237)

Author: the-ult

.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'));