test: update tests of playlist-info component

src/app/home/recent-playlists/playlist-info/playlist-info.component.spec.ts

@@ -1,3 +1,5 @@
+import { PLAYLIST_SAVE_DETAILS } from './../../../../../ipc-commands';
+/* eslint-disable @typescript-eslint/unbound-method */
 import { ElectronServiceStub } from './../../home.component.spec';
 import { ElectronService } from './../../../services/electron.service';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -5,13 +7,14 @@ import { MockModule, MockPipe } from 'ng-mocks';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
+import { DatePipe } from '@angular/common';
 import { PlaylistInfoComponent } from './playlist-info.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 describe('PlaylistInfoComponent', () => {
     let component: PlaylistInfoComponent;
     let fixture: ComponentFixture<PlaylistInfoComponent>;
+    let electronService: ElectronService;
 
     beforeEach(
         waitForAsync(() => {
@@ -22,7 +25,11 @@ describe('PlaylistInfoComponent', () => {
                     MockModule(MatFormFieldModule),
                     ReactiveFormsModule,
                 ],
-                declarations: [PlaylistInfoComponent, MockPipe(TranslatePipe)],
+                declarations: [
+                    PlaylistInfoComponent,
+                    MockPipe(TranslatePipe),
+                    MockPipe(DatePipe),
+                ],
                 providers: [
                     { provide: MAT_DIALOG_DATA, useValue: {} },
                     { provide: ElectronService, useClass: ElectronServiceStub },
@@ -34,10 +41,22 @@ describe('PlaylistInfoComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(PlaylistInfoComponent);
         component = fixture.componentInstance;
+        electronService = TestBed.inject(ElectronService);
         fixture.detectChanges();
     });
 
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should send an event to the main process after save', () => {
+        const playlistToSave = { _id: 'a12345', title: 'Playlist' };
+        spyOn(electronService.ipcRenderer, 'send');
+        component.saveChanges(playlistToSave);
+        expect(electronService.ipcRenderer.send).toHaveBeenCalledTimes(1);
+        expect(electronService.ipcRenderer.send).toHaveBeenCalledWith(
+            PLAYLIST_SAVE_DETAILS,
+            playlistToSave
+        );
+    });
 });

src/app/home/recent-playlists/playlist-info/playlist-info.component.ts

@@ -22,33 +22,46 @@ export class PlaylistInfoComponent {
     /** Playlist object */
     playlist: Playlist;
 
+    /** Form group with playlist details */
     playlistDetails: FormGroup;
 
     /**
      * Creates an instance of the component and injects the selected playlist from the parent component
+     * @param datePipe
+     * @param formBuilder
+     * @param electronService
      * @param playlist playlist object to show
      */
     constructor(
-        @Inject(MAT_DIALOG_DATA) playlist: Playlist,
-        datePipe: DatePipe,
-        formBuilder: FormBuilder,
-        private electronService: ElectronService
+        private datePipe: DatePipe,
+        private formBuilder: FormBuilder,
+        private electronService: ElectronService,
+        @Inject(MAT_DIALOG_DATA) playlist: Playlist
     ) {
         this.playlist = playlist;
-        this.playlistDetails = formBuilder.group({
-            _id: playlist._id,
-            title: new FormControl(playlist.title, Validators.required),
-            userAgent: playlist.userAgent || '',
+    }
+
+    /**
+     * Create the form and set initial data on component init
+     */
+    ngOnInit(): void {
+        this.playlistDetails = this.formBuilder.group({
+            _id: this.playlist._id,
+            title: new FormControl(this.playlist.title, Validators.required),
+            userAgent: this.playlist.userAgent || '',
             filename: new FormControl({
-                value: playlist.filename || '',
+                value: this.playlist.filename || '',
+                disabled: true,
+            }),
+            count: new FormControl({
+                value: this.playlist.count,
                 disabled: true,
             }),
-            count: new FormControl({ value: playlist.count, disabled: true }),
             importDate: new FormControl({
-                value: datePipe.transform(playlist.importDate),
+                value: this.datePipe.transform(this.playlist.importDate),
                 disabled: true,
             }),
-            url: new FormControl({ value: playlist.url, disabled: true }),
+            url: new FormControl({ value: this.playlist.url, disabled: true }),
         });
     }