show password directive test and document

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: `
+    <div class="d-flex flex-column">
+      <label>Password</label>
+      <input [abpShowPassword]="showPassword"/>
+      <i (click)="showPassword = !showPassword">icon</i>
+    </div>
+  `
+})
+export class TestComponent{
+  showPassword = false;
+}
+```
+
+The `abpShowPassword` attribute has been added to the `<input>` 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)

npm/ng-packs/packages/core/src/lib/tests/show-password-directive.spec.ts

@@ -0,0 +1,59 @@
+import { Component, DebugElement } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { ShowPasswordDirective } from '../directives';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  standalone:true,
+  template: `
+  <input [abpShowPassword]="true">
+  <input [abpShowPassword]="false">
+  <input />
+  <input [abpShowPassword]="showPassword" />`,
+  imports:[ShowPasswordDirective]
+})
+class TestComponent {
+  showPassword:boolean = false
+}
+
+describe('ShowPasswordDirective',()=>{
+  let fixture: ComponentFixture<TestComponent>;;
+  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')
+    });
+  });