diff --git a/spec/component/direction/DirectionComponent.spec.ts b/spec/component/direction/DirectionComponent.spec.ts
new file mode 100644
index 00000000..93331fd1
--- /dev/null
+++ b/spec/component/direction/DirectionComponent.spec.ts
@@ -0,0 +1,163 @@
+/// <reference path="../../../typings/index.d.ts" />
+
+import {Observable} from "rxjs/Observable";
+import {Subject} from "rxjs/Subject";
+
+import {
+    DirectionComponent,
+    DirectionDOMRenderer,
+} from "../../../src/Component";
+import {
+    Node,
+    NodeCache,
+    Sequence,
+} from "../../../src/Graph";
+import {
+    Container,
+    Navigator,
+} from "../../../src/Viewer";
+
+import {ContainerMockCreator} from "../../helper/ContainerMockCreator.spec";
+import {NavigatorMockCreator} from "../../helper/NavigatorMockCreator.spec";
+import {NodeHelper} from "../../helper/NodeHelper.spec";
+
+
+describe("DirectionComponent.ctor", () => {
+    it("should be defined", () => {
+        const directionComponent: DirectionComponent =
+            new DirectionComponent(
+                DirectionComponent.componentName,
+                new ContainerMockCreator().create(),
+                new NavigatorMockCreator().create());
+
+        expect(directionComponent).toBeDefined();
+    });
+});
+
+describe("DirectionComponent.deactivate", () => {
+    it("should deactivate properly", () => {
+        const directionComponent: DirectionComponent =
+            new DirectionComponent(
+                DirectionComponent.componentName,
+                new ContainerMockCreator().create(),
+                new NavigatorMockCreator().create());
+
+        directionComponent.activate();
+        directionComponent.deactivate();
+    });
+});
+
+describe("DirectionComponent.activate", () => {
+    it("should set edges when node spatial edges emits", () => {
+        const containerMock: Container = new ContainerMockCreator().create();
+        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const renderer: DirectionDOMRenderer = new DirectionDOMRenderer({}, document.createElement("div"));
+        const setEdgesSpy: jasmine.Spy = spyOn(renderer, "setEdges").and.stub();
+
+        const directionComponent: DirectionComponent =
+            new DirectionComponent(
+                DirectionComponent.componentName,
+                containerMock,
+                navigatorMock,
+                renderer);
+
+        directionComponent.activate();
+
+        const node: Node = new NodeHelper().createNode();
+        node.initializeCache(new NodeCache());
+        node.cacheSpatialEdges([]);
+        (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
+
+        expect(setEdgesSpy.calls.count()).toBe(1);
+        expect(setEdgesSpy.calls.argsFor(0)[1]).toBe(null);
+    });
+
+    it("should set edges when distinguishing sequence with cached sequence", () => {
+        const containerMock: Container = new ContainerMockCreator().create();
+        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const renderer: DirectionDOMRenderer = new DirectionDOMRenderer({ distinguishSequence: true }, document.createElement("div"));
+        const setEdgesSpy: jasmine.Spy = spyOn(renderer, "setEdges").and.stub();
+
+        const directionComponent: DirectionComponent =
+            new DirectionComponent(
+                DirectionComponent.componentName,
+                containerMock,
+                navigatorMock,
+                renderer);
+
+        directionComponent.configure({ distinguishSequence: true });
+        directionComponent.activate();
+
+        const sequence: Sequence = new Sequence({ key: "skey", keys: [] });
+        (<jasmine.Spy>navigatorMock.graphService.cacheSequence$).and.returnValue(Observable.of<Sequence>(sequence));
+
+        const node: Node = new NodeHelper().createNode();
+        node.initializeCache(new NodeCache());
+        node.cacheSpatialEdges([]);
+        (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
+
+        expect(setEdgesSpy.calls.count()).toBe(1);
+        expect(setEdgesSpy.calls.argsFor(0)[1]).toBe(sequence);
+    });
+
+    it("should set edges when distinguishing sequence with uncached sequence", () => {
+        const containerMock: Container = new ContainerMockCreator().create();
+        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const renderer: DirectionDOMRenderer = new DirectionDOMRenderer({ distinguishSequence: true }, document.createElement("div"));
+        const setEdgesSpy: jasmine.Spy = spyOn(renderer, "setEdges").and.stub();
+
+        const directionComponent: DirectionComponent =
+            new DirectionComponent(
+                DirectionComponent.componentName,
+                containerMock,
+                navigatorMock,
+                renderer);
+
+        directionComponent.configure({ distinguishSequence: true });
+        directionComponent.activate();
+
+        const sequence: Sequence = new Sequence({ key: "skey", keys: [] });
+        const cacheSequence$: Subject<Sequence> = new Subject<Sequence>();
+        (<jasmine.Spy>navigatorMock.graphService.cacheSequence$).and.returnValue(cacheSequence$);
+
+        const node: Node = new NodeHelper().createNode();
+        node.initializeCache(new NodeCache());
+        node.cacheSpatialEdges([]);
+        (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
+
+        cacheSequence$.next(sequence);
+        cacheSequence$.complete();
+
+        expect(setEdgesSpy.calls.count()).toBe(1);
+        expect(setEdgesSpy.calls.argsFor(0)[1]).toBe(sequence);
+    });
+
+    it("should set edges when distinguishing sequence and cache sequence throws", () => {
+        spyOn(console, "error").and.stub();
+
+        const containerMock: Container = new ContainerMockCreator().create();
+        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const renderer: DirectionDOMRenderer = new DirectionDOMRenderer({ distinguishSequence: true }, document.createElement("div"));
+        const setEdgesSpy: jasmine.Spy = spyOn(renderer, "setEdges").and.stub();
+
+        const directionComponent: DirectionComponent =
+            new DirectionComponent(
+                DirectionComponent.componentName,
+                containerMock,
+                navigatorMock,
+                renderer);
+
+        directionComponent.configure({ distinguishSequence: true });
+        directionComponent.activate();
+
+        (<jasmine.Spy>navigatorMock.graphService.cacheSequence$).and.returnValue(Observable.throw(new Error("Failed to cache seq.")));
+
+        const node: Node = new NodeHelper().createNode();
+        node.initializeCache(new NodeCache());
+        node.cacheSpatialEdges([]);
+        (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
+
+        expect(setEdgesSpy.calls.count()).toBe(1);
+        expect(setEdgesSpy.calls.argsFor(0)[1]).toBe(null);
+    });
+});
diff --git a/spec/helper/NavigatorMockCreator.spec.ts b/spec/helper/NavigatorMockCreator.spec.ts
index 6e818969..6b8a93f6 100644
--- a/spec/helper/NavigatorMockCreator.spec.ts
+++ b/spec/helper/NavigatorMockCreator.spec.ts
@@ -6,6 +6,7 @@ import {LoadingServiceMockCreator} from "./LoadingServiceMockCreator.spec";
 import {StateServiceMockCreator} from "./StateServiceMockCreator.spec";
 
 import {APIv3} from "../../src/API";
+import {GraphService} from "../../src/Graph";
 import {Navigator} from "../../src/Viewer";
 
 export class NavigatorMockCreator extends MockCreatorBase<Navigator> {
@@ -13,6 +14,7 @@ export class NavigatorMockCreator extends MockCreatorBase<Navigator> {
         const mock: Navigator = new MockCreator().create(Navigator, "Navigator");
 
         this._mockProperty(mock, "apiV3", new MockCreator().create(APIv3, "APIv3"));
+        this._mockProperty(mock, "graphService", new MockCreator().create(GraphService, "GraphService"));
         this._mockProperty(mock, "loadingService", new LoadingServiceMockCreator().create());
         this._mockProperty(mock, "stateService", new StateServiceMockCreator().create());
 
diff --git a/spec/helper/RenderServiceMockCreator.spec.ts b/spec/helper/RenderServiceMockCreator.spec.ts
index 28a034cd..0b7db31e 100644
--- a/spec/helper/RenderServiceMockCreator.spec.ts
+++ b/spec/helper/RenderServiceMockCreator.spec.ts
@@ -15,6 +15,7 @@ export class RenderServiceMockCreator extends MockCreatorBase<RenderService> {
 
         this._mockProperty(mock, "bearing$", new Subject<RenderCamera>());
         this._mockProperty(mock, "renderCamera$", new Subject<RenderCamera>());
+        this._mockProperty(mock, "renderCameraFrame$", new Subject<RenderCamera>());
         this._mockProperty(mock, "size$", new Subject<RenderCamera>());
 
         return mock;
diff --git a/src/component/direction/DirectionComponent.ts b/src/component/direction/DirectionComponent.ts
index c8a7e3a7..3ba9a3e8 100644
--- a/src/component/direction/DirectionComponent.ts
+++ b/src/component/direction/DirectionComponent.ts
@@ -42,10 +42,12 @@ export class DirectionComponent extends Component<IDirectionConfiguration> {
     private _renderCameraSubscription: Subscription;
     private _hoveredKeySubscription: Subscription;
 
-    constructor(name: string, container: Container, navigator: Navigator) {
+    constructor(name: string, container: Container, navigator: Navigator, directionDOMRenderer?: DirectionDOMRenderer) {
         super(name, container, navigator);
 
-        this._renderer = new DirectionDOMRenderer(this.defaultConfiguration, container.element);
+        this._renderer = !!directionDOMRenderer ?
+            directionDOMRenderer :
+            new DirectionDOMRenderer(this.defaultConfiguration, container.element);
 
         this._hoveredKeySubject$ = new Subject<string>();
 
@@ -141,7 +143,7 @@ export class DirectionComponent extends Component<IDirectionConfiguration> {
                                         (error: Error, caught: Observable<Sequence>): Observable<Sequence> => {
                                             console.error(`Failed to cache sequence (${node.sequenceKey})`, error);
 
-                                            return Observable.empty<Sequence>();
+                                            return Observable.of<Sequence>(null);
                                         }) :
                                 Observable.of<Sequence>(null));
                 })