DS-257: focus service tests

ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.spec.ts

@@ -1,16 +1,116 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FudisFocusService } from './focus.service';
+import { Component } from '@angular/core';
+// import { getElement } from '../../utilities/tests/utilities';
+import { ButtonComponent } from '../../components/button/button.component';
+import { LinkComponent } from '../../components/link/link.component';
+import { IconComponent } from '../../components/icon/icon.component';
+import { LinkApiDirective } from '../../directives/link/link-api/link-api.directive';
+import { LinkDirective } from '../../directives/link/link.directive';
+
+@Component({
+  selector: 'fudis-mock-component',
+  template: `<div class="mock-container">
+    <fudis-link (handleFocus)="handleFocus('fudis-link-1')" [initialFocus]="true" [href]="'/'"
+      >First link</fudis-link
+    >
+    <fudis-link
+      (handleFocus)="handleFocus('fudis-link-2')"
+      *ngIf="secondLinkVisible"
+      [initialFocus]="true"
+      [href]="'/'"
+      >Second link</fudis-link
+    >
+  </div>`,
+})
+class MockFocusComponent {
+  secondLinkVisible = false;
+
+  focusedId: string;
+
+  handleFocus(id: string) {
+    console.log('hellou!!!!!!!!');
+    this.focusedId = id;
+  }
+}
 
-// TODO: Write tests
 describe('FudisFocusService', () => {
+  let component: MockFocusComponent;
   let service: FudisFocusService;
+  let fixture: ComponentFixture<MockFocusComponent>;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      declarations: [
+        MockFocusComponent,
+        ButtonComponent,
+        IconComponent,
+        LinkComponent,
+        LinkDirective,
+        LinkApiDirective,
+      ],
+    });
+
+    fixture = TestBed.createComponent(MockFocusComponent);
+    component = fixture.componentInstance;
     service = TestBed.inject(FudisFocusService);
+    service.addToIgnoreList('fudis-link-2');
+    fixture.detectChanges();
+  });
+
+  describe('Basic functionality', () => {
+    it('should be created', () => {
+      expect(service).toBeTruthy();
+    });
+
+    it('getFocusTarget and setFocusTarget', () => {
+      expect(service.getFocusTarget()).toEqual(undefined);
+
+      const newButton: HTMLButtonElement = document.createElement('button');
+      newButton.textContent = 'Click me!';
+      newButton.setAttribute('id', 'target-button-id');
+
+      service.setFocusTarget(newButton);
+
+      expect(service.getFocusTarget()).toEqual(newButton);
+    });
+
+    it('ignoreList functionality', () => {
+      expect(service.getIgnoreList()).toEqual(['fudis-link-2']);
+
+      service.addToIgnoreList('ignore-1');
+      service.addToIgnoreList('ignore-1');
+      service.addToIgnoreList('ignore-1');
+      service.addToIgnoreList('ignore-2');
+      service.addToIgnoreList('ignore-3');
+      service.removeFromIgnoreList('ignore-2');
+      service.removeFromIgnoreList('mistyped-ingore-1');
+
+      expect(service.isIgnored('ignore-1')).toEqual(true);
+      expect(service.isIgnored('ignore-2')).toEqual(false);
+
+      expect(service.getIgnoreList()).toEqual(['fudis-link-2', 'ignore-1', 'ignore-3']);
+    });
   });
 
-  it('should be created', () => {
-    expect(service).toBeTruthy();
+  describe('Service with components', () => {
+    it('should focus to non-ignored link on init', () => {
+      expect(component.focusedId).toEqual('fudis-link-1');
+    });
+
+    it('should not focus to ignored link when link is set visible', () => {
+      component.secondLinkVisible = true;
+      fixture.detectChanges();
+
+      expect(component.focusedId).toEqual('fudis-link-1');
+    });
+
+    it('should focus to second link when it is removed from ignored list and set visible', () => {
+      service.removeFromIgnoreList('fudis-link-2');
+      component.secondLinkVisible = true;
+      fixture.detectChanges();
+
+      expect(component.focusedId).toEqual('fudis-link-2');
+    });
   });
 });

ngx-fudis/projects/ngx-fudis/src/lib/services/focus/focus.service.ts

@@ -34,16 +34,18 @@ export class FudisFocusService {
   }
 
   /**
-   * Focus target element by id
+   * Focus target element by id. If focusable element is not available when function is called, it will repeatively call itself until try counter is full.
+   * @param id target to focus
+   * @param tryCounter how many times function should try to focus to given id
    */
-  public focusToElementById(id: string, tryCounter: number = 100): void {
+  public focusToElementById(id: string, numberOfTries: number = 100): void {
     setTimeout(() => {
       const element = this._document.getElementById(id);
 
       if (element) {
         element.focus();
-      } else if (tryCounter > 0) {
-        this.focusToElementById(id, tryCounter - 1);
+      } else if (numberOfTries > 0) {
+        this.focusToElementById(id, numberOfTries - 1);
       }
     }, 50);
   }