diff --git a/front/src/common/component/entry/entry.html b/front/src/common/component/entry/entry.html new file mode 100644 index 0000000..69e6460 --- /dev/null +++ b/front/src/common/component/entry/entry.html @@ -0,0 +1,9 @@ +
+ +
diff --git a/front/src/common/component/entry/entry.less b/front/src/common/component/entry/entry.less new file mode 100644 index 0000000..d3c122b --- /dev/null +++ b/front/src/common/component/entry/entry.less @@ -0,0 +1,9 @@ +input[type='text'] { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + box-sizing: border-box; + z-index: 5; +} diff --git a/front/src/common/component/entry/entry.spec.ts b/front/src/common/component/entry/entry.spec.ts new file mode 100644 index 0000000..7276a8b --- /dev/null +++ b/front/src/common/component/entry/entry.spec.ts @@ -0,0 +1,68 @@ +import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { PasswordEntryComponent } from './entry'; + +describe('PasswordEntryComponent global test', () => { + let component: PasswordEntryComponent; + let fixture: ComponentFixture; + let input: HTMLInputElement; + let button: HTMLButtonElement; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [PasswordEntryComponent], + }).compileComponents(); + fixture = TestBed.createComponent(PasswordEntryComponent); + component = fixture.componentInstance; + input = fixture.nativeElement.querySelector('div').querySelector('input'); + button = fixture.nativeElement.querySelector('div').querySelector('button'); + }); + + it('Test mode password (default)', () => { + fixture.detectChanges(); + expect(input.textContent).toEqual(''); + expect(button.textContent).toEqual('visibility_off'); + expect(input.type).toEqual('password'); + }); + + it('Test mode text', () => { + component.passwordVisibility = true; + fixture.detectChanges(); + expect(input.textContent).toEqual(''); + expect(button.textContent).toEqual('visibility'); + expect(input.type).toEqual('text'); + }); + + it('test click on hide button', fakeAsync(() => { + fixture.detectChanges(); + expect(component.passwordVisibility).toEqual(false); + button.click(); + tick(); + fixture.detectChanges(); + expect(component.passwordVisibility).toEqual(true); + expect(button.textContent).toEqual('visibility'); + expect(input.type).toEqual('text'); + button.click(); + tick(); + fixture.detectChanges(); + expect(component.passwordVisibility).toEqual(false); + expect(button.textContent).toEqual('visibility_off'); + expect(input.type).toEqual('password'); + })); + + it('Set password', fakeAsync(() => { + fixture.detectChanges(); + expect(component.passwordVisibility).toEqual(false); + let tmpData = 'My beautifull Password'; + input.value = tmpData; + input.dispatchEvent(new Event('input')); + fixture.detectChanges(); + expect(input.textContent).toEqual(tmpData); + expect(component.value).toEqual(tmpData); + tmpData = ''; + input.value = tmpData; + input.dispatchEvent(new Event('input')); + fixture.detectChanges(); + expect(input.textContent).toEqual(tmpData); + expect(component.value).toEqual(tmpData); + })); +}); diff --git a/front/src/common/component/entry/entry.ts b/front/src/common/component/entry/entry.ts new file mode 100644 index 0000000..1cb22d4 --- /dev/null +++ b/front/src/common/component/entry/entry.ts @@ -0,0 +1,31 @@ +/** @file + * @author Edouard DUPIN + * @copyright 2018, Edouard DUPIN, all right reserved + * @license PROPRIETARY (see license file) + */ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'app-entry', + templateUrl: 'entry.html', + styleUrls: ['entry.less'], +}) +export class EntryComponent { + /// Value of the password + @Input() value: string = ''; + /// Placeholder of the Value + @Input() placeholder: string = ''; + /// The element has an error + @Input() hasError: boolean = false; + /// event when change the value of the password + @Output() changeValue: EventEmitter = new EventEmitter(); + + /** + * When input value change, need update the display and change the internal value. + * @param newValue New value set on the password + */ + onChangeValue(newValue: string): void { + this.value = newValue; + this.changeValue.emit(this.value); + } +}