chore(decorate): add decorate unit test

packages/src/components/editable/editable.component.spec.ts

@@ -1,19 +1,41 @@
-// import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-// import { BasicEditableComponent, configureBasicEditableTestingModule } from '../../testing';
+import { ComponentFixture, fakeAsync, flush, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BasicEditableComponent, AdvancedEditableComponent, TestingLeafComponent, configureBasicEditableTestingModule } from '../../testing';
 
-// describe('Editable Component', () => {
-//     let component: BasicEditableComponent;
-//     let fixture: ComponentFixture<BasicEditableComponent>;
+describe('Editable Component', () => {
+    let component: AdvancedEditableComponent;
+    let fixture: ComponentFixture<AdvancedEditableComponent>;
 
-//     beforeEach(waitForAsync(() => {
-//         configureBasicEditableTestingModule([BasicEditableComponent]);
-//         fixture = TestBed.createComponent(BasicEditableComponent);
-//         component = fixture.componentInstance;
-//         fixture.detectChanges();
-//     }));
+    beforeEach(fakeAsync(() => {
+        configureBasicEditableTestingModule([BasicEditableComponent, AdvancedEditableComponent, TestingLeafComponent], [TestingLeafComponent]);
+        fixture = TestBed.createComponent(AdvancedEditableComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+    }));    
 
-//     it('should create editable component', () => {
-//         expect(component).toBeTruthy();
-//         expect(component.editableComponent).toBeTruthy();
-//     });
-// });
+    it('decorate', fakeAsync(() => {
+        let testingLeaf;
+        testingLeaf= fixture.debugElement.query(By.css('.testing-leaf'));
+        expect(testingLeaf).toBeFalsy();
+
+        const keywords1 = 'text';
+        component.generateDcoreate(keywords1);
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+        testingLeaf = fixture.debugElement.query(By.css('.testing-leaf')).nativeElement;
+        expect(testingLeaf).toBeTruthy();
+        expect(testingLeaf.textContent).toEqual(keywords1);
+
+        const keywords2 = 'text';
+        component.generateDcoreate(keywords2);
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+        testingLeaf = fixture.debugElement.query(By.css('.testing-leaf')).nativeElement;;
+        expect(testingLeaf).toBeTruthy();
+        expect(testingLeaf.textContent).toEqual(keywords2);
+    }));
+});

packages/src/components/text/default-text.component.ts

@@ -1,7 +1,6 @@
 import {
     Component,
-    ChangeDetectionStrategy,
-    OnInit
+    ChangeDetectionStrategy
 } from '@angular/core';
 import { BaseTextComponent } from '../../view/base';
 

packages/src/testing/advanced-editable.component.ts

@@ -0,0 +1,67 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { createEditor, NodeEntry, Text } from "slate";
+import { SlateEditableComponent } from "../components/editable/editable.component";
+import { withAngular } from "../plugins/with-angular";
+import { createDefaultDocument } from "./create-document";
+import { TestingLeafComponent } from "./leaf.component";
+
+@Component({
+    selector: 'basic-editable',
+    template: `
+        <slate-editable 
+            [editor]="editor"
+            [ngModel]="value"
+            [decorate]="decorate"
+            [renderLeaf]="renderLeaf"
+            ></slate-editable>
+    `
+})
+export class AdvancedEditableComponent implements OnInit {
+    editor = withAngular(createEditor());
+
+    value = createDefaultDocument();
+
+    decorate = (nodeEntry: NodeEntry) => [];
+
+    @ViewChild(SlateEditableComponent, { static: true })
+    editableComponent: SlateEditableComponent;
+
+    generateDcoreate(keywords: string) {
+        this.decorate = ([node, path]) => {
+            const ranges = [];
+
+            if (keywords && Text.isText(node)) {
+                const { text } = node;
+                const parts = text.split(keywords);
+                let offset = 0;
+
+                parts.forEach((part, i) => {
+                    if (i !== 0) {
+                        ranges.push({
+                            anchor: { path, offset: offset - keywords.length },
+                            focus: { path, offset },
+                            highlight: true,
+                        });
+                    }
+
+                    offset = offset + part.length + keywords.length;
+                });
+            }
+
+            return ranges;
+        };
+    }
+
+    renderLeaf = (text: Text) => {
+        if (text['highlight']) {
+            return TestingLeafComponent;
+        }
+        return null;
+    }
+
+    ngOnInit() {
+    }
+
+    constructor() {
+    }
+}

packages/src/testing/index.ts

@@ -2,4 +2,6 @@ export * from './dispatcher-events';
 export * from './events';
 export * from './element-focus';
 export * from './module';
-export * from './basic-editable.component';
+export * from './basic-editable.component';
+export * from './advanced-editable.component';
+export * from './leaf.component';

packages/src/testing/leaf.component.ts

@@ -0,0 +1,33 @@
+import { Component, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
+import { BaseLeafComponent } from 'slate-angular';
+
+@Component({
+  selector: 'span[testingLeaf]',
+  template: `
+    <span slateString [context]="context" [viewContext]="viewContext"
+      ><span></span
+    ></span>
+  `,
+  host: {
+      'class': 'testing-leaf'
+  }
+})
+export class TestingLeafComponent extends BaseLeafComponent {
+    constructor(
+        public elementRef: ElementRef,
+        public cdr: ChangeDetectorRef,
+        private renderer: Renderer2
+    ) {
+        super(elementRef, cdr);
+    }
+
+    onContextChange() {
+        super.onContextChange();
+        this.changeStyle();
+    }
+
+    changeStyle() {
+        const backgroundColor = this.leaf['highlight'] ? '#ffeeba' : null;
+        this.renderer.setStyle(this.nativeElement, 'backgroundColor', backgroundColor);
+    }
+}

packages/src/testing/module.ts

@@ -1,11 +1,13 @@
 import { CommonModule } from "@angular/common";
-import { Provider } from "@angular/core";
+import { NgModule, Provider } from "@angular/core";
 import { TestBed } from "@angular/core/testing";
 import { BrowserModule } from "@angular/platform-browser";
 import { SlateModule } from "../module";
 import { FormsModule } from "@angular/forms";
+import { BrowserDynamicTestingModule } from "@angular/platform-browser-dynamic/testing";
+import { TestingLeafComponent } from "./leaf.component";
 
-export function configureBasicEditableTestingModule(declarations: any[], providers: Provider[] = []) {
+export function configureBasicEditableTestingModule(declarations: any[], entryComponents: any[] = [], providers: Provider[] = []) {
     TestBed.configureTestingModule({
         imports: [
             CommonModule, BrowserModule, SlateModule, FormsModule
@@ -14,5 +16,9 @@ export function configureBasicEditableTestingModule(declarations: any[], provide
         providers: [
             ...providers
         ],
+    }).overrideModule(BrowserDynamicTestingModule, {
+        set: {
+            entryComponents: entryComponents,
+        }
     }).compileComponents();
 }