"Basit bileşenin sarmallanması"

basic-example-wrapper-document.md

"Basit olarak tanımlanan bileşeni sarmallayan bileşin dökümantasyonu"

save-button

Tüm projede kaydetme işlemleri için kullanılacak olan buton tipidir.

Parametreleri

Parametre	Tip	Açıklama
badge	string	Tanımlanan değeri buton üzerinde bir rozet olarak gösterir.
badgeClass	string	Tanımlanmış olan rozetin sınıfı.
loading	boolean	Butonun loading durumumu belirtir, true ataması yapıldığında butonu loading durumuna geçirir.
disabled	boolean	Butonun kullanıcı etkileşimine açık olup olmadığını belirtir, true ataması yapıldığında butonu kullanıcı etkileşimine kapatır.
style	string	Butonun sitil bilgileri.
styleClass	string	Butonun sitil sınıf bilgileri.

Olaylar

Olay	Olay Parametreleri	Açıklama
onClick	N/A	Kullanıcı butona tıkladığında tetiklenir
onFocus	N/A	Kullanıcı fare ile butona odaklandığında tetiklenir.
onBlur	N/A	Kullanıcı buton üzerindeki odağı bıraktığında tetiklenir.

Kullanım Örnekleri

<!--Basit Kullanım !-->
<save-button></save-button>
<!-- Parametreler ile kullanımı !-->
<save-button badge="20" [disabled]="isSaveButtonDisabled"></save-button>
<save-button styleClass="my-custom-class"></save-button>
<save-button [isLoading]="isFormSending"></save-button>

<!-- Olay yakalama !-->
<save-button 
    (onClick)="handleSaveButtonClicked()"
    (onFocus)="handleSaveButtonFocused()"
    (onBlur)="handleSaveButtonBlured()"
></save-button>

basic-example-wrapper.component.spec.ts

// Basit olarak tanımlanan bileşeni sarmallayan bileşin test implementasyonu
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { Button, ButtonModule } from 'primeng/button';
import { SaveButtonComponent } from './save-button.component';

describe('SaveButtonComponent', () => {
  let component: SaveButtonComponent;
  let fixture: ComponentFixture<SaveButtonComponent>;
  let buttonComponent: Button;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports:[ButtonModule],
      declarations: [ SaveButtonComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(SaveButtonComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    buttonComponent = fixture.debugElement.query(By.css('p-button')).componentInstance;
  });

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

  it('Should set default properties of p-button',()=>{
   expect(buttonComponent.type).toEqual('submit');
   expect(buttonComponent.icon).toEqual('pi pi-save');
   expect(buttonComponent.iconPos).toEqual('left');
   expect(buttonComponent.loadingIcon).toEqual('pi pi-spinner pi-spin');
  });

  it('Should be able to pass badge value to p-button.',()=>{
    component.badge = 'TestValue';
    fixture.detectChanges();
    expect(buttonComponent.badge).toEqual('TestValue');
  });

  it('Should be able to pass badgeClass value to p-button.',()=>{
    component.badgeClass = 'TestValue';
    fixture.detectChanges();
    expect(buttonComponent.badgeClass).toEqual('TestValue');
  });

  it('Should be able to pass disable value to p-button.',()=>{
    component.disabled = true;
    fixture.detectChanges();
    expect(buttonComponent.disabled).toBeTrue();
    component.disabled = false;
    fixture.detectChanges();
    expect(buttonComponent.disabled).toBeFalse();
  });

  it('Should be able to pass style value to p-button',()=>{
    component.style = 'TestValue';
    fixture.detectChanges();
    expect(buttonComponent.style).toEqual('TestValue');
  });

  it('Should be able to pass styleClass value to p-button',()=>{
    component.styleClass = 'TestValue';
    fixture.detectChanges();
    expect(buttonComponent.styleClass).toEqual('TestValue');
  });

  it('Should be able to emit onClick event from p-button',()=>{
    const onClickSpy = spyOn(component.onClick,'next');
    buttonComponent.onClick.next();
    expect(onClickSpy).toHaveBeenCalled();
  });

  it('Should be able to emit onFocus event from p-button',()=>{
    const onFocusSpy = spyOn(component.onFocus,'next');
    buttonComponent.onFocus.next();
    expect(onFocusSpy).toHaveBeenCalled();
  });

  it('Should be able to emit onBlur event from p-button',()=>{
    const onBlurSpy = spyOn(component.onBlur,'next');
    buttonComponent.onBlur.next();
    expect(onBlurSpy).toHaveBeenCalled();
  });

  it('Should complete events when destroying',()=>{
    const onClickCompleteSpy = spyOn(component.onClick,'complete');
    const onFocusCompleteSpy = spyOn(component.onFocus,'complete');
    const onBlurCompleteSpy = spyOn(component.onBlur,'complete');
    component.ngOnDestroy();
    expect(onClickCompleteSpy).toHaveBeenCalled();
    expect(onFocusCompleteSpy).toHaveBeenCalled();
    expect(onBlurCompleteSpy).toHaveBeenCalled();
  });

});

basic-example-wrapper.component.ts

// Bu örnekte https://www.primetek.com.tr/ tarafından geliştirilen,
//  açık kaynak kodlu bir bileşen seti olan PrimeNG kullanılmıştır.
// PrimeNG içerisindeki p-button isimli arayüz bileşeni kaydetme işlemleri için 
//  özelleştirilmek amacı ile  sarmallanmıştır.
import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';

@Component({
  selector: 'save-button',
  template: `
            <p-button 
              [type]="type"
              [label]="label"
              [icon]="icon"
              [iconPos]="iconPos"
              [loadingIcon]="loadingIcon"
              [badge]="badge"
              [badgeClass]="badgeClass"
              [loading]="loading"
              [disabled]="disabled"
              [style]="style"
              [styleClass]="styleClass"
              (onClick)="onClick.next()"
              (onFocus)="onFocus.next()"
              (onBlur)="onBlur.next()"
            ></p-button>
            `
})
export class SaveButtonComponent implements OnDestroy {

  // Bileşenin varsayılan özellikleri
  readonly type = 'submit';

  readonly label= 'Kaydet';

  readonly icon='pi pi-save';

  readonly iconPos = 'left';

  readonly loadingIcon = 'pi pi-spinner pi-spin';

  // Bileşenin dışarıya açılan özellikleri

  @Input()
  badge: string;

  @Input()
  badgeClass: string;

  @Input()
  loading: boolean;

  @Input()
  disabled: boolean;

  @Input()
  style: string;
  
  @Input()
  styleClass: string;

  @Output()
  onClick = new EventEmitter<void>();
  
  @Output()
  onFocus = new EventEmitter<void>();

  @Output()
  onBlur = new EventEmitter<void>();


  // Bileşen ile ilgili oluşturulmuş olan etkinlik elemanları Bellek sızıntısına sebep olmamak için tamamlandı olarak işaretlenmek zorundadır.
  ngOnDestroy(): void{
    this.onClick.complete();
    this.onFocus.complete();
    this.onBlur.complete();
  }
}