From bf321afe801693142759cfa36f4d9c31dad48035 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 6 Jul 2023 14:58:10 +0300 Subject: [PATCH 01/29] connection status service was using rxjs observable now we also add signal as an alternative --- .../services/internet-connection-service.ts | 18 ++++++++++++++++-- .../internet-connection-status.component.ts | 17 ++++++++--------- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index a38f429d64..2c09eb5279 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -1,5 +1,5 @@ import { DOCUMENT } from '@angular/common'; -import { Injectable, inject } from '@angular/core'; +import { Injectable, inject, signal } from '@angular/core'; import { fromEvent, merge, of } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -14,5 +14,19 @@ export class InternetConnectionService{ of(navigator.onLine), fromEvent(window, 'offline'), fromEvent(window, 'online') - ).pipe(map(() => navigator.onLine)) + ).pipe(map(() => navigator.onLine)); +} + +@Injectable({ + providedIn: 'root', +}) +export class InternetConnectionSignalService{ + protected readonly window = inject(DOCUMENT).defaultView; + protected readonly navigator = this.window.navigator; + readonly networkStatus = signal(navigator.onLine); + + constructor(){ + window.addEventListener('offline', () => { this.networkStatus.set(navigator.onLine) }); + window.addEventListener('online', () => { this.networkStatus.set(navigator.onLine) }); + } } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts index c944e67ac1..a426fd2a64 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts @@ -1,14 +1,13 @@ -import { Component, inject } from '@angular/core'; -import { CommonModule } from '@angular/common' -import { map } from 'rxjs'; -import { InternetConnectionService, LocalizationModule } from '@abp/ng.core'; +import { Component, inject } from '@angular/core'; +import { NgIf, AsyncPipe } from '@angular/common' +import { InternetConnectionSignalService , LocalizationModule } from '@abp/ng.core'; @Component({ selector: 'abp-internet-status', standalone: true, - imports:[CommonModule,LocalizationModule], + imports:[NgIf, AsyncPipe, LocalizationModule], template: ` -
+
@@ -42,7 +41,7 @@ import { InternetConnectionService, LocalizationModule } from '@abp/ng.core'; } `] }) -export class InternetConnectionStatusComponent{ - internetConnectionService = inject(InternetConnectionService) - isOffline$ = this.internetConnectionService.networkStatus$.pipe(map((val) => !val)); +export class InternetConnectionStatusComponent{ + internetConnectionSignalService = inject(InternetConnectionSignalService); + isOnline = this.internetConnectionSignalService.networkStatus; } From 1624dcfafa42b72834eddb388402817c67a59f59 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 6 Jul 2023 15:40:14 +0300 Subject: [PATCH 02/29] removed unnecesarry async pipe --- .../internet-connection-status.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts index a426fd2a64..e62bc049f5 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts @@ -1,11 +1,11 @@ import { Component, inject } from '@angular/core'; -import { NgIf, AsyncPipe } from '@angular/common' +import { NgIf } from '@angular/common' import { InternetConnectionSignalService , LocalizationModule } from '@abp/ng.core'; @Component({ selector: 'abp-internet-status', standalone: true, - imports:[NgIf, AsyncPipe, LocalizationModule], + imports:[NgIf, LocalizationModule], template: `
From 515c17938edcb11127cea2e9685a08da5b4d939b Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 6 Jul 2023 16:40:02 +0300 Subject: [PATCH 03/29] this.window --- .../core/src/lib/services/internet-connection-service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index 2c09eb5279..9fc95e4c08 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -26,7 +26,7 @@ export class InternetConnectionSignalService{ readonly networkStatus = signal(navigator.onLine); constructor(){ - window.addEventListener('offline', () => { this.networkStatus.set(navigator.onLine) }); - window.addEventListener('online', () => { this.networkStatus.set(navigator.onLine) }); + this.window.addEventListener('offline', () => { this.networkStatus.set(navigator.onLine) }); + this.window.addEventListener('online', () => { this.networkStatus.set(navigator.onLine) }); } } From 80928d27692a4887ca6010db9a3598971ce895c1 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 6 Jul 2023 23:37:18 +0300 Subject: [PATCH 04/29] merging observable and signal to 1 service --- .../services/internet-connection-service.ts | 41 +++++++++++-------- .../internet-connection-status.component.ts | 13 +++--- 2 files changed, 30 insertions(+), 24 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index 9fc95e4c08..9afcdeb166 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -1,7 +1,6 @@ import { DOCUMENT } from '@angular/common'; -import { Injectable, inject, signal } from '@angular/core'; -import { fromEvent, merge, of } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { Injectable, computed, inject, signal } from '@angular/core'; +import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root', @@ -10,23 +9,29 @@ export class InternetConnectionService{ protected readonly window = inject(DOCUMENT).defaultView; protected readonly navigator = this.window.navigator; - networkStatus$ = merge( - of(navigator.onLine), - fromEvent(window, 'offline'), - fromEvent(window, 'online') - ).pipe(map(() => navigator.onLine)); -} + /* observable */ + private status$ = new Subject() -@Injectable({ - providedIn: 'root', -}) -export class InternetConnectionSignalService{ - protected readonly window = inject(DOCUMENT).defaultView; - protected readonly navigator = this.window.navigator; - readonly networkStatus = signal(navigator.onLine); + /* creates writableSignal */ + private status = signal(navigator.onLine); constructor(){ - this.window.addEventListener('offline', () => { this.networkStatus.set(navigator.onLine) }); - this.window.addEventListener('online', () => { this.networkStatus.set(navigator.onLine) }); + this.window.addEventListener('offline', () => this.setStatus() ); + this.window.addEventListener('online', () => this.setStatus() ); + } + + private setStatus(){ + this.status.set(navigator.onLine) + this.status$.next(navigator.onLine) + } + + /* returns READONLY ANGULAR SIGNAL */ + get networkStatus(){ + return computed(this.status) + } + + /* returns OBSERVABLE */ + get networkStatus$(){ + return this.status$ } } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts index e62bc049f5..1610988a14 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts @@ -1,13 +1,14 @@ import { Component, inject } from '@angular/core'; -import { NgIf } from '@angular/common' -import { InternetConnectionSignalService , LocalizationModule } from '@abp/ng.core'; +import { AsyncPipe, NgIf } from '@angular/common' +import { InternetConnectionService , LocalizationModule } from '@abp/ng.core'; +import { map } from 'rxjs'; @Component({ selector: 'abp-internet-status', standalone: true, - imports:[NgIf, LocalizationModule], + imports:[NgIf, AsyncPipe, LocalizationModule], template: ` -
+
@@ -42,6 +43,6 @@ import { InternetConnectionSignalService , LocalizationModule } from '@abp/ng.co `] }) export class InternetConnectionStatusComponent{ - internetConnectionSignalService = inject(InternetConnectionSignalService); - isOnline = this.internetConnectionSignalService.networkStatus; + internetConnectionService = inject(InternetConnectionService); + isOffline = this.internetConnectionService.networkStatus } From f8d1ba8251fa3665af5c28f8ee6cc507e48d97e2 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 6 Jul 2023 23:37:57 +0300 Subject: [PATCH 05/29] lint clean warning --- .../internet-connection-status.component.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts index 1610988a14..23c7e46438 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts @@ -1,7 +1,6 @@ import { Component, inject } from '@angular/core'; import { AsyncPipe, NgIf } from '@angular/common' import { InternetConnectionService , LocalizationModule } from '@abp/ng.core'; -import { map } from 'rxjs'; @Component({ selector: 'abp-internet-status', From 63cdfecf4f5dba51e3ee6e28afe5c8e1a7ded654 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Thu, 6 Jul 2023 23:40:58 +0300 Subject: [PATCH 06/29] remove async pipe --- .../internet-connection-status.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts index 23c7e46438..c54c71c403 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts @@ -1,11 +1,11 @@ import { Component, inject } from '@angular/core'; -import { AsyncPipe, NgIf } from '@angular/common' +import { NgIf } from '@angular/common' import { InternetConnectionService , LocalizationModule } from '@abp/ng.core'; @Component({ selector: 'abp-internet-status', standalone: true, - imports:[NgIf, AsyncPipe, LocalizationModule], + imports:[NgIf, LocalizationModule], template: `
From 54bcefea119c1664d13fd0c548ddb5a5f09446e8 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 7 Jul 2023 07:58:16 +0300 Subject: [PATCH 07/29] change subject to behaviorSubject --- .../core/src/lib/services/internet-connection-service.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index 9afcdeb166..77dc1d4b7c 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -1,6 +1,6 @@ import { DOCUMENT } from '@angular/common'; import { Injectable, computed, inject, signal } from '@angular/core'; -import { Subject } from 'rxjs'; +import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root', @@ -10,14 +10,14 @@ export class InternetConnectionService{ protected readonly navigator = this.window.navigator; /* observable */ - private status$ = new Subject() + private status$ = new BehaviorSubject(navigator.onLine) /* creates writableSignal */ private status = signal(navigator.onLine); constructor(){ - this.window.addEventListener('offline', () => this.setStatus() ); - this.window.addEventListener('online', () => this.setStatus() ); + this.window.addEventListener('offline', () => this.setStatus()); + this.window.addEventListener('online', () => this.setStatus()); } private setStatus(){ From 98f9f2be065c31a8b3632ad7a1ac051c81b4fa05 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 7 Jul 2023 08:03:20 +0300 Subject: [PATCH 08/29] returning observable instead of subject --- .../core/src/lib/services/internet-connection-service.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index 77dc1d4b7c..0ebdff2031 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -9,7 +9,7 @@ export class InternetConnectionService{ protected readonly window = inject(DOCUMENT).defaultView; protected readonly navigator = this.window.navigator; - /* observable */ + /* BehaviorSubject */ private status$ = new BehaviorSubject(navigator.onLine) /* creates writableSignal */ @@ -32,6 +32,6 @@ export class InternetConnectionService{ /* returns OBSERVABLE */ get networkStatus$(){ - return this.status$ + return this.status$.asObservable() } } From 1899fcf946156c3b4d58a91c7b13a6685a2cd92a Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 7 Jul 2023 09:55:48 +0300 Subject: [PATCH 09/29] fix computed func --- .../core/src/lib/services/internet-connection-service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index 0ebdff2031..11d750b558 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -27,7 +27,7 @@ export class InternetConnectionService{ /* returns READONLY ANGULAR SIGNAL */ get networkStatus(){ - return computed(this.status) + return computed(() => this.status()) } /* returns OBSERVABLE */ From 56fa0387346f7b3ecd80f507cfa463b4f4e6dcd6 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 7 Jul 2023 10:00:55 +0300 Subject: [PATCH 10/29] return networkStatus as a variable --- .../core/src/lib/services/internet-connection-service.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index 11d750b558..bb3338d44d 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -14,6 +14,9 @@ export class InternetConnectionService{ /* creates writableSignal */ private status = signal(navigator.onLine); + + /* READONLY ANGULAR SIGNAL */ + networkStatus = computed(() => this.status()) constructor(){ this.window.addEventListener('offline', () => this.setStatus()); @@ -24,11 +27,6 @@ export class InternetConnectionService{ this.status.set(navigator.onLine) this.status$.next(navigator.onLine) } - - /* returns READONLY ANGULAR SIGNAL */ - get networkStatus(){ - return computed(() => this.status()) - } /* returns OBSERVABLE */ get networkStatus$(){ From 39869c22f2a85c0b0ac3c8480f5bb4245c69c1e1 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 7 Jul 2023 14:56:52 +0300 Subject: [PATCH 11/29] adding documentation for InternetConnectionService --- .../UI/Angular/Internet-Connection-Service.md | 71 +++++++++++++++++++ .../internet-connection-status.component.ts | 4 +- 2 files changed, 73 insertions(+), 2 deletions(-) create mode 100644 docs/en/UI/Angular/Internet-Connection-Service.md diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md new file mode 100644 index 0000000000..09ba94aec1 --- /dev/null +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -0,0 +1,71 @@ +# Internet Connection Service +`InternetConnectionService` is a service which is exposed by `@abp/ng.core` package. **If you want to detect whether you are connected to the internet or not, you can use this service.** + + +### internet-connection-service.ts +``` +import { DOCUMENT } from '@angular/common'; +import { Injectable, computed, inject, signal } from '@angular/core'; +import { BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) + +export class InternetConnectionService{ + protected readonly window = inject(DOCUMENT).defaultView; + protected readonly navigator = this.window.navigator; + + /* BehaviorSubject */ + private status$ = new BehaviorSubject(navigator.onLine) + + /* creates writableSignal */ + private status = signal(navigator.onLine); + + /* READONLY ANGULAR SIGNAL */ + networkStatus = computed(() => this.status()) + + constructor(){ + this.window.addEventListener('offline', () => this.setStatus()); + this.window.addEventListener('online', () => this.setStatus()); + } + + private setStatus(){ + this.status.set(navigator.onLine) + this.status$.next(navigator.onLine) + } + + /* returns OBSERVABLE */ + get networkStatus$(){ + return this.status$.asObservable() + } +} +``` + +## Getting Started +When you inject InternetConnectionService you can get the current internet status also if status changes you can catch them immediately. + +As you can see from the code above, `InternetConnectionService` is providing 2 alternatives for catching network status; +1. Signal (readonly) +2. Observable + + +# How To Use +İt's easy just inject the service and get network status + +**You can get via signal** +``` +class someComponent{ + internetConnectionService = inject(InternetConnectionService); + isOnline = this.internetConnectionService.networkStatus +} +``` +**or you can get as observable** +``` +class someComponent{ + internetConnectionService = inject(InternetConnectionService); + isOnline = this.internetConnectionService.networkStatus$ +} +``` + +That's all, feel free to try on your template \ No newline at end of file diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts index c54c71c403..4ad473141a 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts @@ -7,7 +7,7 @@ import { InternetConnectionService , LocalizationModule } from '@abp/ng.core'; standalone: true, imports:[NgIf, LocalizationModule], template: ` -
+
@@ -43,5 +43,5 @@ import { InternetConnectionService , LocalizationModule } from '@abp/ng.core'; }) export class InternetConnectionStatusComponent{ internetConnectionService = inject(InternetConnectionService); - isOffline = this.internetConnectionService.networkStatus + isOnline = this.internetConnectionService.networkStatus } From 7ae6bb6236883fe2649f07f2bb2bf72a710fe081 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 7 Jul 2023 15:09:14 +0300 Subject: [PATCH 12/29] documentation adding js editor --- docs/en/UI/Angular/Internet-Connection-Service.md | 6 +++--- .../core/src/lib/services/internet-connection-service.ts | 4 ---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index 09ba94aec1..1107e64743 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -3,7 +3,7 @@ ### internet-connection-service.ts -``` +```js import { DOCUMENT } from '@angular/common'; import { Injectable, computed, inject, signal } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @@ -54,14 +54,14 @@ As you can see from the code above, `InternetConnectionService` is providing 2 a İt's easy just inject the service and get network status **You can get via signal** -``` +```js class someComponent{ internetConnectionService = inject(InternetConnectionService); isOnline = this.internetConnectionService.networkStatus } ``` **or you can get as observable** -``` +```js class someComponent{ internetConnectionService = inject(InternetConnectionService); isOnline = this.internetConnectionService.networkStatus$ diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index bb3338d44d..9fc298386b 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -9,13 +9,10 @@ export class InternetConnectionService{ protected readonly window = inject(DOCUMENT).defaultView; protected readonly navigator = this.window.navigator; - /* BehaviorSubject */ private status$ = new BehaviorSubject(navigator.onLine) - /* creates writableSignal */ private status = signal(navigator.onLine); - /* READONLY ANGULAR SIGNAL */ networkStatus = computed(() => this.status()) constructor(){ @@ -28,7 +25,6 @@ export class InternetConnectionService{ this.status$.next(navigator.onLine) } - /* returns OBSERVABLE */ get networkStatus$(){ return this.status$.asObservable() } From 5a9a9331bfba43eca4a733e4fe3ffdfc259cc3d6 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 10 Jul 2023 08:33:17 +0300 Subject: [PATCH 13/29] adding test file --- .../tests/internet-connection.service.spec.ts | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts diff --git a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts new file mode 100644 index 0000000000..397f362781 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts @@ -0,0 +1,28 @@ +import { TestBed } from '@angular/core/testing'; + +import { InternetConnectionService } from '../services/internet-connection-service'; + +describe('InternetConnectionService', () => { + let service: InternetConnectionService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(InternetConnectionService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); + + it('#networkStatus should return real value (true | false)', () => { + expect(typeof service.networkStatus()).toEqual('boolean') + expect(typeof !service.networkStatus()).toEqual('boolean') + }); + + it('#networkStatus$ should return real value (true | false)', () => { + service.networkStatus$.subscribe(val=>{ + expect(typeof val).toEqual('boolean') + expect(typeof !val).toEqual('boolean') + }) + }); +}); From ab664a1038c1e776a4d62dfa37352211c981b40c Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 10 Jul 2023 08:36:05 +0300 Subject: [PATCH 14/29] fix doc --- .../UI/Angular/Internet-Connection-Service.md | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index 1107e64743..2e8f23ff3b 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -13,32 +13,32 @@ import { BehaviorSubject } from 'rxjs'; }) export class InternetConnectionService{ - protected readonly window = inject(DOCUMENT).defaultView; - protected readonly navigator = this.window.navigator; +protected readonly window = inject(DOCUMENT).defaultView; +protected readonly navigator = this.window.navigator; - /* BehaviorSubject */ - private status$ = new BehaviorSubject(navigator.onLine) +/* BehaviorSubject */ +private status$ = new BehaviorSubject(navigator.onLine) - /* creates writableSignal */ - private status = signal(navigator.onLine); +/* creates writableSignal */ +private status = signal(navigator.onLine); - /* READONLY ANGULAR SIGNAL */ - networkStatus = computed(() => this.status()) +/* READONLY ANGULAR SIGNAL */ +networkStatus = computed(() => this.status()) - constructor(){ - this.window.addEventListener('offline', () => this.setStatus()); - this.window.addEventListener('online', () => this.setStatus()); - } +constructor(){ + this.window.addEventListener('offline', () => this.setStatus()); + this.window.addEventListener('online', () => this.setStatus()); +} - private setStatus(){ - this.status.set(navigator.onLine) - this.status$.next(navigator.onLine) - } +private setStatus(){ + this.status.set(navigator.onLine) + this.status$.next(navigator.onLine) +} - /* returns OBSERVABLE */ - get networkStatus$(){ - return this.status$.asObservable() - } +/* returns OBSERVABLE */ +get networkStatus$(){ + return this.status$.asObservable() +} } ``` @@ -56,15 +56,15 @@ As you can see from the code above, `InternetConnectionService` is providing 2 a **You can get via signal** ```js class someComponent{ - internetConnectionService = inject(InternetConnectionService); - isOnline = this.internetConnectionService.networkStatus +internetConnectionService = inject(InternetConnectionService); +isOnline = this.internetConnectionService.networkStatus } ``` **or you can get as observable** ```js class someComponent{ - internetConnectionService = inject(InternetConnectionService); - isOnline = this.internetConnectionService.networkStatus$ +internetConnectionService = inject(InternetConnectionService); +isOnline = this.internetConnectionService.networkStatus$ } ``` From 0036bbb91be8d2bc02b3e5f417be19bf74b4178a Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 10 Jul 2023 08:39:59 +0300 Subject: [PATCH 15/29] fixing space problem in doc --- .../UI/Angular/Internet-Connection-Service.md | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index 2e8f23ff3b..1107e64743 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -13,32 +13,32 @@ import { BehaviorSubject } from 'rxjs'; }) export class InternetConnectionService{ -protected readonly window = inject(DOCUMENT).defaultView; -protected readonly navigator = this.window.navigator; + protected readonly window = inject(DOCUMENT).defaultView; + protected readonly navigator = this.window.navigator; -/* BehaviorSubject */ -private status$ = new BehaviorSubject(navigator.onLine) + /* BehaviorSubject */ + private status$ = new BehaviorSubject(navigator.onLine) -/* creates writableSignal */ -private status = signal(navigator.onLine); + /* creates writableSignal */ + private status = signal(navigator.onLine); -/* READONLY ANGULAR SIGNAL */ -networkStatus = computed(() => this.status()) + /* READONLY ANGULAR SIGNAL */ + networkStatus = computed(() => this.status()) -constructor(){ - this.window.addEventListener('offline', () => this.setStatus()); - this.window.addEventListener('online', () => this.setStatus()); -} + constructor(){ + this.window.addEventListener('offline', () => this.setStatus()); + this.window.addEventListener('online', () => this.setStatus()); + } -private setStatus(){ - this.status.set(navigator.onLine) - this.status$.next(navigator.onLine) -} + private setStatus(){ + this.status.set(navigator.onLine) + this.status$.next(navigator.onLine) + } -/* returns OBSERVABLE */ -get networkStatus$(){ - return this.status$.asObservable() -} + /* returns OBSERVABLE */ + get networkStatus$(){ + return this.status$.asObservable() + } } ``` @@ -56,15 +56,15 @@ As you can see from the code above, `InternetConnectionService` is providing 2 a **You can get via signal** ```js class someComponent{ -internetConnectionService = inject(InternetConnectionService); -isOnline = this.internetConnectionService.networkStatus + internetConnectionService = inject(InternetConnectionService); + isOnline = this.internetConnectionService.networkStatus } ``` **or you can get as observable** ```js class someComponent{ -internetConnectionService = inject(InternetConnectionService); -isOnline = this.internetConnectionService.networkStatus$ + internetConnectionService = inject(InternetConnectionService); + isOnline = this.internetConnectionService.networkStatus$ } ``` From 55a3dbae58de19841c5bd2796ba258e96a078711 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 10 Jul 2023 08:42:08 +0300 Subject: [PATCH 16/29] fixing space problem in doc --- .../UI/Angular/Internet-Connection-Service.md | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index 1107e64743..a590b235b5 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -13,32 +13,32 @@ import { BehaviorSubject } from 'rxjs'; }) export class InternetConnectionService{ - protected readonly window = inject(DOCUMENT).defaultView; - protected readonly navigator = this.window.navigator; - - /* BehaviorSubject */ - private status$ = new BehaviorSubject(navigator.onLine) - - /* creates writableSignal */ - private status = signal(navigator.onLine); - - /* READONLY ANGULAR SIGNAL */ - networkStatus = computed(() => this.status()) - - constructor(){ - this.window.addEventListener('offline', () => this.setStatus()); - this.window.addEventListener('online', () => this.setStatus()); - } - - private setStatus(){ - this.status.set(navigator.onLine) - this.status$.next(navigator.onLine) - } - - /* returns OBSERVABLE */ - get networkStatus$(){ - return this.status$.asObservable() - } + protected readonly window = inject(DOCUMENT).defaultView; + protected readonly navigator = this.window.navigator; + + /* BehaviorSubject */ + private status$ = new BehaviorSubject(navigator.onLine) + + /* creates writableSignal */ +private status = signal(navigator.onLine); + + /* READONLY ANGULAR SIGNAL */ + networkStatus = computed(() => this.status()) + + constructor(){ + this.window.addEventListener('offline', () => this.setStatus()); + this.window.addEventListener('online', () => this.setStatus()); + } + + private setStatus(){ + this.status.set(navigator.onLine) + this.status$.next(navigator.onLine) + } + + /* returns OBSERVABLE */ + get networkStatus$(){ + return this.status$.asObservable() + } } ``` @@ -56,15 +56,15 @@ As you can see from the code above, `InternetConnectionService` is providing 2 a **You can get via signal** ```js class someComponent{ - internetConnectionService = inject(InternetConnectionService); - isOnline = this.internetConnectionService.networkStatus + internetConnectionService = inject(InternetConnectionService); + isOnline = this.internetConnectionService.networkStatus } ``` **or you can get as observable** ```js class someComponent{ - internetConnectionService = inject(InternetConnectionService); - isOnline = this.internetConnectionService.networkStatus$ + internetConnectionService = inject(InternetConnectionService); + isOnline = this.internetConnectionService.networkStatus$ } ``` From 1c7137ea206b6edb349cd7128995680a96c6c2a0 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 10 Jul 2023 08:45:27 +0300 Subject: [PATCH 17/29] fixing space problem in doc --- .../UI/Angular/Internet-Connection-Service.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index a590b235b5..146d43f21f 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -13,31 +13,31 @@ import { BehaviorSubject } from 'rxjs'; }) export class InternetConnectionService{ - protected readonly window = inject(DOCUMENT).defaultView; - protected readonly navigator = this.window.navigator; + protected readonly window = inject(DOCUMENT).defaultView; + protected readonly navigator = this.window.navigator; /* BehaviorSubject */ - private status$ = new BehaviorSubject(navigator.onLine) + private status$ = new BehaviorSubject(navigator.onLine) /* creates writableSignal */ -private status = signal(navigator.onLine); + private status = signal(navigator.onLine); /* READONLY ANGULAR SIGNAL */ - networkStatus = computed(() => this.status()) + networkStatus = computed(() => this.status()) constructor(){ this.window.addEventListener('offline', () => this.setStatus()); - this.window.addEventListener('online', () => this.setStatus()); + this.window.addEventListener('online', () => this.setStatus()); } - private setStatus(){ + private setStatus(){ this.status.set(navigator.onLine) this.status$.next(navigator.onLine) } /* returns OBSERVABLE */ - get networkStatus$(){ - return this.status$.asObservable() + get networkStatus$(){ + return this.status$.asObservable() } } ``` From 89e683f83a6210ada888907b450bbaf247f70486 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 10 Jul 2023 08:47:20 +0300 Subject: [PATCH 18/29] fixing space problem in doc --- docs/en/UI/Angular/Internet-Connection-Service.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index 146d43f21f..4405d6c2c2 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -9,7 +9,7 @@ import { Injectable, computed, inject, signal } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ - providedIn: 'root', + providedIn: 'root', }) export class InternetConnectionService{ @@ -31,13 +31,13 @@ export class InternetConnectionService{ } private setStatus(){ - this.status.set(navigator.onLine) - this.status$.next(navigator.onLine) + this.status.set(navigator.onLine) + this.status$.next(navigator.onLine) } /* returns OBSERVABLE */ get networkStatus$(){ - return this.status$.asObservable() + return this.status$.asObservable() } } ``` From 64ee7ce75038180cc6ddffb4c5ed020e31a7b300 Mon Sep 17 00:00:00 2001 From: Masum ULU <49063256+masumulu28@users.noreply.github.com> Date: Mon, 10 Jul 2023 09:28:51 +0300 Subject: [PATCH 19/29] Change sample language in docs --- docs/en/UI/Angular/Internet-Connection-Service.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index 4405d6c2c2..aa1f0d6770 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -3,15 +3,14 @@ ### internet-connection-service.ts -```js +```ts import { DOCUMENT } from '@angular/common'; import { Injectable, computed, inject, signal } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable({ - providedIn: 'root', + providedIn: 'root', }) - export class InternetConnectionService{ protected readonly window = inject(DOCUMENT).defaultView; protected readonly navigator = this.window.navigator; @@ -54,18 +53,18 @@ As you can see from the code above, `InternetConnectionService` is providing 2 a İt's easy just inject the service and get network status **You can get via signal** -```js +```ts class someComponent{ internetConnectionService = inject(InternetConnectionService); isOnline = this.internetConnectionService.networkStatus } ``` **or you can get as observable** -```js +```ts class someComponent{ internetConnectionService = inject(InternetConnectionService); isOnline = this.internetConnectionService.networkStatus$ } ``` -That's all, feel free to try on your template \ No newline at end of file +That's all, feel free to try on your template From 2c05ca21663afdf4901c38cdf969e2fd861c1fc4 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 21 Jul 2023 13:32:47 +0300 Subject: [PATCH 20/29] fixed test file --- .../lib/tests/internet-connection.service.spec.ts | 13 ++++++------- .../internet-connection-status.component.ts | 4 ++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts index 397f362781..9181f430d4 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts @@ -4,7 +4,8 @@ import { InternetConnectionService } from '../services/internet-connection-servi describe('InternetConnectionService', () => { let service: InternetConnectionService; - + const internetConnectionStatus = window.navigator.onLine + beforeEach(() => { TestBed.configureTestingModule({}); service = TestBed.inject(InternetConnectionService); @@ -14,15 +15,13 @@ describe('InternetConnectionService', () => { expect(service).toBeTruthy(); }); - it('#networkStatus should return real value (true | false)', () => { - expect(typeof service.networkStatus()).toEqual('boolean') - expect(typeof !service.networkStatus()).toEqual('boolean') + it('networkStatus value should be same with current internetConnectionStatus', () => { + expect(service.networkStatus()).toEqual(internetConnectionStatus) }); - it('#networkStatus$ should return real value (true | false)', () => { + it('networkStatus$ return value should be with the current internetConnectionStatus', () => { service.networkStatus$.subscribe(val=>{ - expect(typeof val).toEqual('boolean') - expect(typeof !val).toEqual('boolean') + expect(val).toEqual(internetConnectionStatus) }) }); }); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts index 4ad473141a..5592e748a3 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts @@ -1,4 +1,4 @@ -import { Component, inject } from '@angular/core'; +import { Component, computed, inject } from '@angular/core'; import { NgIf } from '@angular/common' import { InternetConnectionService , LocalizationModule } from '@abp/ng.core'; @@ -43,5 +43,5 @@ import { InternetConnectionService , LocalizationModule } from '@abp/ng.core'; }) export class InternetConnectionStatusComponent{ internetConnectionService = inject(InternetConnectionService); - isOnline = this.internetConnectionService.networkStatus + isOnline = computed(() => this.internetConnectionService.networkStatus()) } From 23dc05911cda31355d5072097ab3c5ae9653f364 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 24 Jul 2023 16:49:10 +0300 Subject: [PATCH 21/29] updating test file --- .../services/internet-connection-service.ts | 9 +-- .../tests/internet-connection.service.spec.ts | 56 ++++++++++++++----- .../internet-connection-status.component.ts | 2 +- 3 files changed, 49 insertions(+), 18 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index 9fc298386b..ebf15a9a25 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -6,12 +6,13 @@ import { BehaviorSubject } from 'rxjs'; providedIn: 'root', }) export class InternetConnectionService{ - protected readonly window = inject(DOCUMENT).defaultView; - protected readonly navigator = this.window.navigator; + readonly document = inject(DOCUMENT) + readonly window = this.document.defaultView; + readonly navigator = this.window.navigator; - private status$ = new BehaviorSubject(navigator.onLine) + private status$ = new BehaviorSubject(this.navigator.onLine) - private status = signal(navigator.onLine); + private status = signal(this.navigator.onLine); networkStatus = computed(() => this.status()) diff --git a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts index 9181f430d4..c5dc4bb7c5 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts @@ -1,27 +1,57 @@ -import { TestBed } from '@angular/core/testing'; +import { TestBed} from '@angular/core/testing'; +import { DOCUMENT } from '@angular/common'; import { InternetConnectionService } from '../services/internet-connection-service'; -describe('InternetConnectionService', () => { - let service: InternetConnectionService; - const internetConnectionStatus = window.navigator.onLine +let service: InternetConnectionService; + +describe('Internet connection when disconnected', () => { + let mockDocument = { defaultView: {navigator: {onLine: false}, addEventListener: jest.fn()} } beforeEach(() => { - TestBed.configureTestingModule({}); + TestBed.configureTestingModule({ + providers:[{provide:DOCUMENT, useValue: mockDocument}] + }) service = TestBed.inject(InternetConnectionService); }); - it('should be created', () => { - expect(service).toBeTruthy(); + it('document should be created', () => { + expect(service.document).toEqual(mockDocument); }); - it('networkStatus value should be same with current internetConnectionStatus', () => { - expect(service.networkStatus()).toEqual(internetConnectionStatus) + it('signal value should be false', () => { + expect(service.networkStatus()).toEqual(false); }); - it('networkStatus$ return value should be with the current internetConnectionStatus', () => { - service.networkStatus$.subscribe(val=>{ - expect(val).toEqual(internetConnectionStatus) - }) + it('observable value should be false', + (done: any) => { + service.networkStatus$.subscribe(value => { + expect(value).toBe(false) + done(); + }); }); }); + +describe('Internet connection when connected', () => { + let mockDocument = { defaultView: {navigator: {onLine: true}, addEventListener: jest.fn()} } + + beforeEach(() => { + TestBed.configureTestingModule({ + providers:[{provide:DOCUMENT, useValue: mockDocument}] + }) + service = TestBed.inject(InternetConnectionService); + }); + + + it('signal value should be true', () => { + expect(service.networkStatus()).toEqual(true); + }); + + it('observable value should be true', + (done: any) => { + service.networkStatus$.subscribe(value => { + expect(value).toBe(true) + done(); + }); + }); +}); \ No newline at end of file diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts index 5592e748a3..e649555f40 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/internet-connection-status/internet-connection-status.component.ts @@ -43,5 +43,5 @@ import { InternetConnectionService , LocalizationModule } from '@abp/ng.core'; }) export class InternetConnectionStatusComponent{ internetConnectionService = inject(InternetConnectionService); - isOnline = computed(() => this.internetConnectionService.networkStatus()) + isOnline = this.internetConnectionService.networkStatus } From 503a05cb84314f172504be362438b04462d7d68c Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 24 Jul 2023 17:08:55 +0300 Subject: [PATCH 22/29] update test --- .../src/lib/tests/internet-connection.service.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts index c5dc4bb7c5..b1ad298502 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts @@ -2,6 +2,7 @@ import { TestBed} from '@angular/core/testing'; import { DOCUMENT } from '@angular/common'; import { InternetConnectionService } from '../services/internet-connection-service'; +import { first, takeLast } from 'rxjs'; let service: InternetConnectionService; @@ -25,8 +26,8 @@ describe('Internet connection when disconnected', () => { it('observable value should be false', (done: any) => { - service.networkStatus$.subscribe(value => { - expect(value).toBe(false) + service.networkStatus$.pipe(first()).subscribe(value => { + expect(value).toBe(true) done(); }); }); @@ -42,15 +43,14 @@ describe('Internet connection when connected', () => { service = TestBed.inject(InternetConnectionService); }); - it('signal value should be true', () => { expect(service.networkStatus()).toEqual(true); }); it('observable value should be true', (done: any) => { - service.networkStatus$.subscribe(value => { - expect(value).toBe(true) + service.networkStatus$.pipe(first()).subscribe(value => { + expect(value).toBe(false) done(); }); }); From 42918354ba7c50dbc6ccfafd99d3ecc94f8cb867 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 24 Jul 2023 17:10:06 +0300 Subject: [PATCH 23/29] fix test --- .../core/src/lib/tests/internet-connection.service.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts index b1ad298502..d1625c8db8 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts @@ -27,7 +27,7 @@ describe('Internet connection when disconnected', () => { it('observable value should be false', (done: any) => { service.networkStatus$.pipe(first()).subscribe(value => { - expect(value).toBe(true) + expect(value).toBe(false) done(); }); }); @@ -50,7 +50,7 @@ describe('Internet connection when connected', () => { it('observable value should be true', (done: any) => { service.networkStatus$.pipe(first()).subscribe(value => { - expect(value).toBe(false) + expect(value).toBe(true) done(); }); }); From 1255f8803451ac957624c27f488afecc3a2fad0c Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Tue, 25 Jul 2023 12:02:35 +0300 Subject: [PATCH 24/29] add test 'when internet connection value changes' --- .../services/internet-connection-service.ts | 10 ++--- .../tests/internet-connection.service.spec.ts | 41 ++++++++++++++++++- 2 files changed, 45 insertions(+), 6 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts index ebf15a9a25..d74e65d036 100644 --- a/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/internet-connection-service.ts @@ -17,13 +17,13 @@ export class InternetConnectionService{ networkStatus = computed(() => this.status()) constructor(){ - this.window.addEventListener('offline', () => this.setStatus()); - this.window.addEventListener('online', () => this.setStatus()); + this.window.addEventListener('offline', () => this.setStatus(false)); + this.window.addEventListener('online', () => this.setStatus(true)); } - private setStatus(){ - this.status.set(navigator.onLine) - this.status$.next(navigator.onLine) + setStatus(val:boolean){ + this.status.set(val) + this.status$.next(val) } get networkStatus$(){ diff --git a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts index d1625c8db8..31a63f9006 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts @@ -2,7 +2,8 @@ import { TestBed} from '@angular/core/testing'; import { DOCUMENT } from '@angular/common'; import { InternetConnectionService } from '../services/internet-connection-service'; -import { first, takeLast } from 'rxjs'; +import { BehaviorSubject, first, of, takeLast } from 'rxjs'; +import { computed, signal } from '@angular/core'; let service: InternetConnectionService; @@ -54,4 +55,42 @@ describe('Internet connection when connected', () => { done(); }); }); +}); + +describe('when connection value changes', () => { + let mockDocument = { defaultView: {navigator: {onLine: true}, addEventListener: (eventName,cb)=>{ + window.addEventListener(eventName,cb) + }, dispatchEvent: function(event){ + this.navigator.onLine = !this.navigator.onLine + }}} + + beforeEach(() => { + TestBed.configureTestingModule({ + providers:[{provide:DOCUMENT, useValue: mockDocument}] + }) + service = TestBed.inject(InternetConnectionService); + }); + + it('check is signal value changes', () => { + expect(service.networkStatus()).toEqual(true); + const event = new Event("offline"); + service.window.dispatchEvent(event) + service.setStatus(service.window.navigator.onLine) + expect(service.networkStatus()).toEqual(false); + }); + + it('check is observable value changes',(done: any) => { + const event = new Event("online"); + service.window.dispatchEvent(event) + service.networkStatus$.pipe(first()).subscribe(value => { + expect(value).toEqual(true) + done() + }); + service.window.dispatchEvent(event) + service.setStatus(service.window.navigator.onLine) + service.networkStatus$.pipe().subscribe(value => { + expect(value).toEqual(false) + done() + }); + }); }); \ No newline at end of file From 0f9d77351a4617e41d8d554494112279b93a2d5e Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Tue, 25 Jul 2023 15:01:24 +0300 Subject: [PATCH 25/29] Add example test --- .../tests/internet-connection.service.spec.ts | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts index 31a63f9006..97f009d931 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts @@ -2,15 +2,18 @@ import { TestBed} from '@angular/core/testing'; import { DOCUMENT } from '@angular/common'; import { InternetConnectionService } from '../services/internet-connection-service'; -import { BehaviorSubject, first, of, takeLast } from 'rxjs'; -import { computed, signal } from '@angular/core'; +import { first } from 'rxjs'; let service: InternetConnectionService; describe('Internet connection when disconnected', () => { - let mockDocument = { defaultView: {navigator: {onLine: false}, addEventListener: jest.fn()} } - - beforeEach(() => { + const events = {}; + const addEventListener = jest.fn((event, callback) => { + events[event] = callback; + }); + const mockDocument = { defaultView: {navigator: {onLine: false}, addEventListener } } + + beforeAll(() => { TestBed.configureTestingModule({ providers:[{provide:DOCUMENT, useValue: mockDocument}] }) @@ -32,11 +35,21 @@ describe('Internet connection when disconnected', () => { done(); }); }); + + test.each(['offline',"online"])('should addEventListener for "%i",event',(v)=>{ + expect(events[v]).toBeTruthy() + }) + + test.each([['offline',false],["online",true]])('should called %i, then value must be %i',(eventName,value)=>{ + events[eventName]() + expect(service.networkStatus()).toEqual(value); + }) + }); describe('Internet connection when connected', () => { - let mockDocument = { defaultView: {navigator: {onLine: true}, addEventListener: jest.fn()} } - + const mockDocument = { defaultView: {navigator: {onLine: true}, addEventListener: jest.fn()} } + beforeEach(() => { TestBed.configureTestingModule({ providers:[{provide:DOCUMENT, useValue: mockDocument}] @@ -58,9 +71,9 @@ describe('Internet connection when connected', () => { }); describe('when connection value changes', () => { - let mockDocument = { defaultView: {navigator: {onLine: true}, addEventListener: (eventName,cb)=>{ + const mockDocument = { defaultView: {navigator: {onLine: true}, addEventListener: (eventName,cb)=>{ window.addEventListener(eventName,cb) - }, dispatchEvent: function(event){ + }, dispatchEvent: function(){ this.navigator.onLine = !this.navigator.onLine }}} @@ -70,7 +83,7 @@ describe('when connection value changes', () => { }) service = TestBed.inject(InternetConnectionService); }); - + it('check is signal value changes', () => { expect(service.networkStatus()).toEqual(true); const event = new Event("offline"); @@ -93,4 +106,4 @@ describe('when connection value changes', () => { done() }); }); -}); \ No newline at end of file +}); From dc04ad9757def8a3b664e66b69888210e19b380f Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Tue, 25 Jul 2023 22:44:28 +0300 Subject: [PATCH 26/29] updating test file --- .../tests/internet-connection.service.spec.ts | 85 +++++++++---------- 1 file changed, 38 insertions(+), 47 deletions(-) diff --git a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts index 97f009d931..b4809471eb 100644 --- a/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts +++ b/npm/ng-packs/packages/core/src/lib/tests/internet-connection.service.spec.ts @@ -12,7 +12,6 @@ describe('Internet connection when disconnected', () => { events[event] = callback; }); const mockDocument = { defaultView: {navigator: {onLine: false}, addEventListener } } - beforeAll(() => { TestBed.configureTestingModule({ providers:[{provide:DOCUMENT, useValue: mockDocument}] @@ -36,74 +35,66 @@ describe('Internet connection when disconnected', () => { }); }); - test.each(['offline',"online"])('should addEventListener for "%i",event',(v)=>{ + test.each(['offline','online'])('should addEventListener for %p, event',(v)=>{ expect(events[v]).toBeTruthy() }) - test.each([['offline',false],["online",true]])('should called %i, then value must be %i',(eventName,value)=>{ + test.each([['offline',false],["online",true]])('when %p called ,then signal value must be %p',(eventName,value)=>{ events[eventName]() expect(service.networkStatus()).toEqual(value); }) + test.each([['offline',false],["online",true]])('when %p called,then observable must return %p',(eventName,value)=>{ + events[eventName]() + service.networkStatus$.subscribe(val=>{ + expect(val).toEqual(value) + }) + }) }); -describe('Internet connection when connected', () => { - const mockDocument = { defaultView: {navigator: {onLine: true}, addEventListener: jest.fn()} } - - beforeEach(() => { +describe('when connection value changes for signals', () => { + const events = {}; + const addEventListener = jest.fn((event, callback) => { + events[event] = callback; + }); + const mockDocument = { defaultView: {navigator: {onLine: false}, addEventListener } } + beforeAll(() => { TestBed.configureTestingModule({ providers:[{provide:DOCUMENT, useValue: mockDocument}] }) service = TestBed.inject(InternetConnectionService); }); - it('signal value should be true', () => { + it('signal value must be false when offline event is called while internet is connected', () => { + events['online']() expect(service.networkStatus()).toEqual(true); + events['offline']() + expect(service.networkStatus()).toEqual(false); }); - it('observable value should be true', - (done: any) => { - service.networkStatus$.pipe(first()).subscribe(value => { - expect(value).toBe(true) - done(); - }); + it('signal value must be true when online event is called while internet is disconnected', () => { + events['offline']() + expect(service.networkStatus()).toEqual(false); + events['online']() + expect(service.networkStatus()).toEqual(true); }); -}); - -describe('when connection value changes', () => { - const mockDocument = { defaultView: {navigator: {onLine: true}, addEventListener: (eventName,cb)=>{ - window.addEventListener(eventName,cb) - }, dispatchEvent: function(){ - this.navigator.onLine = !this.navigator.onLine - }}} - beforeEach(() => { - TestBed.configureTestingModule({ - providers:[{provide:DOCUMENT, useValue: mockDocument}] + it('observable value must be false when offline event is called while internet is connected', (done:any) => { + events['online']() + events['offline']() + service.networkStatus$.subscribe(val=>{ + expect(val).toEqual(false) + done() }) - service = TestBed.inject(InternetConnectionService); }); - it('check is signal value changes', () => { - expect(service.networkStatus()).toEqual(true); - const event = new Event("offline"); - service.window.dispatchEvent(event) - service.setStatus(service.window.navigator.onLine) - expect(service.networkStatus()).toEqual(false); - }); - - it('check is observable value changes',(done: any) => { - const event = new Event("online"); - service.window.dispatchEvent(event) - service.networkStatus$.pipe(first()).subscribe(value => { - expect(value).toEqual(true) - done() - }); - service.window.dispatchEvent(event) - service.setStatus(service.window.navigator.onLine) - service.networkStatus$.pipe().subscribe(value => { - expect(value).toEqual(false) + it('observable value must be true when online event is called while internet is disconnected', (done:any) => { + events['offline']() + events['online']() + service.networkStatus$.subscribe(val=>{ + console.log(val); + expect(val).toEqual(true) done() - }); + }) }); -}); +}); \ No newline at end of file From da4a3594fb9d0bb0bb172f71ebd89d04d962770e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= <72804437+Sinan997@users.noreply.github.com> Date: Sun, 30 Jul 2023 13:53:02 +0300 Subject: [PATCH 27/29] Update Internet-Connection-Service.md --- .../UI/Angular/Internet-Connection-Service.md | 48 ++----------------- 1 file changed, 4 insertions(+), 44 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index aa1f0d6770..0a8aca69f4 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -1,61 +1,21 @@ # Internet Connection Service `InternetConnectionService` is a service which is exposed by `@abp/ng.core` package. **If you want to detect whether you are connected to the internet or not, you can use this service.** - -### internet-connection-service.ts -```ts -import { DOCUMENT } from '@angular/common'; -import { Injectable, computed, inject, signal } from '@angular/core'; -import { BehaviorSubject } from 'rxjs'; - -@Injectable({ - providedIn: 'root', -}) -export class InternetConnectionService{ - protected readonly window = inject(DOCUMENT).defaultView; - protected readonly navigator = this.window.navigator; - - /* BehaviorSubject */ - private status$ = new BehaviorSubject(navigator.onLine) - - /* creates writableSignal */ - private status = signal(navigator.onLine); - - /* READONLY ANGULAR SIGNAL */ - networkStatus = computed(() => this.status()) - - constructor(){ - this.window.addEventListener('offline', () => this.setStatus()); - this.window.addEventListener('online', () => this.setStatus()); - } - - private setStatus(){ - this.status.set(navigator.onLine) - this.status$.next(navigator.onLine) - } - - /* returns OBSERVABLE */ - get networkStatus$(){ - return this.status$.asObservable() - } -} -``` - ## Getting Started When you inject InternetConnectionService you can get the current internet status also if status changes you can catch them immediately. -As you can see from the code above, `InternetConnectionService` is providing 2 alternatives for catching network status; +`InternetConnectionService` is providing 2 alternatives for catching network status; 1. Signal (readonly) 2. Observable # How To Use -İt's easy just inject the service and get network status +İt's easy just inject the service and get network status. **You can get via signal** ```ts class someComponent{ - internetConnectionService = inject(InternetConnectionService); + internetConnectionService = inject(InternetConnectionService); isOnline = this.internetConnectionService.networkStatus } ``` @@ -67,4 +27,4 @@ class someComponent{ } ``` -That's all, feel free to try on your template +To see how we implement to template, check `InternetConnectionStatusComponent` From 42cb9293e226365508dc6a6f6c6fcc31e6979fe8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= <72804437+Sinan997@users.noreply.github.com> Date: Fri, 4 Aug 2023 15:38:13 +0300 Subject: [PATCH 28/29] Update Internet-Connection-Service.md --- docs/en/UI/Angular/Internet-Connection-Service.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index 0a8aca69f4..9ef26a082e 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -14,14 +14,14 @@ When you inject InternetConnectionService you can get the current internet statu **You can get via signal** ```ts -class someComponent{ +class SomeComponent{ internetConnectionService = inject(InternetConnectionService); isOnline = this.internetConnectionService.networkStatus } ``` **or you can get as observable** ```ts -class someComponent{ +class SomeComponent{ internetConnectionService = inject(InternetConnectionService); isOnline = this.internetConnectionService.networkStatus$ } From 18fd9d94882188c3ee9a2194aedc8fbe67343434 Mon Sep 17 00:00:00 2001 From: Hamza Albreem <94292623+braim23@users.noreply.github.com> Date: Fri, 11 Aug 2023 18:07:51 +0300 Subject: [PATCH 29/29] Update Internet-Connection-Service.md --- docs/en/UI/Angular/Internet-Connection-Service.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/en/UI/Angular/Internet-Connection-Service.md b/docs/en/UI/Angular/Internet-Connection-Service.md index 9ef26a082e..d9002b660e 100644 --- a/docs/en/UI/Angular/Internet-Connection-Service.md +++ b/docs/en/UI/Angular/Internet-Connection-Service.md @@ -1,16 +1,16 @@ # Internet Connection Service -`InternetConnectionService` is a service which is exposed by `@abp/ng.core` package. **If you want to detect whether you are connected to the internet or not, you can use this service.** +`InternetConnectionService` is a service which is exposed by the `@abp/ng.core` package. **You can use this service in order to check your internet connection** ## Getting Started -When you inject InternetConnectionService you can get the current internet status also if status changes you can catch them immediately. +When you inject the InternetConnectionService you can get the current internet status, and it gets immediately updated if the status changes. -`InternetConnectionService` is providing 2 alternatives for catching network status; +`InternetConnectionService` provides two choices to catch the network status: 1. Signal (readonly) 2. Observable # How To Use -İt's easy just inject the service and get network status. +İt's easy, just inject the service and get the network status. **You can get via signal** ```ts @@ -19,7 +19,7 @@ class SomeComponent{ isOnline = this.internetConnectionService.networkStatus } ``` -**or you can get as observable** +**or you can get the observable** ```ts class SomeComponent{ internetConnectionService = inject(InternetConnectionService); @@ -27,4 +27,4 @@ class SomeComponent{ } ``` -To see how we implement to template, check `InternetConnectionStatusComponent` +To see how we implement to the template, check the `InternetConnectionStatusComponent`