fix(challenge16): modify code to work with cypress without any hack on first routing

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

@@ -1,10 +1,42 @@
 import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, RouterLink],
   selector: 'app-root',
-  template: ` <router-outlet /> `,
+  styles: [
+    `
+      h1 {
+        margin-bottom: 0;
+      }
+      nav a {
+        padding: 1rem;
+        text-decoration: none;
+        margin-top: 10px;
+        display: inline-block;
+        background-color: #e8e8e8;
+        color: #3d3d3d;
+        border-radius: 4px;
+        margin-bottom: 10px;
+      }
+      nav a:hover {
+        color: white;
+        background-color: #42545c;
+      }
+      nav a.active {
+        background-color: black;
+      }
+    `,
+  ],
+  template: `
+    <h1>Library</h1>
+
+    <nav>
+      <a routerLink="/search" routerLinkActive="active">Borrow a Book</a>
+    </nav>
+
+    <router-outlet />
+  `,
 })
 export class AppComponent {}

apps/router-testing/src/app/app.routes.ts

@@ -3,7 +3,7 @@ import { bookGuard } from './book.guard';
 
 export const appRoutes: Route[] = [
   {
-    path: '',
+    path: 'search',
     loadComponent: () => import('./search.component'),
   },
   {

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

@@ -1,13 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
 
 @Component({
   standalone: true,
-  imports: [RouterLink],
+  template: ` <div>No book found for this search</div> `,
-  template: `
-    <div>No book found for this search</div>
-    <button routerLink="/">Go Back</button>
-  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class ShelfComponent {}

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

@@ -7,28 +7,55 @@ import { availableBooks } from './book.model';
 @Component({
   standalone: true,
   imports: [ReactiveFormsModule, RouterLink, NgFor, NgIf],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .error {
+        color: red;
+      }
+
+      button {
+        width: 300px;
+        padding: 5px;
+        border-radius: 5px;
+      }
+
+      .search label {
+        margin-right: 15px;
+      }
+    `,
+  ],
   template: `
-    <div>
+    <div class="search">
-      <label for="bookName">Choose Book by author or title</label>
+      <label for="bookName">Search Book by author or title</label>
       <input
         type="text"
         id="bookName"
         name="bookName"
         [formControl]="searchBook"
         required />
+      <div class="error" *ngIf="searchBook.errors">
+        Search criteria is required!
+      </div>
     </div>
-    <div *ngIf="searchBook.errors">Search criteria is required!</div>
     <button
       routerLink="/shelf"
       [queryParams]="{ book: searchBook.value }"
       [disabled]="searchBook.errors"
       routerLinkActive="router-link-active">
-      Get book
+      Borrow
     </button>
-    <div>List of books available:</div>
+    <div>
-    <ul>
+      <h3>List of books available:</h3>
-      <li *ngFor="let book of books">{{ book.name }} by {{ book.author }}</li>
+      <ul>
-    </ul>
+        <li *ngFor="let book of books">{{ book.name }} by {{ book.author }}</li>
+      </ul>
+    </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

apps/router-testing/src/app/shelf.component.ts

@@ -1,20 +1,19 @@
 import { AsyncPipe, JsonPipe, NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { ActivatedRoute, RouterLink } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs';
 import { availableBooks } from './book.model';
 
 @Component({
   selector: 'app-shelf',
   standalone: true,
-  imports: [AsyncPipe, JsonPipe, RouterLink, NgFor],
+  imports: [AsyncPipe, JsonPipe, NgFor],
   template: `
     <ul>
       <li *ngFor="let book of books | async">
-        Book: {{ book.name }} by {{ book.author }}
+        Borrowed Book: {{ book.name }} by {{ book.author }}
       </li>
     </ul>
-    <button routerLink="/">Go Back</button>
   `,
   styles: [],
   changeDetection: ChangeDetectionStrategy.OnPush,

package-lock.json

@@ -85,6 +85,7 @@
         "postcss-preset-env": "~7.5.0",
         "postcss-url": "~10.1.3",
         "prettier": "^2.6.2",
+        "testing-library-selector": "^0.2.1",
         "ts-jest": "29.0.5",
         "ts-node": "10.9.1",
         "typescript": "4.9.5"
@@ -27893,6 +27894,18 @@
         "node": "*"
       }
     },
+    "node_modules/testing-library-selector": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/testing-library-selector/-/testing-library-selector-0.2.1.tgz",
+      "integrity": "sha512-cTC9X3w3KAz04Q23vKN9FQdnBeB06C1Cr1tEmy10KNyx1BiVyoYz5i3iojmSGbPPndSPhiUauQWn3tDvrrBMeQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": "^8.2.0"
+      }
+    },
     "node_modules/text-extensions": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/text-extensions/-/text-extensions-1.9.0.tgz",

package.json

@@ -87,6 +87,7 @@
     "postcss-preset-env": "~7.5.0",
     "postcss-url": "~10.1.3",
     "prettier": "^2.6.2",
+    "testing-library-selector": "^0.2.1",
     "ts-jest": "29.0.5",
     "ts-node": "10.9.1",
     "typescript": "4.9.5"