add jest dom for fluent assertions

Author: SrinivasanTarget

apps/angular-testing-e2e/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node", "@types/testing-library__cypress"]
   },
   "include": ["**/*.ts", "**/*.js"]
 }

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

@@ -30,8 +30,10 @@ test('should be able to load albums', async () => {
 
   fireEvent.click(screen.getByRole('button', { name: /get albums/i }));
 
-  await screen.findByText(/sarah/i);
+  const album = await screen.findByText(/sarah/i);
+  expect(album).toBeInTheDocument();
 
+  // Accessibility checks
   const results = await axe(container)
 
   expect(results).toHaveNoViolations()

apps/angular-testing/src/test-setup.ts

@@ -1,4 +1,5 @@
 import 'jest-preset-angular';
+import '@testing-library/jest-dom'
 // import { server } from './mocks/node';
 
 // beforeAll(() => server.listen());

apps/angular-testing/tsconfig.spec.json

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

package-lock.json

@@ -53,6 +53,7 @@
     "@pact-foundation/pact": "^9.11.0",
     "@testing-library/angular": "^9.5.0",
     "@testing-library/cypress": "^6.0.0",
+    "@testing-library/jest-dom": "^5.11.0",
     "@types/jest": "25.1.4",
     "@types/jest-axe": "^3.2.2",
     "@types/node": "~8.9.4",