fix(rich-text): corrige atualização do model via código

Corrige comportamento ao atualizar o valor do componente via código.

Fixes DTHFUI-3787

Author: alinelariguet

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

@@ -5,15 +5,17 @@ import * as ValidatorsFunctions from '../validators';
 import { expectPropertiesValues } from '../../../util-test/util-expect.spec';
 
 import { PoRichTextBaseComponent } from './po-rich-text-base.component';
+import { PoRichTextService } from './po-rich-text.service';
 
 @Directive()
 class PoRichTextComponent extends PoRichTextBaseComponent {}
 
 describe('PoRichTextBaseComponent:', () => {
+  const poRichTextService: PoRichTextService = new PoRichTextService();
   let component: PoRichTextComponent;
 
   beforeEach(() => {
-    component = new PoRichTextComponent();
+    component = new PoRichTextComponent(poRichTextService);
   });
 
   it('should be created', () => {
@@ -103,11 +105,14 @@ describe('PoRichTextBaseComponent:', () => {
     });
 
     it('writeValue: should set value with the received param', () => {
+      spyOn(component['richTextService'], 'emitModel');
+      const model = 'value B';
       component.value = 'value A';
 
-      component.writeValue('value B');
+      component.writeValue(model);
 
-      expect(component.value).toBe('value B');
+      expect(component.value).toBe(model);
+      expect(component['richTextService'].emitModel).toHaveBeenCalledWith(model);
     });
 
     it('updateModel: should call onChangeModel method if onChangeModel isn`t false', () => {

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

@@ -4,6 +4,7 @@ import { EventEmitter, Input, Output, Directive } from '@angular/core';
 import { convertToBoolean } from '../../../utils/util';
 import { requiredFailed } from '../validators';
 import { InputBoolean } from '../../../decorators';
+import { PoRichTextService } from './po-rich-text.service';
 
 /**
  * @description
@@ -161,6 +162,8 @@ export abstract class PoRichTextBaseComponent implements ControlValueAccessor, V
   /** Evento disparado ao modificar valor do model e que recebe como parâmetro o valor alterado. */
   @Output('p-change-model') changeModel?: EventEmitter<any> = new EventEmitter();
 
+  constructor(private richTextService: PoRichTextService) {}
+
   // Função implementada do ControlValueAccessor
   // Usada para interceptar as mudanças e não atualizar automaticamente o Model
   registerOnChange(func: any): void {
@@ -189,6 +192,8 @@ export abstract class PoRichTextBaseComponent implements ControlValueAccessor, V
 
   writeValue(value: string): void {
     this.value = value;
+
+    this.richTextService.emitModel(value);
   }
 
   // Executa a função onChange

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

@@ -1,5 +1,7 @@
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 
+import { of } from 'rxjs';
+
 import * as UtilsFunction from '../../../../utils/util';
 import { configureTestSuite } from './../../../../util-test/util-expect.spec';
 
@@ -28,26 +30,55 @@ describe('PoRichTextBodyComponent:', () => {
   });
 
   describe('Methods:', () => {
+    const fakeSubscription = <any>{ unsubscribe: () => {} };
+
     it('onInit: should update `bodyElement`', () => {
       const expectedValue = 'on';
       component.ngOnInit();
 
       expect(component.bodyElement.nativeElement.designMode).toEqual(expectedValue);
     });
 
-    it('onInit: should call `updateValueWithModelValue` and `addClickListenerOnAnchorElements`', fakeAsync(() => {
+    it('onInit: should call `richTextService.getModel.subscribe`, update the model and add listeners to the anchor elements', fakeAsync(() => {
+      const response = 'valor inicial';
+      spyOn(component['richTextService'], 'getModel').and.returnValue(of(response));
       spyOn(component, <any>'updateValueWithModelValue');
       spyOn(component, <any>'addClickListenerOnAnchorElements');
 
       component.ngOnInit();
-      tick(50);
 
-      expect(component['updateValueWithModelValue']).toHaveBeenCalledBefore(
-        component['addClickListenerOnAnchorElements']
-      );
-      expect(component['addClickListenerOnAnchorElements']).toHaveBeenCalled();
+      component['richTextService'].getModel().subscribe(() => {
+        expect(component['updateValueWithModelValue']).toHaveBeenCalled();
+        expect(component['addClickListenerOnAnchorElements']).toHaveBeenCalled();
+      });
+
+      tick();
+
+      expect(component['modelSubscription']).toBeTruthy();
+      expect(component.modelValue).toEqual(response);
     }));
 
+    it('ngOnDestroy: should unsubscribe modelSubscription.', () => {
+      component['modelSubscription'] = fakeSubscription;
+
+      spyOn(fakeSubscription, <any>'unsubscribe');
+
+      component.ngOnDestroy();
+
+      expect(fakeSubscription.unsubscribe).toHaveBeenCalled();
+    });
+
+    it('ngOnDestroy: should not unsubscribe if modelSubscription is falsy.', () => {
+      component['modelSubscription'] = fakeSubscription;
+
+      spyOn(fakeSubscription, <any>'unsubscribe');
+
+      component['modelSubscription'] = undefined;
+      component.ngOnDestroy();
+
+      expect(fakeSubscription.unsubscribe).not.toHaveBeenCalled();
+    });
+
     describe('executeCommand:', () => {
       it('should call `focus`', () => {
         const spyFocus = spyOn(component.bodyElement.nativeElement, <any>'focus');
@@ -1039,6 +1070,15 @@ describe('PoRichTextBodyComponent:', () => {
       );
     });
 
+    it('updateValueWithModelValue: shouldn`t call `bodyElement.nativeElement.insertAdjacentHTML`', () => {
+      component.modelValue = undefined;
+
+      spyOn(component.bodyElement.nativeElement, 'insertAdjacentHTML');
+      component['updateValueWithModelValue']();
+
+      expect(component.bodyElement.nativeElement.insertAdjacentHTML).not.toHaveBeenCalled();
+    });
+
     it('verifyCursorPositionInFirefoxIEEdge: should return true if nodeName is an A tag', () => {
       const element = { nodeName: 'A' };
       const textSelection = {

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

@@ -1,7 +1,10 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, OnDestroy } from '@angular/core';
+
+import { Subscription } from 'rxjs';
 
 import { isFirefox, isIE, isIEOrEdge, openExternalLink } from './../../../../utils/util';
 import { PoKeyCodeEnum } from './../../../../enums/po-key-code.enum';
+import { PoRichTextService } from '../po-rich-text.service';
 
 const poRichTextBodyCommands = [
   'bold',
@@ -19,11 +22,12 @@ const poRichTextBodyCommands = [
   selector: 'po-rich-text-body',
   templateUrl: './po-rich-text-body.component.html'
 })
-export class PoRichTextBodyComponent implements OnInit {
+export class PoRichTextBodyComponent implements OnInit, OnDestroy {
   private isLinkEditing: boolean;
   private linkElement: any;
   private timeoutChange: any;
   private valueBeforeChange: any;
+  private modelSubscription: Subscription;
 
   @ViewChild('bodyElement', { static: true }) bodyElement: ElementRef;
 
@@ -45,16 +49,23 @@ export class PoRichTextBodyComponent implements OnInit {
 
   @Output('p-value') value = new EventEmitter<any>();
 
+  constructor(private richTextService: PoRichTextService) {}
+
   ngOnInit() {
     this.bodyElement.nativeElement.designMode = 'on';
 
-    // timeout necessário para setar o valor vindo do writeValue do componente principal.
-    setTimeout(() => {
+    this.modelSubscription = this.richTextService.getModel().subscribe(modelValue => {
+      this.modelValue = modelValue;
+      this.bodyElement.nativeElement.innerHTML = '';
       this.updateValueWithModelValue();
       this.addClickListenerOnAnchorElements();
     });
   }
 
+  ngOnDestroy() {
+    this.modelSubscription?.unsubscribe();
+  }
+
   executeCommand(command: string | { command: any; value: string | any }) {
     this.bodyElement.nativeElement.focus();
 

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

@@ -4,6 +4,7 @@ import { NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { PoRichTextBaseComponent } from './po-rich-text-base.component';
 import { PoRichTextBodyComponent } from './po-rich-text-body/po-rich-text-body.component';
+import { PoRichTextService } from './po-rich-text.service';
 
 /* istanbul ignore next */
 const providers = [
@@ -57,8 +58,8 @@ export class PoRichTextComponent extends PoRichTextBaseComponent implements Afte
     return this.errorMessage !== '' && !this.value && this.required && this.invalid ? this.errorMessage : '';
   }
 
-  constructor(private element: ElementRef) {
-    super();
+  constructor(private element: ElementRef, richTextService: PoRichTextService) {
+    super(richTextService);
   }
 
   ngAfterViewInit() {

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

@@ -0,0 +1,44 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { Observable } from 'rxjs';
+
+import { PoRichTextService } from './po-rich-text.service';
+
+describe('Service: PoRichText', () => {
+  let richTextService: PoRichTextService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PoRichTextService]
+    });
+
+    richTextService = TestBed.inject(PoRichTextService);
+  });
+
+  it('should ...', inject([PoRichTextService], (service: PoRichTextService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  describe('Methods:', () => {
+    it('emitModel: should call model.next with value', () => {
+      const value = 'test';
+      spyOn(richTextService['model'], 'next');
+      richTextService.emitModel('test');
+
+      expect(richTextService['model'].next).toHaveBeenCalledWith(value);
+    });
+
+    it('getModel: should call model.asObservable', () => {
+      spyOn(richTextService['model'], 'asObservable');
+      richTextService.getModel();
+
+      expect(richTextService['model'].asObservable).toHaveBeenCalled();
+    });
+
+    it('getModel: should return an instanceof Observable', () => {
+      const result = richTextService.getModel();
+
+      expect(result instanceof Observable).toBeTruthy();
+    });
+  });
+});

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

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PoRichTextService {
+  private model = new Subject<string>();
+
+  emitModel(value: string) {
+    this.model.next(value);
+  }
+
+  getModel() {
+    return this.model.asObservable();
+  }
+}