Send IPC settings.changed event to Electron, Ref. #13

package.json

@@ -43,6 +43,7 @@
     "core-js": "^2.4.1",
     "d3-ng2-service": "^1.23.3",
     "electron-settings": "^3.1.4",
+    "ngx-electron": "^1.0.4",
     "npm-check-updates": "^2.13.0",
     "raven-js": "^3.24.0",
     "rxjs": "^5.4.1",

src/app/app.component.spec.ts

@@ -1,30 +1,76 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { AppComponent } from './app.component';
+import { MatIconModule } from "@angular/material";
+import { SettingsService } from "./shared/services/settings.service";
+import { PersistenceService } from "angular-persistence";
+import { ElectronService, NgxElectronModule } from "ngx-electron";
+import createSpyObj = jasmine.createSpyObj;
+
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+  let electronService: ElectronService;
+  let settingsService: SettingsService;
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
         declarations: [
-            AppComponent
+          AppComponent
         ],
         imports: [
-            RouterTestingModule
+          RouterTestingModule,
+          MatIconModule,
+          NgxElectronModule
+        ],
+        providers: [
+          SettingsService,
+          PersistenceService,
         ]
     }).compileComponents();
+
+    electronService = TestBed.get(ElectronService);
+    settingsService = TestBed.get(SettingsService);
   }));
 
-  // it('should create the app', async(() => {
+  beforeEach(() => {
-  //   const fixture = TestBed.createComponent(AppComponent);
+    fixture = TestBed.createComponent(AppComponent);
-  //   const app = fixture.debugElement.componentInstance;
+    component = fixture.componentInstance;
-  //   expect(app).toBeTruthy();
+    fixture.detectChanges();
-  // }));
+  });
 
-  // it('should have footer', async(() => {
+  it('should create the app', async(() => {
-  //   const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
-  //   fixture.detectChanges();
+    expect(app).toBeTruthy();
-  //   const compiled = fixture.debugElement.nativeElement;
+  }));
-  //   expect(compiled.querySelector('.text-muted').textContent).toContain('GNS3 Web UI demo');
+
-  // }));
+  it('should have footer', async(() => {
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('router-outlet').textContent).toEqual('');
+  }));
+
+  it('should receive changed settings and forward to electron', async(() => {
+    // when(electronService.isElectronApp).thenReturn(true);
+    const spy = createSpyObj('Electron.IpcRenderer', ['send']);
+    spyOnProperty(electronService, 'isElectronApp').and.returnValue(true);
+    spyOnProperty(electronService, 'ipcRenderer').and.returnValue(spy);
+    settingsService.set('crash_reports', true);
+    component.ngOnInit();
+    settingsService.set('crash_reports', false);
+    expect(spy.send).toHaveBeenCalled();
+    expect(spy.send.calls.first().args[0]).toEqual('settings.changed');
+    expect(spy.send.calls.first().args[1].crash_reports).toEqual(false);
+  }));
+
+  it('should receive changed settings and do not forward to electron', async(() => {
+    // when(electronService.isElectronApp).thenReturn(true);
+    const spy = createSpyObj('Electron.IpcRenderer', ['send']);
+    spyOnProperty(electronService, 'isElectronApp').and.returnValue(false);
+    settingsService.set('crash_reports', true);
+    component.ngOnInit();
+    settingsService.set('crash_reports', false);
+    expect(spy.send).not.toHaveBeenCalled();
+  }));
 });

src/app/app.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { MatIconRegistry } from "@angular/material";
 import { DomSanitizer } from "@angular/platform-browser";
+import { ElectronService } from "ngx-electron";
+import { SettingsService } from "./shared/services/settings.service";
+
 
 @Component({
   selector: 'app-root',
@@ -10,10 +13,20 @@ import { DomSanitizer } from "@angular/platform-browser";
   ]
 })
 export class AppComponent implements OnInit {
-    constructor(iconReg: MatIconRegistry, sanitizer: DomSanitizer) {
+    constructor(
+      iconReg: MatIconRegistry,
+      sanitizer: DomSanitizer,
+      private settingsService: SettingsService,
+      private electronService: ElectronService) {
+
       iconReg.addSvgIcon('gns3', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon.svg'));
   }
 
   ngOnInit(): void {
+    if (this.electronService.isElectronApp) {
+      this.settingsService.subscribe((settings) => {
+        this.electronService.ipcRenderer.send('settings.changed', settings);
+      });
+    }
   }
 }

src/app/app.module.ts

@@ -26,10 +26,9 @@ import {
 
 import { D3Service } from 'd3-ng2-service';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
 import { HotkeyModule } from 'angular2-hotkeys';
-
 import { PersistenceModule } from 'angular-persistence';
+import { NgxElectronModule } from 'ngx-electron';
 
 import { AppRoutingModule } from './app-routing.module';
 
@@ -127,7 +126,8 @@ Raven
     CdkTableModule,
     CartographyModule,
     HotkeyModule.forRoot(),
-    PersistenceModule
+    PersistenceModule,
+    NgxElectronModule
   ],
   providers: [
     SettingsService,

src/app/shared/services/settings.service.spec.ts

@@ -1,7 +1,8 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { PersistenceService, StorageType } from "angular-persistence";
 
-import { SettingsService } from './settings.service';
+import { Settings, SettingsService } from './settings.service';
+import createSpyObj = jasmine.createSpyObj;
 
 
 describe('SettingsService', () => {
@@ -58,4 +59,15 @@ describe('SettingsService', () => {
       'crash_reports': false
     });
   }));
+
+  it('should execute subscriber', inject([SettingsService], (service: SettingsService) => {
+    let changedSettings: Settings;
+
+    service.set('crash_reports', true);
+    service.subscribe(settings => changedSettings = settings);
+    service.set('crash_reports', false);
+
+    expect(changedSettings.crash_reports).toEqual(false);
+  }));
+
 });

src/app/shared/services/settings.service.ts

@@ -1,13 +1,25 @@
 import { Injectable } from '@angular/core';
 import { PersistenceService, StorageType } from "angular-persistence";
+import { Subject } from "rxjs/Subject";
+
+
+export interface Settings {
+  crash_reports: boolean;
+}
+
 
 @Injectable()
 export class SettingsService {
-  static DEFAULTS = {
+  static DEFAULTS: Settings = {
     'crash_reports': true
   };
 
-  constructor(private persistenceService: PersistenceService) { }
+  private settingsSubject: Subject<Settings>;
+
+  constructor(private persistenceService: PersistenceService) {
+    this.settingsSubject = new Subject<Settings>();
+    this.settingsSubject.next(this.getAll());
+  }
 
   get<T>(key: string) {
     if (!(key in SettingsService.DEFAULTS)) {
@@ -25,6 +37,7 @@ export class SettingsService {
       throw Error(`Key '${key}' doesn't exist in settings`);
     }
     this.persistenceService.set(key, value, { type: StorageType.LOCAL });
+    this.settingsSubject.next(this.getAll());
   }
 
   getAll() {
@@ -40,4 +53,8 @@ export class SettingsService {
       this.set(key, settings[key]);
     });
   }
+
+  subscribe(subscriber: ((settings: Settings) => void)) {
+    return this.settingsSubject.subscribe(subscriber);
+  }
 }

yarn.lock

@@ -5737,6 +5737,10 @@ netmask@~1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
 
+ngx-electron@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/ngx-electron/-/ngx-electron-1.0.4.tgz#2d80b25d74ae4d6226ad8b3bc4ecfa611e48fdca"
+
 no-case@^2.2.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"