Add tests for select component

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

@@ -30,8 +30,8 @@
                 [label]="attribute.form_label" 
                 [options]="getOptions(attribute.id)"
                 [criterion]="getCriterion(attribute.id)" 
-                (add)="add($event)" 
-                (delete)="delete($event)">
+                (addCriterion)="add($event)" 
+                (deleteCriterion)="delete($event)">
             </app-select>
         </div>
         <div *ngSwitchCase="'select-multiple'">

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

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

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

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
+
+import { SelectComponent } from './select.component';
+import { FieldCriterion } from '../../../store/model';
+
+describe('[Search][Criteria][SearchType] Component: SelectComponent', () => {
+    let component: SelectComponent;
+    let fixture: ComponentFixture<SelectComponent>;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [SelectComponent],
+            imports: [NgSelectModule, FormsModule, ReactiveFormsModule]
+        });
+        fixture = TestBed.createComponent(SelectComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should create the component', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('#getDefault() should enable and not fill form if criterion not defined', () => {
+        component.getDefault(undefined);
+        expect(component.se.value).toBeNull();
+        expect(component.se.enabled).toBeTruthy();
+    });
+
+    it('#getDefault() should fill and disable form if criterion is defined', () => {
+        const operator = '=';
+        const value = 'test';
+        const criterion = new FieldCriterion(1, operator, value);
+        component.getDefault(criterion);
+        expect(component.se.value).toEqual(value);
+        expect(component.se.disabled).toBeTruthy();
+    });
+
+    it('raises the add criterion event when clicked', () => {
+        component.id = 1;
+        const operator = '=';
+        component.operator = operator;
+        const value = 'three';
+        component.se = new FormControl(value);
+        component.options = [
+            { label: 'One', value: 'one', display: 1 },
+            { label: 'Two', value: 'two', display: 2 },
+            { label: 'Three', value: 'three', display: 3 }
+        ];
+        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/select.component.ts

@@ -18,19 +18,19 @@ export class SelectComponent {
     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();
 
     se = new FormControl();
 
-    addCriterion() {
+    emitAdd() {
         const option = this.options.find(o => o.value === this.se.value);
         const se = new FieldCriterion(this.id, this.operator, option.value);
-        this.add.emit(se);
+        this.addCriterion.emit(se);
     }
 
-    deleteCriterion() {
-        this.delete.emit(this.id);
+    emitDelete() {
+        this.deleteCriterion.emit(this.id);
     }
 
     getDefault(criterion: Criterion): void {