// import { Spectator, createComponentFactory } from '@ngneat/spectator';
// import { ShellComponent } from './shell.component';
// import { ApplicationService } from '@core/application';
// import { ShellService } from './shell.service';
// import { BehaviorSubject } from 'rxjs';
// import { ShellTopBarComponent } from './top-bar';
// import { ShellSideMenuComponent } from './side-menu';
// import { ShellProcessBarComponent } from './process-bar';
// import { MockComponent } from 'ng-mocks';

// describe('ShellComponent', () => {
//   let spectator: Spectator<ShellComponent>;
//   let applicationService: jasmine.SpyObj<ApplicationService>;
//   let shellService: jasmine.SpyObj<ShellService>;
//   let applicationServiceSectionSubject = new BehaviorSubject<'customer' | 'branch'>('customer');
//   let shellServiceSideMenuOpenSubject = new BehaviorSubject<boolean>(false);

//   const createComponent = createComponentFactory({
//     component: ShellComponent,
//     mocks: [ApplicationService],
//     declarations: [MockComponent(ShellTopBarComponent), MockComponent(ShellSideMenuComponent), MockComponent(ShellProcessBarComponent)],
//   });

//   beforeEach(() => {
//     applicationService = jasmine.createSpyObj<ApplicationService>(['getSection$']);
//     applicationService.getSection$.and.returnValue(applicationServiceSectionSubject);

//     shellService = jasmine.createSpyObj<ShellService>(['closeSideMenu', 'sideMenuOpen$']);
//     shellService.sideMenuOpen$ = shellServiceSideMenuOpenSubject;
//     shellService.closeSideMenu.and.callFake(() => {});

//     spectator = createComponent({
//       providers: [
//         { provide: ApplicationService, useValue: applicationService },
//         { provide: ShellService, useValue: shellService },
//       ],
//     });
//   });

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

//   describe('ngOnInit', () => {
//     it('should set the data-section attribute to `customer`', () => {
//       applicationServiceSectionSubject.next('customer');
//       spectator.detectChanges();
//       expect(spectator.element.getAttribute('data-section')).toEqual('customer');
//     });

//     it('should set the data-section attribute to `branch`', () => {
//       applicationServiceSectionSubject.next('branch');
//       spectator.detectChanges();
//       expect(spectator.element.getAttribute('data-section')).toEqual('branch');
//     });
//   });

//   describe('closeSideMenu', () => {
//     it('should call closeSideMenu on the shell service', () => {
//       spectator.component.closeSideMenu();
//       expect(shellService.closeSideMenu).toHaveBeenCalled();
//     });
//   });

//   describe('sideMenuOpen$', () => {
//     it('should return the sideMenuOpen$ from the shell service', () => {
//       expect(spectator.component.sideMenuOpen$).toBe(shellServiceSideMenuOpenSubject);
//     });
//   });

//   describe('template', () => {
//     it('should have a shell-top-bar component', () => {
//       expect(spectator.query('shell-top-bar')).toBeTruthy();
//     });

//     it('should have a shell-side-menu component', () => {
//       expect(spectator.query('shell-side-menu')).toBeTruthy();
//     });

//     it('should have a shell-process-bar component', () => {
//       expect(spectator.query('shell-process-bar')).toBeTruthy();
//     });

//     it('should call when the main element is clicked', () => {
//       const spy = spyOn(spectator.component, 'closeSideMenu');
//       spectator.click('main');
//       expect(spy).toHaveBeenCalled();
//     });

//     it('should add the class `translate-x-0` to shell-side-menu when the side menu is open', () => {
//       shellServiceSideMenuOpenSubject.next(true);
//       spectator.detectChanges();
//       expect(spectator.query('shell-side-menu').classList).toContain('translate-x-0');
//     });
//   });
// });
