Merge pull request #17231 from abpframework/issue-#16808

Created tests and documents for ShowPassword,CapsLock directives

docs/en/UI/Angular/CapsLock.directive.md

@@ -0,0 +1,80 @@
+# Caps Lock Directive
+
+In password inputs, You may want to show if Caps Lock is on. To make this even easier, you can use the `TrackCapsLockDirective` which has been exposed by the `@abp/ng.core` package.
+
+
+## Getting Started
+
+`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component:
+
+**Importing to NgModule**
+```ts
+import { TrackCapsLockDirective } from '@abp/ng.core';
+
+@NgModule({
+  //...
+  declarations: [
+   ...,
+   TestComponent
+  ],
+  imports: [
+   ...,
+   TrackCapsLockDirective
+  ],
+})
+export class MyFeatureModule {}
+```
+
+## Usage
+
+The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user.
+
+See an example usage:
+
+**NgModule Component usage**
+```ts
+@Component({
+  selector: 'test-component',
+  template: `
+    <div class="d-flex flex-column">
+      <label>Password</label>
+      <input (abpCapsLock)="capsLock = $event"/>
+      <i *ngIf="capsLock">icon</i>
+    </div>
+  `
+})
+export class TestComponent{
+  capsLock = false;
+}
+```
+
+**Standalone Component usage**
+```ts
+import { TrackCapsLockDirective } from '@abp/ng.core'
+
+@Component({
+  selector: 'standalone-component',
+  standalone: true,
+  template: `
+    <div class="d-flex flex-column">
+      <label>Password</label>
+      <input (abpCapsLock)="capsLock = $event"/>
+      <i *ngIf="capsLock">icon</i>
+    </div>
+  `,
+  imports: [TrackCapsLockDirective]
+})
+export class StandaloneComponent{
+  capsLock = false;
+}
+```
+
+The `abpCapsLock` event has been added to the `<input>` element. Press Caps Lock to activate the `TrackCapsLockDirective`.
+
+See the result:
+
+![Show Password directive](./images/CapsLockDirective1.png)
+
+To see Caps Lock icon press Caps Lock.
+
+![Show Password directive](./images/CapsLockDirective2.png)

docs/en/UI/Angular/Show-Password-Directive.md

@@ -0,0 +1,77 @@
+# 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
+`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component:
+
+**Importing to NgModule**
+```ts
+import { ShowPasswordDirective } from '@abp/ng.core';
+
+@NgModule({
+  //...
+  declarations: [
+   ...,
+   TestComponent
+  ],
+  imports: [
+   ...,
+   ShowPasswordDirective
+  ],
+})
+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:
+
+**NgModule Component usage**
+```ts
+@Component({
+  selector: 'test-component',
+  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;
+}
+```
+**Standalone Component usage**
+```ts
+import { ShowPasswordDirective } from '@abp/ng.core';
+@Component({
+  selector: 'standalone-component',
+  standalone: true,
+  template: `
+    <div class="d-flex flex-column">
+      <label>Password</label>
+      <input [abpShowPassword]="showPassword"/>
+      <i (click)="showPassword = !showPassword">icon</i>
+    </div>
+  `,
+  imports: [ShowPasswordDirective]
+})
+export class StandaloneComponent{
+  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/capsLock.directive.spec.ts

@@ -0,0 +1,57 @@
+import { Component, DebugElement } from '@angular/core'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { TrackCapsLockDirective } from '../directives';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  standalone:true,
+  template: `
+    <input (abpCapsLock)="capsLock = $event" />
+  `,
+  imports:[TrackCapsLockDirective]
+})
+class TestComponent {
+  capsLock:boolean = false
+}
+
+describe('TrackCapsLockDirective',()=>{
+  let fixture: ComponentFixture<TestComponent>;;
+  let des : DebugElement[];
+
+  beforeEach(()=>{
+    fixture = TestBed.configureTestingModule({
+      imports: [ TestComponent ]
+    }).createComponent(TestComponent);
+
+    fixture.detectChanges();
+
+    des = fixture.debugElement.queryAll(By.directive(TrackCapsLockDirective));
+  });
+
+    test.each(['keydown','keyup'])('is %p works when press capslock and is emit status', (eventName) => {
+      const event = new KeyboardEvent(eventName, {
+        key: 'CapsLock',
+        modifierCapsLock: true
+      });
+      window.dispatchEvent(event);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.capsLock).toBe(true)
+    });
+
+    test.each(['keydown','keyup'])('is %p detect the change capslock is emit status', (eventName) => {
+      const trueEvent = new KeyboardEvent(eventName, {
+        key: 'CapsLock',
+        modifierCapsLock: true
+      });
+      window.dispatchEvent(trueEvent);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.capsLock).toBe(true)
+      const falseEvent = new KeyboardEvent(eventName, {
+        key: 'CapsLock',
+        modifierCapsLock: false
+      });
+      window.dispatchEvent(falseEvent);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.capsLock).toBe(false)
+    });
+  });

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

@@ -0,0 +1,55 @@
+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();
+
+    des = fixture.debugElement.queryAll(By.directive(ShowPasswordDirective));
+
+    desAll = fixture.debugElement.queryAll(By.all());
+    
+    bareInput = fixture.debugElement.query(By.css('input:not([abpShowPassword])'));
+    })
+
+    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')
+    });
+  });