From 6134a1d4d970a6c3126e89685c60a778713fe5e2 Mon Sep 17 00:00:00 2001 From: Oliver Pulges Date: Thu, 1 Sep 2016 11:08:02 +0300 Subject: [PATCH] Fix Tests crash in IE --- test/editor_contenteditablemode_test.js | 183 ++++++++++++------------ 1 file changed, 93 insertions(+), 90 deletions(-) diff --git a/test/editor_contenteditablemode_test.js b/test/editor_contenteditablemode_test.js index 60e1091..779da41 100644 --- a/test/editor_contenteditablemode_test.js +++ b/test/editor_contenteditablemode_test.js @@ -12,11 +12,28 @@ if (wysihtml.browser.supported()) { this.editableArea.className = "wysihtml-test-class"; this.editableArea.title = "Please enter your foo"; this.editableArea.innerHTML = "hey tiff, what's up?"; - + this.originalBodyClassName = document.body.className; - + document.body.appendChild(this.editableArea); - + + }, + + clickOn: function(element) { + var mEvent; + //This is true only for IE,firefox + if (document.createEvent){ + // To create a mouse event , first we need to create an event and then initialize it. + mEvent = document.createEvent('MouseEvent'); + mEvent.initMouseEvent('click',true,true,window,0,0,0,0,0,false,false,false,false,0,null); + } else { + mEvent = new MouseEvent('click', { + 'view': window, + 'bubbles': true, + 'cancelable': true + }); + } + element.dispatchEvent(mEvent); }, teardown: function() { @@ -37,12 +54,12 @@ if (wysihtml.browser.supported()) { var editor = new wysihtml.Editor(this.editableArea); editor.on("load", function() { var editableElement = that.editableArea; - + ok(true, "Load callback triggered"); ok(wysihtml.dom.hasClass(document.body, "wysihtml-supported"), " received correct class name"); ok(wysihtml.dom.hasClass(editableElement, "wysihtml-test-class"), "editable kept its original class name"); ok(wysihtml.dom.hasClass(editableElement, "wysihtml-sandbox"), "editable added its own sandbox class name"); - + equal(editor.config.contentEditableMode, true, "contentEditableMode deduced correctly as editable is initiated on non textarea"); equal(editor.config.noTextarea, true, "noTextarea mode deduced correctly as editable is initiated on non textarea"); equal(editableElement.style.display, "", "Editor contenteditable is visible"); @@ -53,79 +70,79 @@ if (wysihtml.browser.supported()) { equal(editableElement.innerHTML.toLowerCase(), "hey tiff, what's up?", "Initial value preserved in editor"); ok(wysihtml.dom.hasClass(editableElement, "wysihtml-editor"), "Editor element has correct class name"); equal(typeof editor.synchronizer, "undefined", "Syncronizer correctly not initiated in contenteditable mode"); - + start(); }); }); -// EVENTS TESTS +// EVENTS TESTS asyncTest("Check events", function() { expect(17); - + var that = this; var editor = new wysihtml.Editor(this.editableArea); - + editor.on("beforeload", function() { ok(true, "'beforeload' event correctly fired"); }); - + editor.on("load", function() { var composerElement = that.editableArea; - + editor.on("focus", function(event) { ok(true, "'focus' event correctly fired"); ok(event, "event is defined"); ok(event instanceof Event, "event is instance of 'Event'"); ok(event && event.type === 'focus', "event is of type 'focus'"); }); - + editor.on("blur", function(event) { ok(true, "'blur' event correctly fired"); ok(event, "event is defined"); ok(event instanceof Event, "event is instance of 'Event'"); ok(event && event.type === 'blur', "event is of type 'blur'"); }); - + editor.on("change", function(event) { ok(true, "'change' event correctly fired"); ok(event, "event is defined"); ok(event instanceof Event, "event is instance of 'Event'"); ok(event && event.type === 'change', "event is of type 'change'"); }); - - + + editor.on("custom_event", function(event) { ok(true, "'custom_event' correctly fired"); ok(event, "event is defined"); ok(event && event.type === 'custom_event', "event is of type 'custom_event'"); }); - + happen.once(composerElement, {type: "focus"}); editor.stopObserving("focus"); - + // Modify innerHTML in order to force 'change' event to trigger onblur composerElement.innerHTML = "foobar"; happen.once(composerElement, {type: "blur"}); happen.once(composerElement, {type: "focusout"}); - + equal(wysihtml.dom.getStyle("margin-top").from(composerElement), "5px", ":focus styles are correctly unset"); - - + + editor.fire("custom_event", { type: 'custom_event' }); - + setTimeout(function() { start(); }, 100); }); }); asyncTest("Check events paste", function() { expect(12); - + var that = this; var editor = new wysihtml.Editor(this.editableArea); - + editor.on("load", function() { var composerElement = that.editableArea; - + editor.on("paste", function(event) { ok(event, "event is defined"); ok(event instanceof Event, "event is instance of 'Event'"); @@ -143,20 +160,20 @@ if (wysihtml.browser.supported()) { var pasteEvent = document.createEvent("Event"); pasteEvent.initEvent("paste", true, true); that.editableArea.dispatchEvent(pasteEvent); - + setTimeout(function() { start(); }, 100); }); }); asyncTest("Check events drop", function() { expect(12); - + var that = this; var editor = new wysihtml.Editor(this.editableArea); - + editor.on("load", function() { var composerElement = that.editableArea; - + //if changing from drop to paste it works editor.on('drop', function(event) { ok(event, "event is defined"); @@ -185,21 +202,21 @@ if (wysihtml.browser.supported()) { }); -// Placeholder tests +// Placeholder tests asyncTest("Check placeholder", function() { expect(12); - + var that = this; - + var placeholderText = "enter text ..."; this.editableArea.innerHTML = ""; this.editableArea.setAttribute("data-placeholder", "enter text ..."); - + var editor = new wysihtml.Editor(this.editableArea); editor.on("load", function() { var composerElement = that.editableArea; equal(wysihtml.dom.getTextContent(composerElement), placeholderText, "Placeholder text correctly copied into textarea"); - + ok(wysihtml.dom.hasClass(composerElement, "wysihtml-placeholder"), "Editor got 'placeholder' css class"); ok(editor.hasPlaceholderSet(), "'hasPlaceholderSet' returns correct value when placeholder is actually set"); editor.fire("focus:composer"); @@ -208,7 +225,7 @@ if (wysihtml.browser.supported()) { ok(!editor.hasPlaceholderSet(), "'hasPlaceholderSet' returns correct value when placeholder isn't actually set"); editor.fire("blur:composer"); equal(wysihtml.dom.getTextContent(composerElement), placeholderText, "Editor restored placeholder text after unfocus"); - editor.fire("focus:composer"); + editor.fire("focus:composer"); equal(wysihtml.dom.getTextContent(composerElement), ""); composerElement.innerHTML = "some content"; editor.fire("blur:composer"); @@ -225,12 +242,12 @@ if (wysihtml.browser.supported()) { }); }); -// Editor available functions test +// Editor available functions test asyncTest("Check public api", function() { expect(13); - + var that = this; - + var editor = new wysihtml.Editor(this.editableArea, { parserRules: { tags: { p: { rename_tag: "div" }, "strong": {} } }, classNames: { @@ -238,47 +255,47 @@ if (wysihtml.browser.supported()) { composer: "editor" } }); - + editor.on("load", function() { ok(editor.isCompatible(), "isCompatible() returns correct value"); ok(wysihtml.dom.hasClass(document.body, "editor-is-supported"), " received correct class name"); - + var composerElement = that.editableArea; editor.clear(); equal(wysihtml.dom.getTextContent(composerElement), "", "Editor empty after calling 'clear'"); ok(wysihtml.dom.hasClass(composerElement, "editor"), "Composer element has correct class name"); - + var html = "hello foo!"; editor.setValue(html); equal(composerElement.innerHTML.toLowerCase(), html, "Editor content correctly set after calling 'setValue'"); ok(!editor.isEmpty(), "'isEmpty' returns correct value when the composer element isn't actually empty"); - + var value = editor.getValue(false, false); equal(value.toLowerCase(), html, "Editor content correctly returned after calling 'getValue(false, false)'"); - + editor.clear(); value = editor.getValue(); equal(value, ""); ok(editor.isEmpty(), "'isEmpty' returns correct value when the composer element is actually empty"); - + equal(editor.parse("

foo

").toLowerCase(), "
foo
", "'parse' returns correct value"); - + // Check disable/enable editor.disable(); ok(!composerElement.getAttribute("contentEditable"), "When disabled the composer hasn't the contentEditable attribute"); - + editor.enable(); equal(composerElement.getAttribute("contentEditable"), "true", "After enabling the editor the contentEditable property is true"); ok(!composerElement.getAttribute("disabled"), "After enabling the disabled attribute is unset"); - + start(); }); }); - -// Parser tests + +// Parser tests asyncTest("Parser (default parser method with parserRules as object)", function() { expect(2); - + var parserRules = { tags: { div: true, @@ -287,14 +304,14 @@ if (wysihtml.browser.supported()) { script: undefined } }; - + var input = "

foobar

", output = "
foobar
"; - + var editor = new wysihtml.Editor(this.editableArea, { parserRules: parserRules }); - + editor.on("load", function() { deepEqual(editor.config.parserRules, parserRules, "Parser rules correctly set on config object"); // Invoke parsing via second parameter of setValue() @@ -303,7 +320,7 @@ if (wysihtml.browser.supported()) { start(); }); }); - + asyncTest("Editable area html should be cleaned up upon initiation", function() { expect(2); var that = this, @@ -315,31 +332,31 @@ if (wysihtml.browser.supported()) { input = "
Hi,
there!
", output = "Hi,
there!
", editor; - + this.editableArea.innerHTML = input; equal(that.editableArea.innerHTML, input, "Content is set as unclean before editor initiation"); editor = new wysihtml.Editor(this.editableArea, { parserRules: parserRules }); - + editor.on("load", function() { equal(that.editableArea.innerHTML, output, "Content is cleaned after initiation"); start(); }); }); - - + + asyncTest("Parser (custom parser method with parserRules as object", function() { expect(6); this.editableArea.innerHTML = "

foobar

"; - + var that = this, parserRules = { script: undefined }, input = this.editableArea.innerHTML, output = input; - - + + var editor = new wysihtml.Editor(this.editableArea, { parserRules: parserRules, parser: function(html, config) { @@ -352,7 +369,7 @@ if (wysihtml.browser.supported()) { return html.replace(/\.*?\<\/script\>/gi, ""); } }); - + editor.on("load", function() { var output2 = "

foobar

"; // Invoke parsing via second parameter of setValue() @@ -360,21 +377,21 @@ if (wysihtml.browser.supported()) { start(); }); }); - + asyncTest("Inserting an element which causes the textContent/innerText of the contentEditable element to be empty works correctly", function() { expect(1); - + var that = this; - + var editor = new wysihtml.Editor(this.editableArea, { parserRules: { tags: { "img": {} } } }); editor.on("load", function() { var html = '', composerElement = that.editableArea; - + composerElement.innerHTML = html; - + // Fire events that could cause a change in the composer happen.once(composerElement, {type: "keypress"}); @@ -420,52 +437,38 @@ if (wysihtml.browser.supported()) { noerror = false; }; - toolbar.dispatchEvent(new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - })); - - document.body.dispatchEvent(new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - })); - - editor.composer.element.dispatchEvent(new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - })); + this.clickOn(toolbar); + this.clickOn(document.body); + this.clickOn(editor.composer.element); setTimeout(function() { ok(noerror, "Toolbar or body click did not bring up any error"); start(); }, 100); - - }); + + }.bind(this)); }); - - /* + + /* // TODO: needs logic rethink of terms and conditions asyncTest("If selection borders cross contenteditabel only editable gets modified", function() { expect(3); var that = this, editor = new wysihtml.Editor(this.editableArea); - + editor.on("load", function() { editor.setValue("foobar", true); editor.composer.selection.selectNode(that.editableArea); equal(that.editableArea.innerHTML, "foobar", "Content was not bold before"); window.e = editor; editor.composer.commands.exec('bold'); - + ok(wysihtml.dom.getStyle("font-weight").from(that.editableArea.children[0]) == 700 || wysihtml.dom.getStyle("font-weight").from(that.editableArea.children[0]) == "bold", "First child has style bold"); ok(wysihtml.dom.getStyle("font-weight").from(that.editableArea) == 400 || wysihtml.dom.getStyle("font-weight").from(that.editableArea) == "normal", "Editable element itself is not bold"); start(); }); }); */ - + }