JSFiddle - React, Tailwind, and code Playground

by togakangaroo

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine-html.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/boot.js"></script>

JavaScript

(function() {
  var createSlideWidget, htmlTemplate;

  htmlTemplate = "<!DOCTYPE html>\n<html>\n<head></head>\n<body>\n    <article id=\"slide-canvas\">{{{text}}}</article>\n    <script>\n      setTimeout(function(){\n        window.__rendering.resolve();\n      }, 1);\n    <\/script>\n</body>\n</html>";

  createSlideWidget = function(element) {
    var doc, draw, frame;
    frame = $("<iframe>").appendTo(element)[0];
    draw = function(text) {
      return $.Deferred(function(rendering) {
        var d, html;
        d = doc();
        d.open();
        html = htmlTemplate.replace('{{{text}}}', text);
        frame.contentWindow.__rendering = rendering;
        d.write(html);
        return d.close();
      });
    };
    doc = function() {
      return frame.contentDocument || frame.contentWindow.document;
    };
    return {
      draw: draw,
      slideDocument: doc
    };
  };

  describe("when a drawSlide is created with modifyable layout code", function() {
    beforeEach(function() {
      this.$slide = $('<div>').appendTo('body');
      this.slide = createSlideWidget(this.$slide);
      return this.textOf = function() {
        var _ref;
        return (_ref = this.slide.slideDocument().getElementById('slide-canvas').textContent) != null ? _ref.trim() : void 0;
      };
    });
    afterEach(function() {
      return this.$slide.remove();
    });
    return describe("slide layout code changes and is redrawn", function() {
      beforeEach(function(done) {
        return (this.slide.draw('<h1>bar</h1>')).always(done);
      });
      it("can draw", function() {
        return (expect(this.textOf(this.$slide))).toBe("bar");
      });
      return it("can draw agan (2 tests throw an error, 1 works fine)", function() {
        return (expect(this.textOf(this.$slide))).toBe("bar");
      });
    });
  });

  jasmine.getEnv().addReporter(new jasmine.JSReporter2());

  jasmine.getEnv().execute();

}).call(this);