fix(core) Change Info Label into component | Improve tests (#3399)

BREAKING CHANGE: made Info Label component
SAP · Sep 25, 2020 · 557b761 · 557b761
1 parent 44de79e
commit 557b761
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 64 deletions.
diff --git a/...src/app/core/component-docs/info-label/examples/info-label-default-example.component.html b/...src/app/core/component-docs/info-label/examples/info-label-default-example.component.html
@@ -1 +1 @@
-<span fd-info-label>default label</span>
+<fd-info-label label="Default label"></fd-info-label>
diff --git a/...pp/core/component-docs/info-label/examples/info-label-icon-numeric-example.component.html b/...pp/core/component-docs/info-label/examples/info-label-icon-numeric-example.component.html
@@ -1,4 +1,3 @@
-<span fd-info-label [type]="'numeric'" [color]="'2'" style="margin-right: 20px;">6</span>
-<span fd-info-label [type]="'numeric'" [color]="'3'" style="margin-right: 20px;">42k</span>
-<span fd-info-label [type]="'numeric'" [color]="'3'" style="margin-right: 20px;">14.7</span>
-<span fd-info-label [type]="'icon'" [color]="'5'" [glyph]="'hide'" style="margin-right: 20px;"></span>
+<fd-info-label type="numeric" color="1" label="6" style="margin-right: 20px;"></fd-info-label>
+<fd-info-label type="numeric" color="2" label="42k" style="margin-right: 20px;"></fd-info-label>
+<fd-info-label type="numeric" color="3" label="14.7" style="margin-right: 20px;"></fd-info-label>
diff --git a/...cs/src/app/core/component-docs/info-label/examples/info-label-text-example.component.html b/...cs/src/app/core/component-docs/info-label/examples/info-label-text-example.component.html
@@ -1,3 +1,3 @@
-<div style="margin-top: 10px;" *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
-    <span fd-info-label [color]="item">Info Label</span>
+<div style="margin-top: 10px;" *ngFor="let item of ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']">
+    <fd-info-label label="Info Label" [color]="item"></fd-info-label>
 </div>
diff --git a/...c/app/core/component-docs/info-label/examples/info-label-text-icon-example.component.html b/...c/app/core/component-docs/info-label/examples/info-label-text-icon-example.component.html
@@ -1,3 +1,3 @@
-<div style="margin-top: 10px;" *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
-    <span fd-info-label [type]="'icon'" [color]="item" [glyph]="'hide'">info label</span>
+<div style="margin-top: 10px;" *ngFor="let item of ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']">
+    <fd-info-label type="icon" glyph="hide" label="Info label" [color]="item"></fd-info-label>
 </div>
diff --git a/libs/core/src/lib/info-label/info-label.component.html b/libs/core/src/lib/info-label/info-label.component.html
@@ -0,0 +1,9 @@
+<i *ngIf="glyph"
+   class="fd-info-label__icon"
+   [ngClass]="glyph ? 'sap-icon--' + glyph : ''">
+</i>
+
+<span *ngIf="label" class="fd-info-label__text">{{ label }}</span>
+
+<!-- TODO @salarenko: DEPRECATED - Remove in v0.23.0 -->
+<ng-content></ng-content>
diff --git a/libs/core/src/lib/info-label/info-label.component.spec.ts b/libs/core/src/lib/info-label/info-label.component.spec.ts
@@ -1,19 +1,32 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { InfoLabelComponent } from './info-label.component';
-import { Component, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 
 @Component({
     selector: 'fd-test-info-label',
-    template: `<span fd-info-label>info Label</span>`
+    template: `
+        <fd-info-label
+            [type]="type"
+            [label]="label"
+            [color]="color"
+            [glyph]="glyph">
+        </fd-info-label>
+    `
 })
 class TestInfoLabelComponent {
-    @ViewChild(InfoLabelComponent, { static: true })
-    infoLabelComponent: InfoLabelComponent;
+    @ViewChild(InfoLabelComponent, {static: true, read: ElementRef})
+    infoLabelElementRef: ElementRef;
+
+    type: string;
+    label: string;
+    color: string;
+    glyph: string;
 }
 
 describe('InfoLabelComponent', () => {
-    let component: InfoLabelComponent;
+    let infoLabelElementRef: ElementRef;
+    let testComponent: TestInfoLabelComponent;
     let fixture: ComponentFixture<TestInfoLabelComponent>;
 
     beforeEach(async(() => {
@@ -24,51 +37,51 @@ describe('InfoLabelComponent', () => {
 
     beforeEach(() => {
         fixture = TestBed.createComponent(TestInfoLabelComponent);
-        component = fixture.componentInstance.infoLabelComponent;
+        infoLabelElementRef = fixture.componentInstance.infoLabelElementRef;
+        testComponent = fixture.componentInstance;
         fixture.detectChanges();
     });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
+    it('Should create', () => {
+        expect(testComponent).toBeTruthy();
+        expect(infoLabelElementRef).toBeTruthy();
     });
 
-    it('Should Add label Type', () => {
-        component.ngOnInit();
-        component.type = 'numeric';
-        component.buildComponentCssClass();
+    it('Should add numeric label type', () => {
+        testComponent.type = 'numeric';
         fixture.detectChanges();
-        expect(component.elementRef().nativeElement.classList.contains('fd-info-label--numeric')).toBe(true);
+        expect(infoLabelElementRef.nativeElement.classList.contains('fd-info-label--numeric')).toBeTrue();
     });
 
-    it('Should Add  label Type icon', () => {
-        component.ngOnInit();
-        component.type = 'icon';
-        component.buildComponentCssClass();
+    it('Should add icon label type', () => {
+        testComponent.type = 'icon';
         fixture.detectChanges();
-        expect(component.elementRef().nativeElement.classList.contains('fd-info-label--icon')).toBe(true);
+        expect(infoLabelElementRef.nativeElement.classList.contains('fd-info-label--icon')).toBeTrue();
     });
 
-    it('Should Add Accent Color', () => {
-        component.ngOnInit();
-        component.color = '2';
-        component.buildComponentCssClass();
+    it('Should add accent color', () => {
+        testComponent.color = '2';
         fixture.detectChanges();
-        expect(component.elementRef().nativeElement.classList.contains('fd-info-label--accent-color-2')).toBe(true);
+        expect(infoLabelElementRef.nativeElement.classList.contains('fd-info-label--accent-color-2')).toBeTrue();
     });
 
-    it('Should Add icon', () => {
-        component.ngOnInit();
-        component.glyph = 'future';
-        component.buildComponentCssClass();
+    it('Should add icon', () => {
+        testComponent.glyph = 'future';
         fixture.detectChanges();
-        expect(component.elementRef().nativeElement.classList.contains('sap-icon--future')).toBe(true);
+        const iconElement = fixture.nativeElement.querySelector('i');
+
+        expect(iconElement).toBeTruthy();
+        expect(iconElement.classList.contains('sap-icon--future')).toBeTrue();
     });
 
-    it('Should Add icon', () => {
-        component.ngOnInit();
-        component.glyph = 'add-activity-2';
-        component.buildComponentCssClass();
+    it('Should display label', () => {
+        const label = 'Test label';
+        testComponent.label = label;
         fixture.detectChanges();
-        expect(component.elementRef().nativeElement.classList.contains('sap-icon--add-activity-2')).toBe(true);
+
+        const labelTextElement = fixture.nativeElement.querySelector('.fd-info-label__text');
+
+        expect(labelTextElement).toBeTruthy();
+        expect(labelTextElement.textContent.trim()).toBe(label);
     });
 });
diff --git a/libs/core/src/lib/info-label/info-label.component.ts b/libs/core/src/lib/info-label/info-label.component.ts
@@ -1,69 +1,75 @@
 import {
-    Component,
-    ViewEncapsulation,
     ChangeDetectionStrategy,
+    Component,
+    ElementRef,
     Input,
+    OnChanges,
     OnInit,
-    ElementRef,
-    OnChanges
+    ViewEncapsulation
 } from '@angular/core';
-import { CssClassBuilder, applyCssClass } from '../utils/public_api';
+import { applyCssClass, CssClassBuilder } from '../utils/public_api';
 
 export type LabelType = 'numeric' | 'icon';
 
 @Component({
     // tslint:disable-next-line:component-selector
-    selector: '[fd-info-label]',
-    template: `<ng-content></ng-content>`,
+    // TODO @salarenko: DEPRECATED DIRECTIVE APPROACH - Remove in v0.23.0
+    selector: 'fd-info-label, [fd-info-label]',
+    templateUrl: './info-label.component.html',
     styleUrls: ['./info-label.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class InfoLabelComponent implements OnInit, OnChanges, CssClassBuilder {
-    /** user's custom classes */
+    /** User's custom classes */
     @Input()
     class = '';
 
     /**
      * The LabelType represented by the info label .
-     * Can be one of the following: 'numeric' | 'only-icon' | 'icon'
      * For default info label omit this property
      */
     @Input()
     type: LabelType;
 
-    /** glyph define the icon of info label */
+    /** Glyph define the icon of info label */
     @Input()
     glyph: string;
 
-    /**define the colour of the info label starting form 1 to 10 */
+    /** Define the colour of the info label starting form 1 to 10 */
     @Input()
     color: string;
 
-    @applyCssClass
-    buildComponentCssClass(): string[] {
-        return [
-            'fd-info-label',
-            this.type ? `fd-info-label--${this.type}` : '',
-            this.glyph ? `sap-icon--${this.glyph}` : '',
-            this.color ? `fd-info-label--accent-color-${this.color}` : '',
-            this.class
-        ];
-    }
+    /** Define the text content of the info label */
+    @Input()
+    label: string;
 
     /** @hidden */
     constructor(private _elementRef: ElementRef) {}
 
+    /** @hidden */
     ngOnInit(): void {
         this.buildComponentCssClass();
     }
 
+    /** @hidden */
     ngOnChanges(): void {
         this.buildComponentCssClass();
     }
 
     /** @hidden */
-    elementRef(): ElementRef<any> {
+    elementRef(): ElementRef {
         return this._elementRef;
     }
+
+    /** @hidden */
+    @applyCssClass
+    buildComponentCssClass(): string[] {
+        return [
+            'fd-info-label',
+            this.type ? `fd-info-label--${this.type}` : '',
+            this.color ? `fd-info-label--accent-color-${this.color}` : '',
+            this.class
+        ];
+    }
 }