Add tests for field componenent

src/app/search/components/criteria/criteria-by-family.component.html

@@ -8,8 +8,8 @@
                 [placeholder]="attribute.placeholder_min"
                 [attributeType]="attribute.type" 
                 [criterion]="getCriterion(attribute.id)" 
-                (add)="add($event)"
-                (delete)="delete($event)">
+                (addCriterion)="add($event)"
+                (deleteCriterion)="delete($event)">
             </app-field>
         </div>
         <div *ngSwitchCase="'between'">

src/app/search/components/criteria/search-type/field.component.html

@@ -6,10 +6,10 @@
     </div>
     <div class="col-2 text-center">
         <button class="btn btn-outline-success" *ngIf="!field.disabled" [hidden]="!field.value"
-            (click)="addCriterion()">
+            (click)="emitAdd()">
             <span class="fas fa-plus fa-fw"></span>
         </button>
-        <button class="btn btn-outline-danger" *ngIf="field.disabled" (click)="deleteCriterion()">
+        <button class="btn btn-outline-danger" *ngIf="field.disabled" (click)="emitDelete()">
             <span class="fa fa-times fa-fw"></span>
         </button>
     </div>

src/app/search/components/criteria/search-type/field.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BsDatepickerModule, isDateValid } from 'ngx-bootstrap';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+
+import { FieldComponent } from './field.component';
+import { FieldCriterion } from '../../../store/model';
+
+describe('[Search][Criteria][SearchType] Component: FieldComponent', () => {
+    let component: FieldComponent;
+    let fixture: ComponentFixture<FieldComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [FieldComponent],
+            imports: [BsDatepickerModule.forRoot(), NgSelectModule, FormsModule, ReactiveFormsModule]
+        });
+        fixture = TestBed.createComponent(FieldComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create the component', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('#getDefault() should enable and not fill form if criterion not defined', () => {
+        const expectedFieldValue = '';
+        component.getDefault(undefined);
+        expect(component.field.value).toEqual(expectedFieldValue);
+        expect(component.field.enabled).toBeTruthy();
+    });
+
+    it('#getDefault() should fill and disable form if criterion is defined', () => {
+        const value = 'test';
+        const criterion = new FieldCriterion(1, '=', value);
+        const expectedFieldValue = value;
+        component.getDefault(criterion);
+        expect(component.field.value).toEqual(expectedFieldValue);
+        expect(component.field.disabled).toBeTruthy();
+    });
+
+    it('#getType() should return `number` if criterion is a number type', () => {
+        component.attributeType = 'smallint';
+        expect(component.getType()).toEqual('number');
+        component.attributeType = 'integer';
+        expect(component.getType()).toEqual('number');
+        component.attributeType = 'decimal';
+        expect(component.getType()).toEqual('number');
+        component.attributeType = 'float';
+        expect(component.getType()).toEqual('number');
+    });
+
+    it('#getType() should return `text` if criterion is not a number type', () => {
+        component.attributeType = 'char';
+        expect(component.getType()).toEqual('text');
+    });
+
+    it('#getPlaceholder() should fill the placeholder if defined', () => {
+        const placeholder = 'placeholder';
+        component.placeholder = placeholder;
+        expect(component.getPlaceholder()).toEqual(placeholder);
+    });
+
+    it('#getPlaceholder() should not fill the placeholder if not defined', () => {
+        expect(component.getPlaceholder()).toEqual('');
+    });
+
+    it('raises the add criterion event when clicked', () => {
+        component.id = 1;
+        const operator = '=';
+        component.operator = operator;
+        const value = 'test';
+        component.field = new FormControl(value);
+        const expectedCriterion = new FieldCriterion(component.id, operator, value);
+        component.addCriterion.subscribe((event: FieldCriterion) => expect(event).toEqual(expectedCriterion));
+        component.emitAdd();
+    });
+
+    it('raises the delete criterion event when clicked', () => {
+        component.id = 1;
+        component.deleteCriterion.subscribe((event: number) => expect(event).toEqual(1));
+        component.emitDelete();
+    });
+});

src/app/search/components/criteria/search-type/field.component.ts

@@ -18,18 +18,18 @@ export class FieldComponent {
     set criterion(criterion: Criterion) {
         this.getDefault(criterion);
     }
-    @Output() add: EventEmitter<FieldCriterion> = new EventEmitter();
-    @Output() delete: EventEmitter<number> = new EventEmitter();
+    @Output() addCriterion: EventEmitter<FieldCriterion> = new EventEmitter();
+    @Output() deleteCriterion: EventEmitter<number> = new EventEmitter();
 
     field = new FormControl('');
 
-    addCriterion() {
+    emitAdd() {
         const fd = new FieldCriterion(this.id, this.operator, this.field.value);
-        this.add.emit(fd);
+        this.addCriterion.emit(fd);
     }
 
-    deleteCriterion() {
-        this.delete.emit(this.id);
+    emitDelete() {
+        this.deleteCriterion.emit(this.id);
     }
 
     getDefault(criterion: Criterion): void {