feature-card.component.html

<mat-card>
  <div class='container-fluid'>
    <div class='row d-flex'>
      <div class='col-sm-6 col-md-4 text-left d-flex align-items-center'>
        <mat-slide-toggle><span class='title-label'>{{feature.uid}}</span></mat-slide-toggle>
      </div>
      <div class='col-sm-6 col-md-3 d-flex align-items-center justify-content-center' *ngIf='feature.group'>
        <label class='label' style='padding-top: 7px'>Group &nbsp;</label><span class="badge badge-pill badge-secondary label">Secondary</span>
      </div>
      <div class='col-md-5 text-right'>
        <button mat-mini-fab color="primary">
          <mat-icon>edit</mat-icon>
        </button>
        &nbsp;
        <button mat-mini-fab color="warn">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
    </div>
    <div class='row d-none d-md-block' style='padding-top: 15px'>
      <div class='col-md-12'>
        <label class='label ellipsis'>
          {{feature.description}}
        </label>
      </div>
    </div>
    <div class='row d-flex' style='padding-top: 15px'>
      <div class="col-md-12 col-lg-4 d-flex align-items-center" *ngIf='feature.permissions && feature.permissions.length > 0'>
        <mat-icon color="primary" [matBadge]='feature.permissions?.length' matBadgeColor='warn'>person_add</mat-icon>
        <ff4j-badges [values]='feature.permissions'></ff4j-badges>
      </div>
      <div class="col-md-12 col-lg-4 d-flex align-items-center"  *ngIf='feature.customProperties?.size > 0'>
        <mat-icon color="primary" [matBadge]='feature.customProperties.size' matBadgeColor='warn'>assignment</mat-icon>
        <ff4j-badges [values]='getPropertiesValues(feature.customProperties)' [maxToShow]='1'></ff4j-badges>
      </div>
      <div class="col-md-12 col-lg-4 d-flex align-items-center">
        <mat-icon color="primary" [matBadge]='feature.permissions?.length' matBadgeColor='warn'>device_hub</mat-icon>
        <ff4j-badges [values]='feature.permissions'></ff4j-badges>
      </div>
    </div>
  </div>
</mat-card>

feature-card.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {Feature} from '../../models/Feature';
import {Property} from '../../models/Property';

@Component({
  selector: 'ff4j-feature-card',
  templateUrl: './feature-card.component.html',
  styleUrls: [ './feature-card.component.scss' ]
})
export class FeatureCardComponent implements OnInit {
  @Input()
  feature: Feature;

  constructor() {
  }

  ngOnInit() {
    if (!this.feature || null == this.feature) {
      throw new Error('feature property cannot be undefined');
    }
  }

  getPropertiesValues(customProperties: Map<string, Property>): string[] {
    const result = [];
    customProperties.forEach((value: Property) => {
      result.push(value.name + ' = ' + value.value);
    });
    return result;
  }
}

feature.component.spec.ts

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {FeaturesComponent} from './features.component';
import {FeatureService} from '../../shared/services/feature.service';
import {of, throwError} from 'rxjs';
import {HttpClientModule} from '@angular/common/http';
import {LoggerTestingModule, NGXLogger, NGXLoggerMock} from 'ngx-logger';
import {AgGridModule} from 'ag-grid-angular';
import {FeatureCardModule} from '../../shared/components/feature-card/feature-card.module';
import {Property} from '../../shared/models/Property';

describe('FeaturesComponent', () => {
  let component: FeaturesComponent;
  let fixture: ComponentFixture<FeaturesComponent>;
  let featureService;
  let logger: NGXLoggerMock;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule, FeatureCardModule, LoggerTestingModule, AgGridModule.withComponents([])],
      declarations: [FeaturesComponent],
      providers: [FeatureService]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FeaturesComponent);
    component = fixture.componentInstance;
    featureService = fixture.debugElement.injector.get(FeatureService);
    logger = fixture.debugElement.injector.get(NGXLogger);
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have had requested to get features', () => {
    const properties = new Map<string, Property>();
    properties.set('Sample Property', {
      'name': 'SampleProperty',
      'description': '',
      'type': 'org.ff4j.property.PropertyString',
      'value': 'go!',
      'fixedValues': []
    });
    const expectedData = [
      {
        uid: 'admin',
        enable: false,
        description: 'the admin page',
        group: 'admin',
        permissions: [
          'ROLE_ADMIN'
        ],
        flippingStrategy: {
          type: 'org.ff4j.strategy.PonderationStrategy',
          initParams: {
            weight: '0.0'
          }
        },
        customProperties: properties
      },
      {
        uid: 'admin',
        enable: false,
        description: 'the admin page',
        group: 'admin',
        permissions: [
          'ROLE_ADMIN'
        ],
        flippingStrategy: {
          type: 'org.ff4j.strategy.PonderationStrategy',
          initParams: {
            weight: '0.0'
          }
        },
      }
    ];
    spyOn(featureService, 'getFeatures').and.returnValues(of(expectedData));
    spyOn(logger, 'debug').and.callThrough();
    fixture.detectChanges();
    expect(featureService.getFeatures).toHaveBeenCalledTimes(1);
    expect(component.features).toBeDefined();
    expect(JSON.stringify(component.features)).toEqual(JSON.stringify(expectedData));
    expect(logger.debug).toHaveBeenCalledWith('Features : ' + JSON.stringify(expectedData));
  });
  it('should log error when getFeatures fails', () => {
    const error = new Error('Unable to handle');
    spyOn(featureService, 'getFeatures').and.returnValue(throwError(error));
    spyOn(logger, 'error').and.callThrough();
    fixture.detectChanges();
    expect(featureService.getFeatures).toHaveBeenCalledTimes(1);
    expect(logger.error).toHaveBeenCalledWith('Unable to fetch features', error);
  });
});

feature.component.ts

import {Component, OnInit} from '@angular/core';
import {FeatureService} from '../../shared/services/feature.service';
import {Feature} from '../../shared/models/Feature';
import {NGXLogger} from 'ngx-logger';
import MapUtils from '../../shared/utils/MapUtils';

@Component({
  selector: 'ff4j-features',
  templateUrl: './features.component.html',
  styleUrls: [ './features.component.scss' ]
})
export class FeaturesComponent implements OnInit {

  features: Feature[];

  constructor(private featureService: FeatureService, private logger: NGXLogger) {
  }

  ngOnInit() {
    this.featureService.getFeatures().subscribe((response) => {
      this.logger.debug('Features : ' + JSON.stringify(response));
      this.features = response;
      this.initProperties();
    }, (error) => {
      this.logger.error('Unable to fetch features', error);
    });
  }

  private initProperties() {
    this.features.forEach((feature) => {
      if (feature.customProperties) {
        feature.customProperties = MapUtils.objectToMap(feature.customProperties);
      }
    });
  }
}

features.component.html

<div class='ff4j-features'>
 <!-- TODO
  <ag-grid-angular
      class="h-100 w-100 ag-theme-material"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      (gridReady)='onGridReady($event)'>
  </ag-grid-angular>
  -->
  <div class='container-fluid'>
    <div *ngFor='let feature of features' style='margin: 15px'>
      <ff4j-feature-card [feature]='feature'></ff4j-feature-card>
    </div>
  </div>
</div>

MapUtils.ts

export default class MapUtils {
  static objectToMap(object: Object) {
    return new Map(Object.entries(object));
  }
}