added accessibility checks to angular components

Author: SrinivasanTarget

apps/angular-testing/src/app/app.component.spec.ts

@@ -3,7 +3,8 @@ import { AppComponent, Album } from './app.component';
 import { AlbumService } from './album.service';
 import { of } from 'rxjs';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-
+import { axe, toHaveNoViolations } from 'jest-axe';
+expect.extend(toHaveNoViolations);
 test('should be able to load albums', async () => {
   const albums: Album[] = [
     {
@@ -13,7 +14,7 @@ test('should be able to load albums', async () => {
     }
   ];
 
-  await render(AppComponent, {
+  const { container } = await render(AppComponent, {
     componentProviders: [
       {
         provide: AlbumService,
@@ -30,4 +31,8 @@ test('should be able to load albums', async () => {
   fireEvent.click(screen.getByRole('button', { name: /get albums/i }));
 
   await screen.findByText(/sarah/i);
+
+  const results = await axe(container)
+
+  expect(results).toHaveNoViolations()
 });

apps/angular-testing/tsconfig.spec.json

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

package-lock.json

@@ -54,12 +54,14 @@
     "@testing-library/angular": "^9.5.0",
     "@testing-library/cypress": "^6.0.0",
     "@types/jest": "25.1.4",
+    "@types/jest-axe": "^3.2.2",
     "@types/node": "~8.9.4",
     "axios": "^0.19.2",
     "codelyzer": "~5.0.1",
     "dotenv": "6.2.0",
     "eslint": "6.8.0",
     "jest": "25.2.3",
+    "jest-axe": "^3.4.0",
     "jest-pact": "^0.5.4",
     "jest-preset-angular": "8.1.2",
     "msw": "^0.19.5",