@furystack/shades 13.2.2 → 15.0.0

package/esm/services/spatial-navigation-service.spec.js

@@ -1,4 +1,4 @@
-import { Injector } from '@furystack/inject';
+import { createInjector } from '@furystack/inject';
 import { usingAsync } from '@furystack/utils';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { SpatialNavigationService, configureSpatialNavigation } from './spatial-navigation-service.js';
@@ -35,98 +35,99 @@ describe('SpatialNavigationService', () => {
         vi.restoreAllMocks();
     });
     it('Should be constructed via injector', async () => {
-        await usingAsync(new Injector(), async (i) => {
-            const s = i.getInstance(SpatialNavigationService);
-            expect(s).toBeInstanceOf(SpatialNavigationService);
+        await usingAsync(createInjector(), async (i) => {
+            const s = i.get(SpatialNavigationService);
+            expect(s).toBeDefined();
+            expect(typeof s.moveFocus).toBe('function');
         });
     });
     it('Should be enabled by default', async () => {
-        await usingAsync(new Injector(), async (i) => {
-            const s = i.getInstance(SpatialNavigationService);
+        await usingAsync(createInjector(), async (i) => {
+            const s = i.get(SpatialNavigationService);
             expect(s.enabled.getValue()).toBe(true);
         });
     });
     it('Should have null activeSection initially', async () => {
-        await usingAsync(new Injector(), async (i) => {
-            const s = i.getInstance(SpatialNavigationService);
+        await usingAsync(createInjector(), async (i) => {
+            const s = i.get(SpatialNavigationService);
             expect(s.activeSection.getValue()).toBeNull();
         });
     });
     describe('focus movement', () => {
         it('Should move focus to the right', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const left = createButton('left', { left: 0, top: 0, width: 50, height: 50 });
                 const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(left, right);
                 left.focus();
                 expect(document.activeElement).toBe(left);
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('right');
                 expect(document.activeElement).toBe(right);
             });
         });
         it('Should move focus to the left', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const left = createButton('left', { left: 0, top: 0, width: 50, height: 50 });
                 const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(left, right);
                 right.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('left');
                 expect(document.activeElement).toBe(left);
             });
         });
         it('Should move focus down', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const top = createButton('top', { left: 0, top: 0, width: 50, height: 50 });
                 const bottom = createButton('bottom', { left: 0, top: 100, width: 50, height: 50 });
                 document.body.append(top, bottom);
                 top.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('down');
                 expect(document.activeElement).toBe(bottom);
             });
         });
         it('Should move focus up', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const top = createButton('top', { left: 0, top: 0, width: 50, height: 50 });
                 const bottom = createButton('bottom', { left: 0, top: 100, width: 50, height: 50 });
                 document.body.append(top, bottom);
                 bottom.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('up');
                 expect(document.activeElement).toBe(top);
             });
         });
         it('Should select nearest element by Euclidean distance', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const origin = createButton('origin', { left: 0, top: 0, width: 50, height: 50 });
                 const near = createButton('near', { left: 100, top: 10, width: 50, height: 50 });
                 const far = createButton('far', { left: 300, top: 10, width: 50, height: 50 });
                 document.body.append(origin, near, far);
                 origin.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('right');
                 expect(document.activeElement).toBe(near);
             });
         });
         it('Should be a no-op when no candidate exists in the direction', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const only = createButton('only', { left: 0, top: 0, width: 50, height: 50 });
                 document.body.append(only);
                 only.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('right');
                 expect(document.activeElement).toBe(only);
             });
         });
         it('Should call scrollIntoView on the target element', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const left = createButton('left', { left: 0, top: 0, width: 50, height: 50 });
                 const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(left, right);
                 left.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('right');
                 expect(right.scrollIntoView).toHaveBeenCalledWith({ block: 'nearest', inline: 'nearest' });
             });
@@ -134,29 +135,29 @@ describe('SpatialNavigationService', () => {
     });
     describe('initial focus', () => {
         it('Should focus first element when no element is focused', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const btn = createButton('first', { left: 0, top: 0, width: 50, height: 50 });
                 document.body.append(btn);
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('down');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should focus first element in first section when no element is focused', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section = document.createElement('div');
                 section.setAttribute('data-nav-section', 'main');
                 const btn = createButton('first', { left: 0, top: 0, width: 50, height: 50 });
                 section.append(btn);
                 document.body.append(section);
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('down');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should be a no-op when there are no focusable elements', async () => {
-            await usingAsync(new Injector(), async (i) => {
-                const s = i.getInstance(SpatialNavigationService);
+            await usingAsync(createInjector(), async (i) => {
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('down');
                 expect(document.activeElement).toBe(document.body);
             });
@@ -164,47 +165,47 @@ describe('SpatialNavigationService', () => {
     });
     describe('keydown event handling', () => {
         it('Should move focus on arrow key press', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const left = createButton('left', { left: 0, top: 0, width: 50, height: 50 });
                 const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(left, right);
                 left.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(right);
             });
         });
         it('Should activate focused element on Enter', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const btn = createButton('btn', { left: 0, top: 0, width: 50, height: 50 });
                 const clickHandler = vi.fn();
                 btn.addEventListener('click', clickHandler);
                 document.body.append(btn);
                 btn.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Enter');
                 expect(clickHandler).toHaveBeenCalledTimes(1);
             });
         });
         it('Should not handle events when disabled', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const left = createButton('left', { left: 0, top: 0, width: 50, height: 50 });
                 const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(left, right);
                 left.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.enabled.setValue(false);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(left);
             });
         });
         it('Should skip events that are already defaultPrevented', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const left = createButton('left', { left: 0, top: 0, width: 50, height: 50 });
                 const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(left, right);
                 left.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 const preventer = (ev) => ev.preventDefault();
                 window.addEventListener('keydown', preventer, { capture: true });
                 try {
@@ -219,7 +220,7 @@ describe('SpatialNavigationService', () => {
     });
     describe('input passthrough', () => {
         it('Should not intercept arrow keys on text input when cursor is mid-text', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'text';
                 input.value = 'hello';
@@ -228,13 +229,13 @@ describe('SpatialNavigationService', () => {
                 document.body.append(input, btn);
                 input.focus();
                 input.setSelectionRange(2, 2);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(input);
             });
         });
         it('Should escape text input with ArrowRight when cursor is at end', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'text';
                 input.value = 'hello';
@@ -244,13 +245,13 @@ describe('SpatialNavigationService', () => {
                 document.body.append(input, btn);
                 input.focus();
                 input.setSelectionRange(5, 5);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should escape text input with ArrowLeft when cursor is at start', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'text';
                 input.value = 'hello';
@@ -260,13 +261,13 @@ describe('SpatialNavigationService', () => {
                 document.body.append(btn, input);
                 input.focus();
                 input.setSelectionRange(0, 0);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowLeft');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should not intercept arrow keys on textarea when cursor is mid-text', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const textarea = document.createElement('textarea');
                 textarea.value = 'line1\nline2';
                 mockRect(textarea, { left: 0, top: 0, width: 200, height: 100 });
@@ -274,25 +275,25 @@ describe('SpatialNavigationService', () => {
                 document.body.append(textarea, btn);
                 textarea.focus();
                 textarea.setSelectionRange(3, 3);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowDown');
                 expect(document.activeElement).toBe(textarea);
             });
         });
         it('Should not intercept arrow keys on select', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const select = document.createElement('select');
                 mockRect(select, { left: 0, top: 0, width: 200, height: 30 });
                 const btn = createButton('btn', { left: 0, top: 100, width: 50, height: 50 });
                 document.body.append(select, btn);
                 select.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowDown');
                 expect(document.activeElement).toBe(select);
             });
         });
         it('Should not intercept arrow keys on contenteditable', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const div = document.createElement('div');
                 div.contentEditable = 'true';
                 div.tabIndex = 0;
@@ -300,13 +301,13 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 300, top: 0, width: 50, height: 50 });
                 document.body.append(div, btn);
                 div.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(div);
             });
         });
         it('Should not intercept arrow keys on children of contenteditable', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const div = document.createElement('div');
                 div.contentEditable = 'true';
                 div.tabIndex = 0;
@@ -319,13 +320,13 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 300, top: 0, width: 50, height: 50 });
                 document.body.append(div, btn);
                 span.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(span);
             });
         });
         it('Should not intercept Enter on children of contenteditable', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const div = document.createElement('div');
                 div.contentEditable = 'true';
                 div.tabIndex = 0;
@@ -338,13 +339,13 @@ describe('SpatialNavigationService', () => {
                 span.addEventListener('click', clickHandler);
                 document.body.append(div);
                 span.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Enter');
                 expect(clickHandler).not.toHaveBeenCalled();
             });
         });
         it('Should intercept arrow keys on button-type input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'button';
                 mockRect(input, { left: 0, top: 0, width: 50, height: 30 });
@@ -352,20 +353,20 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should not intercept Left/Right on range input (slider adjustment)', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'range';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
                 const btn = createButton('btn', { left: 0, top: 100, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowLeft');
                 expect(document.activeElement).toBe(input);
                 pressKey('ArrowRight');
@@ -373,7 +374,7 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should intercept Up/Down on range input for spatial navigation', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'range';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
@@ -381,13 +382,13 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 0, top: 100, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowDown');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should intercept arrow keys on color input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'color';
                 mockRect(input, { left: 0, top: 0, width: 50, height: 50 });
@@ -395,13 +396,13 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should intercept arrow keys on file input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'file';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
@@ -409,13 +410,13 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 300, top: 0, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should not intercept arrow keys on radio input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const radio = document.createElement('input');
                 radio.type = 'radio';
                 radio.name = 'group';
@@ -423,7 +424,7 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(radio, btn);
                 radio.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowDown');
                 expect(document.activeElement).toBe(radio);
                 pressKey('ArrowRight');
@@ -431,7 +432,7 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should not intercept Up/Down on number input (increment/decrement)', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'number';
                 input.value = '5';
@@ -439,7 +440,7 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 0, top: 100, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowUp');
                 expect(document.activeElement).toBe(input);
                 pressKey('ArrowDown');
@@ -447,7 +448,7 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should intercept Left/Right on number input for spatial navigation', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'number';
                 input.value = '5';
@@ -457,20 +458,20 @@ describe('SpatialNavigationService', () => {
                 const btnRight = createButton('btn-right', { left: 400, top: 0, width: 50, height: 30 });
                 document.body.append(btnLeft, input, btnRight);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(btnRight);
             });
         });
         it('Should not intercept arrow keys on date input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'date';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
                 const btn = createButton('btn', { left: 300, top: 0, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(input);
                 pressKey('ArrowUp');
@@ -478,14 +479,14 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should not intercept arrow keys on time input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'time';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
                 const btn = createButton('btn', { left: 300, top: 0, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowDown');
                 expect(document.activeElement).toBe(input);
                 pressKey('ArrowLeft');
@@ -493,7 +494,7 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should escape empty text input on any arrow key', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'text';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
@@ -501,13 +502,13 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 300, top: 0, width: 50, height: 50 });
                 document.body.append(input, btn);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(btn);
             });
         });
         it('Should not intercept Enter on text input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'text';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
@@ -515,13 +516,13 @@ describe('SpatialNavigationService', () => {
                 input.addEventListener('click', clickHandler);
                 document.body.append(input);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Enter');
                 expect(clickHandler).not.toHaveBeenCalled();
             });
         });
         it('Should not intercept Enter on textarea', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const textarea = document.createElement('textarea');
                 textarea.value = 'hello';
                 mockRect(textarea, { left: 0, top: 0, width: 200, height: 100 });
@@ -529,13 +530,13 @@ describe('SpatialNavigationService', () => {
                 textarea.addEventListener('click', clickHandler);
                 document.body.append(textarea);
                 textarea.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Enter');
                 expect(clickHandler).not.toHaveBeenCalled();
             });
         });
         it('Should activate Enter on button-type input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'button';
                 mockRect(input, { left: 0, top: 0, width: 50, height: 30 });
@@ -543,7 +544,7 @@ describe('SpatialNavigationService', () => {
                 input.addEventListener('click', clickHandler);
                 document.body.append(input);
                 input.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Enter');
                 expect(clickHandler).toHaveBeenCalledTimes(1);
             });
@@ -551,7 +552,7 @@ describe('SpatialNavigationService', () => {
     });
     describe('data-spatial-nav-passthrough', () => {
         it('Should not intercept arrow keys inside a passthrough container', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const container = document.createElement('div');
                 container.setAttribute('data-spatial-nav-passthrough', '');
                 const inner = document.createElement('input');
@@ -561,13 +562,13 @@ describe('SpatialNavigationService', () => {
                 const btn = createButton('btn', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(container, btn);
                 inner.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(inner);
             });
         });
         it('Should not intercept Enter inside a passthrough container', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const container = document.createElement('div');
                 container.setAttribute('data-spatial-nav-passthrough', '');
                 const inner = createButton('inner', { left: 0, top: 0, width: 50, height: 50 });
@@ -576,13 +577,13 @@ describe('SpatialNavigationService', () => {
                 container.append(inner);
                 document.body.append(container);
                 inner.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Enter');
                 expect(clickHandler).not.toHaveBeenCalled();
             });
         });
         it('Should still intercept keys outside a passthrough container', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const container = document.createElement('div');
                 container.setAttribute('data-spatial-nav-passthrough', '');
                 const inner = document.createElement('input');
@@ -593,7 +594,7 @@ describe('SpatialNavigationService', () => {
                 const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(left, right, container);
                 left.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(right);
             });
@@ -601,7 +602,7 @@ describe('SpatialNavigationService', () => {
     });
     describe('section navigation', () => {
         it('Should scope navigation within the active section', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section1 = document.createElement('div');
                 section1.setAttribute('data-nav-section', 'sidebar');
                 mockRect(section1, { left: 0, top: 0, width: 200, height: 400 });
@@ -615,20 +616,20 @@ describe('SpatialNavigationService', () => {
                 section2.append(btn2, btn3);
                 document.body.append(section1, section2);
                 btn2.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('down');
                 expect(document.activeElement).toBe(btn3);
             });
         });
         it('Should update activeSection when focus moves', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section = document.createElement('div');
                 section.setAttribute('data-nav-section', 'main');
                 const btn = createButton('btn', { left: 0, top: 0, width: 50, height: 50 });
                 section.append(btn);
                 document.body.append(section);
                 btn.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('down');
                 expect(s.activeSection.getValue()).toBe('main');
             });
@@ -636,7 +637,7 @@ describe('SpatialNavigationService', () => {
     });
     describe('cross-section navigation', () => {
         it('Should navigate to adjacent section when no candidate in current section', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section1 = document.createElement('div');
                 section1.setAttribute('data-nav-section', 'left');
                 mockRect(section1, { left: 0, top: 0, width: 200, height: 400 });
@@ -650,14 +651,14 @@ describe('SpatialNavigationService', () => {
                 section2.append(btn2);
                 document.body.append(section1, section2);
                 btn1.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('right');
                 expect(document.activeElement).toBe(btn2);
                 expect(s.activeSection.getValue()).toBe('right');
             });
         });
         it('Should not navigate cross-section when disabled', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 configureSpatialNavigation(i, { crossSectionNavigation: false });
                 const section1 = document.createElement('div');
                 section1.setAttribute('data-nav-section', 'left');
@@ -671,7 +672,7 @@ describe('SpatialNavigationService', () => {
                 section2.append(btn2);
                 document.body.append(section1, section2);
                 btn1.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('right');
                 expect(document.activeElement).toBe(btn1);
             });
@@ -679,7 +680,7 @@ describe('SpatialNavigationService', () => {
     });
     describe('focus memory', () => {
         it('Should remember and restore focus when returning to a section', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section1 = document.createElement('div');
                 section1.setAttribute('data-nav-section', 'left');
                 mockRect(section1, { left: 0, top: 0, width: 200, height: 400 });
@@ -694,7 +695,7 @@ describe('SpatialNavigationService', () => {
                 section2.append(btn2);
                 document.body.append(section1, section2);
                 btn1b.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 // Navigate away from section1
                 s.moveFocus('right');
                 expect(document.activeElement).toBe(btn2);
@@ -705,7 +706,7 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should fall back to nearest element when remembered element is removed', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section1 = document.createElement('div');
                 section1.setAttribute('data-nav-section', 'left');
                 mockRect(section1, { left: 0, top: 0, width: 200, height: 400 });
@@ -722,7 +723,7 @@ describe('SpatialNavigationService', () => {
                 document.body.append(section1, section2);
                 // Focus btn2a, navigate to section1
                 btn2a.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('left');
                 // Remove btn2a from DOM
                 btn2a.remove();
@@ -732,7 +733,7 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should fall back to nearest element when remembered element becomes disabled', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section1 = document.createElement('div');
                 section1.setAttribute('data-nav-section', 'left');
                 mockRect(section1, { left: 0, top: 0, width: 200, height: 400 });
@@ -748,7 +749,7 @@ describe('SpatialNavigationService', () => {
                 section2.append(btn2a, btn2b);
                 document.body.append(section1, section2);
                 btn2a.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('left');
                 // Disable btn2a after navigating away
                 btn2a.disabled = true;
@@ -760,12 +761,12 @@ describe('SpatialNavigationService', () => {
     });
     describe('enabled toggle', () => {
         it('Should stop handling keys when disabled', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const left = createButton('left', { left: 0, top: 0, width: 50, height: 50 });
                 const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
                 document.body.append(left, right);
                 left.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.enabled.setValue(false);
                 pressKey('ArrowRight');
                 expect(document.activeElement).toBe(left);
@@ -778,8 +779,8 @@ describe('SpatialNavigationService', () => {
     describe('disposal', () => {
         it('Should remove keydown listener on dispose', async () => {
             const removeEventListenerSpy = vi.spyOn(window, 'removeEventListener');
-            await usingAsync(new Injector(), async (i) => {
-                i.getInstance(SpatialNavigationService);
+            await usingAsync(createInjector(), async (i) => {
+                i.get(SpatialNavigationService);
             });
             expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function));
         });
@@ -788,8 +789,8 @@ describe('SpatialNavigationService', () => {
             const right = createButton('right', { left: 100, top: 0, width: 50, height: 50 });
             document.body.append(left, right);
             left.focus();
-            await usingAsync(new Injector(), async (i) => {
-                i.getInstance(SpatialNavigationService);
+            await usingAsync(createInjector(), async (i) => {
+                i.get(SpatialNavigationService);
             });
             pressKey('ArrowRight');
             expect(document.activeElement).toBe(left);
@@ -797,30 +798,30 @@ describe('SpatialNavigationService', () => {
     });
     describe('backspace and escape', () => {
         it('Should call history.back() on Backspace when configured', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 configureSpatialNavigation(i, { backspaceGoesBack: true });
                 const btn = createButton('btn', { left: 0, top: 0, width: 50, height: 50 });
                 document.body.append(btn);
                 btn.focus();
                 const backSpy = vi.spyOn(history, 'back').mockImplementation(() => { });
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Backspace');
                 expect(backSpy).toHaveBeenCalledTimes(1);
             });
         });
         it('Should not call history.back() on Backspace by default', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const btn = createButton('btn', { left: 0, top: 0, width: 50, height: 50 });
                 document.body.append(btn);
                 btn.focus();
                 const backSpy = vi.spyOn(history, 'back').mockImplementation(() => { });
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Backspace');
                 expect(backSpy).not.toHaveBeenCalled();
             });
         });
         it('Should not call history.back() on Backspace when focused on a text input', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 configureSpatialNavigation(i, { backspaceGoesBack: true });
                 const input = document.createElement('input');
                 input.type = 'text';
@@ -829,13 +830,13 @@ describe('SpatialNavigationService', () => {
                 document.body.append(input);
                 input.focus();
                 const backSpy = vi.spyOn(history, 'back').mockImplementation(() => { });
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Backspace');
                 expect(backSpy).not.toHaveBeenCalled();
             });
         });
         it('Should not call history.back() on Backspace when focused on a textarea', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 configureSpatialNavigation(i, { backspaceGoesBack: true });
                 const textarea = document.createElement('textarea');
                 textarea.value = 'some text';
@@ -843,13 +844,13 @@ describe('SpatialNavigationService', () => {
                 document.body.append(textarea);
                 textarea.focus();
                 const backSpy = vi.spyOn(history, 'back').mockImplementation(() => { });
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Backspace');
                 expect(backSpy).not.toHaveBeenCalled();
             });
         });
         it('Should move to parent section on Escape when configured', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 configureSpatialNavigation(i, { escapeGoesToParentSection: true });
                 const outer = document.createElement('div');
                 outer.setAttribute('data-nav-section', 'outer');
@@ -861,26 +862,26 @@ describe('SpatialNavigationService', () => {
                 outer.append(outerBtn, inner);
                 document.body.append(outer);
                 innerBtn.focus();
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(outerBtn);
             });
         });
         it('Should blur a range input on Escape', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'range';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
                 document.body.append(input);
                 input.focus();
                 expect(document.activeElement).toBe(input);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(document.body);
             });
         });
         it('Should blur a radio input on Escape', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const radio = document.createElement('input');
                 radio.type = 'radio';
                 radio.name = 'group';
@@ -888,39 +889,39 @@ describe('SpatialNavigationService', () => {
                 document.body.append(radio);
                 radio.focus();
                 expect(document.activeElement).toBe(radio);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(document.body);
             });
         });
         it('Should blur a date input on Escape', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'date';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
                 document.body.append(input);
                 input.focus();
                 expect(document.activeElement).toBe(input);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(document.body);
             });
         });
         it('Should blur a time input on Escape', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'time';
                 mockRect(input, { left: 0, top: 0, width: 200, height: 30 });
                 document.body.append(input);
                 input.focus();
                 expect(document.activeElement).toBe(input);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(document.body);
             });
         });
         it('Should blur a number input on Escape', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'number';
                 input.value = '5';
@@ -928,13 +929,13 @@ describe('SpatialNavigationService', () => {
                 document.body.append(input);
                 input.focus();
                 expect(document.activeElement).toBe(input);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(document.body);
             });
         });
         it('Should blur a text input on Escape', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const input = document.createElement('input');
                 input.type = 'text';
                 input.value = 'hello';
@@ -942,31 +943,31 @@ describe('SpatialNavigationService', () => {
                 document.body.append(input);
                 input.focus();
                 expect(document.activeElement).toBe(input);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(document.body);
             });
         });
         it('Should blur a textarea on Escape', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const textarea = document.createElement('textarea');
                 textarea.value = 'hello';
                 mockRect(textarea, { left: 0, top: 0, width: 200, height: 100 });
                 document.body.append(textarea);
                 textarea.focus();
                 expect(document.activeElement).toBe(textarea);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(document.body);
             });
         });
         it('Should not blur a button on Escape', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const btn = createButton('btn', { left: 0, top: 0, width: 50, height: 50 });
                 document.body.append(btn);
                 btn.focus();
                 expect(document.activeElement).toBe(btn);
-                i.getInstance(SpatialNavigationService);
+                i.get(SpatialNavigationService);
                 pressKey('Escape');
                 expect(document.activeElement).toBe(btn);
             });
@@ -974,7 +975,7 @@ describe('SpatialNavigationService', () => {
     });
     describe('data-spatial-nav-target', () => {
         it('Should treat elements with data-spatial-nav-target as focusable candidates', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const origin = createButton('origin', { left: 0, top: 0, width: 50, height: 50 });
                 const target = document.createElement('div');
                 target.setAttribute('data-spatial-nav-target', '');
@@ -984,7 +985,7 @@ describe('SpatialNavigationService', () => {
                 target.scrollIntoView = vi.fn();
                 document.body.append(origin, target);
                 origin.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('right');
                 expect(document.activeElement).toBe(target);
             });
@@ -992,7 +993,7 @@ describe('SpatialNavigationService', () => {
     });
     describe('overflow-aware visibility', () => {
         it('Should skip candidates whose center is outside their overflow container', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const container = document.createElement('div');
                 Object.defineProperty(container, 'computedStyleMap', { value: () => new Map() });
                 vi.spyOn(window, 'getComputedStyle').mockImplementation((el) => {
@@ -1008,7 +1009,7 @@ describe('SpatialNavigationService', () => {
                 const origin = createButton('origin', { left: 0, top: 100, width: 50, height: 50 });
                 document.body.append(container, origin);
                 origin.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.moveFocus('up');
                 expect(document.activeElement).toBe(visible);
             });
@@ -1016,7 +1017,7 @@ describe('SpatialNavigationService', () => {
     });
     describe('focus trap', () => {
         it('Should block cross-section navigation when a trap is active', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section1 = document.createElement('div');
                 section1.setAttribute('data-nav-section', 'modal');
                 mockRect(section1, { left: 0, top: 0, width: 400, height: 400 });
@@ -1029,22 +1030,22 @@ describe('SpatialNavigationService', () => {
                 section2.append(btn2);
                 document.body.append(section1, section2);
                 btn1.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.pushFocusTrap('modal');
                 s.moveFocus('right');
                 expect(document.activeElement).toBe(btn1);
             });
         });
         it('Should set activeSection when pushing a trap', async () => {
-            await usingAsync(new Injector(), async (i) => {
-                const s = i.getInstance(SpatialNavigationService);
+            await usingAsync(createInjector(), async (i) => {
+                const s = i.get(SpatialNavigationService);
                 s.pushFocusTrap('dialog');
                 expect(s.activeSection.getValue()).toBe('dialog');
             });
         });
         it('Should restore previous section on pop', async () => {
-            await usingAsync(new Injector(), async (i) => {
-                const s = i.getInstance(SpatialNavigationService);
+            await usingAsync(createInjector(), async (i) => {
+                const s = i.get(SpatialNavigationService);
                 s.activeSection.setValue('main');
                 s.pushFocusTrap('dialog');
                 expect(s.activeSection.getValue()).toBe('dialog');
@@ -1053,8 +1054,8 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should support nested traps — topmost wins', async () => {
-            await usingAsync(new Injector(), async (i) => {
-                const s = i.getInstance(SpatialNavigationService);
+            await usingAsync(createInjector(), async (i) => {
+                const s = i.get(SpatialNavigationService);
                 s.pushFocusTrap('outer-dialog');
                 s.pushFocusTrap('inner-dialog');
                 expect(s.activeSection.getValue()).toBe('inner-dialog');
@@ -1065,7 +1066,7 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should allow within-section navigation when trap is active', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section = document.createElement('div');
                 section.setAttribute('data-nav-section', 'modal');
                 mockRect(section, { left: 0, top: 0, width: 400, height: 400 });
@@ -1074,14 +1075,14 @@ describe('SpatialNavigationService', () => {
                 section.append(btn1, btn2);
                 document.body.append(section);
                 btn1.focus();
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.pushFocusTrap('modal');
                 s.moveFocus('down');
                 expect(document.activeElement).toBe(btn2);
             });
         });
         it('Should focus within trapped section when activeElement is document.body', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 const section1 = document.createElement('div');
                 section1.setAttribute('data-nav-section', 'sidebar');
                 mockRect(section1, { left: 0, top: 0, width: 200, height: 400 });
@@ -1095,7 +1096,7 @@ describe('SpatialNavigationService', () => {
                 document.body.append(section1, section2);
                 document.activeElement?.blur();
                 expect(document.activeElement).toBe(document.body);
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 s.pushFocusTrap('modal');
                 s.moveFocus('down');
                 expect(document.activeElement).toBe(modalBtn);
@@ -1103,29 +1104,33 @@ describe('SpatialNavigationService', () => {
             });
         });
         it('Should clear trap stack on disposal', async () => {
-            await usingAsync(new Injector(), async (i) => {
-                const s = i.getInstance(SpatialNavigationService);
+            await usingAsync(createInjector(), async (i) => {
+                const s = i.get(SpatialNavigationService);
                 s.pushFocusTrap('dialog');
             });
             // After disposal, creating a new instance should have no traps
-            await usingAsync(new Injector(), async (i) => {
-                const s = i.getInstance(SpatialNavigationService);
+            await usingAsync(createInjector(), async (i) => {
+                const s = i.get(SpatialNavigationService);
                 expect(s.activeSection.getValue()).toBeNull();
             });
         });
     });
     describe('configureSpatialNavigation', () => {
         it('Should configure the service with custom options', async () => {
-            await usingAsync(new Injector(), async (i) => {
+            await usingAsync(createInjector(), async (i) => {
                 configureSpatialNavigation(i, { initiallyEnabled: false });
-                const s = i.getInstance(SpatialNavigationService);
+                const s = i.get(SpatialNavigationService);
                 expect(s.enabled.getValue()).toBe(false);
             });
         });
-        it('Should throw if called after service is instantiated', async () => {
-            await usingAsync(new Injector(), async (i) => {
-                i.getInstance(SpatialNavigationService);
-                expect(() => configureSpatialNavigation(i, {})).toThrow('configureSpatialNavigation must be called before the SpatialNavigationService is instantiated');
+        it('Should rebind options when called after the service is instantiated', async () => {
+            await usingAsync(createInjector(), async (i) => {
+                const first = i.get(SpatialNavigationService);
+                expect(first.enabled.getValue()).toBe(true);
+                configureSpatialNavigation(i, { initiallyEnabled: false });
+                const second = i.get(SpatialNavigationService);
+                expect(second).not.toBe(first);
+                expect(second.enabled.getValue()).toBe(false);
             });
         });
     });