// import { RouterTestingModule } from '@angular/router/testing';
// import { Breadcrumb, BreadcrumbService } from '@core/breadcrumb';
// import { createComponentFactory, Spectator } from '@ngneat/spectator';
// import { UISvgIconComponent } from '@ui/icon';
// import { MockComponent, MockProvider } from 'ng-mocks';
// import { of } from 'rxjs';
// import { first } from 'rxjs/operators';

// import { BreadcrumbComponent } from './breadcrumb.component';
// import { DEFAULT_BREADCRUMB_COMPONENT_STATE } from './breadcrumb.component-state';
// import { EmptyIconLoader, IconComponent, IconLoader, provideIcon } from '@shared/components/icon';

// describe('BreadcrumbComponent', () => {
//   let spectator: Spectator<BreadcrumbComponent>;
//   const createComponent = createComponentFactory({
//     imports: [RouterTestingModule, IconComponent],
//     component: BreadcrumbComponent,
//     providers: [
//       MockProvider(BreadcrumbService, { getBreadcrumbsByKeyAndTags$: () => of([]) }),
//       provideIcon({ provide: IconLoader, useClass: EmptyIconLoader }),
//     ],
//   });

//   beforeEach(async () => {
//     spectator = createComponent();
//     await spectator.fixture.whenStable();
//   });

//   it('should create', () => {
//     expect(spectator.component).toBeTruthy();
//   });

//   describe('constructor', () => {
//     it('should set the default state', () => {
//       expect(spectator.component['get']((s) => s)).toEqual(DEFAULT_BREADCRUMB_COMPONENT_STATE);
//     });
//   });

//   describe('key: string | number', () => {
//     it('should return the key from the ComponentStore', () => {
//       const key = 'test';
//       spectator.component.patchState({ key: key });
//       expect(spectator.component.key).toEqual(key);
//     });

//     it('should set the key in the ComponentStore', () => {
//       const key = 'test';
//       spectator.component.key = key;
//       expect(spectator.component['get']((s) => s.key)).toEqual(key);
//     });

//     it('should not set the key in the ComponentStore when the key is the same', () => {
//       const key = 'test';
//       spectator.component.key = key;
//       const setSpy = spyOn(spectator.component, 'patchState');
//       spectator.component.key = key;
//       expect(setSpy).not.toHaveBeenCalled();
//     });
//   });

//   describe('key$: Observable<string | number>', () => {
//     it('should return the key as Observable from the ComponentStore', () => {
//       const key = 'test';
//       spectator.component.patchState({ key: key });
//       spectator.component.key$.pipe(first()).subscribe((k) => {
//         expect(k).toEqual(key);
//       });
//     });
//   });

//   describe('tags: string[]', () => {
//     it('should return the tags from the ComponentStore', () => {
//       const tags = ['test'];
//       spectator.component.patchState({ tags: tags });
//       expect(spectator.component.tags).toEqual(tags);
//     });

//     it('should set the tags in the ComponentStore', () => {
//       const tags = ['test'];
//       spectator.component.tags = tags;
//       expect(spectator.component['get']((s) => s.tags)).toEqual(tags);
//     });

//     it('should not set the tags in the ComponentStore when the tags are the same', () => {
//       const tags = ['test1', 'test2'];
//       spectator.component.tags = tags;
//       const setSpy = spyOn(spectator.component, 'patchState');
//       spectator.component.tags = [...tags];
//       expect(setSpy).not.toHaveBeenCalled();
//     });
//   });

//   describe('tags$: Observable<string[]>', () => {
//     it('should return the tags as Observable from the ComponentStore', () => {
//       const tags = ['test'];
//       spectator.component.patchState({ tags: tags });
//       spectator.component.tags$.pipe(first()).subscribe((t) => {
//         expect(t).toEqual(tags);
//       });
//     });
//   });

//   describe('breadcrumbs$: Observable<Breadcrumb[]>', () => {
//     it('should be an Observable of Breadcrumb[] and returns the breadcrumb for the given key and tags', () => {
//       // Mock the getBreadcrumbsByKeyAndTags$ method to return a fixed set of breadcrumbs
//       const breadcrumbService = spectator.inject(BreadcrumbService);
//       const breadcrumbs: Breadcrumb[] = [
//         { key: 1, name: 'Home', path: '/home', section: 'test-section' },
//         { key: 1, name: 'Users', path: '/users', section: 'test-section' },
//       ];
//       spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//       // Set the key and tags input properties
//       spectator.setInput('key', 'users-key');
//       spectator.setInput('tags', ['admin']);

//       // Subscribe to the breadcrumbs$ observable and verify that it returns the expected breadcrumbs
//       spectator.component.breadcrumbs$.pipe(first()).subscribe((crumbs) => {
//         expect(crumbs).toEqual(breadcrumbs);
//       });
//     });
//   });

//   describe('previousBreadcrumb$: Observable<Breadcrumb>', () => {
//     it('should return the previous breadcrumb when there are more than one breadcrumb in the array', () => {
//       // Mock the getBreadcrumbsByKeyAndTags$ method to return a fixed set of breadcrumbs
//       const breadcrumbService = spectator.inject(BreadcrumbService);
//       const breadcrumbs: Breadcrumb[] = [
//         { key: 1, name: 'Home', path: '/home', section: 'test-section' },
//         { key: 1, name: 'Users', path: '/users', section: 'test-section' },
//         { key: 1, name: 'User', path: '/users/user', section: 'test-section' },
//       ];
//       spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//       // Set the key and tags input properties
//       spectator.setInput('key', 'users-key');
//       spectator.setInput('tags', ['admin']);

//       // Subscribe to the previousBreadcrumb$ observable and verify that it returns the expected previous breadcrumb
//       spectator.component.previousBreadcrumb$.pipe(first()).subscribe((previous) => {
//         expect(previous).toEqual(breadcrumbs[1]);
//       });
//     });

//     it('should return undefined if there are no previous breadcrumbs', () => {
//       const breadcrumbService = spectator.inject(BreadcrumbService);
//       const breadcrumbs: Breadcrumb[] = [{ key: 1, name: 'Home', path: '/home', section: 'test-section' }];
//       spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//       spectator.setInput('key', 'users-key');
//       spectator.setInput('tags', ['admin']);

//       spectator.component.previousBreadcrumb$.pipe(first()).subscribe((prev) => {
//         expect(prev).toBeUndefined();
//       });
//     });
//   });

//   describe('template', () => {
//     describe('Zurück-Button', () => {
//       it('should render div.shared-breadcrumb__placeholder if there is not a previous breadcrumb', () => {
//         const breadcrumbService = spectator.inject(BreadcrumbService);
//         const breadcrumbs: Breadcrumb[] = [{ key: 1, name: 'Home', path: '/home', section: 'test-section' }];
//         spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//         spectator.setInput('key', 'users-key');
//         spectator.setInput('tags', ['admin']);

//         spectator.detectChanges();

//         const div = spectator.query('div.shared-breadcrumb__placeholder');
//         expect(div).toBeVisible();

//         const button = spectator.query('button.shared-breadcrumb__button-back');
//         expect(button).not.toBeVisible();
//       });

//       it('should render the button.shared-breadcrumb__button-back if there is a previous breadcrumb', () => {
//         const breadcrumbService = spectator.inject(BreadcrumbService);
//         const breadcrumbs: Breadcrumb[] = [
//           { key: 1, name: 'Home', path: '/home', section: 'test-section' },
//           { key: 1, name: 'Users', path: '/users', section: 'test-section' },
//         ];
//         spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//         spectator.setInput('key', 'users-key');
//         spectator.setInput('tags', ['admin']);

//         spectator.detectChanges();

//         const button = spectator.query('button.shared-breadcrumb__button-back');
//         expect(button).toBeVisible();

//         const div = spectator.query('div.shared-breadcrumb__placeholder');
//         expect(div).not.toBeVisible();
//       });

//       it('should set the icon to arrow-left and size to 18 in the Icon Component', () => {
//         const breadcrumbService = spectator.inject(BreadcrumbService);
//         const breadcrumbs: Breadcrumb[] = [
//           { key: 1, name: 'Home', path: '/home', section: 'test-section' },
//           { key: 1, name: 'Users', path: '/users', section: 'test-section' },
//         ];
//         spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//         spectator.setInput('key', 'users-key');
//         spectator.setInput('tags', ['admin']);

//         spectator.detectChanges();

//         const icon = spectator.query(IconComponent);
//         expect(icon.icon).toBe('arrow-left');
//         expect(icon.size).toBe(18);
//       });
//     });

//     describe('Breadcrumb-Liste', () => {
//       it('should render the breadcrumbs as a list of links', () => {
//         const breadcrumbService = spectator.inject(BreadcrumbService);
//         const breadcrumbs: Breadcrumb[] = [
//           { key: 1, name: 'Home', path: '/home', section: 'test-section' },
//           { key: 1, name: 'Users', path: '/users', section: 'test-section' },
//         ];
//         spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//         spectator.setInput('key', 'users-key');
//         spectator.setInput('tags', ['admin']);

//         spectator.detectChanges();

//         const links = spectator.queryAll('a.shared-breadcrumb__crumb');
//         expect(links.length).toEqual(2);
//         expect(links[0]).toHaveText('Home');
//         expect(links[1]).toHaveText('Users');
//       });

//       it('should have the correct href for each link containing path and params', () => {
//         const breadcrumbService = spectator.inject(BreadcrumbService);
//         const breadcrumbs: Breadcrumb[] = [
//           { key: 1, name: 'Home', path: '/home', section: 'test-section' },
//           { key: 1, name: 'Users', path: '/users', section: 'test-section', params: { section: 'test-section' } },
//         ];
//         spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//         spectator.setInput('key', 'users-key');
//         spectator.setInput('tags', ['admin']);

//         spectator.detectChanges();

//         const links = spectator.queryAll('a.shared-breadcrumb__crumb');
//         expect(links[0]).toHaveAttribute('href', '/home');
//         expect(links[1]).toHaveAttribute('href', '/users?section=test-section');
//       });

//       it('should render .shared-breadcrumb__chevron and an icon with chevron-right between each link', () => {
//         const breadcrumbService = spectator.inject(BreadcrumbService);
//         const breadcrumbs: Breadcrumb[] = [
//           { key: 1, name: 'Home', path: '/home', section: 'test-section' },
//           { key: 1, name: 'Users', path: '/users', section: 'test-section' },
//           { key: 1, name: 'Users Details', path: '/users-details', section: 'test-section' },
//         ];
//         spyOn(breadcrumbService, 'getBreadcrumbsByKeyAndTags$').and.returnValue(of(breadcrumbs));

//         spectator.setInput('key', 'users-key');
//         spectator.setInput('tags', ['admin']);

//         spectator.detectChanges();

//         const chevrons = spectator.queryAll('.shared-breadcrumb__chevron');
//         expect(chevrons.length).toEqual(2);

//         const icons = spectator.queryAll(IconComponent);
//         expect(icons.length).toEqual(3);
//         expect(icons[0].icon).not.toBe('chevron-right');
//         expect(icons[1].icon).toBe('chevron-right');
//         expect(icons[2].icon).toBe('chevron-right');
//       });
//     });
//   });
// });
