Answer:17

apps/testing/17-router/src/app/app.component.cy.ts

@@ -1,33 +1,73 @@
+import { provideRouter } from '@angular/router';
 import { AppComponent } from './app.component';
+import { appRoutes } from './app.routes';
 
 describe(AppComponent.name, () => {
+  beforeEach(() => {
+    cy.mount(AppComponent, {
+      providers: [provideRouter(appRoutes)],
+    });
+    cy.get('nav a:first').click();
+  });
+
   describe('Given no search criteria', () => {
     it('Then shows error message and disabled button', () => {
-      //todo
+      cy.get('input[name=bookName]').as('bookControl').clear();
+      cy.contains('Search criteria is required!');
+
+      cy.get('@bookControl').type('kill');
+      cy.contains('Search criteria is required!').should('not.exist');
     });
   });
 
   describe('Given a search criteria with no book match', () => {
     it('Then shows No book found', () => {
-      //todo
+      cy.get('input[name=bookName]').as('bookControl').type('NonExistingBook');
+      cy.get('button').contains('Borrow').click();
+
+      cy.get('[data-testid="no-book-found-msg"]').should('be.visible');
     });
   });
 
   describe('Given a search criteria with one book match', () => {
     it('Then shows One book and no error', () => {
-      //todo
+      cy.get('input[name=bookName]').as('bookControl').type('1984');
+      cy.get('button').contains('Borrow').click();
+
+      cy.get('[data-testid="search-error-msg"]').should('not.exist');
+      cy.contains('1984 by George Orwell').should('be.visible');
     });
   });
 
   describe('Given a search criteria in Uppercase with one book match', () => {
     it('Then shows One book and no error', () => {
-      //todo
+      cy.get('input[name=bookName]').as('bookControl').type('HOBBIT');
+      cy.get('button').contains('Borrow').click();
+
+      cy.get('[data-testid="search-error-msg"]').should('not.exist');
+      cy.contains('The Hobbit by J.R.R. Tolkien').should('be.visible');
     });
   });
 
   describe('Given a search criteria with multple books matches', () => {
     it('Then shows a list of books', () => {
-      //todo
+      cy.get('input[name=bookName]').as('bookControl').type('the');
+      cy.get('button').contains('Borrow').click();
+
+      cy.get('ul li').should('have.length.greaterThan', 1);
+
+      cy.contains('The Hobbit by J.R.R. Tolkien').should('be.visible');
+      cy.contains('The Great Gats by F. Scott Fitzgerald').should('be.visible');
+      cy.contains('The Lord of the Rings by J.R.R. Tolkien').should(
+        'be.visible',
+      );
+      cy.contains('The Catcher in the Rye by J.D. Salinger').should(
+        'be.visible',
+      );
+      cy.contains('The Hunger Games').should('be.visible');
+      cy.contains(
+        "Harry Potter and the Philosopher's Stone by J.K. Rowling",
+      ).should('be.visible');
     });
   });
 });

apps/testing/17-router/src/app/app.component.spec.ts

@@ -1,31 +1,86 @@
-describe('AppComponent', () => {
+import { render, screen } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+import { AppComponent } from './app.component';
+import { appRoutes } from './app.routes';
+import exp = require('constants');
+
+describe.only('AppComponent', () => {
+  const search = async (text: string) => {
+    await render(AppComponent, { routes: appRoutes });
+
+    const searchControl = screen.getByRole('textbox', {
+      name: /search book by author or title/i,
+    });
+    const borrowBtn = screen.getByRole('button', { name: /borrow/i });
+
+    await userEvent.type(searchControl, text);
+    await userEvent.click(borrowBtn);
+  };
+
   describe('Given no search criteria', () => {
     it('Then shows error message and disabled button', async () => {
-      //todo
+      await render(AppComponent, { routes: appRoutes });
+
+      const searchControl = screen.getByRole('textbox', {
+        name: /search book by author or title/i,
+      });
+      userEvent.clear(searchControl);
+
+      expect(screen.getByTestId('search-error-msg')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /borrow/i })).toBeDisabled();
     });
   });
 
   describe('Given a search criteria with no book match', () => {
     it('Then shows No book found', async () => {
-      //todo
+      await search('NonExistingBook');
+
+      expect(screen.getByTestId('no-book-found-msg')).toBeInTheDocument();
     });
   });
 
   describe('Given a search criteria with one book match', () => {
     it('Then shows One book and no error', async () => {
-      //todo
+      await search('1984');
+
+      expect(screen.queryByTestId('search-error-msg')).not.toBeInTheDocument();
+      expect(screen.getByText(/1984 by George Orwell/i)).toBeInTheDocument();
     });
   });
 
   describe('Given a search criteria in Uppercase with one book match', () => {
     it('Then shows One book and no error', async () => {
-      //todo
+      await search('HOBBIT');
+
+      expect(screen.queryByTestId('search-error-msg')).not.toBeInTheDocument();
+      expect(
+        screen.getByText(/The Hobbit by J.R.R. Tolkien/i),
+      ).toBeInTheDocument();
     });
   });
 
   describe('Given a search criteria with multple books matches', () => {
     it('Then shows a list of books', async () => {
-      //todo
+      await search('the');
+
+      expect(
+        screen.getByText(/The Hobbit by J.R.R. Tolkien/i),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(/The Catcher in the Rye by J.D. Salinger/i),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(/The Lord of the Rings by J.R.R. Tolkien/i),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(/The Great Gats by F. Scott Fitzgerald/i),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          /Harry Potter and the Philosopher's Stone by J.K. Rowling/i,
+        ),
+      ).toBeInTheDocument();
+      expect(screen.getByText(/The Hunger Games/i)).toBeInTheDocument();
     });
   });
 });

apps/testing/17-router/src/app/no-book-search.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   template: `
-    <div>No book found for this search</div>
+    <div data-testid="no-book-found-msg">No book found for this search</div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/testing/17-router/src/app/search.component.ts

@@ -38,7 +38,9 @@ import { availableBooks } from './book.model';
         [formControl]="searchBook"
         required />
       @if (searchBook.errors) {
-        <div class="error">Search criteria is required!</div>
+        <div class="error" data-testid="search-error-msg">
+          Search criteria is required!
+        </div>
       }
     </div>
     <button

apps/testing/17-router/tsconfig.editor.json

@@ -2,6 +2,6 @@
   "extends": "./tsconfig.json",
   "include": ["src/**/*.ts"],
   "compilerOptions": {
-    "types": ["jest", "node"]
+    "types": ["jest", "node", "cypress"]
   }
 }