JSFiddle - React, Tailwind, and code Playground

by maciejgurban

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/jasmine-html.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.4.1/boot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-mocks.js"></script>

Babel + JSX

// Implementation
const injectOnService = ($injector) => {
  return (thisArg) => {
    if(!thisArg.constructor) {
      throw new Error('Constructor method not found.');
    }
    return $injector.annotate(thisArg.constructor).map(name => {
      if(name !== 'injectOn') {
        thisArg[name] = $injector.get(name);
      }
    });
  };
}
class Foo {
  constructor(Bar) {
    injectOn(this);
    console.log('Bar', this.Bar);
  }
}
class Bar {
  constructor() {
    return 'hello';
  }
}
function initialize(injectOnService) {
  window.injectOn = injectOnService;
}

let app = angular.module('myApp', [])
	.service('injectOnService', injectOnService)
	.service('Foo', Foo)
	.service('Bar', Bar)
  .run(initialize);

// Unit tests
describe('myApp', function () {
  beforeEach(module('myApp'));
  
  let Foo, Bar;
  describe('Foo', function () {
    beforeEach(inject((_Foo_, _Bar_) => {
      Foo = _Foo_;
      Bar = _Bar_;
    }));
    it('should assign dependencies on the service', function () {
      expect(Foo.Bar).toBeDefined();
      expect(Foo.Bar).toBe(Bar);
    });
  });
});