Abstract DOM

dom-adapter-mock.js

// Mock mainly exposes empty functions

return function() {
  return {
    createElement: function() {}  
  };
};

dom-adapter.js

// Only abstract what is realy needed within your App

return function() {
  return {
    createElement: function(el) {

      // Option 1: Use Framework that works on all platforms out-of-the-box.
      // Tests are provided by Framework. You don't have to add own tests.
      // Framework-API is supposed to work correctly = Contract.
      this._element = $(el);

      // Option 2: Use own implementation that works on all platforms out-of-the-box.
      // You only manually test one time and trust API. No automated tests needed.
      // DOM-API is supposed to work correctly = Contract.
      this._element = document.createElement(el);

      // Option 3: Considering `createElement` being buggy or implemented differently
      // depending on the platform and you can't find a Framework that abstracts your use-case.
      // Use own implementation that works on all platforms by adding
      // different (maybe complex) implementations depending on the platform.
      // You write automated integration tests that you can trust.
      if (typeof document.createElement === 'function') {
        this._element = document.createElement(el);
      } else {
        this._element = foo(el);
      }

    },
    _element: null
  };
};

option-3-dom-adapter-spec.js

// Integration test. It tests a Unit + DOM, which is the external depedency
// This test is supposed to be executed on all platforms

var createDomAdapter = require('./src/service/option-3-dom-adapter.js');

var domAdapter;
beforeEach(function() {
  domAdapter = createDomAdapter();
});


describe('createElement', function() {
  it('creates an Element', function() {
    var el = domAdapter.createElement('div');
    expect(el instanceof HTMLDivElement).toBe(true);
  });
});

popup-component-spec.js

// Unit test
// This file can be executed from the command line and doesn't change whatever abstraction of DOM you use.

var createDomAdapterMock = require('./test/service/dom-adapter-mock.js');
var PopupComponent = reqiure('./component/popup-component.js');

var domAdapterMock;
beforeEach(function() {
  domAdapterMock = createDomAdapterMock();
});


describe('constructor', function() {
  it('calls `createElement` of domAdapterMock', function() {
    spyOn(domAdapterMock.createElement);
    var popupComponent = new PopupComponent(domAdapterMock);
    expect(domAdapterMock.createElement).toHaveBeenCalledWith('div');
  });
});