import { signal } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { WorldStore } from '../../features/world/world.store';
import { ContextPanelComponent } from './context-panel.component';

describe('ContextPanelComponent', () => {
  it('uses a runtime location derivative while preserving the API artwork path as image fallback', async () => {
    await TestBed.configureTestingModule({
      imports: [ContextPanelComponent],
      providers: [
        {
          provide: WorldStore,
          useValue: {
            currentLocation: signal({
              id: 'south-gate-id',
              key: 'south-gate',
              name: 'Südtor von Graufurt',
              description: 'Der letzte sichere Schritt vor den Aschenfeldern.',
              regionKey: 'ashen-fields',
              minRecommendedLevel: 1,
              maxRecommendedLevel: 1,
              dangerLevel: 0,
              isSafe: true,
              huntingEnabled: false,
              artworkPath: '/images/backgrounds/Suedtor.png',
              connections: [],
            }),
            selectedConnection: signal(null),
          },
        },
      ],
    }).compileComponents();

    const fixture = TestBed.createComponent(ContextPanelComponent);
    fixture.detectChanges();

    const element = fixture.nativeElement as HTMLElement;
    expect(element.querySelector<HTMLSourceElement>('source')?.srcset).toContain(
      '/images/backgrounds/runtime/Suedtor-960.jpg',
    );
    expect(element.querySelector<HTMLImageElement>('img')?.getAttribute('src')).toBe(
      '/images/backgrounds/Suedtor.png',
    );
  });
});