[DSC-106] Improved Tests

4Science · Oct 12, 2023 · c5b67d7 · c5b67d7
1 parent aa4e4bb
commit c5b67d7
Showing 1 changed file with 98 additions and 1 deletion.
diff --git a/...p/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts b/...p/shared/form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component.spec.ts
@@ -1,6 +1,6 @@
 // Load the implementations that should be tested
 import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, Renderer2 } from '@angular/core';
-import { ComponentFixture, inject, TestBed, waitForAsync, } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, inject, TestBed, tick, waitForAsync, } from '@angular/core/testing';
 import { FormControl, FormGroup } from '@angular/forms';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@@ -13,6 +13,7 @@ import {
   mockDynamicFormLayoutService,
   mockDynamicFormValidationService
 } from '../../../../../testing/dynamic-form-mock-services';
+import { By } from '@angular/platform-browser';
 
 
 export const DATE_TEST_GROUP = new FormGroup({
@@ -239,6 +240,102 @@ describe('DsDatePickerComponent test suite', () => {
         expect(dateComp.disabledMonth).toBeFalsy();
         expect(dateComp.disabledDay).toBeFalsy();
       });
+
+      it('should move focus on month field when on year field and tab pressed', fakeAsync(() => {
+        const event = {
+          field: 'day',
+          value: null
+        };
+        const event1 = {
+          field: 'month',
+          value: null
+        };
+        dateComp.onChange(event);
+        dateComp.onChange(event1);
+
+        const yearElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_year`));
+        const monthElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_month`));
+
+        yearElement.nativeElement.focus();
+        dateFixture.detectChanges();
+
+        expect(document.activeElement).toBe(yearElement.nativeElement);
+
+        dateFixture.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'tab' }));
+        dateFixture.detectChanges();
+
+        tick(200);
+        dateFixture.detectChanges();
+
+        expect(document.activeElement).toBe(monthElement.nativeElement);
+      }));
+
+      it('should move focus on day field when on month field and tab pressed', fakeAsync(() => {
+        const event = {
+          field: 'day',
+          value: null
+        };
+        dateComp.onChange(event);
+
+        const monthElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_month`));
+        const dayElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_day`));
+
+        monthElement.nativeElement.focus();
+        dateFixture.detectChanges();
+
+        expect(document.activeElement).toBe(monthElement.nativeElement);
+
+        dateFixture.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'tab' }));
+        dateFixture.detectChanges();
+
+        tick(200);
+        dateFixture.detectChanges();
+
+        expect(document.activeElement).toBe(dayElement.nativeElement);
+      }));
+
+      it('should move focus on month field when on day field and shift tab pressed', fakeAsync(() => {
+        const event = {
+          field: 'day',
+          value: null
+        };
+        dateComp.onChange(event);
+
+        const monthElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_month`));
+        const dayElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_day`));
+
+        dayElement.nativeElement.focus();
+        dateFixture.detectChanges();
+
+        expect(document.activeElement).toBe(dayElement.nativeElement);
+
+        dateFixture.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'shift.tab' }));
+        dateFixture.detectChanges();
+
+        tick(200);
+        dateFixture.detectChanges();
+
+        expect(document.activeElement).toBe(monthElement.nativeElement);
+      }));
+
+      it('should move focus on year field when on month field and shift tab pressed', fakeAsync(() => {
+        const yearElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_year`));
+        const monthElement = dateFixture.debugElement.query(By.css(`#${dateComp.model.id}_month`));
+
+        monthElement.nativeElement.focus();
+        dateFixture.detectChanges();
+
+        expect(document.activeElement).toBe(monthElement.nativeElement);
+
+        dateFixture.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'shift.tab' }));
+        dateFixture.detectChanges();
+
+        tick(200);
+        dateFixture.detectChanges();
+
+        expect(document.activeElement).toBe(yearElement.nativeElement);
+      }));
+
     });
   });