counter.component.spec.ts

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

import { CounterComponent } from './counter.component';

describe('CounterComponent', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(async(() => {
    /**
     * @uijar CounterComponent
     */
    TestBed.configureTestingModule({
      declarations: [ CounterComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  describe('.increate()', () => {

    /** @uijarexample Increase */
    it('should increase when called', () => {
      expect(component.counter).toBe(0);
      component.increase();
      expect(component.counter).toBe(1);
    });
  });


  /** @uijarexample Different text */
  it('should change the default text', () => {
    component.text = 'Im a text';
  });
});

counter.component.ts

import { Component, Input } from '@angular/core';
/**
 * @group Button & indicators
 * @component Counter
 * @description That's a counter component
 */
@Component({
  selector: 'fb-counter',
  templateUrl: './counter.component.html',
  styleUrls: [ './counter.component.scss' ]
})
export class CounterComponent {
  /**
   * Text that will show on the button
   */
  @Input() text = 'Default';


  /**
   * Current acounter value
   */
  counter = 0;

  /**
   * Increate the counter
   * @param amount [amount = 1] Amount that will be encreased
   */
  increase(amount = 1) {
    this.counter += amount;
  }

}