Add new tests for components

src/app/features/task/components/inclusion-form/include-task-form/include-task-form.component.spec.ts

@@ -0,0 +1,161 @@
+import { SnackBarService } from './../../../../../shared/services/snack-bar.service';
+import { TaskService } from './../../../service/task.service';
+import { CategoryService } from './../../../../category/services/category.service';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { IncludeTaskFormComponent } from './include-task-form.component';
+
+import { Observable, of } from 'rxjs';
+import { Task } from '../../../model/task.model';
+import { task } from '../../../../../__mocks__/task';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { By } from '@angular/platform-browser';
+
+describe('IncludeTaskFormComponent', () => {
+  let component: IncludeTaskFormComponent;
+  let fixture: ComponentFixture<IncludeTaskFormComponent>;
+  let categoryService: CategoryService;
+  let taskService: TaskService;
+  let snackBarService: SnackBarService;
+
+  let createTaskSpy: jest.SpyInstance<Observable<Task>>;
+
+  const MOCKED_TASK = task;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [IncludeTaskFormComponent],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideAnimations(),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IncludeTaskFormComponent);
+
+    categoryService = TestBed.inject(CategoryService);
+    taskService = TestBed.inject(TaskService);
+    snackBarService = TestBed.inject(SnackBarService);
+
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('creates a component', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('visibility', () => {
+    it('render initial newTaskForm state value', () => {
+      const newTaskForm = component.newsTaskForm;
+
+      expect(newTaskForm.controls.title.value).toEqual('');
+      expect(newTaskForm.controls.categoryId.value).toEqual('1');
+    });
+
+    it('render initial newsTaskForm label values', () => {
+      const titleLabel = fixture.debugElement.query(
+        By.css('[data-testid="title"')
+      );
+      const categoryLabel = fixture.debugElement.query(
+        By.css('[data-testid="categoryId"')
+      );
+
+      expect(titleLabel.nativeElement.textContent).toContain('Tarefa');
+      expect(categoryLabel.nativeElement.textContent).toContain('Categoria');
+    });
+  });
+
+  it('should be able call selectionChangeHandler when mat-select dispatch selectionChange event', () => {
+    const categoryId = '3';
+
+    const event = { value: categoryId };
+
+    const selectionChangeHandlerSpy = jest
+      .spyOn(component, 'selectionChangeHandler')
+      .mockImplementationOnce(() => {});
+
+    fixture.debugElement
+      .query(By.css('mat-select'))
+      .triggerEventHandler('selectionChange', event);
+
+    expect(selectionChangeHandlerSpy).toHaveBeenCalledWith(event);
+  });
+
+  it('should be able call snackBarConfigHandler when is called with a message', () => {
+    const message = 'Tarefa incluída!';
+
+    const snowSnackBarSpy = jest
+      .spyOn(snackBarService, 'showSnackBar')
+      .mockImplementationOnce(() => {});
+
+    component.snackBarConfigHandler(message);
+
+    expect(snowSnackBarSpy).toHaveBeenCalledWith(message, 4000, 'end', 'top');
+  });
+
+  it('should be able enable/disable newTaskForm and set isIncludeTaskFormDisabled when taskService.isLoading is true or false', () => {
+    const newTaskForm = component.newsTaskForm;
+
+    taskService.isLoadingTask.set(true);
+
+    expect(component.isIncludeTaskFormDisabled()).toBeTruthy();
+    expect(newTaskForm.disabled).toBeTruthy();
+
+    taskService.isLoadingTask.set(false);
+
+    expect(component.isIncludeTaskFormDisabled()).toBeFalsy();
+    expect(newTaskForm.disabled).toBeFalsy();
+  });
+
+  describe('onEnterToAddATask', () => {
+    it('shouldn`t be able do nothing when newTaskForm is invalid', () => {
+      component.onEnterToaddATask();
+      const createTaskSpy = jest
+        .spyOn(taskService, 'createTask')
+        .mockReturnValue(of(MOCKED_TASK));
+
+      expect(createTaskSpy).not.toHaveBeenCalled();
+
+      expect(component.isIncludeTaskFormDisabled()).toBeFalsy();
+    });
+
+    it('should be able create task when newTaskForm is valid', fakeAsync(() => {
+      component.newsTaskForm.controls.title.setValue(MOCKED_TASK.title);
+      component.newsTaskForm.controls.categoryId.setValue(
+        MOCKED_TASK.categoryId
+      );
+
+      const createTaskSpy = jest
+        .spyOn(taskService, 'createTask')
+        .mockReturnValue(of(MOCKED_TASK));
+
+      const inserATaskInTheTasksListSpy = jest
+        .spyOn(taskService, 'insertATaskInTheTasksList')
+        .mockImplementation(() => {});
+
+      const snackBarConfigHandlerSpy = jest
+        .spyOn(component, 'snackBarConfigHandler')
+        .mockImplementation(() => {});
+
+      component.onEnterToaddATask();
+
+      tick(4000);
+
+      expect(createTaskSpy).toHaveBeenCalled();
+      expect(inserATaskInTheTasksListSpy).toHaveBeenCalledWith(MOCKED_TASK);
+      expect(snackBarConfigHandlerSpy).toHaveBeenCalledWith(
+        'Tarefa concluida!'
+      );
+    }));
+  });
+});

src/app/features/task/components/inclusion-form/include-task-form/include-task-form.component.ts

@@ -22,7 +22,7 @@ import { delay, finalize } from 'rxjs/operators';
 
 import { NgClass } from '@angular/common';
 import { SnackBarService } from '../../../../../shared/services/snack-bar.service';
-import { throws } from 'assert';
+
 
 const MODULES = [
   MatFormFieldModule,
@@ -53,7 +53,7 @@ const COMMONS = [NgClass];
       [formGroup]="newsTaskForm"
     >
       <mat-form-field class="w-full">
-        <mat-label>Tarefas</mat-label>
+        <mat-label for="title" data-testid="title">Tarefas</mat-label>
         <input
           formControlName="title"
           matInput
@@ -63,8 +63,11 @@ const COMMONS = [NgClass];
         <mat-hint class="text-tertiary">Aperte enter para adicionar</mat-hint>
       </mat-form-field>
       <mat-form-field>
-        <mat-label>Categorias</mat-label>
+        <mat-label for="categoryId" data-testid="categoryId"
+          >Categorias</mat-label
+        >
         <mat-select
+          data-testid="matSelect"
           formControlName="categoryId"
           (selectionChange)="selectionChangeHandler($event)"
           (keyup.enter)="onEnterToaddATask()"
@@ -92,7 +95,6 @@ export class IncludeTaskFormComponent {
 
   public readonly newsTaskForm = createTaskForm();
 
-
   public selectionChangeHandler(event: MatSelectChange): void {
     const categoryId = event.value;
     this.categoryService.selectedCategoryId.set(categoryId);
@@ -121,9 +123,9 @@ export class IncludeTaskFormComponent {
       .subscribe({
         next: (task) => this.taskService.insertATaskInTheTasksList(task),
         error: (error) => {
-          this.snackBarConfigHandler(error.message)
+          this.snackBarConfigHandler(error.message);
         },
-        complete: () => this.snackBarConfigHandler('Tarefa concluida!')
+        complete: () => this.snackBarConfigHandler('Tarefa concluida!'),
       });
   }
 
@@ -139,12 +141,7 @@ export class IncludeTaskFormComponent {
     return this.taskService.isLoadingTask();
   });
 
-  public snackBarConfigHandler(message : string): void {
-    this.snackBarService.showSnackBar(
-      message
-      ,4000
-      ,'end'
-      ,'top'
-    )
+  public snackBarConfigHandler(message: string): void {
+    this.snackBarService.showSnackBar(message, 4000, 'end', 'top');
   }
 }