vrdom tests

by Stéphane MBAPE

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.5.2/boot.min.js"></script>
<script src="https://npmcdn.com/preact@latest"></script>
<script src="https://npmcdn.com/proptypes@latest"></script>
<script src="https://npmcdn.com/preact-compat@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<script src="https://npmcdn.com/vrdom@latest/dist/vrdom.min.js"></script>

CSS

body {
  margin: 20px;
}

Babel + JSX

/** @jsx React.createElement */

/* eslint-env browser, es6, jasmine */
/* global preact:false, preactCompat: false, vrdom:false */
/* eslint-disable no-void, no-return-assign, class-methods-use-this */

var library = "preact";

var React, ReactDOM;

switch(library) {
  case "preact":
    preact.options.syncComponentUpdates = true;
    React = preactCompat;
    ReactDOM = preactCompat;
    break;

  case "react":
    React = window.React;
    ReactDOM = window.ReactDOM;
    break;

  default:
    React = vrdom;
    ReactDOM = vrdom;
}

function trigger(elem, name, props) {
  if (/^key/.test(name)) {
    // http://stackoverflow.com/questions/10455626/keydown-simulation-in-chrome-fires-normally-but-not-the-correct-key/10520017#10520017
    var oEvent = document.createEvent('KeyboardEvent');

    // Chromium Hack
    Object.defineProperty(oEvent, 'charCode', {
      get: function() {
        return this.keyCodeVal;
      }
    });
    Object.defineProperty(oEvent, 'keyCode', {
      get: function() {
        return this.keyCodeVal;
      }
    });
    Object.defineProperty(oEvent, 'which', {
      get: function() {
        return this.keyCodeVal;
      }
    });

    if (oEvent.initKeyboardEvent) {
      oEvent.initKeyboardEvent(name, true, true, document.defaultView, false, false, false, false, props, props);
    } else {
      oEvent.initKeyEvent(name, true, true, document.defaultView, false, false, false, false, props, 0);
    }

    oEvent.keyCodeVal = props;

    if (oEvent.keyCode !== props) {
      alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
    }

    elem.dispatchEvent(oEvent);
    return;
  }

  var nativeEvent = document.createEvent("Event");
  nativeEvent.initEvent(name, true, true);
  elem.dispatchEvent(nativeEvent);
}

var eventNames = {
  Change: true, // stop propagation fails in react
  Click: true,
  Copy: true,
  Cut: true,
  KeyDown: true,
  KeyPress: true,
  KeyUp: true,
  MouseDown: true,
  MouseMove: true,
 ...