@ieeesa-npm/tenants 0.4.2 → 0.4.4

package/src/lib/components/view-tenants-list/view-tenants-list.component.html

@@ -0,0 +1,32 @@
+<div
+  class="ieeesa-view-tenants-list"
+  [ngClass]="{ 'ieeesa-view-tenants-list__mobile': isMobileView }"
+>
+  <p class="ieeesa-headline-lg-32 py-3 mb-0">
+    {{ tenantsPageInfo.tenantsTitle }}
+  </p>
+  <div class="ieeesa-view-tenants-list__content">
+    <div class="d-flex justify-content-end">
+      <button
+        mat-button
+        class="mat-tertiary-button me-3"
+        [attr.aria-label]="viewTenantsConstants?.ariaLabel?.add"
+        (click)="openCreateTenantForm()"
+        *ngIf="validateAccess(permissionType.MANAGE_TENANT)"
+      >
+        {{ viewTenantsConstants?.addTenant }}
+      </button>
+    </div>
+    <ieeesa-data-table
+      [tableDataInfo]="tableData"
+      [columnSchemaInfo]="columnSchema"
+      [isCellTextOverflowEllipsis]="true"
+      [tableActions]="tableActions"
+      [paginatorConfig]="paginatorConfig"
+      [defaultSortedColumn]="defaultSortedColumn"
+      (sortChange)="onSortTenants($event)"
+      (paginationChange)="onTablePaginationChange($event)"
+      (rowLink)="navigateToViewTenantDetails($event)"
+    ></ieeesa-data-table>
+  </div>
+</div>

package/src/lib/components/view-tenants-list/view-tenants-list.component.scss

@@ -0,0 +1,35 @@
+@import "styles.scss";
+.ieeesa-view-tenants-list {
+  background-color: $ieeesa-background-color-gray;
+  padding: 0px 24px 48px 24px;
+  &__mobile {
+    background-color: $ieeesa-white;
+  }
+  &__content {
+    background-color: $ieeesa-white;
+    box-shadow: $ieeesa-box-shadow-15;
+    padding: 24px 0px;
+    .cdk-column-appId {
+      min-width: 9em;
+      max-width: 9em;
+    }
+    .cdk-column-appTitle {
+      min-width: 10em;
+      max-width: 10em;
+    }
+    .cdk-column-appDescription {
+      min-width: 20.25em;
+      max-width: 20.25em;
+    }
+    .cdk-column-features {
+      min-width: 17em;
+      max-width: 17em;
+    }
+  }
+  .ieeesa-data-table {
+    &__pagination-container {
+      padding-left: 11px;
+      padding-right: 11px;
+    }
+  }
+}

package/src/lib/components/view-tenants-list/view-tenants-list.component.spec.ts

@@ -0,0 +1,464 @@
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  flush,
+  tick,
+} from '@angular/core/testing';
+import { ViewTenantsListComponent } from './view-tenants-list.component';
+import {
+  HttpClient,
+  HttpErrorResponse,
+  HttpHandler,
+} from '@angular/common/http';
+import { Router, RouterEvent } from '@angular/router';
+import { SharedService } from '@ieeesa-npm/shared';
+import { TenantApplicationsService } from '../../services/tenant-applications.service';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  IconButtonComponent,
+  DataTableComponent,
+  ModalComponent,
+} from '@ieeesa-npm/presentation';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Observable, ReplaySubject } from 'rxjs';
+import {
+  AlertType,
+  AlertsService,
+  GlobalErrorHandlerService,
+} from '@ieeesa-npm/utility';
+import { PageEvent } from '@angular/material/paginator';
+import { Sort } from '@angular/material/sort';
+import { TenantsMocks } from '../../assets/tenants-mock';
+import { RouterTestingModule } from '@angular/router/testing';
+import * as constants from '../../assets/constants.json';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { CreateTenantApplicationComponent } from '../create-tenant-application/create-tenant-application.component';
+import {
+  ViewTenantsColumnSchemaDef,
+  GetTenantsPayload,
+  SortOrderBy,
+} from '../../models/table-column-schema-view-tenant-list.model';
+describe('ViewTenantsListComponent', () => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const constant: any = constants;
+  let component: ViewTenantsListComponent;
+  let fixture: ComponentFixture<ViewTenantsListComponent>;
+  let sharedService: SharedService;
+  let alertsService: AlertsService;
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  let tenantApplicationsService: TenantApplicationsService;
+  let globalErrorHandlerService: GlobalErrorHandlerService;
+  const routerEventSubject = new ReplaySubject<RouterEvent>(1);
+  const mockRouter = {
+    navigate: jasmine.createSpy('navigate'),
+    events: routerEventSubject.asObservable(),
+    url: 'test/url',
+  };
+  const dialogOptions = {
+    heading: 'New Application',
+    isCloseNeeded: true,
+    componentReference: CreateTenantApplicationComponent,
+    modalType: 1,
+  };
+  const emptyFieldValueReplacedBy =
+    constant?.viewTenants?.emptyFieldValueReplacedBy;
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ViewTenantsListComponent,
+        CommonModule,
+        MatButtonModule,
+        IconButtonComponent,
+        DataTableComponent,
+        BrowserAnimationsModule,
+        RouterTestingModule,
+        MatDialogModule,
+      ],
+      providers: [
+        SharedService,
+        HttpClient,
+        HttpHandler,
+        TenantApplicationsService,
+        { provide: Router, useValue: mockRouter },
+      ],
+    });
+    fixture = TestBed.createComponent(ViewTenantsListComponent);
+    component = fixture.componentInstance;
+    alertsService = TestBed.inject(AlertsService);
+    sharedService = TestBed.inject(SharedService);
+    tenantApplicationsService = TestBed.inject(TenantApplicationsService);
+    globalErrorHandlerService = TestBed.inject(GlobalErrorHandlerService);
+    fixture.detectChanges();
+  });
+  describe('#ngOnInit', () => {
+    it('should set tenant title', () => {
+      const viewTenantsConstants = {
+        tenantsTitle: 'Tenant Application Management',
+      };
+      component.tenantsPageInfo = {
+        tenantsTitle: viewTenantsConstants?.tenantsTitle,
+      };
+      component.ngOnInit();
+      expect(component.tenantsPageInfo).toEqual(viewTenantsConstants);
+    });
+    it('should set route path', () => {
+      const mockRouteConfigPath = {
+        viewTenants: 'tenants/view-tenants-list',
+        viewTenantDetails: 'tenants/view-tenant-details',
+        createTenant: 'tenants/create-tenants',
+      };
+      const spyOnRoutePathService = spyOn(
+        sharedService,
+        'setRoutePaths'
+      ).and.callThrough();
+      component.routePaths = mockRouteConfigPath;
+      sharedService?.setRoutePaths(component.routePaths);
+      component.ngOnInit();
+      expect(spyOnRoutePathService).toHaveBeenCalled();
+      expect(component.routePaths).toEqual(mockRouteConfigPath);
+    });
+    it('should set app config and call configureTableInfo and getTenantsAndInitializeTableView', () => {
+      const spyOnSetAppConfig = spyOn(
+        tenantApplicationsService,
+        'setAppConfig'
+      ).and.callThrough();
+      const spyOnConfigureTableInfo = spyOn(
+        component,
+        'configureTableInfo'
+      ).and.callThrough();
+      const spyGetTenantsAndInitializeTableView = spyOn(
+        component,
+        'getTenantsAndInitializeTableView'
+      ).and.callThrough();
+      tenantApplicationsService.setAppConfig(
+        TenantsMocks?.getApiBaseURL,
+        TenantsMocks?.mockUserPermissions
+      );
+      component.ngOnInit();
+      expect(spyOnConfigureTableInfo).toHaveBeenCalled();
+      expect(spyGetTenantsAndInitializeTableView).toHaveBeenCalled();
+      expect(spyOnSetAppConfig).toHaveBeenCalledWith(
+        TenantsMocks?.getApiBaseURL,
+        TenantsMocks?.mockUserPermissions
+      );
+    });
+  });
+  describe('#configureTableInfo', () => {
+    it('should return elements appId attribute value', () => {
+      const response = component.columnSchema[0]?.cellData({
+        appId: 'Application Id',
+      });
+      expect(response).toEqual('Application Id');
+    });
+    it('should return elements appTitle attribute value', () => {
+      const response = component.columnSchema[1]?.cellData({
+        appTitle: 'Application Title',
+      });
+      expect(response).toEqual('Application Title');
+    });
+    it('should return emptyFieldPlacedBy value if appTitle is empty', () => {
+      const response = component.columnSchema[1]?.cellData({
+        appTitle: undefined,
+      });
+      expect(response).toEqual(emptyFieldValueReplacedBy);
+    });
+    it('should return elements appDescription attribute value', () => {
+      const response = component.columnSchema[2]?.cellData({
+        appDescription: 'Application Description',
+      });
+      expect(response).toEqual('Application Description');
+    });
+    it('should return emptyFieldPlacedBy value if appDescription is empty', () => {
+      const response = component.columnSchema[2]?.cellData({
+        appDescription: undefined,
+      });
+      expect(response).toEqual(emptyFieldValueReplacedBy);
+    });
+    it('should return elements features attribute value', () => {
+      const response = component.columnSchema[3]?.cellData({
+        features: [
+          {
+            featureId: 'FEATURE_049753e8-ea5c-4fad-adb0-e1456e69c7a5',
+            featureName: 'Meetings & Events',
+            isDefault: false,
+          },
+          {
+            featureId: 'FEATURE_348f62c2-a8a1-404e-b4a9-06e416590cbb',
+            featureName: 'Groups & Rosters',
+            isDefault: false,
+          },
+        ],
+      });
+      expect(response).toEqual('Meetings & Events, Groups & Rosters');
+    });
+    it('should return emptyFieldPlacedBy value if features is empty', () => {
+      const response = component.columnSchema[3]?.cellData({
+        features: undefined,
+      });
+      expect(response).toEqual(emptyFieldValueReplacedBy);
+    });
+    it('should return elements status attribute as Active Value', () => {
+      const response = component.columnSchema[4]?.cellData({
+        status: true,
+      });
+      expect(response).toEqual('Active');
+    });
+    it('should return elements status attribute as Inactive Value', () => {
+      const response = component.columnSchema[4]?.cellData({
+        status: false,
+      });
+      expect(response).toEqual('Inactive');
+    });
+  });
+  describe('#getTenantsAndInitializeTableView', () => {
+    it('should call fetch tenants details', () => {
+      spyOn(tenantApplicationsService, 'getTenantsList').and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.next(TenantsMocks.getTenantsMockResponse);
+        })
+      );
+      component.getTenantsAndInitializeTableView(
+        TenantsMocks?.getTenantsMockPayload
+      );
+      expect(component.tableData).toEqual(
+        TenantsMocks?.getTenantsMockResponse?.body?.appDetails
+      );
+      expect(component.paginatorConfig?.totalRecords).toEqual(
+        TenantsMocks?.getTenantsMockResponse?.body?.totalRecords
+      );
+    });
+    it('should return error', () => {
+      const mockServerErrorResponse = new HttpErrorResponse({
+        error: 'Resource Not Found',
+      });
+      spyOn(tenantApplicationsService, 'getTenantsList').and.returnValue(
+        new Observable((subscriber) => {
+          subscriber.error(mockServerErrorResponse);
+        })
+      );
+      spyOn(globalErrorHandlerService, 'handleError');
+      component.getTenantsAndInitializeTableView(
+        TenantsMocks?.getTenantsMockPayload
+      );
+      expect(globalErrorHandlerService.handleError).toHaveBeenCalledWith(
+        mockServerErrorResponse
+      );
+    });
+  });
+  describe('#onTablePaginationChange', () => {
+    it('should call getTenantsAndInitializeTableView method on view tenants list table page change for Ascending sort direction', () => {
+      const pageEventMock: PageEvent = {
+        pageIndex: 1,
+        pageSize: 10,
+        length: 0,
+      };
+      const getTenantsAndInitializeTableViewSpy = spyOn(
+        component,
+        'getTenantsAndInitializeTableView'
+      ).and.callThrough();
+      component.onTablePaginationChange(pageEventMock);
+      component.getTenantsAndInitializeTableView(
+        TenantsMocks?.getTenantsMockPayload
+      );
+      expect(getTenantsAndInitializeTableViewSpy).toHaveBeenCalledWith(
+        TenantsMocks?.getTenantsMockPayload
+      );
+      expect(component.defaultColumnSortDirection).toBe(true);
+    });
+    it('should call getTenantsAndInitializeTableView method on view tenants list table page change for Descending sort direction', () => {
+      const pageEventMock: PageEvent = {
+        pageIndex: 1,
+        pageSize: 10,
+        length: 0,
+      };
+      component.defaultColumnSortDirection = false;
+      const getTenantsAndInitializeTableViewSpy = spyOn(
+        component,
+        'getTenantsAndInitializeTableView'
+      ).and.callThrough();
+      component.onTablePaginationChange(pageEventMock);
+      component.getTenantsAndInitializeTableView(
+        TenantsMocks?.getTenantsMockPayload
+      );
+      expect(getTenantsAndInitializeTableViewSpy).toHaveBeenCalledWith(
+        TenantsMocks?.getTenantsMockPayload
+      );
+      expect(component.defaultColumnSortDirection).toBe(false);
+    });
+  });
+  describe('#navigateToViewTenantDetails', () => {
+    it('should navigate to viewTenantDetails passed in route paths', () => {
+      const mockRouteUrl = 'tenants/view-tenant-details';
+      mockRouter.navigate();
+      component.routePaths.viewTenantDetails = mockRouteUrl;
+      component.navigateToViewTenantDetails(TenantsMocks?.tenantInfoMock);
+      expect(mockRouter.navigate).toHaveBeenCalledWith(
+        [mockRouteUrl],
+        Object({
+          queryParams: Object({ id: TenantsMocks?.tenantInfoMock?.appId }),
+        })
+      );
+    });
+    it('should emit viewTenantsDetailsClick event in case viewTenantDetails route is not passed', () => {
+      component.routePaths.viewTenantDetails = '';
+      const viewTenantsDetailsClickEmitSpy = spyOn(
+        component.viewTenantsDetails,
+        'emit'
+      );
+      component.navigateToViewTenantDetails(TenantsMocks?.tenantInfoMock);
+      expect(viewTenantsDetailsClickEmitSpy).toHaveBeenCalled();
+    });
+  });
+  describe('#onSortTenants', () => {
+    it('should call getTenantsAndInitializeTableView while sorting an app id and app title', () => {
+      const sortMock: Sort = {
+        active: 'appId',
+        direction: 'asc',
+      };
+      const spyOnGetTenantsAndInitializeTableView = spyOn(
+        component,
+        'getTenantsAndInitializeTableView'
+      ).and.callThrough();
+      component.onSortTenants(sortMock);
+      component.getTenantsAndInitializeTableView(
+        TenantsMocks?.getTenantsMockPayload
+      );
+      expect(component.defaultSortedColumn).toBe(sortMock.active);
+      expect(component.defaultColumnSortDirection).toBe(true);
+      expect(spyOnGetTenantsAndInitializeTableView).toHaveBeenCalledWith(
+        TenantsMocks?.getTenantsMockPayload
+      );
+    });
+    it('should call getTenantsAndInitializeTableView while sorting desc an app id and app title', () => {
+      const sortMock: Sort = {
+        active: 'appId',
+        direction: 'desc',
+      };
+      const spyOnGetTenantsAndInitializeTableView = spyOn(
+        component,
+        'getTenantsAndInitializeTableView'
+      ).and.callThrough();
+      component.onSortTenants(sortMock);
+      component.getTenantsAndInitializeTableView(
+        TenantsMocks?.getTenantsMockPayload
+      );
+      expect(component.defaultSortedColumn).toBe(sortMock.active);
+      expect(component.defaultColumnSortDirection).toBe(false);
+      expect(spyOnGetTenantsAndInitializeTableView).toHaveBeenCalledWith(
+        TenantsMocks?.getTenantsMockPayload
+      );
+    });
+  });
+  describe('#openCreateTenantForm', () => {
+    it('should call openCreateTenantForm method and open modal', () => {
+      const spyOpenModal = spyOn(component, 'openModal');
+      spyOn(component.dialog, 'open').and.callThrough();
+      component.openCreateTenantForm();
+      expect(spyOpenModal).toHaveBeenCalled();
+      fixture.detectChanges();
+      component.dialog.open(ModalComponent, {
+        data: dialogOptions,
+        width: 'auto',
+        panelClass: ['ieeesa-modal-dialog'],
+        ariaModal: true,
+      });
+      expect(component.dialog.open).toHaveBeenCalledWith(ModalComponent, {
+        data: dialogOptions,
+        width: 'auto',
+        panelClass: ['ieeesa-modal-dialog'],
+        ariaModal: true,
+      });
+    });
+  });
+  describe('#openModal', () => {
+    it('should open create tenant modal with the provided className', () => {
+      spyOn(component.dialog, 'open').and.callThrough();
+      component.openModal(dialogOptions);
+      fixture.detectChanges();
+      component.dialog.open(ModalComponent, {
+        data: dialogOptions,
+        width: 'auto',
+        panelClass: ['ieeesa-modal-dialog'],
+        ariaModal: true,
+      });
+      expect(component.dialog.open).toHaveBeenCalledWith(ModalComponent, {
+        data: dialogOptions,
+        width: 'auto',
+        panelClass: ['ieeesa-modal-dialog'],
+        ariaModal: true,
+      });
+    });
+
+    it('should handle successful tenant creation', () => {
+      spyOn(alertsService, 'showMessage').and.callThrough();
+      const showAlertMessageSpy = spyOn(sharedService, 'showAlertMessage');
+      tenantApplicationsService.setNewTenantInfo(
+        TenantsMocks.createTenantMockPayload?.payload
+      );
+      component.openModal(dialogOptions, 'ieeesa-create-tenant');
+      component.dialogRef.componentInstance.submitFormResponse.next(
+        TenantsMocks.createTenantMockResponse
+      );
+      fixture.detectChanges();
+      expect(showAlertMessageSpy).toHaveBeenCalledOnceWith(
+        AlertType.SUCCESS,
+        'SA Collaboration portal has been created successfully.'
+      );
+    });
+    it('should handle create tenant form submission cancel', fakeAsync(() => {
+      component.openModal(dialogOptions, 'ieeesa-edit-tenant');
+      component.dialogRef.componentInstance.formCancel.next();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const dialogRefSpy = jasmine.createSpyObj<MatDialogRef<any>>(
+        'MatDialogRef',
+        ['close']
+      );
+      expect(dialogRefSpy.close).toBeTruthy();
+      tick();
+      flush();
+    }));
+  });
+  describe('#getTenantsPayload', () => {
+    it('should call getTenantsPayload and return the default payload for fetching tenants list', () => {
+      const payload: GetTenantsPayload = {
+        payload: {
+          offset: 0,
+          pageSize: constants?.viewTenants?.pageSizeOptions[0],
+          sortedBy: ViewTenantsColumnSchemaDef.APP_ID,
+          sortedOrderBy: 'ASC',
+        },
+      };
+      expect(component.getTenantsPayload()).toEqual(payload);
+    });
+    it('should call getTenantsPayload and return the paginated and sorted payload for fetching tenants list', () => {
+      component.pageEvent = { pageIndex: 1, pageSize: 20 } as PageEvent;
+      component.sortConfig = {
+        isSortedByAscending: true,
+        sort: { active: ViewTenantsColumnSchemaDef.APP_ID } as Sort,
+      };
+      const payload: GetTenantsPayload = {
+        payload: {
+          offset: component.pageEvent.pageIndex,
+          pageSize: component.pageEvent.pageSize,
+          sortedBy: component.sortConfig.sort.active,
+          sortedOrderBy: component.sortConfig.isSortedByAscending
+            ? SortOrderBy.ASC
+            : SortOrderBy.DESC,
+        },
+      };
+      expect(component.getTenantsPayload()).toEqual(payload);
+    });
+  });
+
+  describe('#ngOnDestroy', () => {
+    it('should unsubscribe on ngOnDestroy', () => {
+      spyOn(component.destroy$, 'next');
+      spyOn(component.destroy$, 'unsubscribe');
+      component.ngOnDestroy();
+      expect(component.destroy$.next).toHaveBeenCalledWith(true);
+      expect(component.destroy$.unsubscribe).toHaveBeenCalled();
+    });
+  });
+});