midas 0.1.0

data/spec/javascripts/helpers/spec_helper.js

@@ -0,0 +1,125 @@
+// Load up the fixtures
+jasmine.include('/__spec__/fixtures/fixtures.js', true);
+
+
+/**
+ * Logs the given string to the current logger.
+ *
+ * @param {String} string to log
+ * @static
+ */
+jasmine.log = function(string) {
+  var env = jasmine.getEnv();
+  env.reporter.log(string);
+};
+
+/**
+ * Loads a given fixture file into the jasmine_content div.
+ *
+ * @param {String} filename of the fixture you want to load (minus the .html)
+ * @static
+ */
+jasmine.loadFixture = function(filename) {
+  if (!jasmine.fixtures[filename]) throw('Unable to load that fixture.');
+  document.getElementById('jasmine_content').innerHTML = jasmine.fixtures[filename];
+  // might want to eval the string here as well
+};
+
+/**
+ * Loads a given css fixture file into the document.
+ *
+ * @param {String} filename of the css you want to load (minus the .css)
+ * @static
+ */
+jasmine.loadCSS = function(filename) {
+  if (!jasmine.css[filename]) throw('Unable to load that css.');
+  if (document.getElementById('css_' + filename)) return;
+
+  var style_node = document.createElement('div');
+  style_node.setAttribute('id', 'css_' + filename);
+  style_node.innerHTML = '<style>' + jasmine.css[filename] + '</style>';
+  document.body.appendChild(style_node);
+};
+
+/**
+ * Unloads a given css fixture file from the document.
+ *
+ * @param {String} filename of the css you want to load (minus the .css)
+ * @static
+ */
+jasmine.unloadCSS = function(filename) {
+  var element = document.getElementById('css_' + filename);
+  if (!element) throw('That css cannot be unloaded -- not yet loaded');
+
+  document.body.removeChild(element);
+};
+
+
+
+
+
+
+
+
+
+// stub functionality
+jasmine.TrivialReporter.prototype.reportSpecResults = function(spec) {
+  var results = spec.results();
+  var status = results.passed() ? 'passed' : 'failed';
+  var style = '';
+  if (results.skipped) {
+    status = 'skipped';
+  }
+  if (results.failedCount == 0 && results.passedCount == 0 && !results.skipped) {
+    status = 'stubbed';
+    style = "background-color: #FFA200; border: 1px solid #000000";
+  }
+  var specDiv = this.createDom('div', { className: 'spec '  + status, style: style },
+      this.createDom('a', { className: 'run_spec', href: '?spec=' + encodeURIComponent(spec.getFullName()) }, "run"),
+      this.createDom('a', {
+        className: 'description',
+        href: '?spec=' + encodeURIComponent(spec.getFullName()),
+        title: spec.getFullName()
+      }, spec.description));
+
+
+  var resultItems = results.getItems();
+  var messagesDiv = this.createDom('div', { className: 'messages' });
+  for (var i = 0; i < resultItems.length; i++) {
+    var result = resultItems[i];
+    if (result.passed && !result.passed()) {
+      messagesDiv.appendChild(this.createDom('div', {className: 'resultMessage fail'}, result.message));
+
+      if (result.trace.stack) {
+        messagesDiv.appendChild(this.createDom('div', {className: 'stackTrace'}, result.trace.stack));
+      }
+    }
+  }
+
+  if (messagesDiv.childNodes.length > 0) {
+    specDiv.appendChild(messagesDiv);
+  }
+
+  this.suiteDivs[spec.suite.getFullName()].appendChild(specDiv);
+};
+
+var stub = function(desc, func) {
+  return jasmine.getEnv().stub(desc, func);
+};
+
+jasmine.Env.prototype.stub = function(description, func) {
+  var spec = new jasmine.Spec(this, this.currentSuite, description);
+  this.currentSuite.add(spec);
+  this.currentSpec = spec;
+
+  if (func) {
+    spec.stub(func);
+  }
+
+  return spec;
+};
+
+jasmine.Spec.prototype.stub = function (e) {
+  var expectationResult = new jasmine.MessageResult('stubbed');
+  this.results_.addResult(expectationResult);
+};

data/spec/javascripts/midas_spec.js

@@ -0,0 +1,284 @@
+describe('Midas', function () {
+
+  beforeEach(function() {
+    jasmine.loadFixture('midas_fixture');
+    jasmine.loadCSS('midas_styles');
+  });
+
+  afterEach(function () {
+    try {
+      this.midas.destroy();
+      this.midas = null;
+    } catch(e) {}
+    jasmine.unloadCSS('midas_styles');
+  });
+
+  it('should accept options in the constructor', function() {
+    this.midas = new Midas({classname: 'not-editable'});
+
+    expect($('region1').contentEditable).not.toEqual('true');
+    expect($('region3').contentEditable).toEqual('true');
+  });
+
+  it('should use the default configuration', function() {
+    this.midas = new Midas();
+
+    expect(this.midas.options.configuration).toEqual(Midas.Config);
+  });
+
+  it('should allow the configuration to be provided in the options', function() {
+    var config = { actions: {}, buttons: {} };
+    this.midas = new Midas({configuration: config});
+
+    expect(this.midas.options.configuration).toEqual(config);
+  });
+
+  it("should pass it's configuration along to the toolbar and regions", function() {
+    var config = { actions: {}, buttons: {} };
+    this.midas = new Midas({configuration: config});
+
+    expect(this.midas.toolbar.options.configuration).toEqual(config);
+    expect(this.midas.regions[0].options.configuration).toEqual(config);
+  });
+
+  it('should only instantiate if a browser has contentEditable features', function() {
+    spyOn(Midas, 'agentIsCapable').andCallFake(function() {
+      return false;
+    });
+    try { this.midas = new Midas(); } catch(e) {
+      expect(e.toString()).toEqual('Midas requires a browser that has contentEditable features');
+    }
+
+    expect(this.midas).toBeUndefined();
+  });
+
+  it('should only instantiate if the window is top (when using an iframe)', function() {
+    var spy1 = spyOn(Midas, 'trace');
+    var spy2 = spyOn(window, 'isTop').andCallFake(function() {
+      return false;
+    });
+
+    this.midas = new Midas({useIframe: true});
+
+    expect(spy1.callCount).toEqual(1);
+    expect(spy2.callCount).toEqual(1);
+  });
+
+  it('should make all regions with the editable class editable', function() {
+    this.midas = new Midas();
+
+    expect($('region1').contentEditable).toEqual('true');
+    expect($('region2').contentEditable).toEqual('true');
+    expect($('region3').contentEditable).not.toEqual('true'); // will default to 'inherit' if not specified
+  });
+
+  it('should assign all editable regions to member variables', function() {
+    this.midas = new Midas();
+
+    expect(this.midas.regions.length).toEqual($$('.editable').length);
+    expect(this.midas.regionElements).toContain($('region1'));
+    expect(this.midas.regionElements).toContain($('region2'));
+  });
+
+  it('should destroy', function() {
+    this.midas = new Midas();
+    this.midas.destroy();
+
+    expect(this.midas.toolbar).toEqual(null);
+    expect(this.midas.regions).toEqual([]);
+  });
+
+  describe('static methods', function () {
+
+    it('should track instances of itself', function() {
+      var midas1 = new Midas();
+      var midas2 = new Midas();
+      var midas3 = new Midas();
+
+      expect(Midas.instances.length).toEqual(3);
+
+      midas2.destroy();
+      expect(Midas.instances.length).toEqual(2);
+
+      midas1.destroy();
+      expect(Midas.instances.length).toEqual(1);
+
+      midas3.destroy();
+      expect(Midas.instances.length).toEqual(0);
+
+      midas1 = null;
+      midas2 = null;
+      midas3 = null;
+    });
+
+    describe('for detecting the browser', function () {
+
+      // I'm not really sure how to test these.. most of the other tests will
+      // be broken if these two fail in a given browser, because most of the
+      // features require a level of support in the browser.
+
+      it('should return that it knows what browser is being used', function() {
+        expect(Midas.agent()).not.toEqual(false);
+      });
+
+      it('should detect if the browser is capible of editing', function() {
+        expect(Midas.agentIsCapable()).toEqual(true);
+      });
+
+    });
+
+  });
+
+  describe('when saving', function () {
+
+    beforeEach(function() {
+      this.spy = spyOn(Ajax, 'Request').andCallFake(function() {
+        jasmine.log('>> Mock Ajax.Request called with ' + arguments.length + ' arguments...');
+      });
+    });
+
+    it('should call serialize on the regions', function () {
+      this.midas = new Midas();
+      spyOn(this.midas.regions[1], 'serialize').andCallFake(function() {
+        return {name: 'banana', content: 'juice'};
+      });
+      this.midas.save();
+
+      expect(this.midas.regions[1].serialize).wasCalled();
+    });
+
+    describe('using put (updating)', function() {
+
+      it('should generate an ajax request', function () {
+        this.midas = new Midas({
+          saveUrl: '/peanuts',
+          saveMethod: 'put'
+        });
+        this.midas.save();
+
+        var args = Ajax.Request.argsForCall[0];
+        expect(args[0]).toEqual('/peanuts');
+        expect(args[1]['method']).toEqual('put');
+        expect(args[1]['parameters']['_method']).toEqual('put');
+        expect(args[1]['parameters']['region1']).toEqual('region1');
+        expect(args[1]['parameters']['region2']).toEqual('region2');
+        expect(args[1]['parameters']['region4']).toEqual($('region4').innerHTML.replace(/^\s+|\s+$/g, ""));
+      });
+
+    });
+
+    describe('using post (creating)', function() {
+
+      it('should generate an ajax request', function () {
+        this.midas = new Midas({
+          saveUrl: '/oranges',
+          saveMethod: 'post'
+        });
+        this.midas.save();
+
+        var args = Ajax.Request.argsForCall[0];
+        expect(args[0]).toEqual('/oranges');
+        expect(args[1]['method']).toEqual('post');
+        expect(args[1]['parameters']['_method']).toBeFalsy();
+        expect(args[1]['parameters']['region1']).toEqual('region1');
+        expect(args[1]['parameters']['region2']).toEqual('region2');
+        expect(args[1]['parameters']['region4']).toEqual($('region4').innerHTML.replace(/^\s+|\s+$/g, ""));
+      });
+
+    });
+
+  });
+
+  describe('events that are observed', function () {
+
+    it('should understand context and highlight buttons', function() {
+      this.midas = new Midas();
+      this.midas.regions[0].focused = true;
+
+      var span = $('div6').down('span');
+      jasmine.simulate.selection(span);
+
+      Event.fire(document, 'midas:region:update', {region: this.midas.regions[0], name: 'name', event: {}});
+      expect(this.midas.toolbar.element.down('.midas-button-bold').hasClassName('active')).toEqual(true);
+
+      var em = $('div3').down('em');
+      jasmine.simulate.selection(em);
+
+      Event.fire(document, 'midas:region:update', {region: this.midas.regions[0], name: 'name', event: {}});
+
+      expect(this.midas.toolbar.element.down('.midas-button-bold').hasClassName('active')).toEqual(false);
+      expect(this.midas.toolbar.element.down('.midas-button-italic').hasClassName('active')).toEqual(true);
+    });
+
+    it('should know which region has focus', function() {
+
+      // focus() doesn't seem to work well in ci.. works fine in browser though.
+      // I tried runs, waits, and changing the element that was being observed /
+      // fired on, but no luck...using click instead of focus for now.
+
+      this.midas = new Midas();
+
+      jasmine.simulate.click(this.midas.regions[1].element);
+      expect(this.midas.activeRegion.name).toEqual(this.midas.regions[1].name);
+
+      jasmine.simulate.click(this.midas.regions[0].element);
+      expect(this.midas.activeRegion.name).toEqual(this.midas.regions[0].name);
+    });
+
+    it('should handle and pass any button clicks to the active region', function() {
+      this.midas = new Midas();
+
+      this.midas.activeRegion = this.midas.regions[0];
+
+      var spy1 = spyOn(this.midas.activeRegion, 'handleAction');
+      var spy2 = spyOn(this.midas, 'handleAction');
+
+      jasmine.simulate.click($$('.midas-button-insertorderedlist')[0]);
+      expect(spy1.callCount).toEqual(1);
+      expect(spy2.callCount).toEqual(1);
+    });
+
+    it('should handle switching modes', function() {
+      this.midas = new Midas();
+      this.midas.activeRegion = this.midas.regions[0];
+
+      var spy = spyOn(this.midas, 'handleMode').andCallThrough();
+
+      jasmine.simulate.click($$('.midas-button-preview')[0]);
+      expect(spy.callCount).toEqual(1);
+    });
+
+  });
+
+  describe('when using an iframe', function() {
+
+    it('should create an iframe', function() {
+      this.midas = new Midas({useIframe: 'about:blank'});
+      spyOn(this.midas, 'initializeRegions');
+      spyOn(this.midas, 'finalizeInterface');
+      expect($$('.midas-iframe-window').length).toEqual(1);
+    });
+    
+    it('should communicate which contentWindow the toolbar should use', function() {
+
+      // need to figure out a better way to test this...
+      // if the expectation runs before the iframe loads 'about:blank' we
+      // get hosed... and to avoid making a long wait here, we've just
+      // added a bit that only checks if midas.toolbar is not undefined
+
+      runs(function() {
+        this.midas = new Midas({useIframe: 'about:blank'});
+        this.iframe = $$('.midas-iframe-window')[0];
+      });
+
+      waits(100);
+
+      runs(function() {
+        if (!this.midas.toolbar) return;
+        expect(this.midas.toolbar.options['contentWindow'] == this.iframe.contentWindow).toEqual(true);
+      })
+    });
+
+  });
+
+});

data/spec/javascripts/native_extensions_spec.js

@@ -0,0 +1,39 @@
+describe('Native Extensions', function () {
+
+  beforeEach(function() {
+    jasmine.loadFixture('native_extensions_fixture');
+  });
+
+  it('should compare two NodeLists', function() {
+    var div = $('div1');
+    expect(typeof(div.childNodes.equals)).toEqual('function');
+
+    expect(div.childNodes.equals($('div1').childNodes)).toEqual(true);
+    expect(div.childNodes.equals($('div2').childNodes)).toEqual(false);
+    expect(div.childNodes.equals($('div3').childNodes)).toEqual(false);
+  });
+
+  it('should convert numbers to hex', function() {
+    var number1 = 15;
+    var number2 = 0;
+
+    expect(number1.toHex()).toEqual('0F');
+    expect(number2.toHex()).toEqual('00');
+  });
+  
+  it('should convert rgb strings to hex', function() {
+    var string1 = 'RGB(255, 255, 255)';
+    var string2 = 'rgb(0 0 0)';
+
+    expect(string1.toHex()).toEqual('#FFFFFF');
+    expect(string2.toHex()).toEqual('#000000');
+  });
+
+  it('should have a isTop() function on window', function() {
+    var iframe = $('iframe1');
+    iframe.contentWindow.isTop = window.isTop;
+
+    expect(window.isTop()).toEqual(true);
+    expect(iframe.contentWindow.isTop()).toEqual(false);
+  });
+});

data/spec/javascripts/palette_spec.js

@@ -0,0 +1,59 @@
+describe('Midas.Palette', function() {
+
+  beforeEach(function() {
+    jasmine.loadFixture('midas_fixture');
+  });
+
+  afterEach(function () {
+    try {
+      this.palette.destroy();
+      this.palette = null;
+    } catch(e) {}
+  });
+
+  it('should accept options in the constructor', function() {
+    this.palette = new Midas.Palette($('palette_button'), 'backcolor', {element: $('toolbar')}, {lettuce: 'banana'});
+
+    expect(this.palette.options['lettuce']).toEqual('banana');
+  });
+
+  it('should make a palette', function() {
+    this.palette = new Midas.Palette($('palette_button'), 'backcolor', {element: $('toolbar')});
+
+    expect(this.palette.element).not.toBeFalsy();
+    expect($$('.midas-palette').length).toEqual(1);
+  });
+
+  stub('should show when the button is clicked', function() {
+
+  });
+
+  stub('should hide', function() {
+
+  });
+
+  stub('should position itself properly', function() {
+
+  });
+
+  stub('should know if it is visible or not', function() {
+
+  });
+
+  stub('should load contents from a url', function() {
+
+  });
+
+  stub('should call a setup function', function() {
+
+  });
+
+  it('should destroy', function() {
+    this.palette = new Midas.Palette($('palette_button'), 'backcolor', {element: $('toolbar')});
+    this.palette.destroy();
+
+    expect(this.palette.element).toBeFalsy();
+    expect($$('.midas-palette').length).toEqual(0);
+  });
+
+});