test: fix editor not destoryed correctly

src/app/app.component.spec.ts

@@ -1,29 +1,39 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
 import { NgxEditorModule } from './ngx-editor/ngx-editor.module';
+import { DebugElement } from '@angular/core';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [NgxEditorModule],
+      imports: [
+        FormsModule,
+        NgxEditorModule
+      ],
       declarations: [
         AppComponent
       ],
     }).compileComponents();
   }));
 
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 
   it('should render title in a h6 tag', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('.subtitle').textContent).toContain('A Simple WYSIWYG Editor for Angular Applications.');
+    const compiled: DebugElement = fixture.debugElement;
+    expect(compiled.query(By.css('.NgxEditor-MenuBar'))).toBeDefined();
   });
 });

src/app/app.component.ts

@@ -16,7 +16,7 @@ export class AppComponent {
     content: []
   };
 
-  editorContentChange(e: object) {
-    this.editorContent = e;
+  editorContentChange(doc: object) {
+    this.editorContent = doc;
   }
 }

src/app/app.module.ts

@@ -14,7 +14,6 @@ import { NgxEditorModule } from './ngx-editor/ngx-editor.module';
     FormsModule,
     NgxEditorModule,
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 

src/app/ngx-editor/ngx-editor.component.spec.ts

@@ -1,22 +1,21 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
-import { NgxEditorComponent } from './ngx-editor.component';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
 
+import { NgxEditorComponent } from './ngx-editor.component';
 
 describe('NgxEditorComponent', () => {
   let component: NgxEditorComponent;
   let fixture: ComponentFixture<NgxEditorComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule, HttpClientModule],
-      providers: [],
+      imports: [FormsModule],
       declarations: [
         NgxEditorComponent,
       ]
-    })
-      .compileComponents();
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -25,7 +24,15 @@ describe('NgxEditorComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should create the editor component correctly', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render the editor component', () => {
+    expect(true).toBeTrue();
+
+    const compiled: DebugElement = fixture.debugElement;
+    // expect menubar to be rendered
+    expect(compiled.query(By.css('.NgxEditor-MenuBar'))).toBeDefined();
+  });
 });

src/app/ngx-editor/ngx-editor.component.ts

@@ -1,6 +1,6 @@
 import {
   Component, ViewChild, ElementRef,
-  Input, forwardRef, AfterViewInit, OnDestroy, OnInit, ViewEncapsulation
+  Input, forwardRef, OnDestroy, OnInit, ViewEncapsulation
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 
@@ -26,7 +26,7 @@ import computeOptions from './utils/computeOptions';
   encapsulation: ViewEncapsulation.None
 })
 
-export class NgxEditorComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
+export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {
   @ViewChild('ngxEditor', { static: true }) ngxEditor: ElementRef;
 
   @Input() placeholder = 'Type here...';
@@ -97,10 +97,8 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, AfterVi
      placeholder: this.placeholder,
      config: this.config
    });
-  }
 
-  ngAfterViewInit() {
-    this.createEditor();
+   this.createEditor();
   }
 
   ngOnDestroy() {

src/app/ngx-editor/ngx-editor.module.ts

@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import { NgxEditorComponent } from './ngx-editor.component';
 
 @NgModule({
-  imports: [],
   declarations: [NgxEditorComponent],
   exports: [NgxEditorComponent],
 })