mgr/dashboard: add frontend unit tests for rgw multisite sync status

card

Fixes: https://tracker.ceph.com/issues/64039
Signed-off-by: Aashish Sharma <aasharma@redhat.com>
(cherry picked from commit d169a206d11283428f7eb74a928525bc93f58915)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.spec.ts
index 1c7ce8a78657b2692de10402aaf9e26f85574dc9..944435cba16aca9020748bdfe126ff30aa7764cd 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-data-info/rgw-sync-data-info.component.spec.ts
@@ -1,15 +1,17 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 
 import { RgwSyncDataInfoComponent } from './rgw-sync-data-info.component';
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { configureTestBed } from '~/testing/unit-test-helper';
+import { RelativeDatePipe } from '~/app/shared/pipes/relative-date.pipe';
+import { By } from '@angular/platform-browser';
 
 describe('RgwSyncDataInfoComponent', () => {
   let component: RgwSyncDataInfoComponent;
   let fixture: ComponentFixture<RgwSyncDataInfoComponent>;
 
   configureTestBed({
-    declarations: [RgwSyncDataInfoComponent],
+    declarations: [RgwSyncDataInfoComponent, RelativeDatePipe],
     imports: [NgbPopoverModule]
   });
 
@@ -22,4 +24,51 @@ describe('RgwSyncDataInfoComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display "Up to Date" badge when zone is up to date', () => {
+    component.zone = {
+      timestamp: null
+    };
+    fixture.detectChanges();
+    const upToDateBadge = fixture.debugElement.query(By.css('.badge-success'));
+    expect(upToDateBadge).toBeTruthy();
+    expect(upToDateBadge.nativeElement.textContent).toEqual('Up to Date');
+  });
+
+  it('should display correct sync status and last synced time', fakeAsync(() => {
+    component.zone = { syncstatus: 'Syncing', timestamp: new Date(Date.now() - 10 * 60 * 1000) };
+    fixture.detectChanges();
+
+    const statusElement = fixture.debugElement.query(By.css('li b'));
+    expect(statusElement.nativeElement.textContent).toContain('Status:');
+
+    const lastSyncedElement = fixture.debugElement.query(By.css('li.mt-4.fw-bold'));
+    expect(lastSyncedElement.nativeElement.textContent).toContain('Last Synced:');
+    const lastSyncedTimestamp = fixture.debugElement.query(By.css('.badge-info'));
+    expect(lastSyncedTimestamp.nativeElement.textContent).toEqual('10 minutes ago');
+  }));
+
+  it('should display sync status in the popover', () => {
+    component.zone = {
+      syncstatus: 'Syncing',
+      timestamp: new Date(Date.now() - 10 * 60 * 1000),
+      fullSyncStatus: [
+        'full sync: 0/128 shards',
+        'incremental sync:128/128 shards',
+        'Data is behind on 31 shards'
+      ]
+    };
+    fixture.detectChanges();
+    const syncStatus = fixture.debugElement.query(By.css('.text-primary'));
+    expect(syncStatus).toBeTruthy();
+    expect(syncStatus.nativeElement.textContent).toEqual('Syncing');
+    const syncPopover = fixture.debugElement.query(By.css('a'));
+    syncPopover.triggerEventHandler('click', null);
+    fixture.detectChanges();
+    expect(syncPopover).toBeTruthy();
+    const syncPopoverText = fixture.debugElement.query(By.css('.text-center'));
+    expect(syncPopoverText.nativeElement.textContent).toEqual(
+      'Sync Status:Full Sync:0/128 Shards Incremental Sync:128/128 Shards: Data Is Behind On 31 Shards'
+    );
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.spec.ts
index df3748b175b355511eee3d73956359a5ce18dfb3..0b7e4ede377dce02ac45f4a66f3d172ed4204247 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-metadata-info/rgw-sync-metadata-info.component.spec.ts
@@ -3,13 +3,15 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RgwSyncMetadataInfoComponent } from './rgw-sync-metadata-info.component';
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { configureTestBed } from '~/testing/unit-test-helper';
+import { By } from '@angular/platform-browser';
+import { RelativeDatePipe } from '~/app/shared/pipes/relative-date.pipe';
 
 describe('RgwSyncMetadataInfoComponent', () => {
   let component: RgwSyncMetadataInfoComponent;
   let fixture: ComponentFixture<RgwSyncMetadataInfoComponent>;
 
   configureTestBed({
-    declarations: [RgwSyncMetadataInfoComponent],
+    declarations: [RgwSyncMetadataInfoComponent, RelativeDatePipe],
     imports: [NgbPopoverModule]
   });
 
@@ -22,4 +24,54 @@ describe('RgwSyncMetadataInfoComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display "Up to Date" badge when zone is up to date', () => {
+    component.metadataSyncInfo = {
+      timestamp: null
+    };
+    fixture.detectChanges();
+    const upToDateBadge = fixture.debugElement.query(By.css('.badge-success'));
+    expect(upToDateBadge).toBeTruthy();
+    expect(upToDateBadge.nativeElement.textContent).toEqual('Up to Date');
+  });
+
+  it('should display correct sync status and last synced time', () => {
+    component.metadataSyncInfo = {
+      syncstatus: 'Syncing',
+      timestamp: new Date(Date.now() - 10 * 60 * 1000)
+    };
+    fixture.detectChanges();
+
+    const statusElement = fixture.debugElement.query(By.css('li b'));
+    expect(statusElement.nativeElement.textContent).toContain('Status:');
+
+    const lastSyncedElement = fixture.debugElement.query(By.css('li.mt-4.fw-bold'));
+    expect(lastSyncedElement.nativeElement.textContent).toContain('Last Synced:');
+    const lastSyncedTimestamp = fixture.debugElement.query(By.css('.badge-info'));
+    expect(lastSyncedTimestamp.nativeElement.textContent).toEqual('10 minutes ago');
+  });
+
+  it('should display sync status in the popover', () => {
+    component.metadataSyncInfo = {
+      syncstatus: 'Syncing',
+      timestamp: new Date(Date.now() - 10 * 60 * 1000),
+      fullSyncStatus: [
+        'full sync:0/128 shards',
+        'incremental sync:128/128 shards',
+        'Data is behind on 31 shards'
+      ]
+    };
+    fixture.detectChanges();
+    const syncStatus = fixture.debugElement.query(By.css('.text-primary'));
+    expect(syncStatus).toBeTruthy();
+    expect(syncStatus.nativeElement.textContent).toEqual('Syncing');
+    const syncPopover = fixture.debugElement.query(By.css('a'));
+    syncPopover.triggerEventHandler('click', null);
+    fixture.detectChanges();
+    expect(syncPopover).toBeTruthy();
+    const syncPopoverText = fixture.debugElement.query(By.css('.text-center'));
+    expect(syncPopoverText.nativeElement.textContent).toEqual(
+      'Metadata Sync Status:Full Sync:0/128 Shards Incremental Sync:128/128 Shards Data Is Behind On 31 Shards'
+    );
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.spec.ts
index aefb32794a71cccd89c2f5a9f01978ff5826321b..1bce83fcc5a6f0c2225e5ec75ff0e85d9a97bf2c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-sync-primary-zone/rgw-sync-primary-zone.component.spec.ts
@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RgwSyncPrimaryZoneComponent } from './rgw-sync-primary-zone.component';
 import { configureTestBed } from '~/testing/unit-test-helper';
+import { By } from '@angular/platform-browser';
 
 describe('RgwSyncPrimaryZoneComponent', () => {
   let component: RgwSyncPrimaryZoneComponent;
@@ -20,4 +21,20 @@ describe('RgwSyncPrimaryZoneComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display realm, zonegroup, and zone in badges', () => {
+    component.realm = 'Realm';
+    component.zonegroup = 'Zonegroup';
+    component.zone = 'Zone';
+    fixture.detectChanges();
+
+    const realmBadge = fixture.debugElement.query(By.css('li:nth-child(2)'));
+    expect(realmBadge.nativeElement.textContent).toContain('Realm');
+
+    const zonegroupBadge = fixture.debugElement.query(By.css('p'));
+    expect(zonegroupBadge.nativeElement.textContent).toContain('Zonegroup');
+
+    const zoneBadge = fixture.debugElement.query(By.css('li:nth-child(8)'));
+    expect(zoneBadge.nativeElement.textContent).toContain('Zone');
+  });
 });