mgr/dashboard: Refactor autofocus directive

Refactor the autofocus directive and add some unit tests.

Signed-off-by: Volker Theile <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts
index 3126b4cfba76f2011dda1560758560a8c45a8565..27074ef606e92e2e73965b32cdef5d387fc6253e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts
@@ -1,8 +1,59 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { configureTestBed } from '../../../testing/unit-test-helper';
 import { AutofocusDirective } from './autofocus.directive';
 
+@Component({
+  template: `
+    <form>
+      <input id="x" type="text">
+      <input id="y" type="password" autofocus>
+    </form>`
+})
+export class PasswordFormComponent {}
+
+@Component({
+  template: `
+    <form>
+      <input id="x" type="checkbox" autofocus>
+      <input id="y" type="text">
+    </form>`
+})
+export class CheckboxFormComponent {}
+
 describe('AutofocusDirective', () => {
+  configureTestBed({
+    declarations: [AutofocusDirective, CheckboxFormComponent, PasswordFormComponent]
+  });
+
   it('should create an instance', () => {
     const directive = new AutofocusDirective(null);
     expect(directive).toBeTruthy();
   });
+
+  it('should focus the password form field', () => {
+    const fixture: ComponentFixture<PasswordFormComponent> = TestBed.createComponent(
+      PasswordFormComponent
+    );
+    fixture.detectChanges();
+    const focused = fixture.debugElement.query(By.css(':focus'));
+    expect(focused.attributes.id).toBe('y');
+    expect(focused.attributes.type).toBe('password');
+    const element = document.getElementById('y');
+    expect(element === document.activeElement).toBeTruthy();
+  });
+
+  it('should focus the checkbox form field', () => {
+    const fixture: ComponentFixture<CheckboxFormComponent> = TestBed.createComponent(
+      CheckboxFormComponent
+    );
+    fixture.detectChanges();
+    const focused = fixture.debugElement.query(By.css(':focus'));
+    expect(focused.attributes.id).toBe('x');
+    expect(focused.attributes.type).toBe('checkbox');
+    const element = document.getElementById('x');
+    expect(element === document.activeElement).toBeTruthy();
+  });
 });

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.ts
index 14f5efef7046fc8b5c622410616c07b2ad35e510..809d8b76421d63c0210c48d28d6b3ddad93f277a 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.ts
@@ -1,16 +1,17 @@
-import { Directive, ElementRef, OnInit } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef } from '@angular/core';
+
+import * as _ from 'lodash';
 
 @Directive({
   selector: '[autofocus]' // tslint:disable-line
 })
-export class AutofocusDirective implements OnInit {
+export class AutofocusDirective implements AfterViewInit {
   constructor(private elementRef: ElementRef) {}
 
-  ngOnInit() {
-    setTimeout(() => {
-      if (this.elementRef && this.elementRef.nativeElement) {
-        this.elementRef.nativeElement.focus();
-      }
-    }, 0);
+  ngAfterViewInit() {
+    const el: HTMLInputElement = this.elementRef.nativeElement;
+    if (_.isFunction(el.focus)) {
+      el.focus();
+    }
   }
 }