envjs 0.1.0

data/test/unit/elementmembers.js

@@ -0,0 +1,60 @@
+module("elementmembers");
+
+// We ought to have test coverage for all members of all DOM objects, but
+// until then, add test cases here for members as they are created
+
+test("attributes common to all HTML elements", function() {
+    expect(4);
+
+    // tests for .innerText
+    var mtch = document.getElementById('dl').innerText.match(
+        /^\s+See this blog entry for more information.\s+Here are/);
+    try{ ok(mtch && mtch.length > 0,
+        "dl.innerText returns the correct content");
+    }catch(e){print(e);}
+
+    mtch = document.getElementById('sndp').innerText.match(/^Everything insid/);
+    try{ ok(mtch && mtch.length > 0,
+        "p.innerText returns the correct content");
+    }catch(e){print(e);}
+
+    try{ ok(document.getElementById('sndp').innerText = "test text" || true,
+        "p.innerText= operates without exception");
+    }catch(e){print(e);}
+
+    try{ ok(document.getElementById('sndp').innerText == "test text",
+        "p.innerText= changes content of element");
+    }catch(e){print(e);}
+});
+
+test("select element", function() {
+    expect(14);
+
+    var select = document.getElementById('select1');
+    equals("select-one", select.type, "Select field's type is select-one by default");
+
+    select = document.getElementById('test_value');
+    equals("optionvalue", select.value, "Select field returns its selected option's value as its value");
+
+    // if option2 is selected, unselect option1 (and update select.value)
+    select = document.getElementById('test_selecting');
+    select.options[2].selected = true;
+    ok(select.options[2].selected, "Select's option should be selected");
+    ok(!select.options[1].selected, "Previously selected option should be automatically unselected");
+    equals("2", select.value, "Select's value should be updated");
+
+    // if option2 is unselected, then select first option on the list (and update select.value)
+    select.options[2].selected = false;
+    ok(!select.options[2].selected, "Select's option should be unselected");
+    ok(!select.options[1].selected, "Previously selected option should stay unselected");
+    ok(select.options[0].selected, "First option in the select should be selected");
+    equals("0", select.value, "Select's value should be updated");
+
+    // update select's value and options when selectedIndex is changed
+    equals(0, select.selectedIndex, "Select's selectedIndex should return the index of selected option");
+    select.selectedIndex = 2;
+    equals(2, select.selectedIndex, "Select's selectedIndex should be updated");
+    equals("2", select.value, "Changing selectedIndex should update select's value");
+    ok(!select.options[0].selected, "Changing selectedIndex should unselect currently selected option");
+    ok(select.options[2].selected, "Changing selectedIndex should select option at given index");
+});

data/test/unit/events.js

@@ -0,0 +1,195 @@
+/*
+ * This file is a component of env.js,
+ *     http://github.com/gleneivey/env-js/commits/master/README
+ * a Pure JavaScript Browser Environment
+ * Copyright 2009 John Resig, licensed under the MIT License
+ *     http://www.opensource.org/licenses/mit-license.php
+ */
+
+
+module("events");
+
+// This file is for tests of general event dispatching, propagation, and
+//   handling functionality.  In keeping with the general non-exhaustive
+//   approach of env.js's unit tests, each behavior is checked for one
+//   relevant type of event in one relevant context (page structure, etc.).
+
+// These tests rely on the content of ../html/events.html and of the
+//   <iframe id='eventsFrame'> tag in ../index.html.
+
+// These tests are order-dependent.  If you alter the order or add new tests
+//   in the middle, the expected values of eventFrameLoaded and
+//   eventFrameClicked may well change (perhaps requiring extra parameters
+//   to the *Checks convenience functions).
+
+
+var __click__ = function(element){
+    var event = new Event({
+      target:element,
+      currentTarget:element
+    });
+    event.initEvent("click");
+    element.dispatchEvent(event);
+}
+
+function loadChecks(tag, loadCount, imgCount, unloadCount){
+    expect(5);
+
+    var eCounters = window.top.eCounters;
+    try{ ok( eCounters["window onload"] == loadCount &&
+             eCounters["body onload"] == loadCount,
+        tag + ": Onload Events recorded");
+    }catch(e){print(e);}
+
+    try{ ok( eCounters["img onload"]  == imgCount,
+        tag + ": Img-tag onload event(s) recorded separately");
+    }catch(e){print(e);}
+
+    try{ ok( eCounters["window onunload"] == unloadCount &&
+             eCounters["body onunload"] == unloadCount,
+        tag + ": Onunload events recorded");
+    }catch(e){print(e);}
+
+    try{ ok( eCounters["body onclick"] == 0 &&
+             eCounters["h1 onclick"] == 0 &&
+             eCounters["h2 onclick"] == 0 &&
+             eCounters["div onclick"] == 0 &&
+             eCounters["table onclick"] == 0 &&
+             eCounters["tbody onclick"] == 0 &&
+             eCounters["tr onclick"] == 0 &&
+             eCounters["td onclick"] == 0 &&
+             eCounters["ul onclick"] == 0 &&
+             eCounters["li onclick"] == 0 &&
+             eCounters["p onclick"] == 0 &&
+             eCounters["b onclick"] == 0 &&
+             eCounters["i onclick"] == 0 &&
+             eCounters["a onclick"] == 0 &&
+             eCounters["img onclick"] == 0,
+        tag + ": Onload events recorded once.");
+    }catch(e){print(e);}
+
+    try{ ok( eventFrameLoaded == loadCount && eventFrameClicked == 0,
+        tag + ": " + loadCount + " iframe events recorded on page load.");
+    }catch(e){print(e);}
+}
+
+
+test("Check that events do/don't occur on document load", function() {
+    // eCounters already initialized by code in ../html/events.html
+    loadChecks("Load", 1, 1, 0);
+});
+
+test("Check that events do/don't occur on manual iframe reload", function() {
+    document.getElementById('eventsFrame').src = "html/events.html";
+    loadChecks("Reload", 2, 2, 1);
+});
+
+test("Check that an event which should NOT bubble actually does not",
+     function() {
+    var img = document.getElementById('eventsFrame').contentDocument.
+      getElementById('theIMG').src = "missing.png";
+    loadChecks("Img Load", 2, 3, 1);
+
+    // note: if img-onload had bubbled up, previous tests probably would
+    //   have failed (too large body-onload counts), too.  So this test
+    //   just ensures that operation is correct even when only part of
+    //   page is reloading.
+});
+
+
+
+function clickChecks(tag, upperCount, lowerCount){
+    expect(5);
+
+    var eCounters = window.top.eCounters;
+    try{ ok( eCounters["window onload"] == 0 &&
+             eCounters["window onunload"] == 0 &&
+             eCounters["body onload"] == 0 &&
+             eCounters["body onunload"] == 0 &&
+             eCounters["img onload"] == 0,
+        tag + ": Onload events not triggered by click");
+    }catch(e){print(e);}
+
+    var special = (upperCount == lowerCount) ? "" : " not";
+    try{ ok( eCounters["ul onclick"] == lowerCount &&
+             eCounters["li onclick"] == lowerCount &&
+             eCounters["p onclick"] == lowerCount &&
+             eCounters["b onclick"] == lowerCount &&
+             eCounters["i onclick"] == lowerCount &&
+             eCounters["a onclick"] == lowerCount &&
+             eCounters["img onclick"] == lowerCount,
+        tag + ": Click event did" + special + " bubble through inner elements");
+    }catch(e){print(e);}
+
+    try{ ok( eCounters["body onclick"] == upperCount &&
+             eCounters["div onclick"] == upperCount &&
+             eCounters["table onclick"] == upperCount &&
+             eCounters["tbody onclick"] == upperCount &&
+             eCounters["tr onclick"] == upperCount &&
+             eCounters["td onclick"] == upperCount,
+        tag + ": Click event bubbled through outer elements");
+    }catch(e){print(e);}
+
+    try{ ok( eCounters["h1 onclick"] == 0 &&
+             eCounters["h2 onclick"] == 0,
+        tag + ": No click events for Hx elements");
+    }catch(e){print(e);}
+
+
+    try{ ok( eventFrameLoaded == 2 && eventFrameClicked == 0,
+        tag + ": Iframe event counts unchanged");
+    }catch(e){print(e);}
+}
+
+test("Check that an event which should bubble actually does", function() {
+    // clear in-iframe event counters to zero
+    window.top.eCounters = {};
+    fWin = document.getElementById('eventsFrame').contentWindow;
+    fWin.initECounters(window.top.eCounters);
+
+    // simulate a "click" user action
+    var img = document.getElementById('eventsFrame').contentDocument.
+      getElementById('theIMG');
+    __click__(img);
+
+    clickChecks("Click img", 1, 1);
+});
+
+test("Bubbling event ONLY bubbles 'up'", function() {
+    // simulate a "click" user action
+    var td = document.getElementById('eventsFrame').contentDocument.
+      getElementById('theTD');
+    __click__(td);
+
+    clickChecks("Click td", 2, 1);
+});
+
+
+test("Check that events can be set with addEventListener(), and bubble",
+  function() {
+    expect(4);
+
+    var img = document.getElementById('eventsFrame').contentDocument.
+                getElementById('theIMG');
+
+    // add handlers
+    addHdlr = function(id) {
+        var elem = document.getElementById('eventsFrame').contentDocument.
+          getElementById(id).addEventListener('click', function(event){
+            try{
+                ok( event.target === img && ( ( this === window ) ||  ( this.window === window ) ),
+                    "Scope: 'this' refers to the window '" + window + "'");
+            }catch(e){print(e);}
+        });
+    };
+
+    // a few objects that the <img 'theImG'>.click event will bubble up through
+    addHdlr("theIMG");
+    addHdlr("theA");
+    addHdlr("theP");
+    addHdlr("theLI");
+
+    // simulate user action
+    __click__(img);
+});
+

data/test/unit/fixtures/external_script.js

@@ -0,0 +1 @@
+var $$$$$ = "12345";

data/test/unit/iframe.js

@@ -0,0 +1,234 @@
+/*
+ * This file is a component of env.js,
+ *     http://github.com/gleneivey/env-js/commits/master/README
+ * a Pure JavaScript Browser Environment
+ * Copyright 2009 John Resig, licensed under the MIT License
+ *     http://www.opensource.org/licenses/mit-license.php
+ */
+
+
+module("iframe");
+
+
+// In general, the tests here use the files ../html/iframe*.html
+// I've tried to keep all of the id attributes and text fragments in these
+//   files unique from each other and from the content of index.html
+//   to ensure that we can correctly identify which file has loaded into
+//   which frame/window.  When making modifications/additions, paying
+//   attention to uniqueness is recommended.
+
+
+// all tests to next comment rely on content of ../html/iframe1.html and
+//                                              ../html/iframe1a.html
+
+    // iframe1 and iframe1a are identical in structure (so we can use the
+    //   same assertions against both), but different in content text (so
+    //   that we can tell which one is currently loaded).  So, create an
+    //   object (associative array) that is specific to the content of each.
+contentOfIframe1 = {
+    url : "html/iframe1.html",
+    titleRE : /IFRAME/,
+    elementId : 'anElementWithText',
+    elementRE : /content of a paragraph/
+};
+contentOfIframe1a = {
+    url : "html/iframe1a.html",
+    titleRE : /iframe1a.html/,
+    elementId : 'anotherElementWithText',
+    elementRE : /block-quote element/
+};
+
+var accessChecksForIframe1 = function(flag, iframe, contentOf) {
+    expect(6);
+
+    try{ok (iframe.src == contentOf.url,
+        flag + ": Initial iframe src matches test page source");
+    }catch(e){print(e);}
+
+    var idoc = iframe.contentDocument;
+    var mtch = idoc.title.match(contentOf.titleRE);
+    try{ok (mtch && mtch.length > 0,
+        flag + ": Can get 'document' object from test iframe");
+    }catch(e){print(e);}
+
+    var para = idoc.getElementById(contentOf.elementId);
+    mtch = para.innerHTML.match(contentOf.elementRE);
+    try{ok (mtch && mtch.length > 0,
+        flag + ": Can get text from element in an iframe");
+    }catch(e){print(e);}
+
+    try{ok (idoc.parentWindow == iframe.contentWindow,
+        flag + ": doc's .parentWindow points to iframe's .contentWindow");
+    }catch(e){print(e);}
+
+    try{ok (idoc.parentWindow.parent == window,
+        flag + ": Can follow chain from iframe's doc to containing window");
+    }catch(e){print(e);}
+
+    try{ok (iframe.contentWindow.top == window,
+        flag + ": '.top' from iframe does point to top window");
+    }catch(e){print(e);}
+};
+
+test("IFRAMEs load with accessible content", function() {
+    var iframe = document.getElementById('loadediframe');
+    // iframe1.html loaded via src= attribute when index.html was parsed
+    accessChecksForIframe1("1", iframe, contentOfIframe1);
+});
+
+
+test("IFRAMEs still load when .src is set after the page is parsed",function() {
+    var iframe = document.getElementById('emptyiframe');
+    iframe.src = "html/iframe1.html";
+    accessChecksForIframe1("2", iframe, contentOfIframe1);
+});
+
+test("IFRAMEs reload with accessible content", function() {
+    var iframe = document.getElementById('loadediframe');
+    iframe.src = "html/iframe1a.html";
+    accessChecksForIframe1("3", iframe, contentOfIframe1a);
+});
+
+
+// this test relies on iframe3.html, iframe2.html, and iframeN.html
+test("IFRAMEs can be nested, created dynamically", function() {
+    var startingDepth = 3;
+    var endingDepth   = 7;
+    expect(5 + (10*((endingDepth - startingDepth)+1)));
+
+    // manually load iframe3.html
+    var firstIframe = document.getElementById('emptyiframe');
+    firstIframe.src = "html/iframe3.html";
+
+    // iframe3.html contains a static <iframe> element that loads iframe2.html,
+    // so at this point, we should have both loaded, with the structure that
+    //     index.html --contains--> iframe3.html --contains--> iframe2.html
+    // w/ id's =      emptyiframe               nested1Level
+
+
+
+    ////////////////////////////////////////
+    // first, verify that we've got the structure we expect:
+    var mtch = firstIframe.contentDocument.title.match(/nested-IFRAME/);
+    try{ok (mtch && mtch.length > 0,
+        "top-level IFRAME reloaded from correct source");
+    }catch(e){print(e);}
+
+    var secondIframe = firstIframe.contentDocument.
+      getElementById('nested1Level');
+    mtch = secondIframe.contentDocument.title.match(/IFRAME loading/);
+    try{ok (mtch && mtch.length > 0,
+        "can access content of an IFRAME nested in another");
+    }catch(e){print(e);}
+
+    try{ok (secondIframe.contentDocument.parentWindow.parent.parent == window,
+        "can follow path from nested IFRAME to root window");
+    }catch(e){print(e);}
+
+    try{ok (secondIframe.contentWindow.parent.parent == window,
+        "also path through .contentWindow to root window");
+    }catch(e){print(e);}
+
+    try{ok (secondIframe.contentWindow.top == window,
+        "nested IFRAME has correct .top");
+    }catch(e){print(e);}
+
+
+    ////////////////////////////////////////
+    // OK, now we'll programatically extend the nesting depth from 2 to many
+    window.numberNestedIframeLoads = 0;
+    window.winLoadCount = 0;
+    window.bodyLoadCount = 0;
+    window.frameLoadCount = 0;
+    for (var c = startingDepth, bottomIframe = secondIframe; c <= endingDepth;
+         c++){
+
+        // add a new iframe within the current leaf iframe
+        var newIframe = bottomIframe.contentDocument.createElement("iframe");
+        newIframe.setAttribute("id", "iframe_of_depth_" + c);
+        newIframe.setAttribute("onload", "iframeOnloadHandler();");
+        var bottomBody = bottomIframe.contentDocument.
+          getElementsByTagName('body')[0];
+
+        bottomBody.appendChild(newIframe);
+        newIframe.src = "html/iframeN.html";
+        bottomIframe = newIframe;
+
+
+
+        ////////////////////////////////////////
+        // verify contents of just-loaded iframe
+        mtch = bottomIframe.contentDocument.getElementById('nestingLevel').
+          innerHTML.match(/[0-9]+/);
+        try{ok (mtch && mtch.length > 0 && parseInt(mtch[0]) == c,
+            "nested " + c + " levels: can access content");
+        }catch(e){print(e);}
+
+        for (var aWindow = bottomIframe.contentWindow, cn = c; cn > 0; cn--)
+            aWindow = aWindow.parent;
+        try{ok (aWindow == window,
+            "nested " + c + " levels: can follow path to root window");
+        }catch(e){print(e);}
+
+        try{ok (bottomIframe.contentWindow.top == window,
+            "nested " + c + " levels: IFRAME has correct .top");
+        }catch(e){print(e);}
+
+
+
+        ////////////////////////////////////////
+        // verify events related to iframe load:
+        //  iframe.onload (container); window.onload and body.onload (contained)
+        var num = (c - startingDepth) + 1;
+        try{ok (num == window.numberNestedIframeLoads,
+            "nested " + c + " levels: event <script> executed");
+        }catch(e){print(e);}
+
+        try{ok (num == window.winLoadCount,
+            "nested " + c + " levels: window-onload handler executed");
+        }catch(e){print(e);}
+        try{ok (num == window.bodyLoadCount,
+            "nested " + c + " levels: body-onload handler executed");
+        }catch(e){print(e);}
+        try{ok (num == window.frameLoadCount,
+            "nested " + c + " levels: iframe-onload handler executed");
+        }catch(e){print(e);}
+
+        mtch = bottomIframe.contentWindow.parent.document.
+          getElementById("pCreatedIframeOnload" + num).innerHTML.
+          match(/para iframe onload ([0-9]+)/);
+        try{ok (mtch && mtch.length > 0 && parseInt(mtch[1]) == num,
+            "nested " + c + " levels: confirmed iframe-onload");
+        }catch(e){print(e);}
+        mtch = bottomIframe.contentDocument.
+          getElementById("pCreatedWindowOnload" + num).innerHTML.
+          match(/para window onload ([0-9]+)/);
+        try{ok (mtch && mtch.length > 0 && parseInt(mtch[1]) == num,
+            "nested " + c + " levels: confirmed window-onload");
+        }catch(e){print(e);}
+        mtch = bottomIframe.contentDocument.
+          getElementById("pCreatedBodyOnload" + num).innerHTML.
+          match(/para body onload ([0-9]+)/);
+        try{ok (mtch && mtch.length > 0 && parseInt(mtch[1]) == num,
+            "nested " + c + " levels: confirmed body-onload");
+        }catch(e){print(e);}
+    }
+});
+
+
+// all tests to next comment rely on content of ../html/iframe2.html
+test("IFRAMEs reload on assignment to 'src'", function() {
+    expect(2);
+
+    var iframe = document.getElementById('loadediframe');
+    iframe.src = "html/iframe2.html";
+    try{ok (iframe.src == "html/iframe2.html",
+        "iframe.src matches value assigned");
+    }catch(e){print(e);}
+
+    var para = iframe.contentDocument.getElementById('aParaInAnIframe');
+    var mtch = para.innerHTML.match(/short paragraph/);
+    try{ok (mtch && mtch.length > 0,
+        "IFRAME reloaded from correct source");
+    }catch(e){print(e);}
+});