Merge branch 'master' of github.com:azerothcore/Keira3

Author: FrancescoBorzi

apps/keira/src/app/features/dashboard/dashboard.component.html

@@ -8,10 +8,14 @@
   </div>
 
   <div class="content-block">
-    <p class="lead mb-3" [translate]="'DASHBOARD.SYSTEM_DETAILS'"></p>
-    <div *ngIf="error" class="alert alert-danger error-box mt-2" id="database-warning">
+    <p class="lead mb-3">
+      {{ 'DASHBOARD.SYSTEM_DETAILS' | translate }}
+      <button type="button" class="btn btn-primary btn-sm float-end" id="reload-btn" (click)="reload()">
+        <i class="fa fa-sync fa-sm"></i> {{ 'RELOAD' | translate }}
+      </button>
+    </p>
+    <div *ngIf="wrongEmuWarning" class="alert alert-danger error-box mt-2" id="database-warning">
       <p [innerHTML]="'DASHBOARD.SYSTEM_WARNING' | translate: { DATABASE_NAME: databaseName }"></p>
-
       <ul>
         <li [innerHTML]="'DASHBOARD.SYSTEM_WARNING_1' | translate"></li>
         <li [innerHTML]="'DASHBOARD.SYSTEM_WARNING_2' | translate"></li>

apps/keira/src/app/features/dashboard/dashboard.component.spec.ts

@@ -20,15 +20,18 @@ class DashboardComponentPage extends PageObject<DashboardComponent> {
   get dbVersion(): HTMLTableCellElement {
     return this.query<HTMLTableCellElement>('#db-version');
   }
-  get dbWorldVersion(): HTMLTableCellElement {
-    return this.query<HTMLTableCellElement>('#db-world-version');
-  }
-  get dbWarning(): HTMLDivElement {
-    return this.query<HTMLDivElement>('#database-warning', false);
+  // get dbWorldVersion(): HTMLTableCellElement {
+  //   return this.query<HTMLTableCellElement>('#db-world-version');
+  // }
+  dbWarning(assert = true): HTMLDivElement {
+    return this.query<HTMLDivElement>('#database-warning', assert);
   }
   get commitHashUrl(): HTMLAnchorElement {
     return this.query<HTMLAnchorElement>('#commit-hash-url');
   }
+  get reloadBtn(): HTMLButtonElement {
+    return this.query<HTMLButtonElement>('#reload-btn');
+  }
 }
 
 describe('DashboardComponent', () => {
@@ -38,6 +41,12 @@ describe('DashboardComponent', () => {
     db_version: 'ACDB 335.3 (dev)',
     cache_id: 3,
   };
+  const wrongVersionRow: VersionRow = {
+    core_version: 'ShinCore rev. 2bcedc2859e7 2019-02-17 10:04:09 +0100 (master branch) (Unix, Debug)',
+    core_revision: '2bcedc2859e7',
+    db_version: 'SHINDB 335.3 (dev)',
+    cache_id: 3,
+  };
   const worldDbVersion = '2019_02_17_02';
   const versionDbRow: VersionDbRow = {
     sql_rev: 123,
@@ -66,20 +75,19 @@ describe('DashboardComponent', () => {
   };
 
   it('should correctly display the versions', () => {
-    const { fixture, page, component } = setup();
-    fixture.detectChanges();
+    const { page } = setup();
+    page.detectChanges();
 
     expect(page.coreVersion.innerHTML).toContain(versionRow.core_version);
     expect(page.coreRevision.innerHTML).toContain(versionRow.core_revision);
     expect(page.dbVersion.innerHTML).toContain(versionRow.db_version);
     expect(page.commitHashUrl.href).toEqual(`https://github.com/azerothcore/azerothcore-wotlk/commit/${versionRow.core_revision}`);
     // expect(page.dbWorldVersion.innerHTML).toContain(worldDbVersion);
-    expect(page.dbWarning).toBe(null);
-    expect(component.error).toBe(false);
+    expect(page.dbWarning(false)).toBeFalsy();
   });
 
   it('if the revision hash ends with a "+", it should be stripped in the url', () => {
-    const { fixture, page } = setup();
+    const { page } = setup();
     when(MockedMysqlQueryService.query('SELECT * FROM version')).thenReturn(
       of([
         {
@@ -89,50 +97,78 @@ describe('DashboardComponent', () => {
       ]),
     );
 
-    fixture.detectChanges();
+    page.detectChanges();
 
     expect(page.commitHashUrl.href).toEqual(`https://github.com/azerothcore/azerothcore-wotlk/commit/${versionRow.core_revision}`);
   });
 
+  describe('refresh button', () => {
+    it('when the refresh button is clicked, it should correctly reload the data', () => {
+      const { page } = setup();
+      page.detectChanges();
+      expect(page.coreVersion.innerHTML).toContain(versionRow.core_version);
+
+      const newVersion = 'A new fantastic AzerothCore version!';
+      when(MockedMysqlQueryService.query('SELECT * FROM version')).thenReturn(
+        of([
+          {
+            ...versionRow,
+            core_version: newVersion,
+          },
+        ]),
+      );
+      page.reloadBtn.click();
+      page.detectChanges();
+
+      expect(page.coreVersion.innerHTML).not.toContain(versionRow.core_version);
+      expect(page.coreVersion.innerHTML).toContain(newVersion);
+    });
+
+    it('when clicked after an error, it should clear the error out', () => {
+      const { page } = setup();
+
+      when(MockedMysqlQueryService.query(anyString())).thenReturn(of([wrongVersionRow]));
+      page.detectChanges();
+      expect(page.dbWarning()).toBeDefined();
+
+      when(MockedMysqlQueryService.query(anyString())).thenReturn(of([versionRow]));
+      page.reloadBtn.click();
+      page.detectChanges();
+
+      expect(page.dbWarning(false)).toBeFalsy();
+    });
+  });
+
   it('should correctly give error if the query does not return the data in the expected format', () => {
-    const { fixture, page, component } = setup();
+    const { page } = setup();
     when(MockedMysqlQueryService.query(anyString())).thenReturn(of([]));
     const errorSpy = spyOn(console, 'error');
 
-    fixture.detectChanges();
+    page.detectChanges();
 
     expect(errorSpy).toHaveBeenCalledTimes(1);
-    expect(page.dbWarning).toBe(null);
-    expect(component.error).toBe(false);
+    expect(page.dbWarning(false)).toBeFalsy();
   });
 
   it('should correctly give error if the query returns an error', () => {
-    const { fixture, page, component } = setup();
+    const { page } = setup();
     const error = 'some error';
     when(MockedMysqlQueryService.query(anyString())).thenReturn(throwError(error));
     const errorSpy = spyOn(console, 'error');
 
-    fixture.detectChanges();
+    page.detectChanges();
 
     expect(errorSpy).toHaveBeenCalledTimes(1);
     expect(errorSpy).toHaveBeenCalledWith(error);
-    expect(page.dbWarning).toBeDefined();
-    expect(component.error).toBe(true);
+    expect(page.dbWarning()).toBeDefined();
   });
 
   it('should correctly give error if the query returns an error', () => {
-    const { fixture, page, component } = setup();
-    const wrongVersionRow: VersionRow = {
-      core_version: 'ShinCore rev. 2bcedc2859e7 2019-02-17 10:04:09 +0100 (master branch) (Unix, Debug)',
-      core_revision: '2bcedc2859e7',
-      db_version: 'SHINDB 335.3 (dev)',
-      cache_id: 3,
-    };
+    const { page } = setup();
     when(MockedMysqlQueryService.query(anyString())).thenReturn(of([wrongVersionRow]));
 
-    fixture.detectChanges();
+    page.detectChanges();
 
-    expect(page.dbWarning).toBeDefined();
-    expect(component.error).toBe(true);
+    expect(page.dbWarning()).toBeDefined();
   });
 });

apps/keira/src/app/features/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 
 import { AC_DISCORD_URL, KEIRA3_REPO_URL, PAYPAL_DONATE_URL } from '@keira-constants/general';
 import { ConfigService } from '@keira-shared/services/config.service';
@@ -19,31 +19,31 @@ export class DashboardComponent extends SubscriptionHandler implements OnInit {
   protected coreVersions: VersionRow;
   protected commitUrl: string;
   protected dbWorldVersion: string;
-  error = false;
+  protected wrongEmuWarning = false;
   protected readonly KEIRA_VERSION = packageInfo.version;
   protected readonly PAYPAL_DONATE_URL = PAYPAL_DONATE_URL;
   protected readonly AC_DISCORD_URL = AC_DISCORD_URL;
   protected readonly KEIRA3_REPO_URL = KEIRA3_REPO_URL;
   protected readonly NAVIGATOR_APP_VERSION = window.navigator.userAgent;
 
+  private readonly queryService = inject(MysqlQueryService);
+  protected readonly configService = inject(ConfigService);
+  private readonly mysqlService = inject(MysqlService);
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+
   get databaseName(): string {
     return this.mysqlService.config.database;
   }
 
-  constructor(
-    private readonly queryService: MysqlQueryService,
-    public readonly configService: ConfigService,
-    private readonly mysqlService: MysqlService,
-    private readonly changeDetectorRef: ChangeDetectorRef,
-  ) {
-    super();
+  ngOnInit(): void {
+    this.reload();
   }
 
-  ngOnInit(): void {
+  protected reload(): void {
+    this.wrongEmuWarning = false;
     this.getCoreVersion();
     // this.getWorldDbVersion();
   }
-
   private getCoreVersion(): void {
     const query = 'SELECT * FROM version';
 
@@ -56,7 +56,7 @@ export class DashboardComponent extends SubscriptionHandler implements OnInit {
 
             /* istanbul ignore next */
             if (!this.coreVersions.db_version.startsWith('ACDB') || !this.coreVersions.core_version.startsWith('AzerothCore')) {
-              this.error = true;
+              this.wrongEmuWarning = true;
             }
 
             this.changeDetectorRef.markForCheck();
@@ -65,7 +65,7 @@ export class DashboardComponent extends SubscriptionHandler implements OnInit {
           }
         },
         error: (error) => {
-          this.error = true;
+          this.wrongEmuWarning = true;
           console.error(error);
         },
       }),