Unit Test tinymce in: angular4 + jest

[sepo27]

Hi,

Can't figure out how to properly initialize tests for Angular 4 component wrapping tinymce.

Environment:

tinymce: 4.7.1
angular: 4.4.6
jest: 20.0.4

Here is my setup:

jest.json

{
  "preset": "jest-preset-angular",
  "globals": {
    "ts-jest": {
      "tsConfigFile": "tests/tsconfig.spec.json"
    },
    "__TRANSFORM_HTML__": true
  },
  "setupTestFrameworkScriptFile": "<rootDir>/tests/jestSetup.ts",
  "moduleNameMapper": null
}

TextEditorComponent

import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/core';
import { EditorManager, Editor } from 'tinymce';
import 'tinymce'; // tslint:disable-line:no-duplicate-imports
import 'tinymce/themes/modern';

declare var tinymce: EditorManager;

@Component({
  selector: 'text-editor',
  template: `<div><textarea [id]="this.editorId" [class]="textEditorClassName"></textarea></div>`,
  styles: [`
    :host textarea {
      display: none;
    }
  `],
})
export class TextEditorComponent implements AfterViewInit {
  @Input()
  content: string = '';

  @Output()
  contentChange = new EventEmitter<string>();

  @Input()
  toolbar: string[] | string | false = [];

  @Input()
  height: number = 150;

  @Input()
  autoFocus: boolean = false;

  public textEditorClassName = 'fct-text-editor';

  private editor: Editor;
  private editorId: string = `text-editor:${new Date().getTime()}`;

  ngAfterViewInit() {
    tinymce.init({
      setup: (editor: Editor) => {
        console.log('===tinymce.setup');
        this.editor = editor;
        this.editor.on('init', () => {
          console.log('===tinymce.init');
          this.editor.setContent(this.content);
        });
        this.editor.on('keyup', () => {
          this.content = this.editor.getContent();
          this.contentChange.emit(this.content);
        });
      },
      selector: `.${this.textEditorClassName}`,
      skin_url: '/assets/tinymce/skins/lightgray',
      toolbar: this.toolbar,
      height: this.height,
      auto_focus: this.autoFocus && this.editorId,
      menubar: false,
      statusbar: false,
      browser_spellcheck: true,
      language_url: '/assets/tinymce/langs/ru.js',
    });
  }
}

Spec

import { NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TextEditorComponent } from './text-editor.component';
import 'tinymce';
import { Editor } from 'tinymce';

describe('TextEditorComponent', () => {
  let
    fixture: ComponentFixture<TextEditorComponent>,
    component: TextEditorComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        TextEditorComponent,
        // TestComponent,
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();

    fixture = TestBed.createComponent(TextEditorComponent);
    component = fixture.componentInstance;
  });

  const editor = (): Editor => component.editor;
  
  it('should be loaded with empty content by default', function () {
    fixture.detectChanges();
    console.log('===debug', editor().getContent());
  });
});

Problem is that this.editor.on('init') doesn't happen.

[fyrkant]

To get this to work you would have to mock out tinymce and run the init function, you can check out how I did it in https://github.com/tinymce/tinymce-react

[fyrkant]

Closing this as this isn't really a problem with tinymce. You can also now try our official angular component:
https://github.com/tinymce/tinymce-angular

[AlexCharlton93]

Did you ever manage to solve this problem? I'm struggling to find anything within the documentation - I am having the same issue. My setup is very similar to yours, and using Jest for the unit tests.