WIP of EE spec rewrite

spec.js

foounit.require('/epiceditor/js/epiceditor')

// Set the base path globally for ee since its not in default location
var BASEPATH = '/epiceditor/';

// Start with a fresh local storage
localStorage.clear();

// Helper to generate random number for instances
function _rnd() {
  return Math.round(Math.random() * 10000);
}

// Creates a test container and the default intsance id / localStroage name for the editor
function _createTestContainer() {
  var testContainer = document.createElement('div')
    , testId = 'epiceditor-' + (new Date().getTime()) + '-' + _rnd();

  testContainer.id = testId;
  document.body.appendChild(testContainer);
  return testContainer;
}



function _getIframeInnards(el) {
  return el.contentDocument || el.contentWindow.document;
}

function _cleanup(editor) {
  var container = typeof editor.settings.container === 'string' ?
    document.getElementById(editor.settings.container) :
    editor.settings.container;
  document.body.removeChild(container);
  // var editor = null;
  // localStorage.clear();
}

var editor
  , testContainer
  , testContainerId;

// Test EpicEditor.load()
describe('The load method', function () {

  before(function () {
    testContainer = _createTestContainer();
    testContainerId = testContainer.id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId });
    editor.load();
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('should return an object', function () {
    expect(typeof editor).to(be, 'object');
  });

  it('should return an EpicEditor object', function () {
    expect(editor.constructor.name).to(be, 'EpicEditor');
  });

  it('should emit a load event', function () {
    var wasLoaded = false;
    editor.unload();
    editor.on('load', function () {
      wasLoaded = true;
    });
    editor.load();
    expect(wasLoaded).to(beTrue);
  });
  
  describe('creates the a DOM structure that', function () {
    var editorIframes
      , innerWrapper;

    before(function () {
      editorIframes = editorIframes || testContainer.getElementsByTagName('iframe');
      innerWrapper = innerWrapper || _getIframeInnards(editorIframes[0]);
    });

    it('should have one wrapping iframe', function () {
      expect(editorIframes.length).to(be, 1);
    });

    it('should have two inner iframes', function () {
      expect(innerWrapper.getElementsByTagName('iframe').length).to(be, 2);
    });

    it('should have an editor iframe', function () {
      expect(innerWrapper.getElementById('epiceditor-editor-frame')).toNot(beNull);
    });

    it('should have a previewer frame', function () {
      expect(innerWrapper.getElementById('epiceditor-previewer-frame')).toNot(beNull);
    });

    it('should have a utility bar', function () {
      expect(innerWrapper.getElementById('epiceditor-utilbar')).toNot(beNull);
    });
  });
});

describe('The load method accepts an options parameter that', function () {

  before(function () {
    testContainer = _createTestContainer();
    testContainerId = testContainer.id;
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('should allow the container option to be a string with the target container\'s ID', function () {
    editor = new EpicEditor(
      { basePath: BASEPATH
      , container: testContainerId
      }
    ).load();

    expect(editor.getElement('container').id).to(be, editor.settings.container);
  });

  it('should allow the container option to be a DOM element', function () {
    editor = new EpicEditor(
      { basePath: BASEPATH
      , container: testContainer
      }
    ).load();

    expect(editor.getElement('container')).to(be, editor.settings.container);
  });
});

// --- This is where @johnmdonahue left off cleaning ---

describe('The getElement method', function () {
  var testContainerId
    , editor
    , wrapperIframe
    , innerWrapper;

  before(function () {
    testContainerId = _createTestContainer().id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId }).load();
    wrapperIframe = document.getElementById(testContainerId).getElementsByTagName('iframe')[0];
    innerWrapper = _getIframeInnards(wrapperIframe);
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this)
    });
  });

  it('check that "container" is the element given at setup', function () {
    expect(editor.getElement('container')).to(be, document.getElementById(testContainerId));
  });

  it('check that the "wrapper" is the div inside the wrapping iframe containing the other two iframes', function () {
    var innerWrapperDiv = innerWrapper.getElementById('epiceditor-wrapper');
    expect(editor.getElement('wrapper')).to(be, innerWrapperDiv);
  });

  it('check that the "wrapperIframe" is the iframe containing the other two iframes', function () {
    expect(editor.getElement('wrapperIframe')).to(be, wrapperIframe);
  });

  it('check that "editor" is #document of the editor iframe', function () {
    expect(editor.getElement('editor')).to(be, _getIframeInnards(innerWrapper.getElementById('epiceditor-editor-frame')));
  });

  it('check that "editorIframe" is <iframe> containing the editor', function () {
    expect(editor.getElement('editorIframe').id).to(be, 'epiceditor-editor-frame');
  });

  it('check that "previewer" is #document of the previewer iframe', function () {
    expect(editor.getElement('previewer')).to(be, _getIframeInnards(innerWrapper.getElementById('epiceditor-previewer-frame')));
  });

  it('check that "previewerIframe" is <iframe> containing the previewer', function () {
    expect(editor.getElement('previewerIframe').id).to(be, 'epiceditor-previewer-frame');
  });
});

describe('EpicEditor.open', function () {

  var testContainerId, editor, openMeFile, openMeLaterFile, eventWasFired, createEventWasFired, fooFile;

  before(function () {
    testContainerId = _createTestContainer().id;
    openMeFile = 'openMe' + _rnd();
    openMeLaterFile = 'openMeLater' + _rnd();
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId }).load();
    editor.importFile(openMeLaterFile, 'open me later').importFile(openMeFile, 'open this file');

    createEventWasFired = false;
    fooFile = 'foo' + _rnd();

    eventWasFired = false;
    editor.on('open', function () {
      eventWasFired = true;
    });
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('check that the openMe file was created successfully', function () {
    expect(editor.exportFile(openMeFile)).to(be, 'open this file');
  });

  it('check that the openMeLater file was created successfully', function () {
    expect(editor.exportFile(openMeLaterFile)).to(be, 'open me later');
  });

  it('check that the file is open in the editor', function () {
    expect(editor.getElement('editor').body.innerHTML).to(be, 'open this file');
  });

  it('check that openMeLater opens into the editor after calling .open', function () {
    editor.open(openMeLaterFile);
    expect(editor.getElement('editor').body.innerHTML).to(be, 'open me later');
  });

  it('check that the open event is called when the open method is run', function () {
    editor.open();
    expect(eventWasFired).to(be, true);
  });

  it('check that the create event fires for a new file created with open()', function () {
    editor.on('create', function () {
      createEventWasFired = true;
    });
    editor.open(fooFile);
    expect(createEventWasFired).to(beTrue);
  });

  it('check that the create event DOES NOT fire for an existing file with open', function () {
    editor.open(fooFile); // change the file from "testContainerId"

    editor.on('create', function () {
      createEventWasFired = true;
    });

    editor.open(testContainerId);

    expect(createEventWasFired).to(beFalse);
  });

  it('check that the read event fires when a file is read with open()', function () {
    editor.on('read', function () {
      eventWasFired = true;
    });

    editor.open(fooFile); // change the file (should fired create)

    editor.open(testContainerId); // this one should fire read

    expect(eventWasFired).to(be, true);
  });
});

describe('EpicEditor.importFile', function () {

  var testContainerId, editor, fooFile, eventWasFired;

  before(function () {
    testContainerId = _createTestContainer().id;
    editor = new EpicEditor(
      { basePath: BASEPATH
      , container: testContainerId
      }).load();
    fooFile = 'foo' + _rnd();
    eventWasFired = false;
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('check that the content is currently blank', function () {
    expect(editor.exportFile()).to(be, '');
  });

  it('check that importFile(\'foo\',\'#bar\') is imported and can be received', function () {
    var importFileTest = 'importFileTest' + _rnd();
    editor.importFile(importFileTest, '#bar');
    expect(editor.exportFile(importFileTest)).to(be, '#bar');
  });

  it('check that setting the file name as null imports content into the currently open file', function () {
    editor.importFile(null, 'foo');
    expect(editor.exportFile(testContainerId)).to(be, 'foo');
  });

  it('check that importFile fires a create an event when importing a new file', function () {
    editor.on('create', function () {
      eventWasFired = true;
    });
    editor.importFile(fooFile);
    expect(eventWasFired).to(beTrue);
  });

  it('check that importFile fires an update event when modifying an existing file', function () {
    editor.on('update', function () {
      eventWasFired = true;
    });

    editor.importFile(null, 'new text');

    expect(eventWasFired).to(beTrue);
  });

  it('check that importFile DOES NOT fire an update event when creating a file', function () {
    editor.on('update', function () {
      eventWasFired = true;
    });

    editor.importFile(fooFile);

    expect(eventWasFired).to(beFalse);
  });
  // TODO: Tests for importFile's kind parameter when implemented
  // TODO: Tests for importFile's meta parameter when implemented

});

describe('EpicEditor.exportFile', function () {

  var testContainerId, contents, editor;

  before(function () {
    testContainerId = _createTestContainer().id;

    editor = new EpicEditor(
      { basePath: BASEPATH
      , file: { defaultContent: '#foo\n\n##bar' }
      , container: testContainerId
      }).load();
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('check that exportFile will work without parameters by outputting the current file as raw text', function () {
    contents = editor.exportFile();
    expect(contents).to(match, /#foo\r?\n\r?\n##bar/);
  });

  it('check that exportFile will export the current file as HTML with a null parameter as it\'s first', function () {
    contents = editor.exportFile(null, 'html');
    expect(contents).to(be, '<h1>foo</h1>\n<h2>bar</h2>\n');
  });

  it('check that exporting a file that doesn\'t exist returns as undefined', function () {
    contents = editor.exportFile('doesntExist' + _rnd());
    expect(contents).to(beUndefined);
  });

  it('check that export file can open non-currently open files', function () {
    var exportFileTest = 'exportFileTest' + _rnd();
    editor.importFile(exportFileTest, 'hello world'); // import and open a file
    editor.open(testContainerId); // open the original again
    expect(editor.exportFile(exportFileTest)).to(be, 'hello world');
  });
});

describe('EpicEditor.rename', function () {

  var testContainerId, editor, oldName, newName;

  before(function () {
    testContainerId = _createTestContainer().id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId }).load();
    oldName = 'foo' + _rnd();
    newName = 'bar' + _rnd();
    editor.importFile(oldName, 'testing...');
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('check to see if the foo file exists before trying to rename', function () {
    expect(editor.exportFile(oldName)).to(be, 'testing...');
  });

  it('check that renaming a file actually renames the file by exporting by the new files name', function () {
    editor.rename(oldName, newName);
    expect(editor.exportFile(newName)).to(be, 'testing...');
  });

  it('check that foo no longer exists', function () {
    editor.rename(oldName, newName);
    expect(editor.exportFile(oldName)).to(beUndefined);
  });
});


describe('EpicEditor.remove', function () {

  var testContainerId, editor, removeMeFile, dontRemoveMeFile, eventWasFired;

  before(function () {
    testContainerId = _createTestContainer().id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId }).load();
    removeMeFile = 'removeMe' + _rnd();
    dontRemoveMeFile = 'dontRemoveMe' + _rnd();
    editor.importFile(removeMeFile, 'hello world').importFile(dontRemoveMeFile, 'foo bar');
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('check that the foo file was imported', function () {
    expect(editor.exportFile(removeMeFile)).to(be, 'hello world');
  });

  it('check that after removing the file exportFile returns false', function () {
    editor.remove(removeMeFile);
    expect(editor.exportFile(removeMeFile)).to(beUndefined);
  });

  it('check that other files weren\'t removed', function () {
    expect(editor.exportFile(dontRemoveMeFile)).to(be, 'foo bar');
  });


  it('check that the remove event fires when a file is deleted', function () {
    editor.on('remove', function () {
      eventWasFired = true;
    });

    editor.open(removeMeFile);
    editor.remove(removeMeFile);
    expect(eventWasFired).to(beTrue);
  });
});

describe('EpicEditor.preview and EpicEditor.edit', function () {

  var testContainerId, editor, previewEventWasCalled, editEventWasCalled;

  before(function () {
    testContainerId = _createTestContainer().id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId }).load();

    previewEventWasCalled = false;
    editEventWasCalled = false;

    editor.on('preview', function () {
      previewEventWasCalled = true;
    });

    editor.on('edit', function () {
      editEventWasCalled = true;
    });
  });

  after(function () {
    editor.removeListener('preview');
    editor.removeListener('edit');
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('check that the editor is currently displayed and not the previewer', function () {
    expect(editor.getElement('editorIframe').style.display).to(be, '');
  });

  it('check that the previewer can be tested to be hidden', function () {
    expect(editor.getElement('previewerIframe').style.display).to(be, 'none');
  });

  it('check that calling .preview() displays the previewer', function () {
    editor.preview();
    expect(editor.getElement('previewerIframe').style.display).to(be, 'block');
  });

  it('check that the preview event fires when the preview method is called', function () {
    editor.preview();
    expect(previewEventWasCalled).to(be, true);
  });

  it('check that the edit event fires when the edit method is called', function () {
    editor.edit();
    expect(editEventWasCalled).to(be, true);
  });

  it('check that switching from preview back to edit makes the editor visible', function () {
    editor.preview();
    editor.edit();
    expect(editor.getElement('editorIframe').style.display).to(be, 'block');
  });

  it('check that switching from preview back to edit doesn\'t keep the previewer displayed', function () {
    editor.preview();
    editor.edit();
    expect(editor.getElement('previewerIframe').style.display).to(be, 'none');
  });
});

describe('EpicEditor.unload', function () {

  before(function () {
    testContainer = _createTestContainer();
    testContainerId = testContainer.id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId });
    editor.load();
  });

  it('should emit an unload event', function () {
    var wasUnloaded = false;
    editor.on('unload', function () {
      wasUnloaded = true;
    });
    editor.unload();
    expect(wasUnloaded).to(beTrue);
  });

  it('check the editor was unloaded properly by checking if the editor HTML is gone from the original element', function () {
    editor.unload();
    expect(testContainer.innerHTML).to(beFalsy);
  });

  it('check the editor\'s getElement method returns null for selected elements because they no longer exist', function () {
    editor.unload();
    expect(editor.getElement('editor')).to(beFalsy);
  });

  it('check that unload can\'t be run twice', function () {
    editor.unload();
    expect(function () { editor.unload(); }).to(throwError, 'Editor isn\'t loaded');
  });

  it('check that unload and reloading and then requesting getElement doesn\'t return null as if it were unloaded', function () {
    editor.unload();
    editor.load();
    expect(editor.getElement('editor')).to(beTruthy);
    editor.unload();
  });

});

describe('EpicEditor.save', function () {

  before(function () {
    testContainerId = _createTestContainer();
    editor = new EpicEditor(
      { basePath: BASEPATH
      , container: testContainerId
      , file:
        { defaultContent: 'foo'
        , autoSave: false
        }
      });
    editor.load();
    console.log(testContainerId, editor.settings.file.defaultContent, editor.getElement('editor').body.innerHTML)
  });

  after(function () {
    editor.unload(function () {
      _cleanup(this);
    });
  });
  
  // Is this an options check rather than save?
  it('check that foo is the default content in the editor', function () {
    editor.on('load', );
    expect(editor.getElement('editor').body.innerHTML).to(be, 'foo');
  });

  it('check to make sure new file contents are saved after value is changed in the editor and save is called', function () {
    editor.getElement('editor').body.innerHTML = 'bar';
    editor.save();
    expect(JSON.parse(localStorage['epiceditor'])[testContainerId].content).to(be, 'bar');
  });

  it('check that the save event is called when the save method is run', function () {
    var eventWasFired = false;
    
    editor.on('save', function () {
      eventWasFired = true;
    });
    editor.save();
    expect(eventWasFired).to(beTrue);
  });

  it('check that the update event fires when the content changes', function () {
    var eventWasFired = false;
    
    editor.on('update', function () {
      eventWasFired = true;
    });
    editor.getElement('editor').body.innerHTML = 'bar';
    editor.save();
    expect(eventWasFired).to(beTrue);
  });

  it('check that the update event DOES NOT fire when the content is the same', function () {
    var eventWasFired = false;
    
    editor.on('update', function () {
      eventWasFired = true;
    });
    editor.getElement('editor').body.innerHTML = 'foo';
    editor.save();
    expect(eventWasFired).to(beFalse);
  });

  it('check that the timestamp is updated when the content is modified', function () {
    var currentModifiedDate = JSON.parse(localStorage['epiceditor'])[testContainerId].modified
      , eventWasFired = false;
      
    editor.on('update', function () {
      eventWasFired = true;
    });
    editor.getElement('editor').body.innerHTML = 'bar';
    editor.save();
    expect(currentModifiedDate).toNot(be, JSON.parse(localStorage['epiceditor'])[testContainerId].modified);
  });

});

describe('EpicEditor.on', function () {

  var testContainerId, editor, hasBeenFired;

  before(function () {
    testContainerId = _createTestContainer().id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId }).load();
    hasBeenFired = false;
  });

  after(function () {
    editor.removeListener('foo');
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('check that on fires on an EE event, preview', function () {
    editor.on('preview', function () {
      hasBeenFired = true;
    });
    editor.preview();
    expect(hasBeenFired).to(beTrue);
  });

  it('check that on fires for custom events', function () {
    editor.on('foo', function () {
      hasBeenFired = true;
    });
    editor.emit('foo');
    expect(hasBeenFired).to(beTrue);
  });

});

describe('EpicEditor.emit', function () {

  var testContainerId, editor, hasBeenFired;

  before(function () {
    testContainerId = _createTestContainer().id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId }).load();
    hasBeenFired = false;
  });

  after(function () {
    editor.removeListener('foo');
    editor.unload(function () {
      _cleanup(this);
    });
  });

  // We don't use events in EpicEditor so only custom events need to be checked
  it('check that emit triggers a callback for a custom event', function () {
    editor.on('foo', function () {
      hasBeenFired = true;
    });
    editor.emit('foo');
    expect(hasBeenFired).to(beTrue);
  });

});

describe('EpicEditor.removeListener', function () {

  var testContainerId, editor, hasBeenFired, baz, qux, callCount;

  before(function () {
    testContainerId = _createTestContainer().id;
    editor = new EpicEditor({ basePath: BASEPATH, container: testContainerId }).load();
    hasBeenFired = false;
    callCount = 0;
    editor.on('foo', function () {
      hasBeenFired = true;
    });

    baz = function () {
      callCount++;
    };

    qux = function () {
      callCount++;
    };

    editor.on('bar', baz);
    editor.on('bar', qux);
  });

  after(function () {
    editor.removeListener('foo');
    editor.unload(function () {
      _cleanup(this);
    });
  });

  it('check that the foo event can be fired', function () {
    editor.emit('foo');
    expect(hasBeenFired).to(beTrue);
  });

  it('check that removing the event WITHOUT a handler param, than emitting it doesn\'t trigger the event', function () {
    editor.removeListener('foo');
    editor.emit('foo');
    expect(hasBeenFired).to(beFalse);
  });

  it('check that removing the event WITH a handler param, than emitting it only triggers one of the two handlers', function () {
    editor.removeListener('bar', baz);
    editor.emit('bar');
    expect(callCount).to(be, 1);
  });

  it('check that removing an event WITHOUT the param removes ALL handlers of that event', function () {
    editor.removeListener('bar');
    editor.emit('bar');
    expect(callCount).to(be, 0);
  });

});