mirror of https://github.com/abpframework/abp.git
Mahmut Gundogdu
4 years ago
committed by
GitHub
GitHub
12 changed files with 267 additions and 53 deletions
@ -0,0 +1,45 @@ |
|||
import { AbstractNgModelComponent } from '@abp/ng.core'; |
|||
import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@angular/core'; |
|||
import { NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-checkbox', |
|||
template: ` |
|||
<div class="mb-3"> |
|||
<input |
|||
type="checkbox" |
|||
[(ngModel)]="value" |
|||
[id]="checkboxId" |
|||
[readonly]="checkboxReadonly" |
|||
[ngClass]="checkboxClass" |
|||
[ngStyle]="checkboxStyle" |
|||
(blur)="onBlur.next()" |
|||
(focus)="onFocus.next()" |
|||
> |
|||
<label *ngIf="label" [ngClass]="labelClass" [for]="checkboxId" > {{label | abpLocalization}} </label> |
|||
</div> |
|||
`,
|
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => FormCheckboxComponent), |
|||
multi: true, |
|||
}, |
|||
] |
|||
}) |
|||
export class FormCheckboxComponent extends AbstractNgModelComponent { |
|||
|
|||
@Input() label?: string; |
|||
@Input() labelClass = 'form-check-label'; |
|||
@Input() checkboxId!: string; |
|||
@Input() checkboxStyle = ''; |
|||
@Input() checkboxClass = 'form-check-input'; |
|||
@Input() checkboxReadonly = false; |
|||
@Output() onBlur = new EventEmitter<void>(); |
|||
@Output() onFocus = new EventEmitter<void>(); |
|||
|
|||
constructor(injector: Injector) { |
|||
super(injector); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
import { AbstractNgModelComponent } from '@abp/ng.core'; |
|||
import { Component, EventEmitter, forwardRef, Injector, Input, Output } from '@angular/core'; |
|||
import { NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-form-input', |
|||
template: ` |
|||
<div class="mb-3"> |
|||
<label class= *ngIf="label" [ngClass]="labelClass" [for]="inputId" > {{label | abpLocalization}} </label> |
|||
<input |
|||
type="text" |
|||
[id]="inputId" |
|||
[placeholder]="inputPlaceholder" |
|||
[readonly]="inputReadonly" |
|||
[ngClass]="inputClass" |
|||
[ngStyle]="inputStyle" |
|||
(blur)="onBlur.next()" |
|||
(focus)="onFocus.next()" |
|||
[(ngModel)]="value"> |
|||
</div> |
|||
`,
|
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => FormInputComponent), |
|||
multi: true, |
|||
}, |
|||
] |
|||
}) |
|||
export class FormInputComponent extends AbstractNgModelComponent { |
|||
@Input() inputId!: string; |
|||
@Input() inputReadonly: boolean = false; |
|||
@Input() label: string = ''; |
|||
@Input() labelClass = 'form-label'; |
|||
@Input() inputPlaceholder: string = ''; |
|||
@Input() inputType: string = 'text'; |
|||
@Input() inputStyle: string = ''; |
|||
@Input() inputClass: string = 'form-control'; |
|||
@Output() onBlur = new EventEmitter<void>(); |
|||
@Output() onFocus = new EventEmitter<void>(); |
|||
|
|||
constructor(injector: Injector) { |
|||
super(injector); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
export enum eFormComponets { |
|||
FormInputComponent = 'FormInputComponent', |
|||
FormCheckboxComponent = 'FormCheckboxComponent', |
|||
} |
|||
@ -1 +1,2 @@ |
|||
export * from './form'; |
|||
export * from './route-names'; |
|||
|
|||
@ -0,0 +1,44 @@ |
|||
import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; |
|||
import { FormCheckboxComponent } from '../components/checkbox/checkbox.component'; |
|||
|
|||
describe('FormCheckboxComponent', () => { |
|||
let spectator: SpectatorHost<FormCheckboxComponent>; |
|||
|
|||
const createHost = createHostFactory(FormCheckboxComponent); |
|||
|
|||
beforeEach( |
|||
() => |
|||
(spectator = createHost( |
|||
'<abp-checkbox></abp-checkbox>', |
|||
{ |
|||
hostProps: { attributes: { autofocus: '', name: 'abp-checkbox' } }, |
|||
}, |
|||
)), |
|||
); |
|||
|
|||
it('should display the input', () => { |
|||
expect(spectator.query('input')).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should equal the default classes to form-check-input', () => { |
|||
expect(spectator.query('input')).toHaveClass('form-check-input'); |
|||
}); |
|||
|
|||
it('should equal the default type to checkbox', () => { |
|||
expect(spectator.query('input')).toHaveAttribute('type', 'checkbox'); |
|||
}); |
|||
|
|||
it('should be readonly when checkboxReadonly is true', () => { |
|||
spectator.component.checkboxReadonly = true; |
|||
spectator.detectComponentChanges(); |
|||
expect(spectator.query('[readonly]')).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should not contain readonly when checboxReadonly is false', () => { |
|||
spectator.component.checkboxReadonly = false; |
|||
spectator.detectComponentChanges(); |
|||
expect(spectator.query('[disabled]')).toBeFalsy(); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
@ -0,0 +1,46 @@ |
|||
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
|||
import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest'; |
|||
import { FormInputComponent } from '../components/form-input/form-input.component'; |
|||
|
|||
|
|||
describe('FormInputComponent', () => { |
|||
let spectator: SpectatorHost<FormInputComponent>; |
|||
|
|||
const createHost = createHostFactory(FormInputComponent); |
|||
|
|||
beforeEach( |
|||
() => |
|||
(spectator = createHost( |
|||
'<abp-form-input></abp-form-input>', |
|||
{ |
|||
hostProps: { attributes: { autofocus: '', name: 'abp-form-input' } }, |
|||
}, |
|||
)), |
|||
); |
|||
|
|||
it('should display the input', () => { |
|||
expect(spectator.query('input')).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should equal the default classes to form-control', () => { |
|||
expect(spectator.query('input')).toHaveClass('form-control'); |
|||
}); |
|||
|
|||
it('should equal the default type to text', () => { |
|||
expect(spectator.query('input')).toHaveAttribute('type', 'text'); |
|||
}); |
|||
|
|||
it('should be readonly when inputReadonly is true', () => { |
|||
spectator.component.inputReadonly = true; |
|||
spectator.detectComponentChanges(); |
|||
expect(spectator.query('[readonly]')).toBeTruthy(); |
|||
}); |
|||
|
|||
it('should not contain readonly when inputReadonly is false', () => { |
|||
spectator.component.inputReadonly = false; |
|||
spectator.detectComponentChanges(); |
|||
expect(spectator.query('[disabled]')).toBeFalsy(); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
Loading…
Reference in new issue