|
| 1 | +import { HttpClient } from '@angular/common/http'; |
| 2 | +import { EventEmitter } from '@angular/core'; |
| 3 | +import { |
| 4 | + ComponentFixture, |
| 5 | + inject, |
| 6 | + TestBed, |
| 7 | +} from '@angular/core/testing'; |
| 8 | +import { ReactiveFormsModule } from '@angular/forms'; |
| 9 | +import { By } from '@angular/platform-browser'; |
| 10 | +import { |
| 11 | + DYNAMIC_FORM_CONTROL_MAP_FN, |
| 12 | + DynamicFormLayoutService, |
| 13 | + DynamicFormService, |
| 14 | + DynamicFormValidationService, |
| 15 | + DynamicInputModel, |
| 16 | +} from '@ng-dynamic-forms/core'; |
| 17 | +import { provideMockStore } from '@ngrx/store/testing'; |
| 18 | +import { |
| 19 | + TranslateModule, |
| 20 | + TranslateService, |
| 21 | +} from '@ngx-translate/core'; |
| 22 | +import { NgxMaskModule } from 'ngx-mask'; |
| 23 | +import { of } from 'rxjs'; |
| 24 | + |
| 25 | +import { |
| 26 | + APP_CONFIG, |
| 27 | + APP_DATA_SERVICES_MAP, |
| 28 | +} from '../../../../../../../config/app-config.interface'; |
| 29 | +import { environment } from '../../../../../../../environments/environment.test'; |
| 30 | +import { SubmissionService } from '../../../../../../submission/submission.service'; |
| 31 | +import { DsDynamicFormControlContainerComponent } from '../../ds-dynamic-form-control-container.component'; |
| 32 | +import { dsDynamicFormControlMapFn } from '../../ds-dynamic-form-control-map-fn'; |
| 33 | +import { DynamicRowArrayModel } from '../ds-dynamic-row-array-model'; |
| 34 | +import { DsDynamicFormArrayComponent } from './dynamic-form-array.component'; |
| 35 | + |
| 36 | +describe('DsDynamicFormArrayComponent', () => { |
| 37 | + const translateServiceStub = { |
| 38 | + get: () => of('translated-text'), |
| 39 | + instant: () => 'translated-text', |
| 40 | + onLangChange: new EventEmitter(), |
| 41 | + onTranslationChange: new EventEmitter(), |
| 42 | + onDefaultLangChange: new EventEmitter(), |
| 43 | + }; |
| 44 | + |
| 45 | + let component: DsDynamicFormArrayComponent; |
| 46 | + let fixture: ComponentFixture<DsDynamicFormArrayComponent>; |
| 47 | + |
| 48 | + beforeEach(async () => { |
| 49 | + await TestBed.configureTestingModule({ |
| 50 | + imports: [ |
| 51 | + ReactiveFormsModule, |
| 52 | + DsDynamicFormArrayComponent, |
| 53 | + NgxMaskModule.forRoot(), |
| 54 | + TranslateModule.forRoot(), |
| 55 | + ], |
| 56 | + providers: [ |
| 57 | + DynamicFormLayoutService, |
| 58 | + DynamicFormValidationService, |
| 59 | + provideMockStore(), |
| 60 | + { provide: APP_DATA_SERVICES_MAP, useValue: {} }, |
| 61 | + { provide: TranslateService, useValue: translateServiceStub }, |
| 62 | + { provide: HttpClient, useValue: {} }, |
| 63 | + { provide: SubmissionService, useValue: {} }, |
| 64 | + { provide: APP_CONFIG, useValue: environment }, |
| 65 | + { provide: DYNAMIC_FORM_CONTROL_MAP_FN, useValue: dsDynamicFormControlMapFn }, |
| 66 | + ], |
| 67 | + }).overrideComponent(DsDynamicFormArrayComponent, { |
| 68 | + remove: { |
| 69 | + imports: [DsDynamicFormControlContainerComponent], |
| 70 | + }, |
| 71 | + }) |
| 72 | + .compileComponents(); |
| 73 | + }); |
| 74 | + |
| 75 | + beforeEach(inject([DynamicFormService], (service: DynamicFormService) => { |
| 76 | + const formModel = [ |
| 77 | + new DynamicRowArrayModel({ |
| 78 | + id: 'testFormRowArray', |
| 79 | + initialCount: 5, |
| 80 | + notRepeatable: false, |
| 81 | + relationshipConfig: undefined, |
| 82 | + submissionId: '1234', |
| 83 | + isDraggable: true, |
| 84 | + groupFactory: () => { |
| 85 | + return [ |
| 86 | + new DynamicInputModel({ id: 'testFormRowArrayGroupInput' }), |
| 87 | + ]; |
| 88 | + }, |
| 89 | + required: false, |
| 90 | + metadataKey: 'dc.contributor.author', |
| 91 | + metadataFields: ['dc.contributor.author'], |
| 92 | + hasSelectableMetadata: true, |
| 93 | + showButtons: true, |
| 94 | + typeBindRelations: [{ match: 'VISIBLE', operator: 'OR', when: [{ id: 'dc.type', value: 'Book' }] }], |
| 95 | + }), |
| 96 | + ]; |
| 97 | + |
| 98 | + fixture = TestBed.createComponent(DsDynamicFormArrayComponent); |
| 99 | + component = fixture.componentInstance; |
| 100 | + component.model = formModel[0] as DynamicRowArrayModel; |
| 101 | + |
| 102 | + component.group = service.createFormGroup(formModel); |
| 103 | + |
| 104 | + fixture.detectChanges(); |
| 105 | + })); |
| 106 | + |
| 107 | + it('should move element up and maintain focus', () => { |
| 108 | + const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement; |
| 109 | + component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowUp' }), dropList, 3, 1, 'up'); |
| 110 | + fixture.detectChanges(); |
| 111 | + expect(component.model.groups[0]).toBeDefined(); |
| 112 | + expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[0]); |
| 113 | + }); |
| 114 | + |
| 115 | + it('should move element down and maintain focus', () => { |
| 116 | + const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement; |
| 117 | + component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 1, 'down'); |
| 118 | + fixture.detectChanges(); |
| 119 | + expect(component.model.groups[2]).toBeDefined(); |
| 120 | + expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[2]); |
| 121 | + }); |
| 122 | + |
| 123 | + it('should wrap around when moving up from the first element', () => { |
| 124 | + const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement; |
| 125 | + component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowUp' }), dropList, 3, 0, 'up'); |
| 126 | + fixture.detectChanges(); |
| 127 | + expect(component.model.groups[2]).toBeDefined(); |
| 128 | + expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[2]); |
| 129 | + }); |
| 130 | + |
| 131 | + it('should wrap around when moving down from the last element', () => { |
| 132 | + const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement; |
| 133 | + component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 2, 'down'); |
| 134 | + fixture.detectChanges(); |
| 135 | + expect(component.model.groups[0]).toBeDefined(); |
| 136 | + expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[0]); |
| 137 | + }); |
| 138 | + |
| 139 | + it('should not move element if keyboard drag is not active', () => { |
| 140 | + const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement; |
| 141 | + component.elementBeingSorted = null; |
| 142 | + component.handleArrowPress(new KeyboardEvent('keydown', { key: 'ArrowDown' }), dropList, 3, 1, 'down'); |
| 143 | + fixture.detectChanges(); |
| 144 | + expect(component.model.groups[1]).toBeDefined(); |
| 145 | + expect(document.activeElement).toBe(dropList.querySelectorAll('[cdkDragHandle]')[2]); |
| 146 | + }); |
| 147 | + |
| 148 | + it('should cancel keyboard drag and drop', () => { |
| 149 | + const dropList = fixture.debugElement.query(By.css('.cdk-drop-list')).nativeElement; |
| 150 | + component.elementBeingSortedStartingIndex = 2; |
| 151 | + component.elementBeingSorted = dropList.querySelectorAll('[cdkDragHandle]')[2]; |
| 152 | + component.model.moveGroup(2, 1); |
| 153 | + fixture.detectChanges(); |
| 154 | + component.cancelKeyboardDragAndDrop(dropList, 1, 3); |
| 155 | + fixture.detectChanges(); |
| 156 | + expect(component.elementBeingSorted).toBeNull(); |
| 157 | + expect(component.elementBeingSortedStartingIndex).toBeNull(); |
| 158 | + }); |
| 159 | +}); |
0 commit comments