vc-create-dashboard 3.0.82 → 3.0.84

package/src/lib/create-dashboard-container/user-list/user-list.component.less

@@ -0,0 +1,451 @@
+@import url("https://cdn.v-comply.com/design-system/css/icons/icons.css");
+@import url("https://cdn.v-comply.com/design-system/css/display/display.css");
+@import url("https://cdn.v-comply.com/design-system/css/alignment/alignment.css");
+@import url("https://cdn.v-comply.com/design-system/css/text/text.css");
+@import url("https://cdn.v-comply.com/design-system/css/color/color.css");
+@import url("https://cdn.v-comply.com/design-system/css/width/width.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/margin/margin-right.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-top.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-left.css");
+@import url("https://cdn.v-comply.com/design-system/css/padding/padding-right.css");
+
+::ng-deep .user-list {
+    background: #FFFFFF;
+    border-right: 1px solid #F1F1F1;
+    position: fixed;
+    top: 0;
+    right: 500px;
+    bottom: 0;
+    left: 0;
+
+    &-head {
+      background: #fbfbfb;
+      height: 2.75rem;
+      border-bottom: 1px solid #f1f1f1;
+    }
+
+    &-body {
+        height: calc(100vh - 2.75rem);
+        padding: 2rem;
+        position: relative;
+
+        &-top {
+            display        : flex;
+            justify-content: space-between;
+            padding        : 0 0 16px 0;
+
+            app-cs-checkbox {
+                display: flex;
+
+                label {
+                    span.value {
+                        margin-left: 9px !important;
+
+                        strong {
+                            color      : #161b2f;
+                            font-size  : 12px;
+                            font-weight: 600;
+                            white-space: nowrap;
+                        }
+                    }
+                }
+            }
+        }
+
+        .selection-list {
+            height: calc(100vh - 16rem);
+            overflow   : hidden;
+            overflow-y: auto;
+
+            &::-webkit-scrollbar-track {
+                background: transparent;
+            }
+
+            &.with-pagination {
+                height: calc(100vh - 18rem);
+            }
+
+            &.with-group {
+                height: calc(100vh - 18.1rem);
+
+                &.with-pagination {
+                    height: calc(100vh - 20.1rem);
+                }
+
+                &.with-noData {
+                    height: calc(100vh - 16.1rem);
+                }
+            }
+
+            ul {
+                padding: 0;
+                margin: 0;
+                display    : flex;
+                align-items: flex-start;
+                flex-wrap  : wrap;
+
+                li {
+                    width     : 50%;
+                    padding   : 0 20px 4px 0;
+                    margin-bottom: 12px;
+                    list-style: none;
+    
+                    app-cs-checkbox,
+                    app-cs-radio {
+                        display: flex;
+    
+                        label {
+                            width: 100%;
+    
+                            span.value {
+                                width          : auto;
+                                justify-content: flex-start;
+                                flex-wrap      : wrap;
+                                margin-left: 8px !important;
+                                color: #161b2f !important;
+                                font-size: 12px !important;
+    
+                                span {
+                                    &.name {
+                                        color      : #161b2f;
+                                        font-weight: 400;
+                                        line-height: 20px;
+                                        display    : block;
+                                        width      : 100%;
+                                        font-size  : 13px;
+                                    }
+    
+                                    &.position {
+                                        border-radius : 2px;
+                                        display       : inline-flex;
+                                        height        : 12px;
+                                        align-items   : center;
+                                        padding       : 0 2px;
+                                        text-transform: uppercase;
+                                        font-size     : 9px;
+                                        line-height   : 12px;
+                                        font-weight   : 500;
+    
+                                        &.admin {
+                                            background: #fff9e6;
+                                            color     : #f2bf19;
+                                        }
+    
+                                        &.key-admin {
+                                            background: #dff2e1;
+                                            color     : #34aa44;
+                                        }
+    
+                                        &.manager {
+                                            background: #d4e2fc;
+                                            color     : #4681ef;
+                                        }
+    
+                                        &.executive {
+                                            color     : #747576;
+                                            background: #f1f1f1;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .pagination-box {
+            app-pagination {
+                .pagination-box {
+                    margin-bottom: .5rem !important;
+                }
+            }
+        }
+
+        .list-of-user {
+            app-no-data {
+                .no-data-wrapper {
+                    height: calc(100vh - 16.125rem);
+                }
+            }
+        }
+    }
+
+    &-search {
+        position: relative;
+  
+        input {
+          height       : 2.75rem;
+          line-height  : 1.5rem;
+          padding      : .5rem 1rem .5rem 2.5rem;
+          outline      : none;
+          border       : 1px solid #7475763f;
+          border-radius: .25rem;
+          width        : 100%;
+          font-size    : 14px;
+          color        : #747576;
+  
+          &:focus {
+            border-color: #1e5dd3;
+          }
+        }
+  
+        i {
+          position: absolute;
+          left: 1rem;
+          top: 1rem;
+          pointer-events: none;
+          color: #f1f1f1;
+          font-size: 12px;
+        }
+    }
+
+    &-tab {
+        border-bottom: 1px solid #dbdbdb;
+  
+        button {
+            &.tab-btn {
+                background: transparent;
+                border-radius: 0;
+                border: none;
+                border-bottom: 3px solid transparent;
+                margin-right: 1.75rem !important;
+                padding-bottom: 6px !important;
+  
+                span {
+                    border-radius: 1.25rem;
+                    color: #74757680;
+                    min-width: 1.5rem;
+                }
+            }
+  
+            &.active {
+                pointer-events: none;
+  
+                &.tab-btn {
+                    border-color: #1E5DD3;
+                    color: #1E5DD3;
+  
+                    span {
+                        background: #1E5DD3;
+                        color: #fff;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+    }
+
+    &-mid {
+      width: calc(100% + .75rem);
+      height: calc(100vh - 15.6rem);
+      overflow: auto;
+      padding-right: .75rem;
+  
+      &::-webkit-scrollbar-track {
+          background-color: #fff;
+      }
+  
+      &.with-pagination {
+          height: calc(100vh - 17.6rem);
+      }
+  
+      .user-list {
+          &-select {
+              background: #fff;
+              position: sticky;
+              top: 0;
+              z-index: 1;
+  
+              app-cs-checkbox,
+              app-cs-checkbox-indeterminate {
+                  display: flex;
+
+                  .checkbox-item {
+                      position: relative;
+                      padding-left: 1.5rem;
+                      width: 100%;
+  
+                      .checkbox {
+                          position: absolute !important;
+                          left: 0;
+                          top: 0;
+                      }
+  
+                      .checkmark {
+                          position: absolute !important;
+                          left: 0;
+                          top: 0;
+                      }
+  
+                      span {
+                          justify-content: unset !important;
+                          margin: 0 !important;
+  
+                          &.value {
+                              color: #747576 !important;
+                              font-size: 11px !important;
+                              font-weight: 600 !important;
+                              text-transform: uppercase !important;
+                              width: 100%;
+  
+                              .user-name {
+                                  text-overflow: ellipsis;
+                                  white-space: nowrap;
+                                  overflow: hidden;
+                              }
+                          }
+                      }
+                  }
+              }
+          }
+  
+          &-item {
+              ul {
+                  list-style-type: none;
+                  align-items: flex-start;
+                  flex-wrap: wrap;
+  
+                  li {
+                      width: 50%;
+  
+                      app-cs-checkbox {
+                          width: calc(100% - 4.5rem);
+                          display: flex;
+  
+                          .checkbox-item {
+                              position: relative;
+                              padding-left: 1.5rem;
+                              width: 100%;
+  
+                              .checkbox {
+                                  position: absolute !important;
+                                  left: 0;
+                                  top: 0;
+                              }
+  
+                              .checkmark {
+                                  position: absolute !important;
+                                  left: 0;
+                                  top: 0;
+                              }
+  
+                              span {
+                                  justify-content: unset !important;
+                                  margin: 0 !important;
+  
+                                  &.value {
+                                      color: #161b2f !important;
+                                      font-size: 12px !important;
+                                      width: 100%;
+  
+                                      .user-name {
+                                          text-overflow: ellipsis;
+                                          white-space: nowrap;
+                                          overflow: hidden;
+
+                                          .group-name{
+                                            text-overflow: ellipsis;
+                                            white-space: nowrap;
+                                            overflow: hidden;
+                                            max-width: calc(100% - 40px);
+                                          }
+                                      }
+
+  
+                                      .counter {
+                                          background: #f1f1f1;
+                                          border-radius: .125rem;
+                                          color: #042E7D;
+                                          margin-left: .5rem !important;
+                                      }
+  
+                                  }
+                              }
+                          }
+                      }
+                  }
+              }
+          }
+      }
+
+      app-no-data {
+        .no-data-wrapper {
+            height: calc(100vh - 15.625rem);
+          }
+      }
+    }
+}
+
+::ng-deep .user-floating-bar {
+    &-container {
+      height: 48px;
+      border-radius: 4px;
+      box-shadow: 0 6px 12px #4681ef26;
+      border: 1px solid #f8f8f8;
+      padding: 8px 12px;
+      position: relative;
+      background: #FFFFFF;
+      width: 100%;
+  
+      .left {
+        .counter {
+            background: #34AA44;
+            border-radius: 1.25rem;
+            border: none;
+            min-width: 1.5rem;
+            height: 1rem;
+
+            &.group {
+                background: #1e5dd3;
+            }
+        }
+      }
+  
+      .right {
+        display    : flex;
+        align-items: center;
+  
+        button {
+            border-radius: 2px;
+            height: 24px;
+            background: #1e5dd3!important;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            color: #fff!important;
+            text-transform: uppercase;
+            font-size: 11px;
+            font-weight: 500;
+            border: none!important;
+            padding: 0 8px;
+            margin: 0 0 0 8px;
+  
+            i {
+                margin-left: 8px;
+                font-size: 11px;
+            }
+    
+            &:disabled {
+                filter        : unset;
+                background: #F1F1F1!important;
+                color: #747576!important;
+                opacity: 1;
+                pointer-events: none;
+            }
+    
+            &.cancel {
+                background: transparent!important;
+                color: #eb2424!important;
+            }
+        }
+      }
+    }
+}

package/src/lib/create-dashboard-container/user-list/user-list.component.spec.ts

@@ -0,0 +1,153 @@
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserListComponent } from './user-list.component';
+import { FormsModule } from '@angular/forms';
+import { DashboardFooterModule } from '../../ui-kit/dashboard-footer/dashboard-footer.module';
+import { FloatingBarModule } from '../../ui-kit/floating-bar/floating-bar.module';
+import { SelectModule } from '../../ui-kit/select/select.module';
+import { TooltipModule } from '../../ui-kit/tooltip/tooltip.module';
+import { FilterPipe } from '../pipes/filter.pipe';
+import { CommonModule } from '@angular/common';
+// import { CreateDashboardService } from 'projects/create-dashboard/src/public-api';
+import { CreateDashboardService } from '../services/create-dashboard.service';
+import { PaginationService } from '../services/pagination.service';
+import { of } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { FeatureFlagService } from 'src/app/layout/featureFlag/feature-flag.service';
+describe('UserListComponent', () => {
+  let component: UserListComponent;
+  let fixture: ComponentFixture<UserListComponent>;
+  let mockCreateDashboardService: CreateDashboardService;
+  let mockPaginationService: any;
+  let groupsIds = [860, 857]
+  let groupslist = [{ "old_group_id": 0, "member_ids": [18282, 18262, 18503, 18521, 17924], "removed_member_ids": [], "group_type": "vcomply", "state": 1, "_id": "63807db50067e1000852d62b", "group_name": "abc", "group_description": "", "roles": [{ "_id": "638d923ebb03890008a2c7b9", "roleId": { "_id": "6387478a721ddf000839fcda", "roleName": "Manage Program Permission Group", "licenseType": "power users", "id": "6387478a721ddf000839fcda" } }], "associatedUsers": [{ "_id": "638d923ebb03890008a2c7b4", "userId": { "profile_pic": "", "license_type": "power users", "_id": "6361fbe19f6cda0008120e49", "member_name": "A3", "member_email": "a3@fdfd.com", "member_id": 18282 } }, { "_id": "638d923ebb03890008a2c7b5", "userId": { "profile_pic": "", "license_type": "power users", "_id": "63523a540aa9a200094da903", "member_name": "A2", "member_email": "a2@fdfd.com", "member_id": 18262 } }, { "_id": "638d923ebb03890008a2c7b6", "userId": { "profile_pic": "", "license_type": "power users", "_id": "637f59bd9b20b00008e763a3", "member_name": "LightUser1", "member_email": "light@fdfd.com", "member_id": 18503 } }, { "_id": "638d923ebb03890008a2c7b7", "userId": { "profile_pic": "", "license_type": "power users", "_id": "6388501a057eaf000886b647", "member_name": "A4", "member_email": "a4@fdfd.com", "member_id": 18521 } }, { "_id": "638d923ebb03890008a2c7b8", "userId": { "profile_pic": "", "license_type": "power users", "_id": "623ac9fa46968d0009c8f0ed", "member_name": "A1", "member_email": "a1@fdfd.com", "member_id": 17924 } }], "organisation_id": 3452, "created_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "modified_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "created_at": 1669365173, "updated_at": 1670222398, "member_count": 5, "group_id": 853, "__v": 0 },
+  { "old_group_id": 0, "member_ids": [17924, 18262], "removed_member_ids": [], "group_type": "vcomply", "state": 1, "_id": "638b19553d93f900082d5f51", "group_name": "check group with reviewer", "group_description": "", "roles": [{ "_id": "638b19553d93f900082d5f52", "roleId": { "_id": "6387478a721ddf000839fcda", "roleName": "Manage Program Permission Group", "licenseType": "power users", "id": "6387478a721ddf000839fcda" } }, { "_id": "638b19553d93f900082d5f53", "roleId": { "_id": "623ac7cb249833000910502c", "roleName": "Manager", "licenseType": "power users", "id": "623ac7cb249833000910502c" } }, { "_id": "638b19553d93f900082d5f54", "roleId": { "_id": "623ac7cb249833000910506c", "roleName": "Admin", "licenseType": "power users", "id": "623ac7cb249833000910506c" } }], "associatedUsers": [{ "_id": "638b19553d93f900082d5f55", "userId": { "profile_pic": "", "license_type": "power users", "_id": "623ac9fa46968d0009c8f0ed", "member_name": "A1", "member_email": "a1@fdfd.com", "member_id": 17924 } }, { "_id": "638b19553d93f900082d5f56", "userId": { "profile_pic": "", "license_type": "power users", "_id": "63523a540aa9a200094da903", "member_name": "A2", "member_email": "a2@fdfd.com", "member_id": 18262 } }], "organisation_id": 3452, "created_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "modified_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "created_at": 1670060373, "updated_at": 1670060373, "member_count": 2, "group_id": 860, "__v": 0 }]
+  let service: FeatureFlagService;
+  beforeEach(async () => {
+    //  mockCreateDashboardService = jasmine.createSpyObj(['getAllUsers', 'getOrganizationUsers','getAllGroups']);
+    mockPaginationService = jasmine.createSpyObj(['currentPage', 'searchValue']);
+
+    await TestBed.configureTestingModule({
+      declarations: [UserListComponent, FilterPipe],
+      imports: [HttpClientModule,
+        CommonModule,
+        FormsModule,
+        TooltipModule,
+        SelectModule,
+        DashboardFooterModule,
+        FloatingBarModule,],
+      providers: [
+        { provide: CreateDashboardService, useValue: { getOrganizationUsers: () => of(), getAllGroups: () => of() } },
+        { provide: PaginationService, useValue: mockPaginationService },
+        {
+          provide: FeatureFlagService,
+          useValue: {
+            isFeatureEnabled: () => of({
+              "ff_groups_improvements": {
+                "enabled": true
+              }
+            })
+          }
+        }
+      ],
+
+    })
+      .compileComponents();
+    mockCreateDashboardService = TestBed.inject(CreateDashboardService);
+    service = TestBed.inject(FeatureFlagService);
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it("Select All should work as for user group", () => {
+    spyOn(mockCreateDashboardService, 'getAllGroups').and.returnValue(of({ "items_from": 1, "total_items": 3, "total_pages": 1, "items_to": 3, "data": [{ "old_group_id": 0, "member_ids": [17924, 18262], "removed_member_ids": [], "group_type": "vcomply", "state": 1, "_id": "638b19553d93f900082d5f51", "group_name": "check group with reviewer", "group_description": "", "roles": [{ "_id": "638b19553d93f900082d5f52", "roleId": { "_id": "6387478a721ddf000839fcda", "roleName": "Manage Program Permission Group", "licenseType": "power users", "id": "6387478a721ddf000839fcda" } }, { "_id": "638b19553d93f900082d5f53", "roleId": { "_id": "623ac7cb249833000910502c", "roleName": "Manager", "licenseType": "power users", "id": "623ac7cb249833000910502c" } }, { "_id": "638b19553d93f900082d5f54", "roleId": { "_id": "623ac7cb249833000910506c", "roleName": "Admin", "licenseType": "power users", "id": "623ac7cb249833000910506c" } }], "associatedUsers": [{ "_id": "638b19553d93f900082d5f55", "userId": { "profile_pic": "", "license_type": "power users", "_id": "623ac9fa46968d0009c8f0ed", "member_name": "A1", "member_email": "a1@fdfd.com", "member_id": 17924 } }, { "_id": "638b19553d93f900082d5f56", "userId": { "profile_pic": "", "license_type": "power users", "_id": "63523a540aa9a200094da903", "member_name": "A2", "member_email": "a2@fdfd.com", "member_id": 18262 } }], "organisation_id": 3452, "created_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "modified_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "created_at": 1670060373, "updated_at": 1670060373, "member_count": 2, "group_id": 860, "__v": 0 }] }));
+    component.groupsEnabled = true;
+    component.selectAllGroups(true);
+    component.listDetails.groupIdkey = 'group_id'
+    component.selectedGroupIds = groupsIds
+    fixture.detectChanges();
+    expect(component.selectedGroupIds).toEqual(groupsIds)
+  })
+  it('deselectAll should work as for user group', () => {
+    spyOn(mockCreateDashboardService, 'getAllGroups').and.returnValue(of({ "items_from": 1, "total_items": 3, "total_pages": 1, "items_to": 3, "data": [{ "old_group_id": 0, "member_ids": [17924, 18262], "removed_member_ids": [], "group_type": "vcomply", "state": 1, "_id": "638b19553d93f900082d5f51", "group_name": "check group with reviewer", "group_description": "", "roles": [{ "_id": "638b19553d93f900082d5f52", "roleId": { "_id": "6387478a721ddf000839fcda", "roleName": "Manage Program Permission Group", "licenseType": "power users", "id": "6387478a721ddf000839fcda" } }, { "_id": "638b19553d93f900082d5f53", "roleId": { "_id": "623ac7cb249833000910502c", "roleName": "Manager", "licenseType": "power users", "id": "623ac7cb249833000910502c" } }, { "_id": "638b19553d93f900082d5f54", "roleId": { "_id": "623ac7cb249833000910506c", "roleName": "Admin", "licenseType": "power users", "id": "623ac7cb249833000910506c" } }], "associatedUsers": [{ "_id": "638b19553d93f900082d5f55", "userId": { "profile_pic": "", "license_type": "power users", "_id": "623ac9fa46968d0009c8f0ed", "member_name": "A1", "member_email": "a1@fdfd.com", "member_id": 17924 } }, { "_id": "638b19553d93f900082d5f56", "userId": { "profile_pic": "", "license_type": "power users", "_id": "63523a540aa9a200094da903", "member_name": "A2", "member_email": "a2@fdfd.com", "member_id": 18262 } }], "organisation_id": 3452, "created_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "modified_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "created_at": 1670060373, "updated_at": 1670060373, "member_count": 2, "group_id": 860, "__v": 0 }] }));
+    component.selectAllGroups(false);
+    fixture.detectChanges();
+    expect(component.selectedGroupIds).toEqual([])
+  })
+  it('check selectGroup ', () => {
+    component.groupsEnabled = true;
+    component.selectedGroupIds = [860]
+    component.listDetails.groupIdkey = 'group_id'
+    component.selectGroupElement(groupslist)
+    fixture.detectChanges()
+    expect(component.selectedGroupIds.length).toEqual(2)
+  })
+  it('switchtab for user and user groups', () => {
+    spyOn(mockCreateDashboardService, 'getAllGroups').and.returnValue(of({ "items_from": 1, "total_items": 3, "total_pages": 1, "items_to": 3, "data": [{ "old_group_id": 0, "member_ids": [17924, 18262], "removed_member_ids": [], "group_type": "vcomply", "state": 1, "_id": "638b19553d93f900082d5f51", "group_name": "check group with reviewer", "group_description": "", "roles": [{ "_id": "638b19553d93f900082d5f52", "roleId": { "_id": "6387478a721ddf000839fcda", "roleName": "Manage Program Permission Group", "licenseType": "power users", "id": "6387478a721ddf000839fcda" } }, { "_id": "638b19553d93f900082d5f53", "roleId": { "_id": "623ac7cb249833000910502c", "roleName": "Manager", "licenseType": "power users", "id": "623ac7cb249833000910502c" } }, { "_id": "638b19553d93f900082d5f54", "roleId": { "_id": "623ac7cb249833000910506c", "roleName": "Admin", "licenseType": "power users", "id": "623ac7cb249833000910506c" } }], "associatedUsers": [{ "_id": "638b19553d93f900082d5f55", "userId": { "profile_pic": "", "license_type": "power users", "_id": "623ac9fa46968d0009c8f0ed", "member_name": "A1", "member_email": "a1@fdfd.com", "member_id": 17924 } }, { "_id": "638b19553d93f900082d5f56", "userId": { "profile_pic": "", "license_type": "power users", "_id": "63523a540aa9a200094da903", "member_name": "A2", "member_email": "a2@fdfd.com", "member_id": 18262 } }], "organisation_id": 3452, "created_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "modified_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "created_at": 1670060373, "updated_at": 1670060373, "member_count": 2, "group_id": 860, "__v": 0 }] }));
+    component.groupsEnabled = true;
+    component.switchTab('GROUP')
+    const value = fixture.debugElement.nativeElement.querySelector('#switchtab');
+    fixture.detectChanges()
+    expect(component.currentTab).toEqual('GROUP')
+    expect(component.searchValue).toEqual('')
+    expect(component.totalgroups).toEqual(3)
+  })
+  it('verify the pagination for User Group', () => {
+    spyOn(mockCreateDashboardService, 'getAllGroups').and.returnValue(of({ "items_from": 1, "total_items": 3, "total_pages": 1, "items_to": 3, "data": [{ "old_group_id": 0, "member_ids": [17924, 18262], "removed_member_ids": [], "group_type": "vcomply", "state": 1, "_id": "638b19553d93f900082d5f51", "group_name": "check group with reviewer", "group_description": "", "roles": [{ "_id": "638b19553d93f900082d5f52", "roleId": { "_id": "6387478a721ddf000839fcda", "roleName": "Manage Program Permission Group", "licenseType": "power users", "id": "6387478a721ddf000839fcda" } }, { "_id": "638b19553d93f900082d5f53", "roleId": { "_id": "623ac7cb249833000910502c", "roleName": "Manager", "licenseType": "power users", "id": "623ac7cb249833000910502c" } }, { "_id": "638b19553d93f900082d5f54", "roleId": { "_id": "623ac7cb249833000910506c", "roleName": "Admin", "licenseType": "power users", "id": "623ac7cb249833000910506c" } }], "associatedUsers": [{ "_id": "638b19553d93f900082d5f55", "userId": { "profile_pic": "", "license_type": "power users", "_id": "623ac9fa46968d0009c8f0ed", "member_name": "A1", "member_email": "a1@fdfd.com", "member_id": 17924 } }, { "_id": "638b19553d93f900082d5f56", "userId": { "profile_pic": "", "license_type": "power users", "_id": "63523a540aa9a200094da903", "member_name": "A2", "member_email": "a2@fdfd.com", "member_id": 18262 } }], "organisation_id": 3452, "created_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "modified_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "created_at": 1670060373, "updated_at": 1670060373, "member_count": 2, "group_id": 860, "__v": 0 }] }));
+    component.groupsEnabled = true;
+    component.currentTab = 'GROUP';
+    component.paginationFilter(true)
+    component.getGroupsList({ page: 1, groupName: "check" })
+    expect(component.totalPages).toEqual(1)
+    expect(component.totalgroups).toEqual(3)
+  })
+  it('verify the search for User Group', () => {
+    spyOn(mockCreateDashboardService, 'getAllGroups').and.returnValue(of({ "items_from": 1, "total_items": 3, "total_pages": 1, "items_to": 3, "data": [{ "old_group_id": 0, "member_ids": [17924, 18262], "removed_member_ids": [], "group_type": "vcomply", "state": 1, "_id": "638b19553d93f900082d5f51", "group_name": "check group with reviewer", "group_description": "", "roles": [{ "_id": "638b19553d93f900082d5f52", "roleId": { "_id": "6387478a721ddf000839fcda", "roleName": "Manage Program Permission Group", "licenseType": "power users", "id": "6387478a721ddf000839fcda" } }, { "_id": "638b19553d93f900082d5f53", "roleId": { "_id": "623ac7cb249833000910502c", "roleName": "Manager", "licenseType": "power users", "id": "623ac7cb249833000910502c" } }, { "_id": "638b19553d93f900082d5f54", "roleId": { "_id": "623ac7cb249833000910506c", "roleName": "Admin", "licenseType": "power users", "id": "623ac7cb249833000910506c" } }], "associatedUsers": [{ "_id": "638b19553d93f900082d5f55", "userId": { "profile_pic": "", "license_type": "power users", "_id": "623ac9fa46968d0009c8f0ed", "member_name": "A1", "member_email": "a1@fdfd.com", "member_id": 17924 } }, { "_id": "638b19553d93f900082d5f56", "userId": { "profile_pic": "", "license_type": "power users", "_id": "63523a540aa9a200094da903", "member_name": "A2", "member_email": "a2@fdfd.com", "member_id": 18262 } }], "organisation_id": 3452, "created_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "modified_by": { "profile_pic": "", "_id": "623ac7c92498330009104f71", "member_name": "D1", "member_email": "test@fdfd.com", "member_id": 17923 }, "created_at": 1670060373, "updated_at": 1670060373, "member_count": 2, "group_id": 860, "__v": 0 }] }));
+    component.groupsEnabled = true;
+    component.currentTab = 'GROUP';
+    component.paginationFilter(true)
+    component.getGroupsList({ groupName: "check" })
+    component.searchValue = 'check'
+    fixture.detectChanges()
+    expect(component.groupdata[0].group_name).toEqual('check group with reviewer');
+  })
+  it('verify the count of the user groups coming from the create dashboard ', () => {
+    component.groupsEnabled = true;
+    component.totalgroupscount = 3;
+    component.switchTab('GROUP')
+    component.currentTab = 'GROUP';
+    fixture.detectChanges()
+    const value = fixture.debugElement.query(By.css('#groupscount'))
+    expect(value.nativeElement.innerText).toEqual('3')
+  })
+  it('verify the users count of user groups ', () => {
+    component.groupsEnabled = true;
+    component.currentTab = 'GROUP';
+    component.groupdata = groupslist
+    component.selectGroupElement(1)
+    fixture.detectChanges()
+    const value = fixture.debugElement.query(By.css('#usersofgroup'))
+    expect(value.nativeElement.innerText).toEqual('5 USERS')
+  })
+  it("verify the selectAll search ",()=>{
+    component.selectAllsearchgroups(false);
+    fixture.detectChanges()
+    expect(component.selectedgroupList).toEqual([])
+    expect(component.selectedGroupIds).toEqual([])
+  })
+  it('verify checkSelectAllgroups',()=>{
+    component.checkSelectAllGroups()
+   component.groupdata=groupslist
+   component.selectedGroupIds = [853,860]
+   component.listDetails.groupIdkey = 'group_id' 
+   expect(component.checkSelectAllGroups()).toBeTrue();
+  })
+});