wysihtml5_with_ps 0.0.1

data/test/dom/delegate_test.js

@@ -0,0 +1,62 @@
+module("wysihtml5.dom.delegate", {
+  setup: function() {
+    this.container    = document.createElement("div");
+    this.link1        = document.createElement("a");
+    this.link2        = document.createElement("a");
+    this.nestedSpan   = document.createElement("span");
+    
+    this.link2.appendChild(this.nestedSpan);
+    this.container.appendChild(this.link1);
+    this.container.appendChild(this.link2);
+    
+    document.body.appendChild(this.container);
+  },
+  
+  teardown: function() {
+    this.container.parentNode.removeChild(this.container);
+  }
+});
+
+test("Basic test", function() {
+  expect(3);
+  
+  var that = this;
+  
+  wysihtml5.dom.delegate(this.container, "a", "click", function(event) {
+    ok(true, "Callback handler executed");
+    equal(this, that.link1, "Callback handler executed in correct scope");
+    ok(event.stopPropagation && event.preventDefault, "Parameter passed into callback handler is a proper event object");
+  });
+  
+  QUnit.triggerEvent(this.link1, "click");
+});
+
+test("Click on nested element works as well", function() {
+  expect(3);
+  
+  var that = this;
+  
+  wysihtml5.dom.delegate(this.container, "a", "click", function(event) {
+    ok(true, "Callback handler executed");
+    equal(this, that.link2, "Callback handler executed in correct scope");
+    ok(event.stopPropagation && event.preventDefault, "Parameter passed into callback handler is a proper event object");
+  });
+  
+  QUnit.triggerEvent(this.nestedSpan, "click");
+});
+
+test("Delegation on the body", function() {
+  expect(1);
+  
+  var delegater = wysihtml5.dom.delegate(document.body, ".delegation-test", "mousedown", function() {
+    ok(true, "Callback handler executed");
+  });
+  
+  this.link1.className = "delegation-test another-class";
+  
+  QUnit.triggerEvent(this.link1, "mousedown");
+  
+  delegater.stop();
+  
+  QUnit.triggerEvent(this.link1, "mousedown");
+});

data/test/dom/get_as_dom_test.js

@@ -0,0 +1,55 @@
+module("wysihtml5.dom.getAsDom", {
+  teardown: function() {
+    var iframe;
+    while (iframe = document.querySelector("iframe.wysihtml5-sandbox")) {
+      iframe.parentNode.removeChild(iframe);
+    }
+  }
+});
+
+test("Basic test", function() {
+  var result;
+  
+  result = wysihtml5.dom.getAsDom('<span id="get-in-dom-element-test">foo</span>');
+  equal(result.nodeName, "DIV");
+  equal(result.ownerDocument, document);
+  equal(result.firstChild.nodeName, "SPAN");
+  equal(result.childNodes.length , 1);
+  equal(result.firstChild.innerHTML, "foo");
+  ok(!document.getElementById("get-in-dom-element-test"));
+  
+  result = wysihtml5.dom.getAsDom("<i>1</i> <b>2</b>");
+  equal(result.childNodes.length, 3);
+  
+  result = wysihtml5.dom.getAsDom(document.createElement("div"));
+  equal(result.innerHTML.toLowerCase(), "<div></div>");
+});
+
+
+test("HTML5 elements", function() {
+  var result;
+  
+  result = wysihtml5.dom.getAsDom("<article><span>foo</span></article>");
+  equal(result.firstChild.nodeName.toLowerCase(), "article");
+  equal(result.firstChild.innerHTML.toLowerCase(), "<span>foo</span>");
+  
+  result = wysihtml5.dom.getAsDom("<output>foo</output>");
+  equal(result.innerHTML.toLowerCase(), "<output>foo</output>");
+});
+
+
+asyncTest("Different document context", function() {
+  expect(2);
+  
+  new wysihtml5.dom.Sandbox(function(sandbox) {
+    var result;
+    
+    result = wysihtml5.dom.getAsDom("<div>hello</div>", sandbox.getDocument());
+    equal(result.firstChild.ownerDocument, sandbox.getDocument());
+    
+    result = wysihtml5.dom.getAsDom("<header>hello</header>", sandbox.getDocument());
+    equal(result.innerHTML.toLowerCase(), "<header>hello</header>");
+    
+    start();
+  }).insertInto(document.body);
+});

data/test/dom/get_parent_element_test.js

@@ -0,0 +1,161 @@
+module("wysihtml5.dom.getParentElement", {
+  setup: function() {
+    this.container = document.createElement("div");
+  }
+});
+
+
+test("Basic test - nodeName only", function() {
+  this.container.innerHTML = "<ul><li>foo</li></ul>";
+  
+  var listItem = this.container.querySelector("li"),
+      textNode = listItem.firstChild,
+      list     = this.container.querySelector("ul");
+  equal(wysihtml5.dom.getParentElement(listItem, { nodeName: "LI" }), listItem);
+  equal(wysihtml5.dom.getParentElement(listItem, { nodeName: ["LI", "UL"] }), listItem);
+  equal(wysihtml5.dom.getParentElement(listItem, { nodeName: "UL" }), list);
+  equal(wysihtml5.dom.getParentElement(textNode, { nodeName: "UL" }), list);
+  equal(wysihtml5.dom.getParentElement(listItem, { nodeName: "ul" }), null);
+  equal(wysihtml5.dom.getParentElement(listItem, { nodeName: "SPAN" }), null);
+});
+
+
+test("Check 'levels' param - nodeName only", function() {
+  this.container.innerHTML = "<div><div><ul><li></li></ul></div></div>";
+  
+  var listItem  = this.container.querySelector("li"),
+      nestedDiv = this.container.querySelector("div").querySelector("div");
+  equal(wysihtml5.dom.getParentElement(listItem, { nodeName: "DIV" }, 2), null);
+  equal(wysihtml5.dom.getParentElement(listItem, { nodeName: "DIV" }, 3), nestedDiv);
+  
+});
+
+
+test("Basic test - nodeName + className", function() {
+  this.container.innerHTML = '<span class="wysiwyg-color-red wysiwyg-color-green">foo</span>';
+  
+  var spanElement = this.container.firstChild,
+      textNode    = this.container.firstChild.firstChild,
+      result;
+  
+  result = wysihtml5.dom.getParentElement(textNode, {
+    nodeName:   "SPAN",
+    className:  "wysiwyg-color-green",
+    classRegExp: /wysiwyg-color-[a-z]+/g
+  });
+  equal(result, spanElement);
+  
+  result = wysihtml5.dom.getParentElement(textNode, {
+    nodeName:   ["STRONG", "SPAN"],
+    className:  "wysiwyg-color-green",
+    classRegExp: /wysiwyg-color-[a-z]+/g
+  });
+  equal(result, spanElement);
+  
+  result = wysihtml5.dom.getParentElement(textNode, {
+    nodeName:   ["STRONG"],
+    className:  "wysiwyg-color-green",
+    classRegExp: /wysiwyg-color-[a-z]+/g
+  });
+  equal(result, null);
+  
+  result = wysihtml5.dom.getParentElement(textNode, {
+    nodeName:   "DIV",
+    className:  "wysiwyg-color-green",
+    classRegExp: /wysiwyg-color-[a-z]+/g
+  });
+  equal(result, null);
+  
+  result = wysihtml5.dom.getParentElement(textNode, {
+    nodeName:   "SPAN",
+    className:  "wysiwyg-color-blue",
+    classRegExp: /wysiwyg-color-[a-z]+/g
+  });
+  equal(result, null);
+  
+  result = wysihtml5.dom.getParentElement(textNode, {
+    nodeName:   "SPAN",
+    className:  "wysiwyg-color-red",
+    classRegExp: /wysiwyg-color-[a-z]+/g
+  });
+  equal(result, null);
+  
+  result = wysihtml5.dom.getParentElement(spanElement, {
+    nodeName:   "SPAN",
+    className:  "wysiwyg-color-green",
+    classRegExp: /wysiwyg-color-[a-z]+/g
+  });
+  equal(result, spanElement);
+  
+  result = wysihtml5.dom.getParentElement(spanElement, {
+    nodeName:   "span",
+    className:  "wysiwyg-color-green",
+    classRegExp: /wysiwyg-color-[a-z]+/g
+  });
+  equal(result, null);
+});
+
+
+test("Check 'levels' param - nodeName + className", function() {
+  this.container.innerHTML = '<div class="wysiwyg-color-green"><div class="wysiwyg-color-green"><ul><li></li></ul></blockquote></div></div>';
+  
+  var listItem  = this.container.querySelector("li"),
+      nestedDiv = this.container.querySelector("div").querySelector("div"),
+      result;
+  
+  result = wysihtml5.dom.getParentElement(listItem, {
+    nodeName:     "DIV",
+    className:    "wysiwyg-color-green",
+    classRegExp:  /wysiwyg-color-[a-z]+/g
+  }, 2);
+  equal(result, null);
+  
+  result = wysihtml5.dom.getParentElement(listItem, {
+    nodeName:     "DIV",
+    className:    "wysiwyg-color-green",
+    classRegExp:  /wysiwyg-color-[a-z]+/g
+  }, 3);
+  equal(result, nestedDiv);
+});
+
+
+test("Check  - no nodeName", function() {
+  this.container.innerHTML = '<div><div class="wysiwyg-text-align-right"><span>foo</span></div></div>';
+  
+  var spanElement = this.container.querySelector("span"),
+      alignedDiv  = this.container.querySelector("div").querySelector("div"),
+      result;
+  
+  result = wysihtml5.dom.getParentElement(spanElement, {
+    className:    "wysiwyg-text-align-right",
+    classRegExp:  /wysiwyg-text-align-[a-z]+/g
+  });
+  equal(result, alignedDiv);
+});
+
+test("Test - with no nodeName", function() {
+  this.container.innerHTML = '<div><div class="wysiwyg-text-align-right"><span>foo</span></div></div>';
+  
+  var spanElement = this.container.querySelector("span"),
+      alignedDiv  = this.container.querySelector("div").querySelector("div"),
+      result;
+  
+  result = wysihtml5.dom.getParentElement(spanElement, {
+    className:    "wysiwyg-text-align-right",
+    classRegExp:  /wysiwyg-text-align-[a-z]+/g
+  });
+  equal(result, alignedDiv);
+});
+
+test("Test - with only a classRegExp", function() {
+  this.container.innerHTML = '<div><div class="wysiwyg-text-align-right"><span>foo</span></div></div>';
+  
+  var spanElement = this.container.querySelector("span"),
+      alignedDiv  = this.container.querySelector("div").querySelector("div"),
+      result;
+  
+  result = wysihtml5.dom.getParentElement(spanElement, {
+    classRegExp:  /wysiwyg-text-align-[a-z]+/g
+  });
+  equal(result, alignedDiv);
+});

data/test/dom/get_style_test.js

@@ -0,0 +1,54 @@
+module("wysihtml5.dom.getStyle", {
+  setup: function() {
+    this.container = document.createElement("div");
+    document.body.appendChild(this.container);
+  },
+  
+  teardown: function() {
+    this.container.parentNode.removeChild(this.container);
+  }
+});
+
+
+test("Basic test", function() {
+  wysihtml5.dom.insertCSS([
+    ".test-element-2 { position: absolute }"
+  ]).into(document);
+  
+  this.container.innerHTML = '<span class="test-element-1" style="float:left;">hello</span>';
+  this.container.innerHTML += '<span class="test-element-2">hello</span>';
+  this.container.innerHTML += '<i></i>';
+  this.container.innerHTML += '<div></div>';
+  
+  equal(
+    wysihtml5.dom.getStyle("float").from(this.container.getElementsByTagName("span")[0]),
+    "left"
+  );
+  
+  equal(
+    wysihtml5.dom.getStyle("position").from(this.container.getElementsByTagName("span")[1]),
+    "absolute"
+  );
+  
+  equal(
+    wysihtml5.dom.getStyle("display").from(this.container.getElementsByTagName("div")[0]),
+    "block"
+  );
+  
+  equal(
+    wysihtml5.dom.getStyle("display").from(this.container.getElementsByTagName("i")[0]),
+    "inline"
+  );
+});
+
+
+test("Textarea width/height when value causes overflow", function() {
+  var textarea = document.createElement("textarea");
+  textarea.style.width = "500px";
+  textarea.style.height = "200px";
+  textarea.value = Array(500).join("Lorem ipsum dolor foo bar");
+  this.container.appendChild(textarea);
+  
+  equal(wysihtml5.dom.getStyle("width")  .from(textarea), "500px");
+  equal(wysihtml5.dom.getStyle("height") .from(textarea), "200px");
+});

data/test/dom/has_element_with_class_name_test.js

@@ -0,0 +1,29 @@
+if ("querySelector" in document || wysihtml5.browser.supportsNativeGetElementsByClassName()) {
+  module("wysihtml5.dom.hasElementWithClassName", {
+    teardown: function() {
+      var iframe;
+      while (iframe = document.querySelector("iframe.wysihtml5-sandbox")) {
+        iframe.parentNode.removeChild(iframe);
+      }
+    }
+  });
+
+
+  asyncTest("Basic test", function() {
+    expect(3);
+    
+    new wysihtml5.dom.Sandbox(function(sandbox) {
+      var doc         = sandbox.getDocument(),
+          tempElement = doc.createElement("i");
+      tempElement.className = "wysiwyg-color-aqua";
+
+      ok(!wysihtml5.dom.hasElementWithClassName(doc, "wysiwyg-color-aqua"));
+      doc.body.appendChild(tempElement);
+      ok(wysihtml5.dom.hasElementWithClassName(doc, "wysiwyg-color-aqua"));
+      tempElement.parentNode.removeChild(tempElement);
+      ok(!wysihtml5.dom.hasElementWithClassName(doc, "wysiwyg-color-aqua"));
+
+      start();
+    }).insertInto(document.body);
+  });
+}

data/test/dom/has_element_with_tag_name_test.js

@@ -0,0 +1,25 @@
+module("wysihtml5.dom.hasElementWithTagName", {
+  teardown: function() {
+    var iframe;
+    while (iframe = document.querySelector("iframe.wysihtml5-sandbox")) {
+      iframe.parentNode.removeChild(iframe);
+    }
+  }
+});
+
+
+asyncTest("Basic test", function() {
+  expect(3);
+  
+  new wysihtml5.dom.Sandbox(function(sandbox) {
+    var doc         = sandbox.getDocument(),
+        tempElement = doc.createElement("i");
+    ok(!wysihtml5.dom.hasElementWithTagName(doc, "I"));
+    doc.body.appendChild(tempElement);
+    ok(wysihtml5.dom.hasElementWithTagName(doc, "I"));
+    tempElement.parentNode.removeChild(tempElement);
+    ok(!wysihtml5.dom.hasElementWithTagName(doc, "I"));
+    
+    start();
+  }).insertInto(document.body);
+});

data/test/dom/insert_css_test.js

@@ -0,0 +1,31 @@
+module("wysihtml5.dom.insertCSS", {
+  teardown: function() {
+    var iframe;
+    while (iframe = document.querySelector("iframe.wysihtml5-sandbox")) {
+      iframe.parentNode.removeChild(iframe);
+    }
+  }
+});
+
+asyncTest("Basic Tests", function() {
+  expect(3);
+  
+  new wysihtml5.dom.Sandbox(function(sandbox) {
+    var doc     = sandbox.getDocument(),
+        body    = doc.body,
+        element = doc.createElement("sub");
+    
+    body.appendChild(element);
+    
+    wysihtml5.dom.insertCSS([
+      "sub  { display: block; text-align: right; }",
+      "body { text-indent: 50px; }"
+    ]).into(doc);
+    
+    equal(wysihtml5.dom.getStyle("display")    .from(element), "block");
+    equal(wysihtml5.dom.getStyle("text-align") .from(element), "right");
+    equal(wysihtml5.dom.getStyle("text-indent").from(element), "50px");
+    
+    start();
+  }).insertInto(document.body);
+});

data/test/dom/observe_test.js

@@ -0,0 +1,83 @@
+module("wysihtml5.dom.observe", {
+  setup: function() {
+    this.container  = document.createElement("div");
+    this.element    = document.createElement("textarea");
+    this.container.appendChild(this.element);
+    document.body.appendChild(this.container);
+  },
+  
+  teardown: function() {
+    this.container.parentNode.removeChild(this.container);
+    
+    var iframe;
+    while (iframe = document.querySelector("iframe.wysihtml5-sandbox")) {
+      iframe.parentNode.removeChild(iframe);
+    }
+  }
+});
+
+
+test("Basic test", function() {
+  expect(4);
+  
+  var element = this.element;
+  
+  wysihtml5.dom.observe(element, ["mouseover", "mouseout"], function(event) {
+    ok(true, "'" + event.type + "' correctly fired");
+  });
+  
+  wysihtml5.dom.observe(element, "click", function(event) {
+    equal(event.target, element, "event.target or event.srcElement are set");
+    ok(true, "'click' correctly fired");
+  });
+  
+  QUnit.triggerEvent(element, "mouseover");
+  QUnit.triggerEvent(element, "mouseout");
+  QUnit.triggerEvent(element, "click");
+});
+
+
+test("Test stopPropagation and scope of event handler", function(event) {
+  expect(2);
+  var element = this.element;
+  
+  wysihtml5.dom.observe(this.container, "click", function(event) {
+    ok(false, "The event shouldn't have been bubbled!");
+  });
+  
+  wysihtml5.dom.observe(this.element, "click", function(event) {
+    event.stopPropagation();
+    equal(this, element, "Event handler bound to correct scope");
+    ok(true, "stopPropagation correctly fired");
+  });
+  
+  QUnit.triggerEvent(this.element, "click");
+});
+
+test("Test detaching events", function() {
+  expect(0);
+  var eventListener = wysihtml5.dom.observe(this.element, "click", function() {
+    ok(false, "This should not be triggered");
+  });
+  
+  eventListener.stop();
+  QUnit.triggerEvent(this.element, "click");
+});
+
+asyncTest("Advanced test observing within a sandboxed iframe", function() {
+  expect(2);
+  
+  var sandbox = new wysihtml5.dom.Sandbox(function() {
+    var element = sandbox.getDocument().createElement("div");
+    sandbox.getDocument().body.appendChild(element);
+    wysihtml5.dom.observe(element, ["click", "mousedown"], function(event) {
+      ok(true, "'" + event.type + "' correctly fired");
+    });
+    QUnit.triggerEvent(element, "click");
+    QUnit.triggerEvent(element, "mousedown");
+    
+    start();
+  });
+  
+  sandbox.insertInto(document.body);
+});