From 9c6529e93f0e11e4a555264cb21f8ed694949456 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 28 Jul 2023 14:59:40 +0300 Subject: [PATCH] show password directive test and document --- docs/en/UI/Angular/Show-Password-Directive.md | 52 +++++++++++++++ .../Angular/images/showPasswordDirective1.png | Bin 0 -> 3707 bytes .../Angular/images/showPasswordDirective2.png | Bin 0 -> 3932 bytes .../lib/tests/show-password-directive.spec.ts | 59 ++++++++++++++++++ 4 files changed, 111 insertions(+) create mode 100644 docs/en/UI/Angular/Show-Password-Directive.md create mode 100644 docs/en/UI/Angular/images/showPasswordDirective1.png create mode 100644 docs/en/UI/Angular/images/showPasswordDirective2.png create mode 100644 npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts diff --git a/docs/en/UI/Angular/Show-Password-Directive.md b/docs/en/UI/Angular/Show-Password-Directive.md new file mode 100644 index 0000000000..db54bcdd76 --- /dev/null +++ b/docs/en/UI/Angular/Show-Password-Directive.md @@ -0,0 +1,52 @@ +# Show Password Directive + +In password input, text can be shown easily via changing input type attribute to `text`. To make this even easier, you can use the `ShowPasswordDirective` which has been exposed by the `@abp/ng.core` package. + + +## Getting Started + +In order to use the `ShowPasswordDirective` in an HTML template, the **`CoreModule`** should be imported into your module like this: + +```ts +// ... +import { CoreModule } from '@abp/ng.core'; + +@NgModule({ + //... + imports: [..., CoreModule], +}) +export class MyFeatureModule {} +``` + +## Usage + +The `ShowPasswordDirective` is very easy to use. The directive's selector is **`abpShowPassword`**. By adding the `abpShowPassword` attribute to an input element, you can activate the `ShowPasswordDirective` for the input element. + +See an example usage: + +```ts +@Component({ + selector: 'test-component', + standalone: true, + template: ` +
+ + + icon +
+ ` +}) +export class TestComponent{ + showPassword = false; +} +``` + +The `abpShowPassword` attribute has been added to the `` element. Click icon to activate the `ShowPasswordDirective`. + +See the result: + +![Show Password directive](./images/showPasswordDirective1.png) + +To see password input click icon. + +![Show Password directive](./images/showPasswordDirective2.png) \ No newline at end of file diff --git a/docs/en/UI/Angular/images/showPasswordDirective1.png b/docs/en/UI/Angular/images/showPasswordDirective1.png new file mode 100644 index 0000000000000000000000000000000000000000..7b64be2b5f14c8e8affb7849331f0f5398188193 GIT binary patch literal 3707 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 YNubRLytJp=IDz)l)k46FG%?Tr1J+;SK>z>% literal 0 HcmV?d00001 diff --git a/docs/en/UI/Angular/images/showPasswordDirective2.png b/docs/en/UI/Angular/images/showPasswordDirective2.png new file mode 100644 index 0000000000000000000000000000000000000000..43199ffeaa2b1a813743599a1f74137404254ee0 GIT binary patch literal 3932 zcma)9c{r5c+aIzg+4mt!mWYsb)W|+)rYPB$3`(|;ol(-*X~w=Q5h457cP4u=XzW`m zG)N5D-pBWP|NOr1?{}{2dCqyx@|^qr-1j;6{fW8**So;L%K!p_F2MA)jX@wv7|^~; zM+3ZjGvwDnpo{b{?OXT!vwqE@JPEtm_-*kf;t{K<#)AlHnHH)73MMRNmwXoN`BRSd zjJid*^c_*jD+F7X50*?Z{x&|tx+PTL>je5@AKtn zGBQ$M)L5St=%BwP1k={m7Nv?1JsW0b#{gg2ns@$n@QqAiWrtn&qv&3{$cKry0t|tv ze<#!J674F&hczG_cHecZKa2?Vv9qB&xOIXorJnD}(os#xmi)7IjHA4cLv*~5no^FP zGc5(`N$y9*_p;L%ZM=<+v$MGEKK#!?uP{(j$Lw~l#p;UuavKV95!~ZWmlT6joJlD> z$JNT_Qlrke4 z#)_Yn70TN^TyvmC)^Pk@KXSX~BQOx^mjCC0>|NzR0Yg&e?H6)keas6B6XUK|$es1H z{=daJ<1bd)L#*K^D0g9*9Ue}2H8Tg}=X>`f>W(>BSPp!n+7pqTDe^S%4az0h{@i_j ziRN4|n$pvOa{#rt(nvn9a?;h5HoC9Y7SKXzZDi-UN;|hn!)uFZ^X?TkIHZ$&C8IrcW zR?Nk_`s>2G5Ap2E5#{1fY3=lTy-T}iKO)YIC{qT22E(=Xk5yBI(_=qIcRpx*HN`s@ zgw^PGEj(T4?j^c1$`R}-_v@ceOq1-1OL7~k_u${0l))NZMHKR(zZpeIOP@(@uBY|X zVc}@Lr!z=&3Q||8wTHISPtKmdJDvx2obSb*0W-eG;jy`%L-+0Kq6c0+J&_U;Pf-?E z-(rnkGR8CeA;*ZSCPf1!o(P^m>f98-;8yM|Y?$F8*jiuj)dZ-Hg`w&+`PajNI$e3e zY9DaP)rAHQrQX{JhfY^69$ZTGDpcvq7MeC-O&3x;R=D7Qi4C7Kenc8^w}6)B|J=?@ zUlY_Cd;LI#8=7e;rV>@9WZZNU^uYS3hcs}OUQ2hTg1EbWJmDke*nTR%NFKdDp{q%L zy;v=5!|+K`t5T$yQzY*!I2_0<|-C>kG;c(dcVp z(TqlO0p`9T7PYBDKjUd*PHU5Y?Ld_j)EcHin{~53wNYwU|Ll0j`m;J6XF=T4jYhZT z`rf}Sj_(I&1_T9N03Y9*Rpv=bO!QpUM8vnOxxj-@ets(zuTeSQwVd(T#pR$s|NWwf zT()~b?PP|*He(YHibn`imrdOG;giQhV3BhLQk*Zq=qe;m_y9knGb%Xxn^Fb;b;VdQ(E z3FPY^w5EYng2pI+XyEiv))ZOkupf7q0|Itl&1O7C^3~$QQ{R==?|1l69og4LZADE3 zz9nyGmL+YDME9qDnm49R(@*!~qQ@&$I}M4sB-B4vGw#?^lp+QX>h?AhHNuuHO{?=+ z3uV3J#z*IEm-zpQHw{$MMz#cw$luDQ&rm77-Crn}Qj$FzCmU?843yBt<_uDSDC?EW zNeu9qEXIb;&t}31c14H%>|vWQFV9HZp>?`F-jn{DGy# zlfE&7#9Ytk2z$TGyy}rPzfM32J1^~Z`(%xsrn3|#s06AH)+s^a1BlX@SjH0vLQpW5 zc`V1_ubsZuQzp!Ee#4%`oDF^ymhH)=9JhX~5ctUZV~}N$YK7%-YM#JZ)XDoMvZpxL z9@`W;SdhlMM+hA*LZK^hj`9%Il;u;uj0MF$Bint6VXBL$&|UKNnzVYEWl7Rus@WcU zDe~~kr}TO-g(1l7Y5Av~X9-|KMuG>tb9*HM2S>e0o9U4>i?t11!tdM?*hyty_-UxB zV9gHA)G-)|a+qV7xX~KcoDDK}o!RVkKXEacCs`SP=W6dpVlGbD$xe;P|AuAT-um6m z>%z46?h+vE^Ka8tR2psQf_JDH#PABYI=aQI*JAr68^%?}V6IP?XxU#vn|gP}d�Y zx-=@ZKc@!UqB`SJS~_LXdsHc4kZavv)ya!NHN1YKx6!>ZL-8~2tgiLj$XwO;4d2+Ksk1Ka;xH8ZN3$6e-$NX3jNU>tlZ zQ4zb%Z~F#Oi;t_uFmlS1clM@ox8~DtyNp??q?Cu(Xb)zGy7Z^s^et7LP>40(j182Xjlu#7K|v}%u{U_&hCCOuTzgM(&s4_1Dys#{!414iZG}UF zRtzUsc~Bwr2Tv%xid7ipPLnh_+eL~+d5`xk2Sth5AnE!(hE}yJ!+aT;ZLP6uYij*D zbzLN3D@5sfNarK*@l%u8<)YY0E=vA9q@SeD0C;6`e`|bY+04es{Pt$PDj?TpQoAHP zXy$qVjjqNEx*xE=Xm>@vuh~?0_nhxW{%~$XG=^&x^VRqkiIvN7R?wrg zTzvfy_EjOQFRI&LO2WND!LRfj1XeKBj@k!(CvOurCEpU9JLJE_hfD=qAyAzsIyc0^ z4@3L|TWVLk)(@+Ot-L6{*95L@FA*&?Nbmf`fV;x0N84Rro^t8dk#JgaWlUxwaV%;fdRt0cIzjw`v++JMTNJ4&gZ?)2xP51m8SQ0zHm4)Tx?@- z0(r*{RmS0|)%iX4&dH^HY$4bhpC!NdSN23hRBMzJQjZRIB#sHu%eQD-=1|qZ2G!>e zuLZ}vf)=KGlM*lus(N3Guv5)=>zrJfd8@U2sSm% zKB@rOC=pkc*ftja%s}aUVOoc!?#~nfvXb~~vgW41dv7xPnU~3UX|Yn*hh`ddurcuu z?0ACavM=9b^v=n|URTK8?g9;p4*OufzOD7}+a+uZvA*ryo#!$cL-8U#v6~u_93+pM)@PVZhFKZ?&J1|(k3;aqTJif) zzhlq?Y(8)P8uAn(3JuK_L>c zjJq2d-D*_}tcU$l1>Wa%dN{rM+>Wqk(j~bD8R|G1jnw z`MCDZ@=)!+hCZ(R+0XZYB}6O%R#6?^v1)HWf0l`?81T6Y=mI@<6$%@5_J|p#eM>ps zI0gei1J*AznP~g#y!88)hlExH-%K4&(IGm@;fLbnm$?apyjeuv#aT08qHrpvk3CLO z?bVO3Dlf9ZH8@4`fkg-d?DP0r + + + `, + imports:[ShowPasswordDirective] +}) +class TestComponent { + showPassword:boolean = false +} + +describe('ShowPasswordDirective',()=>{ + let fixture: ComponentFixture;; + let des : DebugElement[]; + let desAll : DebugElement[]; + let bareInput; + + beforeEach(()=>{ + fixture = TestBed.configureTestingModule({ + imports: [ TestComponent ] + }).createComponent(TestComponent) + + fixture.detectChanges(); // initial binding + + // all elements with an attached HighlightDirective + des = fixture.debugElement.queryAll(By.directive(ShowPasswordDirective)); + + // all inputs includes nondirective + desAll = fixture.debugElement.queryAll(By.all()); + + // the input without the ShowPasswordDirective + bareInput = fixture.debugElement.query(By.css('input:not([abpShowPassword])')); + }) + + // color tests + it('should have three input has ShowPasswordDirective elements', () => { + expect(des.length).toBe(3); + }); + + test.each([[0,'text'],[1,'password'],[2,'text'],[3,'password']])('%p. input type must be %p)', (index,inpType) => { + const inputType = desAll[index].nativeElement.type; + expect(inputType).toBe(inpType); + }); + + it('should have three input has ShowPasswordDirective elements', () => { + let input = des[2].nativeElement + expect(input.type).toBe('password') + fixture.componentInstance.showPassword = true + fixture.detectChanges() + expect(input.type).toBe('text') + }); + }); \ No newline at end of file