feat(circle-toggle): add focus() method (#159)

allianz · Jan 8, 2021 · 079d64d · 079d64d
1 parent 82a4763
commit 079d64d
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 60 deletions.
diff --git a/projects/ng-aquila/src/circle-toggle/circle-toggle/circle-toggle.component.ts b/projects/ng-aquila/src/circle-toggle/circle-toggle/circle-toggle.component.ts
@@ -11,7 +11,7 @@ import { ToggleButton } from './toggle-button';
 import { NxCircleToggleGroupComponent } from '../circle-toggle-group/circle-toggle-group.component';
 import { coerceBooleanProperty, BooleanInput } from '@angular/cdk/coercion';
 import { NxMobileToggleButtonComponent } from '../mobile-toggle-button/mobile-toggle-button.component';
-import { FocusMonitor } from '@angular/cdk/a11y';
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 
 export class ToggleChangeEvent {
   /** A toggle button */
@@ -344,6 +344,11 @@ OnInit, OnDestroy, AfterViewInit, ControlValueAccessor {
     this.disabled = isDisabled;
   }
 
+  /** Focuses the radio button element. */
+  focus(focusOrigin?: FocusOrigin) {
+    this._focusMonitor.focusVia(this._nativeInput, focusOrigin);
+  }
+
   /** @docs-private */
   toggle(event) {
     event.preventDefault();

diff --git a/projects/ng-aquila/src/circle-toggle/circle-toggle/toggle-button.component.spec.ts b/projects/ng-aquila/src/circle-toggle/circle-toggle/toggle-button.component.spec.ts
@@ -8,71 +8,71 @@ import { NxCircleToggleComponent } from './circle-toggle.component';
 import { dispatchTouchEvent, dispatchFakeEvent } from '../../cdk-test-utils';
 
 describe('NxToggleButton', () => {
-    let fixture: ComponentFixture<AbstractButtonToggleComponent>;
-    let toggleComponent: NxCircleToggleComponent;
-    let nativeToggleComponent: HTMLElement;
-    let input: HTMLInputElement;
-    let label: HTMLLabelElement;
-
-    function createTestComponent(component: Type<AbstractButtonToggleComponent>) {
-      fixture = TestBed.createComponent(component);
-      fixture.detectChanges();
-      toggleComponent = fixture.componentInstance.buttonToggle;
-      input = fixture.nativeElement.querySelector('input');
-      label = fixture.nativeElement.querySelector('label');
-      nativeToggleComponent = fixture.nativeElement.querySelector('nx-circle-toggle');
-    }
-
-    function click() {
-      input.click();
-      fixture.detectChanges();
-    }
-
-    beforeEach(async(() => {
-      TestBed.configureTestingModule({
-        declarations: [
-          SimpleCircleToggleButtonComponent,
-          PreselectedCircleToggleButtoncComponent,
-          NgModelToggleButtonComponent,
-          ReactiveToggleButtonComponent,
-          DisabledToggleButtonComponent,
-          SvgCircleToggleButtonComponent,
-          CircleToggleButtonOnPushComponent,
-          TextCircleToggleButtonComponent
-        ],
-        imports: [
-          NxCircleToggleModule, FormsModule, ReactiveFormsModule
-        ]
-      }).compileComponents();
-    }));
-
-    it('should change the checked attribute of the toggle button when clicked', () => {
-        createTestComponent(SimpleCircleToggleButtonComponent);
-        click();
-        expect(toggleComponent.checked).toBeTruthy();
-    });
+  let fixture: ComponentFixture<AbstractButtonToggleComponent>;
+  let toggleComponent: NxCircleToggleComponent;
+  let nativeToggleComponent: HTMLElement;
+  let input: HTMLInputElement;
+  let label: HTMLLabelElement;
+
+  function createTestComponent(component: Type<AbstractButtonToggleComponent>) {
+    fixture = TestBed.createComponent(component);
+    fixture.detectChanges();
+    toggleComponent = fixture.componentInstance.buttonToggle;
+    input = fixture.nativeElement.querySelector('input');
+    label = fixture.nativeElement.querySelector('label');
+    nativeToggleComponent = fixture.nativeElement.querySelector('nx-circle-toggle');
+  }
+
+  function click() {
+    input.click();
+    fixture.detectChanges();
+  }
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        SimpleCircleToggleButtonComponent,
+        PreselectedCircleToggleButtoncComponent,
+        NgModelToggleButtonComponent,
+        ReactiveToggleButtonComponent,
+        DisabledToggleButtonComponent,
+        SvgCircleToggleButtonComponent,
+        CircleToggleButtonOnPushComponent,
+        TextCircleToggleButtonComponent
+      ],
+      imports: [
+        NxCircleToggleModule, FormsModule, ReactiveFormsModule
+      ]
+    }).compileComponents();
+  }));
 
-    it('should fire change events', () => {
+  it('should change the checked attribute of the toggle button when clicked', () => {
       createTestComponent(SimpleCircleToggleButtonComponent);
-      spyOn(toggleComponent.checkedChange, 'emit');
       click();
-      expect(toggleComponent.checkedChange.emit).toHaveBeenCalled();
-    });
+      expect(toggleComponent.checked).toBeTruthy();
+  });
 
-    it('should support preselection', () => {
-      createTestComponent(PreselectedCircleToggleButtoncComponent);
-      expect(input.checked).toBe(true);
-    });
+  it('should fire change events', () => {
+    createTestComponent(SimpleCircleToggleButtonComponent);
+    spyOn(toggleComponent.checkedChange, 'emit');
+    click();
+    expect(toggleComponent.checkedChange.emit).toHaveBeenCalled();
+  });
 
-    it('can be disabled', () => {
-      createTestComponent(DisabledToggleButtonComponent);
-      expect(input.disabled).toBe(true);
-    });
+  it('should support preselection', () => {
+    createTestComponent(PreselectedCircleToggleButtoncComponent);
+    expect(input.checked).toBe(true);
+  });
 
-    it('should link the label with the input field', () => {
-      createTestComponent(SimpleCircleToggleButtonComponent);
-      expect(input.id).toBe(label.htmlFor);
-    });
+  it('can be disabled', () => {
+    createTestComponent(DisabledToggleButtonComponent);
+    expect(input.disabled).toBe(true);
+  });
+
+  it('should link the label with the input field', () => {
+    createTestComponent(SimpleCircleToggleButtonComponent);
+    expect(input.id).toBe(label.htmlFor);
+  });
 
   it('should work in template driven forms using ngModel', fakeAsync(() => {
 
@@ -112,6 +112,12 @@ describe('NxToggleButton', () => {
     expect(reactComp.testGroup.value.reactiveToggle).toBeFalsy();
   }));
 
+  it('focuses the toggle button when calling focus()', () => {
+    createTestComponent(SimpleCircleToggleButtonComponent);
+    toggleComponent.focus();
+    expect(nativeToggleComponent.querySelector('.nx-circle-toggle__input')).toEqual(document.activeElement);
+  });
+
   describe('programmatic change', () => {
 
     it('should update view on checked change', () => {