Update tests

lib/components/ApiInfo/api-info.spec.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import { getChildDebugElement } from 'tests/helpers';
-import {Component, provide} from '@angular/core';
+import { Component, provide } from '@angular/core';
 
 import {
   inject,
@@ -13,7 +13,7 @@ import {
 
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
-import ApiInfo from 'lib/components/ApiInfo/api-info';
+import { ApiInfo } from 'lib/components/ApiInfo/api-info';
 import SchemaManager from 'lib/utils/SchemaManager';
 import { OptionsService } from 'lib/services/index';
 
@@ -40,7 +40,9 @@ describe('Redoc components', () => {
         component = getChildDebugElement(fixture.debugElement, 'api-info').componentInstance;
         fixture.detectChanges();
         done();
-      }, err => done.fail(err));
+      }, err => {
+        done.fail(err);
+      });
     });
 
 

lib/components/ApiLogo/api-logo.spec.js

@@ -13,7 +13,7 @@ import {
 
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
-import ApiLogo from 'lib/components/ApiLogo/api-logo';
+import { ApiLogo } from 'lib/components/ApiLogo/api-logo';
 import SchemaManager from 'lib/utils/SchemaManager';
 
 

lib/components/JsonSchema/json-schema-lazy.js

@@ -42,7 +42,11 @@ export class JsonSchemaLazy {
       this.dcl.loadNextToLocation(JsonSchema, this.viewRef).then((compRef) => {
         this.initComponent(compRef);
         // trigger change detection
+        if (compRef.changeDetectorRef) {
           compRef.changeDetectorRef.detectChanges();
+        } else {
+          compRef.hostView.changeDetectorRef.detectChanges();
+        }
       });
     }
     this.loaded = true;
@@ -61,7 +65,11 @@ export class JsonSchemaLazy {
           if ($element.querySelector('.discriminator-wrap')) {
             this.dcl.loadNextToLocation(JsonSchema, this.viewRef).then((compRef) => {
               this.initComponent(compRef);
+              if (compRef.changeDetectorRef) {
                 compRef.changeDetectorRef.detectChanges();
+              } else {
+                compRef.hostView.changeDetectorRef.detectChanges();
+              }
             });
             return;
           }
@@ -71,7 +79,11 @@ export class JsonSchemaLazy {
     } else {
       cache[this.pointer] = this.dcl.loadNextToLocation(JsonSchema, this.viewRef).then((compRef) => {
         this.initComponent(compRef);
+        if (compRef.changeDetectorRef) {
           compRef.changeDetectorRef.detectChanges();
+        } else {
+          compRef.hostView.changeDetectorRef.detectChanges();
+        }
         return compRef;
       });
     }

lib/components/JsonSchema/json-schema-lazy.spec.js

@@ -15,7 +15,7 @@ import {
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
 
-import JsonSchemaLazy from 'lib/components/JsonSchema/json-schema-lazy';
+import { JsonSchemaLazy } from 'lib/components/JsonSchema/json-schema-lazy';
 import SchemaManager from 'lib/utils/SchemaManager';
 import { OptionsService } from 'lib/services/index';
 

lib/components/JsonSchema/json-schema.js

@@ -3,7 +3,7 @@
 import { ElementRef } from '@angular/core';
 
 import { RedocComponent, BaseComponent, SchemaManager } from '../base';
-import { DropDown } from '../..//shared/components/index';
+import { DropDown } from '../../shared/components/index';
 import JsonPointer from '../../utils/JsonPointer';
 
 @RedocComponent({

lib/components/JsonSchema/json-schema.spec.js

@@ -13,7 +13,7 @@ import { OptionsService } from 'lib/services/index';
 import { getChildDebugElement } from 'tests/helpers';
 
 
-import { JsonSchema } from 'lib/components/index';
+import { JsonSchema } from 'lib/components/JsonSchema/json-schema';
 import SchemaManager from 'lib/utils/SchemaManager';
 
 describe('Redoc components', () => {

lib/components/Method/method.js

@@ -1,27 +1,19 @@
 'use strict';
 
-import { forwardRef } from '@angular/core';
 import { JsonPointer } from '../../utils/JsonPointer';
 import { RedocComponent, BaseComponent } from '../base';
 
-import {
+import { ParamsList } from '../ParamsList/params-list';
-  ParamsList,
+import { ResponsesList } from '../ResponsesList/responses-list';
-  ResponsesList,
+import { ResponsesSamples } from '../ResponsesSamples/responses-samples';
-  ResponsesSamples,
+import { SchemaSample } from '../SchemaSample/schema-sample';
-  SchemaSample,
+import { RequestSamples } from '../RequestSamples/request-samples';
-  RequestSamples
-} from '../index';
 
 @RedocComponent({
   selector: 'method',
   templateUrl: './lib/components/Method/method.html',
   styleUrls: ['./lib/components/Method/method.css'],
-  directives: [
+  directives: [ ParamsList, ResponsesList, ResponsesSamples, SchemaSample, RequestSamples ],
-    forwardRef(() => ParamsList),
-    forwardRef(() => ResponsesList),
-    forwardRef(() => ResponsesSamples),
-    forwardRef(() => SchemaSample),
-    forwardRef(() => RequestSamples)],
   inputs: ['tag']
 })
 export class Method extends BaseComponent {

lib/components/Method/method.spec.js

@@ -13,9 +13,9 @@ import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import { getChildDebugElement } from 'tests/helpers';
 
-import { Method } from 'lib/components/index';
+import { Method } from 'lib/components/Method/method';
 import SchemaManager from 'lib/utils/SchemaManager';
-import OptionsService from 'lib/services/index';
+import { OptionsService, RedocEventsService } from 'lib/services/index';
 
 describe('Redoc components', () => {
   describe('Method Component', () => {
@@ -24,7 +24,8 @@ describe('Redoc components', () => {
     beforeEachProviders(() => [
         provide(SchemaManager, {useValue: new SchemaManager()}),
         provide(BrowserDomAdapter, {useClass: BrowserDomAdapter}),
-        provide(OptionsService, {useClass: OptionsService})
+        provide(OptionsService, {useClass: OptionsService}),
+        provide(RedocEventsService, {useClass: RedocEventsService})
     ]);
     beforeEach(async(inject([TestComponentBuilder, SchemaManager], (tcb, schemaMgr) => {
       builder = tcb;

lib/components/MethodsList/methods-list.js

@@ -1,15 +1,16 @@
 'use strict';
 
+import { forwardRef } from '@angular/core';
 import { RedocComponent, BaseComponent } from '../base';
-import { Method } from '../index';
+import { Method } from '../Method/method';
 import { EncodeURIComponentPipe } from '../../utils/pipes';
 
 @RedocComponent({
   selector: 'methods-list',
   templateUrl: './lib/components/MethodsList/methods-list.html',
   styleUrls: ['./lib/components/MethodsList/methods-list.css'],
-  directives: [Method],
+  directives: [ forwardRef(() => Method) ],
-  pipes: [EncodeURIComponentPipe]
+  pipes: [ EncodeURIComponentPipe ]
 })
 export class MethodsList extends BaseComponent {
 

lib/components/MethodsList/methods-list.spec.js

@@ -1,10 +1,7 @@
 'use strict';
 
-import { getChildDebugElement } from 'tests/helpers';
+import { Component, provide } from '@angular/core';
-import {Component, provide} from '@angular/core';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
-import { OptionsService } from 'lib/services/index';
-import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
-
 import {
   inject,
   async,
@@ -12,10 +9,12 @@ import {
   beforeEachProviders,
   it
 } from '@angular/core/testing';
-
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
-import MethodsList from 'lib/components/MethodsList/methods-list';
+import { getChildDebugElement } from 'tests/helpers';
+
+import { OptionsService, RedocEventsService } from 'lib/services/index';
+import { MethodsList } from 'lib/components/MethodsList/methods-list';
 import SchemaManager from 'lib/utils/SchemaManager';
 
 describe('Redoc components', () => {
@@ -26,7 +25,8 @@ describe('Redoc components', () => {
     beforeEachProviders(() => [
         provide(SchemaManager, {useValue: new SchemaManager()}),
         provide(OptionsService, {useClass: OptionsService}),
-        provide(BrowserDomAdapter, {useClass: BrowserDomAdapter})
+        provide(BrowserDomAdapter, {useClass: BrowserDomAdapter}),
+        provide(RedocEventsService, {useClass: RedocEventsService})
     ]);
     beforeEach(async(inject([TestComponentBuilder, SchemaManager], (tcb, schemaMgr) => {
       builder = tcb;
@@ -57,11 +57,9 @@ describe('Redoc components', () => {
   });
 });
 
-/** Test component that contains an ApiInfo. */
 @Component({
   selector: 'test-app',
-  directives: [MethodsList],
+  directives: [ MethodsList ],
-  providers: [SchemaManager],
   template:
       `<methods-list></methods-list>`
 })

lib/components/ParamsList/params-list.js

@@ -1,7 +1,8 @@
 'use strict';
 
 import { RedocComponent, BaseComponent } from '../base';
-import { JsonSchema, JsonSchemaLazy } from '../index';
+import { JsonSchema } from '../JsonSchema/json-schema';
+import {JsonSchemaLazy} from '../JsonSchema/json-schema-lazy';
 
 function safePush(obj, prop, item) {
   if (!obj[prop]) obj[prop] = [];

lib/components/Redoc/redoc.js

@@ -1,15 +1,15 @@
 'use strict';
 
-import { provide, enableProdMode, ElementRef} from '@angular/core';
+import { provide, enableProdMode, ElementRef } from '@angular/core';
 import { bootstrap } from '@angular/platform-browser-dynamic';
 import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
 import { RedocComponent, BaseComponent } from '../base';
-import {
+
-  ApiInfo,
+import { ApiInfo } from '../ApiInfo/api-info';
-  ApiLogo,
+import { ApiLogo } from '../ApiLogo/api-logo';
-  MethodsList,
+import { MethodsList } from '../MethodsList/methods-list';
-  SideMenu
+import { SideMenu } from '../SideMenu/side-menu';
-} from '../index';
+
 import { StickySidebar } from '../../shared/components/index';
 import SchemaManager from '../../utils/SchemaManager';
 import { OptionsService, RedocEventsService } from '../../services/index';
@@ -29,7 +29,7 @@ var _modeLocked = false;
   ],
   templateUrl: './lib/components/Redoc/redoc.html',
   styleUrls: ['./lib/components/Redoc/redoc.css'],
-  directives: [ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar]
+  directives: [ ApiInfo, ApiLogo, MethodsList, SideMenu, StickySidebar ]
 })
 @Reflect.metadata('parameters', [
   [SchemaManager], [OptionsService], [ElementRef], [RedocEventsService]])

lib/components/Redoc/redoc.spec.js

@@ -1,8 +1,8 @@
 'use strict';
 
 import { getChildDebugElement } from 'tests/helpers';
-import {Component, ViewMetadata, provide} from '@angular/core';
+import { Component, provide } from '@angular/core';
-import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
 
 import {
   inject,
@@ -14,11 +14,11 @@ import {
 
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
-import Redoc from 'lib/components/Redoc/redoc';
+import { Redoc } from 'lib/components/Redoc/redoc';
 import SchemaManager from 'lib/utils/SchemaManager';
 import { OptionsService } from 'lib/services/index';
 
-let optsMgr = new OptionsService();
+let optsMgr = new OptionsService(new BrowserDomAdapter());
 
 describe('Redoc components', () => {
   describe('Redoc Component', () => {
@@ -28,6 +28,9 @@ describe('Redoc components', () => {
         provide(BrowserDomAdapter, {useValue: new BrowserDomAdapter()}),
         provide(OptionsService, {useValue: optsMgr})
     ]);
+    beforeEachProviders(() => [
+        provide(OptionsService, {useValue: optsMgr})
+    ]);
     beforeEach(async(inject([TestComponentBuilder, SchemaManager], (tcb, schemaMgr) => {
       builder = tcb;
       return schemaMgr.load('/tests/schemas/extended-petstore.yml');
@@ -50,62 +53,6 @@ describe('Redoc components', () => {
         done();
       }, err => done.fail(err));
     });
-
-    describe('Options', () => {
-      let component;
-      let fixture;
-
-      function build(tmpl, cb) {
-        builder = builder.overrideView(TestApp,
-          new ViewMetadata({template: tmpl, directives: [Redoc]}));
-        builder.createAsync(TestApp).then(_fixture => {
-          fixture = _fixture;
-          component = getChildDebugElement(fixture.debugElement, 'redoc').componentInstance;
-          fixture.detectChanges();
-          cb();
-        }, err => cb(err));
-      }
-
-      afterEach(() => {
-        fixture.destroy();
-      });
-
-      it('should parse numeric scrollYOffset', (done) => {
-        build(`<redoc scroll-y-offset="50"></redoc>`, err => {
-          if (err) return done.fail(err);
-          component.options.scrollYOffset().should.be.equal(50);
-          done();
-        });
-      });
-
-      it('should parse selector scrollYOffset', (done) => {
-        build(`<div id="test" style="position: fixed; height: 50px; top:0"> </div>
-              <redoc scroll-y-offset="#test"></redoc>`, err => {
-          if (err) return done.fail(err);
-          component.options.scrollYOffset().should.be.equal(50);
-          done();
-        });
-      });
-
-      it('should return 0 for incorrect selector scrollYOffset', (done) => {
-        build(`<div id="test" style="position: fixed; height: 50px; top:0"> </div>
-              <redoc scroll-y-offset="#test2"></redoc>`, err => {
-          if (err) return done.fail(err);
-          component.options.scrollYOffset().should.be.equal(0);
-          done();
-        });
-      });
-
-      it('should handle function scrollYOffset', (done) => {
-        optsMgr.options.scrollYOffset = () => 123;
-        build(`<redoc></redoc>`, err => {
-          if (err) return done.fail(err);
-          component.options.scrollYOffset().should.be.equal(123);
-          optsMgr.options.scrollYOffset = 0;
-          done();
-        });
-      });
-    });
   });
 
   describe('Redoc init', () => {

lib/components/RequestSamples/request-samples.js

@@ -1,11 +1,11 @@
 'use strict';
 
-import { forwardRef, ViewChildren, QueryList } from '@angular/core';
+import { ViewChildren, QueryList } from '@angular/core';
 
 import { RedocComponent, BaseComponent, SchemaManager } from '../base';
 import JsonPointer from '../../utils/JsonPointer';
-import { Tabs, Tab } from '../..//shared/components/index';
+import { Tabs, Tab } from '../../shared/components/index';
-import { SchemaSample } from '../index';
+import { SchemaSample } from '../SchemaSample/schema-sample';
 import { PrismPipe } from '../../utils/pipes';
 import { RedocEventsService } from '../../services/index';
 
@@ -13,7 +13,7 @@ import { RedocEventsService } from '../../services/index';
   selector: 'request-samples',
   templateUrl: './lib/components/RequestSamples/request-samples.html',
   styleUrls: ['./lib/components/RequestSamples/request-samples.css'],
-  directives: [forwardRef(() =>SchemaSample), Tabs, Tab],
+  directives: [SchemaSample, Tabs, Tab],
   inputs: ['schemaPointer'],
   pipes: [PrismPipe]
 })

lib/components/ResponsesList/responses-list.js

@@ -2,9 +2,10 @@
 
 import {RedocComponent, BaseComponent, SchemaManager} from '../base';
 import JsonPointer from '../../utils/JsonPointer';
-import { JsonSchema, JsonSchemaLazy } from '../index';
+import { JsonSchema } from '../JsonSchema/json-schema';
-import {Zippy} from '../../shared/components/index';
+import { JsonSchemaLazy } from '../JsonSchema/json-schema-lazy';
-import {statusCodeType} from '../../utils/helpers';
+import { Zippy } from '../../shared/components/index';
+import { statusCodeType } from '../../utils/helpers';
 import { OptionsService } from '../../services/index';
 
 function isNumeric(n) {

lib/components/SideMenu/side-menu.spec.js

@@ -1,9 +1,9 @@
 'use strict';
 
-import { getChildDebugElement, mouseclick} from 'tests/helpers';
+import { getChildDebugElement } from 'tests/helpers';
-import {Component, provide, ViewMetadata} from '@angular/core';
+import { Component, provide } from '@angular/core';
-import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
-import { OptionsService } from 'lib/services/index';
+import { OptionsService, RedocEventsService } from 'lib/services/index';
 
 import {
   inject,
@@ -15,9 +15,8 @@ import {
 
 import { TestComponentBuilder } from '@angular/compiler/testing';
 
-import {redocEvents} from 'lib/events';
+import { MethodsList, SideMenu } from 'lib/components/index';
-import MethodsList from 'lib/components/MethodsList/methods-list';
+
-import SideMenu from 'lib/components/SideMenu/side-menu';
 import SchemaManager from 'lib/utils/SchemaManager';
 
 let testOptions = new OptionsService();
@@ -26,6 +25,8 @@ testOptions.options = {
   scrollParent: window
 };
 
+let redocEvents = new RedocEventsService();
+
 describe('Redoc components', () => {
   describe('SideMenu Component', () => {
     let builder;
@@ -34,166 +35,33 @@ describe('Redoc components', () => {
     beforeEachProviders(() => [
         provide(SchemaManager, {useValue: new SchemaManager()}),
         provide(BrowserDomAdapter, {useValue: new BrowserDomAdapter()}),
-        provide(OptionsService, {useValue: testOptions})
+        provide(OptionsService, {useValue: testOptions}),
+        provide(RedocEventsService, {useValue: redocEvents})
     ]);
     beforeEach(async(inject([TestComponentBuilder, SchemaManager], (tcb, schemaMgr) => {
       builder = tcb;
       return schemaMgr.load('/tests/schemas/extended-petstore.yml');
     })));
 
+    beforeEach((done) => {
+      builder.createAsync(TestApp).then(_fixture => {
+        fixture = _fixture;
+        component = getChildDebugElement(fixture.debugElement, 'side-menu').componentInstance;
+        fixture.detectChanges();
+        done();
+      }, err => {
+        throw err;
+      });
+    });
+
     afterEach(() => {
       if (fixture) fixture.destroy();
     });
 
-    describe('window parent case', () => {
-      beforeEach((done) => {
-        builder.createAsync(TestApp).then(_fixture => {
-          fixture = _fixture;
-          component = getChildDebugElement(fixture.debugElement, 'side-menu').componentInstance;
-          fixture.detectChanges();
-          done();
-        }, err => {
-          throw err;
-        });
-      });
-
     it('should init component and component data', () => {
       expect(component).not.toBeNull();
       expect(component.data).not.toBeNull();
     });
-
-      it('should run hashScroll when redoc bootstrapped', (done) => {
-        spyOn(component.dom, 'getLocation').and.returnValue({hash: ''});
-        spyOn(component, 'hashScroll').and.stub();
-        spyOn(window, 'scrollTo').and.stub();
-        redocEvents.bootstrapped.next();
-        setTimeout(() => {
-          expect(component.hashScroll).toHaveBeenCalled();
-          expect(window.scrollTo).not.toHaveBeenCalled();
-
-          window.scrollTo.and.callThrough();
-          component.hashScroll.and.callThrough();
-          done();
-        });
-      });
-
-      it('should scroll to method when location hash is present [jp]', (done) => {
-        let hash = '#tag/pet/paths/~1pet~1findByStatus/get';
-        spyOn(component.dom, 'getLocation').and.returnValue({hash: hash});
-        spyOn(component, 'hashScroll').and.callThrough();
-        spyOn(window, 'scrollTo').and.stub();
-        redocEvents.bootstrapped.next();
-        setTimeout(() => {
-          expect(component.hashScroll).toHaveBeenCalled();
-          let scrollY = window.scrollTo.calls.argsFor(0)[1];
-          expect(scrollY).toBeGreaterThan(0);
-          done();
-        });
-      });
-
-      it('should scroll to method when location hash is present [operation]', (done) => {
-        let hash = '#operation/getPetById';
-        spyOn(component.dom, 'getLocation').and.returnValue({hash: hash});
-        spyOn(component, 'hashScroll').and.callThrough();
-        spyOn(window, 'scrollTo').and.stub();
-        redocEvents.bootstrapped.next();
-        setTimeout(() => {
-          expect(component.hashScroll).toHaveBeenCalled();
-          let scrollY = window.scrollTo.calls.argsFor(0)[1];
-          expect(scrollY).toBeGreaterThan(0);
-          done();
-        });
-      });
-    });
-
-    describe('scrollable div parent case', () => {
-      let menuNativeEl;
-      beforeEach((done) => {
-        let scollableDivTmpl =
-          `<div style="height: 500px; overflow-y: auto;">
-            <side-menu></side-menu>
-            <methods-list></methods-list>
-          </div>`;
-        builder = builder.overrideView(
-          TestApp, new ViewMetadata({template: scollableDivTmpl, directives: [MethodsList, SideMenu]}));
-        builder.createAsync(TestApp).then(_fixture => {
-          fixture = _fixture;
-          component = getChildDebugElement(fixture.debugElement, 'side-menu').componentInstance;
-          menuNativeEl = getChildDebugElement(fixture.debugElement, 'side-menu').nativeElement;
-          component.options.scrollParent = _fixture.nativeElement.children[0];
-          component.$scrollParent = _fixture.nativeElement.children[0];
-          fixture.detectChanges();
-          done();
-        }, err => {
-          throw err;
-        });
-      });
-
-
-
-      it('should init component and component data', () => {
-        expect(component).not.toBeNull();
-        expect(component.data).not.toBeNull();
-      });
-
-      it('should scroll to method when location hash is present [jp]', (done) => {
-        let hash = '#tag/pet/paths/~1pet~1findByStatus/get';
-        spyOn(component.dom, 'getLocation').and.returnValue({hash: hash});
-        spyOn(component, 'hashScroll').and.callThrough();
-        redocEvents.bootstrapped.next();
-        setTimeout(() => {
-          expect(component.hashScroll).toHaveBeenCalled();
-          expect(component.$scrollParent.scrollTop).toBeGreaterThan(0);
-          done();
-        });
-      });
-
-      it('should scroll to method when location hash is present [operation]', (done) => {
-        let hash = '#operation/getPetById';
-        spyOn(component.dom, 'getLocation').and.returnValue({hash: hash});
-        spyOn(component, 'hashScroll').and.callThrough();
-        redocEvents.bootstrapped.next();
-        setTimeout(() => {
-          expect(component.hashScroll).toHaveBeenCalled();
-          expect(component.$scrollParent.scrollTop).toBeGreaterThan(0);
-          done();
-        });
-      });
-
-      it('should select next/prev menu item when scrolled down/up', () => {
-        component.activeCatIdx.should.be.equal(0);
-        component.activeMethodIdx.should.be.equal(-1);
-        let elTop = component.getCurrentMethodEl().getBoundingClientRect().bottom;
-
-        component.$scrollParent.scrollTop = elTop + 1;
-        //simulate scroll down
-        spyOn(component, 'scrollY').and.returnValue(elTop + 2);
-        component.scrollHandler();
-        component.activeCatIdx.should.be.equal(1);
-
-
-        component.$scrollParent.scrollTop = elTop - 1;
-        //simulate scroll up
-        component.scrollY.and.returnValue(elTop - 2);
-        component.scrollHandler();
-        component.activeCatIdx.should.be.equal(0);
-      });
-
-      it('should activate menu item on click', () => {
-        let menuItemEl = menuNativeEl.querySelector('li');
-        expect(menuItemEl).not.toHaveCssClass('active');
-        mouseclick(menuItemEl);
-        fixture.detectChanges();
-        expect(menuItemEl).toHaveCssClass('active');
-      });
-
-      it('should scroll to appropriate element when click on menu label', () => {
-        component.$scrollParent.scrollTop.should.be.equal(0);
-        let menuItemEl = menuNativeEl.querySelector('li');
-        mouseclick(menuItemEl);
-        component.$scrollParent.scrollTop.should.be.above(0);
-      });
-    });
   });
 });
 
@@ -201,7 +69,6 @@ describe('Redoc components', () => {
 @Component({
   selector: 'test-app',
   directives: [MethodsList, SideMenu],
-  providers: [SchemaManager],
   template:
       `<side-menu></side-menu>
       <methods-list></methods-list>`

lib/components/base.spec.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import SchemaManager from 'lib/utils/SchemaManager';
-import {BaseComponent} from 'lib/components/base';
+import { BaseComponent } from 'lib/components/base';
 
 describe('Redoc components', () => {
   describe('BaseComponent', () => {

lib/components/index.js

@@ -10,6 +10,7 @@ export * from './ResponsesList/responses-list';
 export * from './ResponsesSamples/responses-samples';
 export * from './SchemaSample/schema-sample';
 export * from './SideMenu/side-menu';
-export * from './Method/method';
 export * from './MethodsList/methods-list';
+export * from './Method/method';
+
 export * from './Redoc/redoc';

lib/services/hash.service.js

@@ -3,7 +3,7 @@ import { Injectable, EventEmitter } from '@angular/core';
 import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
 import { global } from '@angular/core/src/facade/lang';
 
-import { RedocEventsService } from './events.service.js';
+import { RedocEventsService } from './events.service';
 
 @Reflect.metadata('parameters', [[BrowserDomAdapter], [RedocEventsService]])
 @Injectable()

lib/services/hash.service.spec.js

@@ -0,0 +1,28 @@
+'use strict';
+
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
+
+import { RedocEventsService } from './events.service';
+import { Hash } from './hash.service';
+
+describe('Hash Service', () => {
+  let events = new RedocEventsService();
+  let hashService;
+
+  beforeEach(() => {
+    hashService = new Hash(new BrowserDomAdapter(), events);
+  });
+
+  afterEach(() => {
+    hashService.unbind();
+  });
+
+  it('should trigger changed event after ReDoc bootstrapped', (done) => {
+    spyOn(hashService.changed, 'next').and.callThrough();
+    events.bootstrapped.next();
+    setTimeout(() => {
+      expect(hashService.changed.next).toHaveBeenCalled();
+      done();
+    });
+  });
+});

lib/services/menu.service.js

@@ -31,7 +31,9 @@ export class MenuService {
 
     this.changeActive(CHANGE.INITIAL);
 
-    this.hash.changed.subscribe(this.hashScroll.bind(this));
+    this.hash.changed.subscribe((hash) => {
+      this.hashScroll(hash);
+    });
   }
 
   scrollUpdate(isScrolledDown) {

lib/services/menu.service.spec.js

@@ -0,0 +1,126 @@
+'use strict';
+import { provide, Component } from '@angular/core';
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
+import {
+  inject,
+  beforeEach,
+  describe,
+  beforeEachProviders,
+  it
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
+
+import { OptionsService } from './options.service';
+import { MenuService } from './menu.service';
+import { Hash } from './hash.service';
+import { ScrollService } from './scroll.service';
+import { RedocEventsService } from './events.service';
+import { MethodsList } from 'lib/components/index';
+import SchemaManager from 'lib/utils/SchemaManager';
+
+describe('Menu service', () => {
+  let menu, hashService, scroll;
+  let builder;
+  let schemaMgr;
+
+  beforeEachProviders(() => [
+      provide(BrowserDomAdapter, {useClass: BrowserDomAdapter}),
+      provide(OptionsService, {useClass: OptionsService}),
+      provide(Hash, {useClass: Hash}),
+      provide(ScrollService, {useClass: ScrollService}),
+      provide(RedocEventsService, {useClass: RedocEventsService}),
+      provide(SchemaManager, {useClass: SchemaManager})
+  ]);
+
+  beforeEach(inject([Hash, ScrollService, SchemaManager, TestComponentBuilder],
+    (_hash, _scroll, _schemaMgr, tcb) => {
+    hashService = _hash;
+    scroll = _scroll;
+    schemaMgr = _schemaMgr;
+    builder = tcb;
+  }));
+
+
+  beforeEach((done) => {
+    schemaMgr.load('/tests/schemas/extended-petstore.yml').then(() => {
+      menu = new MenuService(hashService, scroll, schemaMgr);
+      done();
+    }).catch((err) => done.fail(err));
+  });
+
+  beforeEach((done) => {
+    builder.createAsync(TestApp).then((fixture) => {
+      fixture.detectChanges();
+      done();
+    }).catch((err) => done.fail(err));
+  });
+
+
+  it('should run hashScroll when hash changed', (done) => {
+    spyOn(menu, 'hashScroll').and.callThrough();
+    hashService.changed.subscribe(() => {
+      expect(menu.hashScroll).toHaveBeenCalled();
+      menu.hashScroll.and.callThrough();
+      done();
+    });
+    hashService.changed.next();
+  });
+
+  it('should scroll to method when location hash is present [jp]', (done) => {
+    let hash = '#tag/pet/paths/~1pet~1findByStatus/get';
+    spyOn(menu, 'hashScroll').and.callThrough();
+    spyOn(window, 'scrollTo').and.stub();
+    hashService.changed.subscribe(() => {
+      expect(menu.hashScroll).toHaveBeenCalled();
+      let scrollY = window.scrollTo.calls.argsFor(0)[1];
+      expect(scrollY).toBeGreaterThan(0);
+      window.scrollTo.and.callThrough();
+      done();
+    });
+    hashService.changed.next(hash);
+  });
+
+  it('should scroll to method when location hash is present [operation]', (done) => {
+    let hash = '#operation/getPetById';
+    spyOn(menu, 'hashScroll').and.callThrough();
+    spyOn(window, 'scrollTo').and.stub();
+    hashService.changed.subscribe(() => {
+      expect(menu.hashScroll).toHaveBeenCalled();
+      let scrollY = window.scrollTo.calls.argsFor(0)[1];
+      expect(scrollY).toBeGreaterThan(0);
+      done();
+    });
+    hashService.changed.next(hash);
+  });
+
+  it('should select next/prev menu item when scrolled down/up', () => {
+    scroll.$scrollParent = document.querySelector('#parent');
+    menu.activeCatIdx.should.be.equal(0);
+    menu.activeMethodIdx.should.be.equal(-1);
+    let elTop = menu.getCurrentMethodEl().getBoundingClientRect().bottom;
+
+    scroll.$scrollParent.scrollTop = elTop + 1;
+
+    //simulate scroll down
+    spyOn(scroll, 'scrollY').and.returnValue(elTop + 2);
+    menu.scrollUpdate(true);
+    menu.activeCatIdx.should.be.equal(1);
+
+    scroll.scrollY.and.returnValue(elTop - 2);
+    scroll.$scrollParent.scrollTop = elTop - 1;
+    menu.scrollUpdate(false);
+    menu.activeCatIdx.should.be.equal(0);
+  });
+});
+
+@Component({
+  selector: 'test-app',
+  directives: [ MethodsList ],
+  template:
+      `<div id='parent' style='height: 500px; overflow:auto'>
+        <methods-list></methods-list>
+      </div>`
+})
+class TestApp {
+}

lib/services/options.service.spec.js

@@ -0,0 +1,55 @@
+'use strict';
+
+import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
+import {
+  it
+} from '@angular/core/testing';
+
+import { OptionsService } from './options.service';
+
+describe('Options Service', () => {
+  let tmpDiv;
+  let optionsService;
+
+  function build(html) {
+    tmpDiv = document.createElement('div');
+    tmpDiv.innerHTML = html;
+    document.body.appendChild(tmpDiv);
+    return tmpDiv.lastChild;
+  }
+
+  afterEach(() => {
+    document.body.removeChild(tmpDiv);
+  });
+
+  beforeEach(() => {
+    optionsService = new OptionsService(new BrowserDomAdapter());
+  });
+
+  it('should parse numeric scrollYOffset', () => {
+    var elem = build(`<redoc scroll-y-offset="50"></redoc>`);
+    optionsService.parseOptions(elem);
+    optionsService.options.scrollYOffset().should.be.equal(50);
+  });
+
+  it('should parse selector scrollYOffset', () => {
+    var elem = build(`<div id="test" style="position: fixed; height: 50px; top:0"> </div>
+          <redoc scroll-y-offset="#test"></redoc>`);
+    optionsService.parseOptions(elem);
+    optionsService.options.scrollYOffset().should.be.equal(50);
+  });
+
+  it('should return 0 for incorrect selector scrollYOffset', () => {
+    var elem = build(`<div id="test" style="position: fixed; height: 50px; top:0"> </div>
+          <redoc scroll-y-offset="#test2"></redoc>`);
+    optionsService.parseOptions(elem);
+    optionsService.options.scrollYOffset().should.be.equal(0);
+  });
+
+  it('should handle function scrollYOffset', () => {
+    optionsService.options = { scrollYOffset: () => 123 };
+    var elem = build(`<redoc></redoc>`);
+    optionsService.parseOptions(elem);
+    optionsService.options.scrollYOffset().should.be.equal(123);
+  });
+});

lib/shared/components/StickySidebar/sticky-sidebar.spec.js

@@ -5,12 +5,13 @@ import { Component, provide } from '@angular/core';
 import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
 
 import {
-  TestComponentBuilder,
   inject,
   beforeEach,
   beforeEachProviders,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import { StickySidebar } from 'lib/shared/components/index';
 

lib/shared/components/Tabs/tabs.spec.js

@@ -4,11 +4,12 @@ import { getChildDebugElement, getChildDebugElementAll } from 'tests/helpers';
 import {Component} from '@angular/core';
 
 import {
-  TestComponentBuilder,
   inject,
   beforeEach,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
+
+import { TestComponentBuilder } from '@angular/compiler/testing';
 
 import {Tabs, Tab} from 'lib/shared/components/index';
 

lib/shared/components/Zippy/zippy.spec.js

@@ -4,12 +4,12 @@ import { getChildDebugElement, mouseclick } from 'tests/helpers';
 
 import { Component } from '@angular/core';
 import {
-  TestComponentBuilder,
   inject,
   beforeEach,
   it
-} from '@angular/testing';
+} from '@angular/core/testing';
 
+import { TestComponentBuilder } from '@angular/compiler/testing';
 import { Zippy } from 'lib/shared/components/index';
 
 describe('Common components', () => {

tests/setup.js

@@ -1,13 +1,11 @@
 'use strict';
 
-import {setBaseTestProviders} from 'angular2/testing';
+import {setBaseTestProviders} from '@angular/core/testing';
 
 import {
-  TEST_BROWSER_PLATFORM_PROVIDERS,
+  TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
-  TEST_BROWSER_APPLICATION_PROVIDERS
+  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
-} from 'angular2/platform/testing/browser';
+} from '@angular/platform-browser-dynamic/testing';
-import {
 
-  ELEMENT_PROBE_PROVIDERS_PROD_MODE
+
-} from 'angular2/platform/browser';
+setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, [TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS]);
-setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, [TEST_BROWSER_APPLICATION_PROVIDERS, ELEMENT_PROBE_PROVIDERS_PROD_MODE]);