From dd7c9f6e3d45f49397dbffdd0a792b21afbd60d3 Mon Sep 17 00:00:00 2001
From: lobo <andreas.dahm@gmail.com>
Date: Tue, 13 Oct 2026 08:18:22 +0200
Subject: [PATCH] fix(projects): register swiper custom elements in project
 dialog

The slider never ran because Swiper custom elements were not registered.
Use the bundle build so the navigation and pagination modules are included.
Add a spec that checks the registration.
---
 .../dialog/project-dialog.component.spec.ts   | 41 +++++++++++++++++++
 .../dialog/project-dialog.component.ts        |  3 ++
 2 files changed, 44 insertions(+)
 create mode 100644 src/app/pages/projects/dialog/project-dialog.component.spec.ts

diff --git a/src/app/pages/projects/dialog/project-dialog.component.spec.ts b/src/app/pages/projects/dialog/project-dialog.component.spec.ts
new file mode 100644
index 0000000..090e698
--- /dev/null
+++ b/src/app/pages/projects/dialog/project-dialog.component.spec.ts
@@ -0,0 +1,41 @@
+import { TestBed } from '@angular/core/testing';
+import { provideZonelessChangeDetection } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { provideTranslateService } from '@ngx-translate/core';
+import { register } from 'swiper/element/bundle';
+import { ProjectDialogComponent } from './project-dialog.component';
+
+describe('ProjectDialogComponent', () => {
+  it('registers the swiper custom elements', () => {
+    expect(customElements.get('swiper-container')).toBeDefined();
+    expect(customElements.get('swiper-slide')).toBeDefined();
+  });
+
+  it('registering again does not throw', () => {
+    expect(() => register()).not.toThrow();
+  });
+
+  it('renders an upgraded swiper-container for project images', async () => {
+    await TestBed.configureTestingModule({
+      imports: [ProjectDialogComponent],
+      providers: [
+        provideZonelessChangeDetection(),
+        provideTranslateService({ lang: 'en', fallbackLang: 'en' }),
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            title: 'T',
+            technologies: [],
+            images: [{ url: 'a.png' }, { url: 'b.png' }],
+          },
+        },
+      ],
+    }).compileComponents();
+    const fixture = TestBed.createComponent(ProjectDialogComponent);
+    fixture.detectChanges();
+
+    const el: HTMLElement = fixture.nativeElement.querySelector('swiper-container');
+    expect(el).not.toBeNull();
+    expect(el instanceof customElements.get('swiper-container')!).toBe(true);
+  });
+});
diff --git a/src/app/pages/projects/dialog/project-dialog.component.ts b/src/app/pages/projects/dialog/project-dialog.component.ts
index a0ffba1..c7c47c9 100644
--- a/src/app/pages/projects/dialog/project-dialog.component.ts
+++ b/src/app/pages/projects/dialog/project-dialog.component.ts
@@ -11,6 +11,9 @@ import {TranslatePipe} from '@ngx-translate/core';
 import {MatIcon} from '@angular/material/icon';
 import {MatChip, MatChipSet} from '@angular/material/chips';
 import {MatButton} from '@angular/material/button';
+import {register} from 'swiper/element/bundle';
+
+register();
 
 @Component({
   selector: 'app-project-dialog',