ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/directives/autofocus.directive.spec.ts

   1 import { Component } from '@angular/core';
   2 import { ComponentFixture, TestBed } from '@angular/core/testing';
   3 import { By } from '@angular/platform-browser';
   4
   5 import { configureTestBed } from '../../../testing/unit-test-helper';
   6 import { AutofocusDirective } from './autofocus.directive';
   7
   8 @Component({
   9   template: `
  10     <form>
  11       <input id="x" type="text" />
  12       <input id="y" type="password" autofocus />
  13     </form>
  14   `
  15 })
  16 export class PasswordFormComponent {}
  17
  18 @Component({
  19   template: `
  20     <form>
  21       <input id="x" type="checkbox" [autofocus]="edit" />
  22       <input id="y" type="text" />
  23     </form>
  24   `
  25 })
  26 export class CheckboxFormComponent {
  27   public edit = true;
  28 }
  29
  30 @Component({
  31   template: `
  32     <form>
  33       <input id="x" type="text" [autofocus]="foo" />
  34     </form>
  35   `
  36 })
  37 export class TextFormComponent {
  38   foo() {
  39     return false;
  40   }
  41 }
  42
  43 describe('AutofocusDirective', () => {
  44   configureTestBed({
  45     declarations: [
  46       AutofocusDirective,
  47       CheckboxFormComponent,
  48       PasswordFormComponent,
  49       TextFormComponent
  50     ]
  51   });
  52
  53   it('should create an instance', () => {
  54     const directive = new AutofocusDirective(null);
  55     expect(directive).toBeTruthy();
  56   });
  57
  58   it('should focus the password form field', () => {
  59     const fixture: ComponentFixture<PasswordFormComponent> = TestBed.createComponent(
  60       PasswordFormComponent
  61     );
  62     fixture.detectChanges();
  63     const focused = fixture.debugElement.query(By.css(':focus'));
  64     expect(focused.attributes.id).toBe('y');
  65     expect(focused.attributes.type).toBe('password');
  66     const element = document.getElementById('y');
  67     expect(element === document.activeElement).toBeTruthy();
  68   });
  69
  70   it('should focus the checkbox form field', () => {
  71     const fixture: ComponentFixture<CheckboxFormComponent> = TestBed.createComponent(
  72       CheckboxFormComponent
  73     );
  74     fixture.detectChanges();
  75     const focused = fixture.debugElement.query(By.css(':focus'));
  76     expect(focused.attributes.id).toBe('x');
  77     expect(focused.attributes.type).toBe('checkbox');
  78     const element = document.getElementById('x');
  79     expect(element === document.activeElement).toBeTruthy();
  80   });
  81
  82   it('should not focus the text form field', () => {
  83     const fixture: ComponentFixture<TextFormComponent> = TestBed.createComponent(TextFormComponent);
  84     fixture.detectChanges();
  85     const focused = fixture.debugElement.query(By.css(':focus'));
  86     expect(focused).toBeNull();
  87     const element = document.getElementById('x');
  88     expect(element !== document.activeElement).toBeTruthy();
  89   });
  90 });