test: update component tests

src/app/player/components/channel-list-container/channel-list-container.component.spec.ts

@@ -9,6 +9,7 @@ import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
@@ -45,29 +46,28 @@ describe('ChannelListContainerComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [
+            imports: [
                 ChannelListContainerComponent,
-                MockPipes(FilterPipe),
+                FormsModule,
+                MatTabsModule,
+                MockModule(MatExpansionModule),
+                MockModule(MatIconModule),
+                MockModule(MatInputModule),
+                MockModule(MatListModule),
+                MockModule(MatSnackBarModule),
+                MockModule(MatTooltipModule),
+                MockModule(ScrollingModule),
+                MockModule(TranslateModule),
+                NoopAnimationsModule,
+                RouterTestingModule,
             ],
             providers: [
-                { provide: MatSnackBar, useClass: MatSnackBarStub },
                 { provide: DataService, useClass: ElectronServiceStub },
-                provideMockStore(),
-                provideMockActions(actions$),
+                { provide: MatSnackBar, useClass: MatSnackBarStub },
+                MockPipes(FilterPipe),
                 MockProviders(NgxIndexedDBService, TranslateService),
-            ],
-            imports: [
-                MockModule(MatSnackBarModule),
-                MockModule(MatInputModule),
-                MockModule(MatIconModule),
-                MockModule(MatListModule),
-                MockModule(ScrollingModule),
-                MockModule(MatTabsModule),
-                MockModule(MatTooltipModule),
-                MockModule(MatExpansionModule),
-                MockModule(TranslateModule),
-                FormsModule,
-                RouterTestingModule,
+                provideMockActions(actions$),
+                provideMockStore(),
             ],
         }).compileComponents();
     });
@@ -96,8 +96,15 @@ describe('ChannelListContainerComponent', () => {
         expect(component).toBeTruthy();
     });
 
-    it('should render three tabs', () => {
-        const tabs = fixture.debugElement.queryAll(By.css('mat-tab'));
+    it('should render three tabs', async () => {
+        const tabGroup = fixture.debugElement.query(By.css('mat-tab-group'));
+        expect(tabGroup).toBeTruthy();
+
+        // Force another change detection cycle
+        await fixture.whenStable();
+        fixture.detectChanges();
+
+        const tabs = tabGroup.queryAll(By.css('.mat-mdc-tab'));
         expect(tabs.length).toEqual(3);
     });
 

src/app/player/components/epg-list/epg-item-description/epg-item-description.component.spec.ts

@@ -12,16 +12,28 @@ describe('EpgItemDescriptionComponent', () => {
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            declarations: [EpgItemDescriptionComponent],
-            imports: [MockModule(MatDialogModule), MockModule(TranslateModule)],
-            providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }],
+            imports: [
+                EpgItemDescriptionComponent,
+                MockModule(MatDialogModule),
+                MockModule(TranslateModule),
+            ],
+            providers: [
+                {
+                    provide: MAT_DIALOG_DATA,
+                    useValue: {
+                        title: 'TV Show 1',
+                        desc: 'Highly interesting show about pets',
+                        category: 'Fun',
+                    } as unknown as EpgProgram,
+                },
+            ],
         }).compileComponents();
     }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(EpgItemDescriptionComponent);
         component = fixture.componentInstance;
-        component.epgProgram = {} as EpgProgram;
+        component.epgProgram = TestBed.inject(MAT_DIALOG_DATA);
         fixture.detectChanges();
     });
 
@@ -30,25 +42,26 @@ describe('EpgItemDescriptionComponent', () => {
     });
 
     it('should render epg details in the dialog', () => {
-        component.epgProgram = {
-            title: [{ value: 'TV Show 1', lang: 'ru' }],
-            desc: [{ value: 'Highly interesting show about pets' }],
-            category: [{ value: 'Fun' }],
-        } as EpgProgram;
         fixture.detectChanges();
-        const title = fixture.debugElement.query(By.css('[data-test="title"]'));
-        expect(title.nativeNode.innerHTML).toContain(
-            component.epgProgram.title[0].value
+        const titleElement = fixture.debugElement.query(
+            By.css('[data-test="title"]')
         );
-        const category = fixture.debugElement.query(
+        expect(titleElement.nativeElement.textContent.trim()).toContain(
+            'TV Show 1'
+        );
+
+        const categoryElement = fixture.debugElement.query(
             By.css('[data-test="category"]')
         );
-        expect(category.nativeNode.innerHTML).toContain(
-            component.epgProgram.category[0].value
+        expect(categoryElement.nativeElement.textContent.trim()).toContain(
+            'Fun'
         );
-        const desc = fixture.debugElement.query(By.css('[data-test="desc"]'));
-        expect(desc.nativeNode.innerHTML).toContain(
-            component.epgProgram.desc[0].value
+
+        const descElement = fixture.debugElement.query(
+            By.css('[data-test="desc"]')
+        );
+        expect(descElement.nativeElement.textContent.trim()).toContain(
+            'Highly interesting show about pets'
         );
     });
 });

src/app/player/components/epg-list/epg-list.component.spec.ts

@@ -8,22 +8,41 @@ import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { TranslatePipe } from '@ngx-translate/core';
-import * as moment from 'moment';
 import { MockComponent, MockModule, MockPipe, MockProvider } from 'ng-mocks';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 import { Channel } from '../../../../../shared/channel.interface';
 import { EPG_GET_PROGRAM_DONE } from '../../../../../shared/ipc-commands';
 import { DataService } from '../../../services/data.service';
 import { ElectronServiceStub } from '../../../services/electron.service.stub';
+import { EpgService } from '../../../services/epg.service';
 import { MomentDatePipe } from '../../../shared/pipes/moment-date.pipe';
+import { EpgProgram } from '../../models/epg-program.model';
 import { EpgListItemComponent } from './epg-list-item/epg-list-item.component';
-import { EpgData, EpgListComponent } from './epg-list.component';
+import { EpgListComponent } from './epg-list.component';
+
+// Update moment mock to handle namespace import
+jest.mock('moment', () => {
+    const momentFunc = () => ({
+        format: () => '2023-01-01',
+        subtract: () => ({
+            toISOString: () => '2023-01-01T00:00:00Z',
+            format: () => '2023-01-01',
+        }),
+        diff: () => 0,
+        add: () => ({
+            format: () => '2023-01-01',
+        }),
+    });
+    momentFunc.default = momentFunc;
+    return momentFunc;
+});
 
 describe('EpgListComponent', () => {
     let component: EpgListComponent;
     let fixture: ComponentFixture<EpgListComponent>;
     let electronService: DataService;
     let mockStore: MockStore;
+    let epgService: EpgService;
     const actions$ = new Observable<Actions>();
 
     const MOCKED_PROGRAMS = {
@@ -44,8 +63,8 @@ describe('EpgListComponent', () => {
         },
         items: [
             {
-                start: moment(Date.now()).format('YYYYMMDD'),
-                stop: moment(Date.now()).format('YYYYMMDD'),
+                start: '2023-01-01',
+                stop: '2023-01-01',
                 channel: '12345',
                 title: [{ lang: 'en', value: 'NOW on PBS' }],
                 desc: [
@@ -82,42 +101,46 @@ describe('EpgListComponent', () => {
                 ],
                 audio: [],
                 _attributes: {
-                    start: moment(Date.now()).format('YYYYMMDD'),
-                    stop: moment(Date.now()).format('YYYYMMDD'),
+                    start: '2023-01-01',
+                    stop: '2023-01-01',
                 },
             },
         ],
     };
 
-    beforeEach(
-        waitForAsync(() => {
-            TestBed.configureTestingModule({
-                declarations: [
-                    EpgListComponent,
-                    MockPipe(MomentDatePipe),
-                    MockPipe(TranslatePipe),
-                    MockComponent(EpgListItemComponent),
-                ],
-                imports: [
-                    MockModule(MatIconModule),
-                    MockModule(MatTooltipModule),
-                    MockModule(MatListModule),
-                    MockModule(MatDialogModule),
-                ],
-                providers: [
-                    { provide: DataService, useClass: ElectronServiceStub },
-                    MockProvider(MatDialog),
-                    provideMockStore(),
-                    provideMockActions(actions$),
-                ],
-            }).compileComponents();
-        })
-    );
+    beforeEach(waitForAsync(() => {
+        const mockEpgService = {
+            currentEpgPrograms$: new BehaviorSubject<EpgProgram[]>([]),
+        };
+
+        TestBed.configureTestingModule({
+            declarations: [
+                EpgListComponent,
+                MockPipe(MomentDatePipe),
+                MockPipe(TranslatePipe),
+                MockComponent(EpgListItemComponent),
+            ],
+            imports: [
+                MockModule(MatIconModule),
+                MockModule(MatTooltipModule),
+                MockModule(MatListModule),
+                MockModule(MatDialogModule),
+            ],
+            providers: [
+                { provide: DataService, useClass: ElectronServiceStub },
+                { provide: EpgService, useValue: mockEpgService },
+                MockProvider(MatDialog),
+                provideMockStore(),
+                provideMockActions(actions$),
+            ],
+        }).compileComponents();
+    }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(EpgListComponent);
         component = fixture.componentInstance;
         electronService = TestBed.inject(DataService);
+        epgService = TestBed.inject(EpgService);
 
         mockStore = TestBed.inject(MockStore);
         mockStore.setState({
@@ -150,13 +173,19 @@ describe('EpgListComponent', () => {
     }); */
 
     it('should handle an empty epg programs object', () => {
-        const payload = {} as unknown as EpgData;
-        component.handleEpgData({ payload });
+        const emptyPrograms: EpgProgram[] = [];
+        (epgService.currentEpgPrograms$ as BehaviorSubject<EpgProgram[]>).next(
+            emptyPrograms
+        );
+        component.handleEpgData(emptyPrograms);
         fixture.detectChanges();
-        expect(component.timeNow).toBeFalsy();
-        expect(component.dateToday).toBeFalsy();
+        expect(component.timeNow).toBeTruthy();
+        expect(component.dateToday).toBeTruthy();
         expect(component.channel).toBeNull();
-        expect(component.items).toHaveLength(0);
+        // Use async pipe or subscribe to test the Observable
+        component.items$.subscribe((items) => {
+            expect(items).toHaveLength(0);
+        });
     });
 
     it('should remove ipc listeners on destroy', () => {

src/app/player/components/epg-list/epg-list.component.ts

@@ -105,7 +105,6 @@ export class EpgListComponent {
     ngOnInit(): void {
         this.timeshiftUntil$ = this.store.select(selectActive).pipe(
             map((active) => {
-                console.log(active);
                 this.channel = {
                     id: active?.tvg?.id,
                     name: active?.name,

src/app/player/components/html-video-player/html-video-player.component.spec.ts

@@ -3,12 +3,13 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MockPipe } from 'ng-mocks';
 import { DataService } from '../../../services/data.service';
-import { ElectronServiceStub } from '../../../services/electron.service.stub';
 import { HtmlVideoPlayerComponent } from './html-video-player.component';
 
 describe('HtmlVideoPlayerComponent', () => {
     let component: HtmlVideoPlayerComponent;
     let fixture: ComponentFixture<HtmlVideoPlayerComponent>;
+    let dataService: DataService;
+
     const TEST_CHANNEL = {
         id: '1234',
         url: 'http://test.ts',
@@ -22,17 +23,20 @@ describe('HtmlVideoPlayerComponent', () => {
     };
 
     beforeEach(waitForAsync(() => {
+        const dataServiceMock = {
+            sendIpcEvent: jest.fn().mockResolvedValue(undefined),
+        };
+
         TestBed.configureTestingModule({
             declarations: [HtmlVideoPlayerComponent, MockPipe(TranslatePipe)],
-            providers: [
-                { provide: DataService, useClass: ElectronServiceStub },
-            ],
+            providers: [{ provide: DataService, useValue: dataServiceMock }],
         }).compileComponents();
     }));
 
     beforeEach(() => {
         fixture = TestBed.createComponent(HtmlVideoPlayerComponent);
         component = fixture.componentInstance;
+        dataService = TestBed.inject(DataService);
         fixture.detectChanges();
     });