spiegel-keyman/web/unit_tests/cases/attachmentAPI.js

var assert = chai.assert;

var DynamicElements;
var inputCounter = 0;

if(typeof(DynamicElements) == 'undefined') {
  DynamicElements = {};

  DynamicElements.addInput = function() {
    var masterDiv = document.getElementById('DynamicElements');
    var newInput = document.createElement("input");
    var i = inputCounter++;
    
    newInput.id = 'input' + i;
    newInput.className = 'test';
    newInput.placeholder = "Dynamic area #" + i + "!";
    
    masterDiv.appendChild(newInput);
    return newInput.id;
  }
  
  DynamicElements.addText = function () {
    var masterDiv = document.getElementById('DynamicElements');
    var newTextArea = document.createElement("textarea");
    var i = inputCounter++;
    
    newTextArea.id = 'textarea' + i;
    newTextArea.className = 'test';
    newTextArea.placeholder = "Dynamic area #" + i + "!";
    
    masterDiv.appendChild(newTextArea);
    return newTextArea.id;
  }
  
  DynamicElements.addIFrame = function(loadCallback) {
    var masterDiv = document.getElementById('DynamicElements');
    var frame = document.createElement("iframe");
    var i = inputCounter++;
    
    frame.height = "100";
    frame.id = 'iframe' + i;
    if(loadCallback) {
      frame.addEventListener('load', function() {
        // Give KMW's attachment events a chance to run first.
        window.setTimeout(loadCallback, 100);
      });
    }
    frame.setAttribute("src", "resources/html/iframe.html");
      
    masterDiv.appendChild(frame);
    return frame.id;
  }
  
  DynamicElements.addEditable = function() {
    var masterDiv = document.getElementById('DynamicElements');
    var editable = document.createElement("div");
    var i = inputCounter++;
    
    editable.contentEditable = true;
    editable.textContent = "Edit me!";
    editable.id = 'editable' + i;
    editable.style.width="500px";
    
    masterDiv.appendChild(editable);
    return editable.id;
  }

  DynamicElements.assertAttached = function(ele, done) {
    window.setTimeout(function() {
      assert.isTrue(keyman.isAttached(ele), "Element tag '" + ele.tagName + "', id '" + ele.id + "' was not attached!");

      if(done) {
        done();
      }
    }, 50);
  }
}

Modernizr.on('touchevents', function(result) {
  if(result) {
    describe('Attachment (Touch, \'auto\')', function() {

      this.timeout(5000);

      before(function(done) {
        this.timeout(10000);

        fixture.setBase('unit_tests/fixtures');
        setupKMW({ attachType:'auto' }, done, 10000);
      });
      
      beforeEach(function() {
        fixture.load("robustAttachment.html");
      });
      
      after(function() {
        teardownKMW();
      });
      
      afterEach(function(done) {
        fixture.cleanup();
        window.setTimeout(function(){
          done();
        }, 500);
      })
      
      describe('Element Type', function() {
        it('<input>', function(done) {
          var ID = DynamicElements.addInput();
          var ele = document.getElementById(ID);

          DynamicElements.assertAttached(ele, done);
        });

        it('<textarea>', function(done) {
          var ID = DynamicElements.addText();
          var ele = document.getElementById(ID);

          DynamicElements.assertAttached(ele, done);
        });

        it('<iframe>', function(done) {
          var ID = DynamicElements.addIFrame(function() {
            var ele = document.getElementById(ID);
            var innerEle = ele.contentDocument.getElementById('iframe_input');

            assert.isFalse(keyman.isAttached(ele));
            assert.isNotNull(innerEle);
            assert.isFalse(keyman.isAttached(innerEle));

            window.setTimeout(function() {
              done();
            }, 50);
          });
        });

        it('contentEditable=true', function(done) {
          var ID = DynamicElements.addEditable();
          var ele = document.getElementById(ID);

          assert.isFalse(keyman.isAttached(ele));
          done();
        });
      });
    });
  } else {
    describe('Attachment (Desktop, \'auto\')', function() {

      this.timeout(5000);

      before(function(done) {
        this.timeout(10000);

        fixture.setBase('unit_tests/fixtures');
        setupKMW({ attachType:'auto' }, done, 10000);
      });
      
      beforeEach(function() {
        fixture.load("robustAttachment.html");
      });
      
      after(function() {
        teardownKMW();
      });
      
      afterEach(function(done) {
        fixture.cleanup();
        window.setTimeout(function(){
          done();
        }, 500);
      })
      
      describe('Element Type', function() {
        it('<input>', function(done) {
          var ID = DynamicElements.addInput();
          var ele = document.getElementById(ID);

          DynamicElements.assertAttached(ele, done);
        });

        it('<textarea>', function(done) {
          var ID = DynamicElements.addText();
          var ele = document.getElementById(ID);

          DynamicElements.assertAttached(ele, done);
        });

        it('<iframe>', function(done) {
          var ID = DynamicElements.addIFrame(function() {
            var ele = document.getElementById(ID);
            var innerEle = ele.contentDocument.getElementById('iframe_input');

            assert.isTrue(keyman.isAttached(ele));
            assert.isNotNull(innerEle);
            assert.isTrue(keyman.isAttached(innerEle));
            keyman.detachFromControl(ele);

            window.setTimeout(function() {
              done();
            }, 50);
          });
        });

        it('contentEditable=true', function(done) {
          var ID = DynamicElements.addEditable();
          var ele = document.getElementById(ID);

          DynamicElements.assertAttached(ele, done);
        });
      });
    });

  }
});