feat: build dark fantasy application shell

apps/web/src/app/app.spec.ts

@@ -1,23 +1,44 @@
+import { signal } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { App } from './app';
+import { provideRouter } from '@angular/router';
+import { WorldStore } from './features/world/world.store';
+import { AppShellComponent } from './layout/app-shell/app-shell.component';
 
 describe('App', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [App],
+      imports: [AppShellComponent],
+      providers: [
+        provideRouter([]),
+        {
+          provide: WorldStore,
+          useValue: { character: signal(null) },
+        },
+      ],
     }).compileComponents();
   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(App);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
+  it('renders the reusable game shell with only Karte available', () => {
+    const fixture = TestBed.createComponent(AppShellComponent);
+    fixture.detectChanges();
 
-  it('should render title', async () => {
-    const fixture = TestBed.createComponent(App);
-    await fixture.whenStable();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, web');
+    const element = fixture.nativeElement as HTMLElement;
+    expect(element.querySelector('app-top-bar')).not.toBeNull();
+    expect(element.querySelector('app-side-navigation')).not.toBeNull();
+    expect(element.querySelector('main')).not.toBeNull();
+    expect(element.querySelector('app-game-footer')).not.toBeNull();
+
+    const mapButton = element.querySelector<HTMLButtonElement>('[data-navigation="world"]');
+    expect(mapButton).not.toBeNull();
+    expect(mapButton?.disabled).toBe(false);
+    expect(mapButton?.getAttribute('aria-current')).toBe('page');
+
+    for (const destination of ['hunt', 'quests', 'inventory', 'character']) {
+      expect(
+        element.querySelector<HTMLButtonElement>(`[data-navigation="${destination}"]`)?.disabled,
+      ).toBe(true);
+    }
+
+    expect(element.textContent).not.toContain('Shop');
   });
 });