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.
This commit is contained in:
1 parent
c70dd59400
commit
dd7c9f6e3d
2 files changed
+44
No files matched your search
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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',
|
||||
|
||||
Reference in new issue
Block a user