test(rich-text): adiciona testes unitários no componente

o componente po-rich-text estava sem testes unitários,
portanto foi adicionado testes unitarios no componente,
aplicado boas praticas onde julgado necessário e resolvido
problema sample labs do componente que não passava no AOT.

DTHFUI-1174

Author: Samir Hassan Ayoub

projects/ui/karma.conf.js

@@ -46,30 +46,6 @@ module.exports = function (config) {
             },
             'src/lib/components/po-field/po-input/po-input.component.ts': {
               branches: 50
-            },
-            'src/lib/components/po-field/po-rich-text/po-rich-text.component.ts': {
-              statements: 0,
-              lines: 0,
-              branches: 0,
-              functions: 0
-            },
-            'src/lib/components/po-field/po-rich-text/po-rich-text-base.component.ts': {
-              statements: 0,
-              lines: 0,
-              branches: 0,
-              functions: 0
-            },
-            'src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.ts': {
-              statements: 0,
-              lines: 0,
-              branches: 0,
-              functions: 0
-            },
-            'src/lib/components/po-field/po-rich-text/po-rich-text-toolbar/po-rich-text-toolbar.component.ts': {
-              statements: 0,
-              lines: 0,
-              branches: 0,
-              functions: 0
             }
           }
         }

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-base.component.spec.ts

@@ -0,0 +1,148 @@
+import { FormControl } from '@angular/forms';
+
+import * as ValidatorsFunctions from '../validators';
+import { expectPropertiesValues } from '../../../util-test/util-expect.spec';
+
+import { PoRichTextBaseComponent } from './po-rich-text-base.component';
+
+class PoRichTextComponent extends PoRichTextBaseComponent { }
+
+describe('PoRichTextBaseComponent:', () => {
+  let component: PoRichTextComponent;
+
+  beforeEach(() => {
+    component = new PoRichTextComponent();
+  });
+
+  it('should be created', () => {
+    expect(component instanceof PoRichTextBaseComponent).toBeTruthy();
+  });
+
+  describe('Properties:', () => {
+    const booleanInvalidValues = [undefined, null, 2, 'string'];
+    const booleanValidTrueValues = [true, 'true', 1, ''];
+
+    it('p-height: should update property with valid values', () => {
+      const validValues = [0, 5, 200, 1000];
+
+      expectPropertiesValues(component, 'height', validValues, validValues);
+    });
+
+    it('p-placeholder: should update property with valid values', () => {
+      const validValues = ['value 1', 'value 2'];
+
+      expectPropertiesValues(component, 'placeholder', validValues, validValues);
+    });
+
+    it('p-placeholder: property should be an empty string if value is undefined or null', () => {
+      const invalidValues = [undefined, null];
+
+      expectPropertiesValues(component, 'placeholder', invalidValues, '');
+    });
+
+    it('p-readonly: should update property with valid values.', () => {
+      expectPropertiesValues(component, 'readonly', booleanValidTrueValues, true);
+    });
+
+    it('p-readonly: should update property with invalid values.', () => {
+      expectPropertiesValues(component, 'readonly', booleanInvalidValues, false);
+    });
+
+    it('p-required: should update property with valid values, invalid values and call `validateModel`', () => {
+      spyOn(component, <any>'validateModel');
+
+      expectPropertiesValues(component, 'required', booleanValidTrueValues, true);
+      expectPropertiesValues(component, 'required', booleanInvalidValues, false);
+
+      expect(component['validateModel']).toHaveBeenCalledWith(component.value);
+    });
+  });
+
+  describe('Methods:', () => {
+
+    it('registerOnChange: should register function onChangeModel function', () => {
+      const registerOnChangeModelFn = () => { };
+
+      component.registerOnChange(registerOnChangeModelFn);
+      expect(component.onChangeModel).toBe(registerOnChangeModelFn);
+    });
+
+    it('registerOnTouched: should register function onTouched function', () => {
+      const registeronTouchedFn = () => { };
+
+      component.registerOnTouched(registeronTouchedFn);
+      expect(component['onTouched']).toBe(registeronTouchedFn);
+    });
+
+    it('registerOnValidatorChange: should register function validatorChange function', () => {
+      const registervalidatorChangeFn = () => { };
+
+      component.registerOnValidatorChange(registervalidatorChangeFn);
+      expect(component['validatorChange']).toBe(registervalidatorChangeFn);
+    });
+
+    it('validate: should return required obj when `requiredFailed` is true', () => {
+      const validObj = {
+        required: {
+          valid: false,
+        }
+      };
+
+      spyOn(ValidatorsFunctions, 'requiredFailed').and.returnValue(true);
+
+      expect(component.validate(new FormControl([]))).toEqual(validObj);
+      expect(ValidatorsFunctions.requiredFailed).toHaveBeenCalled();
+    });
+
+    it('validate: should return undefined if `requiredFailed` is false', () => {
+      spyOn(ValidatorsFunctions, 'requiredFailed').and.returnValue(false);
+
+      expect(component.validate(new FormControl(null))).toBeUndefined();
+      expect(ValidatorsFunctions.requiredFailed).toHaveBeenCalled();
+    });
+
+    it('writeValue: should set value with the received param', () => {
+      component.value = 'value A';
+
+      component.writeValue('value B');
+
+      expect(component.value).toBe('value B');
+    });
+
+    it('updateModel: should call onChangeModel method if onChangeModel isn`t false', () => {
+      component.onChangeModel = true;
+
+      spyOn(component, <any>'onChangeModel');
+
+      component['updateModel']('updated value');
+
+      expect(component.onChangeModel).toHaveBeenCalledWith('updated value');
+    });
+
+    it('updateModel: onChangeModel shouldn`t be registered as a function if onChangeModel is undefined', () => {
+      component.onChangeModel = undefined;
+
+      component['updateModel']('updated value');
+
+      expect(component.onChangeModel).toBeUndefined();
+    });
+
+    it('validateModel: should call validatorChange method if validatorChange isn`t false', () => {
+      component['validatorChange'] = true;
+
+      spyOn(component, <any>'validatorChange');
+
+      component['validateModel']('updated value');
+
+      expect(component['validatorChange']).toHaveBeenCalledWith('updated value');
+    });
+
+    it('validateModel: validatorChange shouldn`t be registered as a function if validatorChange is undefined', () => {
+      component['validatorChange'] = undefined;
+
+      component['validateModel']('updated value');
+
+      expect(component['validatorChange']).toBeUndefined();
+    });
+  });
+});

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-base.component.ts

@@ -16,9 +16,10 @@ export abstract class PoRichTextBaseComponent implements ControlValueAccessor, V
   private _height?: number;
   private _placeholder: string;
   private _readonly: boolean;
+  private _required: boolean;
 
-  onChangeModel: any = null;
   invalid: boolean = false;
+  onChangeModel: any = null;
   value: string;
 
   // tslint:disable-next-line
@@ -120,19 +121,24 @@ export abstract class PoRichTextBaseComponent implements ControlValueAccessor, V
   }
 
   /**
+   * @optional
+   *
    * @description
    *
    * Indica que o campo será obrigatório.
    *
    * @default `false`
    */
-  required?: boolean = false;
-  @Input('p-required') set setRequired(required: string) {
-    this.required = convertToBoolean(required);
+  @Input('p-required') set required(value: boolean) {
+    this._required = convertToBoolean(value);
 
     this.validateModel(this.value);
   }
 
+  get required() {
+    return this._required;
+  }
+
   // Função implementada do ControlValueAccessor
   // Usada para interceptar as mudanças e não atualizar automaticamente o Model
   registerOnChange(func: any): void {

projects/ui/src/lib/components/po-field/po-rich-text/po-rich-text-body/po-rich-text-body.component.spec.ts

@@ -0,0 +1,176 @@
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { configureTestSuite } from './../../../../util-test/util-expect.spec';
+
+import { PoRichTextBodyComponent } from './po-rich-text-body.component';
+
+describe('PoRichTextBodyComponent:', () => {
+  let component: PoRichTextBodyComponent;
+  let fixture: ComponentFixture<PoRichTextBodyComponent>;
+  let nativeElement: any;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        PoRichTextBodyComponent
+      ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoRichTextBodyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    nativeElement = fixture.debugElement.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('Methods: ', () => {
+
+    it('onInit: should update `bodyElement`', () => {
+      const expectedValue = 'on';
+      component.ngOnInit();
+
+      expect(component.bodyElement.nativeElement.designMode).toEqual(expectedValue);
+    });
+
+    it('onInit: should call `updateValueWithModelValue`', fakeAsync(() => {
+      spyOn(component, <any>'updateValueWithModelValue');
+
+      component.ngOnInit();
+      tick(50);
+
+      expect(component['updateValueWithModelValue']).toHaveBeenCalled();
+    }));
+
+    it('executeCommand: should call `focus`', () => {
+      const spyFocus = spyOn(component.bodyElement.nativeElement, <any> 'focus');
+      const fakeValue = 'p';
+
+      component.executeCommand(fakeValue);
+
+      expect(spyFocus).toHaveBeenCalled();
+    });
+
+    it('executeCommand: should call `execCommand`', () => {
+      const spyExecCommand = spyOn(component.bodyElement.nativeElement, <any> 'focus');
+      const fakeValue = 'p';
+
+      component.executeCommand(fakeValue);
+
+      expect(spyExecCommand).toHaveBeenCalled();
+    });
+
+    it('executeCommand: should call `updateModel`', () => {
+      const fakeValue = 'p';
+      spyOn(component, <any>'updateModel');
+
+      component.executeCommand(fakeValue);
+
+      expect(component['updateModel']).toHaveBeenCalled();
+    });
+
+    it('executeCommand: should call `value.emit` with `modelValue`', () => {
+      component.modelValue = 'teste';
+      const fakeValue = 'p';
+
+      spyOn(component.value, 'emit');
+      component.executeCommand(fakeValue);
+
+      expect(component.value.emit).toHaveBeenCalledWith(component.modelValue);
+    });
+
+    it('onClick: should call `emitSelectionCommands`', () => {
+      spyOn(component, <any>'emitSelectionCommands');
+      component.onClick();
+
+      expect(component['emitSelectionCommands']).toHaveBeenCalled();
+    });
+
+    it('onKeyUp: should call `updateModel`', () => {
+      const element = document.createElement('div');
+      element.classList.add('teste');
+      component.bodyElement.nativeElement.appendChild(element);
+      component.onKeyUp();
+      expect(nativeElement.querySelector('.teste')).toBeFalsy();
+    });
+
+    it('onKeyUp: should call `updateModel`', () => {
+      spyOn(component, <any>'updateModel');
+      component.onKeyUp();
+
+      expect(component['updateModel']).toHaveBeenCalled();
+    });
+
+    it('onKeyUp: should call `emitSelectionCommands`', () => {
+      spyOn(component, <any>'emitSelectionCommands');
+      component.onKeyUp();
+
+      expect(component['emitSelectionCommands']).toHaveBeenCalled();
+    });
+
+    it('update: should call `updateModel`', fakeAsync(() => {
+      spyOn(component, <any>'updateModel');
+
+      component.update();
+      tick(50);
+
+      expect(component['updateModel']).toHaveBeenCalled();
+    }));
+
+    it('update: should call `onKeyUp`', fakeAsync(() => {
+      spyOn(component, <any>'onKeyUp');
+
+      component.update();
+      tick(50);
+
+      expect(component['onKeyUp']).toHaveBeenCalled();
+    }));
+
+    it('emitSelectionCommands: should call `commands.emit`', () => {
+      spyOn(component.commands, 'emit');
+      component['emitSelectionCommands']();
+
+      expect(component.commands.emit).toHaveBeenCalled();
+    });
+
+    it('updateModel: should update `modelValue`', () => {
+      component.bodyElement.nativeElement.innerHTML = 'teste';
+      component['updateModel']();
+      fixture.detectChanges();
+      expect(component.modelValue).toContain('teste');
+    });
+
+    it('updateModel: should call `value.emit` with `modelValue`', () => {
+      component.modelValue = 'teste';
+
+      spyOn(component.value, 'emit');
+      component['updateModel']();
+
+      expect(component.value.emit).toHaveBeenCalledWith(component.modelValue);
+    });
+
+    it('updateValueWithModelValue: should call `bodyElement.nativeElement.insertAdjacentHTML`', () => {
+      component.modelValue = 'teste';
+
+      spyOn(component.bodyElement.nativeElement, 'insertAdjacentHTML');
+      component['updateValueWithModelValue']();
+
+      expect(component.bodyElement.nativeElement.insertAdjacentHTML).toHaveBeenCalledWith('afterbegin', component.modelValue);
+    });
+
+  });
+
+  describe('Templates: ', () => {
+
+  it('should contain `po-rich-text-body`', () => {
+
+    expect(nativeElement.querySelector('.po-rich-text-body')).toBeTruthy();
+  });
+
+  });
+
+});