<!DOCTYPE html>
<html>

  <head>
    <script>jasmineOrMocha = true</script>
    <script src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.2/jasmine.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.2/jasmine-html.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.2/boot.js"></script>
    <script src="https://code.angularjs.org/1.5.5/angular-mocks.js"></script>
    
    <script src="config.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/testing.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/http.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.17/upgrade.js"></script>
    <script>
      System.import('angular2/src/platform/browser/browser_adapter')
        .then(function(browser_adapter) {
          browser_adapter.BrowserDomAdapter.makeCurrent();
          System.import('app').then(function() {
            window.onload();
          });
        });
    </script>
  </head>

  <body>
    <div><ng1 value="'NG1_VALUE'"></ng1></div>
    <div><ng2></ng2></div>
  </body>

</html>
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src"
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    }
  }
});
import {bootstrap, View} from 'angular2/platform/browser';
import {
  Component,
  Injectable,
  provide
} from 'angular2/core';
import {
  HTTP_PROVIDERS,
  Http,
  Response,
  ResponseOptions,
  XHRBackend
} from 'angular2/http';
import {beforeEachProviders} from 'angular2/testing';
import {DirectiveResolver} from 'angular2/compiler';
import {MockBackend} from 'angular2/http/testing';
import {UpgradeAdapter} from 'angular2/upgrade';

const upgradeAdapter = new UpgradeAdapter();

/**
 * NG1 
 */
let ng1App = angular.module('ng1App', []);
ng1App.component('ng1', {
    bindings: {
      value: '='
    },
    template: `<span>NG1 => </span><span ng-bind="$ctrl.value"></span>`
  });

class Ng1Service {
  
  static $injects = [
    'ngService'
  ];
  
  constructor(private ng2Service) {
  }
  
  hello() {
    return `Ng2 said: ${this.ng2Service.hello()}`;
  }
  
}

ng1App.service('ng1Service', Ng1Service);

/**
 * NG2 
 */

@Injectable()
class Ng2Service {
  
  hello() {
    return 'hello';
  }
  
}

ng1App.factory('ng2Service', upgradeAdapter.downgradeNg2Provider(Ng2Service));

/**
 * Testing.
 */

import {
  async,
  beforeEach,
  describe,
  it,
  inject,
  injectAsync,
  setBaseTestProviders,
  ComponentFixture,
  TestComponentBuilder
} from 'angular2/testing';

import {
  TEST_BROWSER_PLATFORM_PROVIDERS,
  TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';

setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);

describe('angular2 upgrade', () => {
  
  it('should load downgrade ng2 services', () => {
        
    var resolve;
    var promise = new Promise(_resolve => {
      resolve = _resolve;
    })
    
    upgradeAdapter.addProvider(Ng2Service);
    
    upgradeAdapter.bootstrap(document.body, ['ng1App'])
      .ready((upgradeAdapterRef) => {
    
        expect(upgradeAdapterRef.ng1Injector.get('ng1Service').hello())
        .toEqual('Ng2 said: hello');
        
        resolve();

      });
    
    return promise;
    
  });
  
});