add test attributess

Author: CSharpFiasco

angular.json

@@ -99,5 +99,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/fizz-buzz/fizz-buzz.component.html

@@ -1,19 +1,30 @@
-<button mat-raised-button color="primary" (click)="onAdd()">
+<button mat-raised-button color="primary" (click)="onAdd()" data-testid="add-word-button">
   Add another word
 </button>
 
 <mat-form-field appearance="fill">
   <mat-label>Max number</mat-label>
-  <input matInput type="number" [formControl]="formGroup.controls.maxNumber" placeholder="100" required>
+  <input 
+    matInput
+    type="number"
+    [formControl]="formGroup.controls.maxNumber"
+    placeholder="100"
+    required
+    data-testid="input-max-number" />
 </mat-form-field>
 
-@for(group of formGroup.controls.multiples.controls; track group) {
+@for(group of formGroup.controls.multiples.controls; let idx = $index; track group) {
 <div class="content">
   <button mat-fab (click)="onRemove(group)"><mat-icon>delete</mat-icon></button>
   <mat-form-field appearance="fill">
     <mat-label>Word to print</mat-label>
-    <input matInput type="text" [formControl]="group.controls.wordToPrint" placeholder="Fizz" required
-      [maxLength]="30" />
+    <input 
+      matInput type="text"
+      [formControl]="group.controls.wordToPrint"
+      placeholder="Fizz"
+      required
+      [maxLength]="30"
+      [attr.data-testid]="'input-word-' + idx"/>
     @if (group.controls.wordToPrint.errors){
     <mat-error>
       Please enter a valid word
@@ -22,27 +33,34 @@
   </mat-form-field>
   <mat-form-field appearance="fill">
     <mat-label>Multiple</mat-label>
-    <input matInput type="number" [min]="1" [formControl]="group.controls.multiple" placeholder="3" required />
+    <input
+      matInput
+      type="number"
+      [min]="1"
+      [formControl]="group.controls.multiple"
+      placeholder="3"
+      required
+      [attr.data-testid]="'input-multiple-' + idx" />
     @if (group.controls.multiple.errors?.['required'] || group.controls.multiple.errors?.['min']) {
-    <mat-error>
+    <mat-error [attr.data-testid]="'error-required-multiple' + idx">
       Please valid a number
     </mat-error>
     }
     @else if (group.controls.multiple.errors?.['duplicates']) {
-    <mat-error>Duplicate number</mat-error>
+    <mat-error [attr.data-testid]="'error-required-duplicate' + idx">Duplicate number</mat-error>
     }
   </mat-form-field>
   <br />
 </div>
 }
 
-<button mat-raised-button color="primary" (click)="onSubmit()" [disabled]="!formGroup.valid">
+<button mat-raised-button color="primary" (click)="onSubmit()" [disabled]="!formGroup.valid" data-testid="submit-button">
   Submit
 </button>
 
 @if (formGroup.controls.multiples.errors) {
   @if (formGroup.controls.multiples.errors['required']) {
-  <mat-error>
+  <mat-error data-testid="error-required-multiples">
     Please add at least two words
   </mat-error>
   }

src/app/fizz-buzz/fizz-buzz.component.ts

@@ -51,6 +51,8 @@ export class FizzBuzzComponent {
   }
 
   protected onSubmit() {
+    this.formGroup.markAllAsTouched();
+    
     const multiples = this.formGroup.controls.multiples.controls.map((group) => {
       return {
         multiple: group.controls.multiple.value,