[CST-5738] hide special group heading when are not present

This commit is contained in:
Giuseppe Digilio
2022-05-19 19:08:08 +02:00
parent 9124f06e4c
commit 305203dba7
3 changed files with 17 additions and 11 deletions

View File

@@ -22,7 +22,7 @@
</div> </div>
<ng-container *ngVar="(groupsRD$ | async)?.payload?.page as groups"> <ng-container *ngVar="(groupsRD$ | async)?.payload?.page as groups">
<div *ngIf="groups"> <div *ngIf="groups?.length > 0">
<h3 class="mt-4">{{'profile.groups.head' | translate}}</h3> <h3 class="mt-4">{{'profile.groups.head' | translate}}</h3>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li *ngFor="let group of groups" class="list-group-item">{{group.name}}</li> <li *ngFor="let group of groups" class="list-group-item">{{group.name}}</li>
@@ -31,14 +31,12 @@
</ng-container> </ng-container>
<ng-container *ngVar="(specialGroupsRD$ | async)?.payload?.page as specialGroups"> <ng-container *ngVar="(specialGroupsRD$ | async)?.payload?.page as specialGroups">
<div *ngIf="specialGroups"> <div *ngIf="specialGroups?.length > 0" data-test="specialGroups">
<div id="specialGroups">
<h3 class="mt-4">{{'profile.special.groups.head' | translate}}</h3> <h3 class="mt-4">{{'profile.special.groups.head' | translate}}</h3>
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li *ngFor="let specialGroup of specialGroups" class="list-group-item">{{specialGroup.name}}</li> <li *ngFor="let specialGroup of specialGroups" class="list-group-item">{{specialGroup.name}}</li>
</ul> </ul>
</div> </div>
</div>
</ng-container> </ng-container>
</div> </div>
</ng-container> </ng-container>

View File

@@ -20,7 +20,7 @@ import { provideMockStore } from '@ngrx/store/testing';
import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service'; import { AuthorizationDataService } from '../core/data/feature-authorization/authorization-data.service';
import { getTestScheduler } from 'jasmine-marbles'; import { getTestScheduler } from 'jasmine-marbles';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { SpecialGroupDataMock$ } from '../shared/testing/special-group.mock'; import { EmptySpecialGroupDataMock$, SpecialGroupDataMock$ } from '../shared/testing/special-group.mock';
describe('ProfilePageComponent', () => { describe('ProfilePageComponent', () => {
let component: ProfilePageComponent; let component: ProfilePageComponent;
@@ -240,14 +240,21 @@ describe('ProfilePageComponent', () => {
describe('check for specialGroups', () => { describe('check for specialGroups', () => {
it('should contains specialGroups list', () => { it('should contains specialGroups list', () => {
const specialGroupsEle = fixture.debugElement.query(By.css('#specialGroups')); const specialGroupsEle = fixture.debugElement.query(By.css('[data-test="specialGroups"]'));
expect(specialGroupsEle).toBeTruthy(); expect(specialGroupsEle).toBeTruthy();
}); });
it('should not contains specialGroups list', () => { it('should not contains specialGroups list', () => {
component.specialGroupsRD$ = null; component.specialGroupsRD$ = null;
fixture.detectChanges(); fixture.detectChanges();
const specialGroupsEle = fixture.debugElement.query(By.css('#specialGroups')); const specialGroupsEle = fixture.debugElement.query(By.css('[data-test="specialGroups"]'));
expect(specialGroupsEle).toBeFalsy();
});
it('should not contains specialGroups list', () => {
component.specialGroupsRD$ = EmptySpecialGroupDataMock$;
fixture.detectChanges();
const specialGroupsEle = fixture.debugElement.query(By.css('[data-test="specialGroups"]'));
expect(specialGroupsEle).toBeFalsy(); expect(specialGroupsEle).toBeFalsy();
}); });
}); });

View File

@@ -50,6 +50,7 @@ export const SpecialGroupMock: Group = Object.assign(new Group(), {
export const SpecialGroupDataMock: RemoteData<PaginatedList<Group>> = createSuccessfulRemoteDataObject(buildPaginatedList(new PageInfo(), [SpecialGroupMock2,SpecialGroupMock])); export const SpecialGroupDataMock: RemoteData<PaginatedList<Group>> = createSuccessfulRemoteDataObject(buildPaginatedList(new PageInfo(), [SpecialGroupMock2,SpecialGroupMock]));
export const SpecialGroupDataMock$: Observable<RemoteData<PaginatedList<Group>>> = createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [SpecialGroupMock2,SpecialGroupMock])); export const SpecialGroupDataMock$: Observable<RemoteData<PaginatedList<Group>>> = createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), [SpecialGroupMock2,SpecialGroupMock]));
export const EmptySpecialGroupDataMock$: Observable<RemoteData<PaginatedList<Group>>> = createSuccessfulRemoteDataObject$(buildPaginatedList(new PageInfo(), []));