Skip to content
Snippets Groups Projects
Commit f892b9ea authored by Martin's avatar Martin
Browse files

OZG-7510 extract mapping form; cleanup; adjust settings type model; move provider

parent f8cb26e9
No related branches found
No related tags found
1 merge request!63Ozg 7510 statistic edit delete fields
import { ADMIN_FORMSERVICE } from '@admin-client/shared';
import { EMPTY_STRING } from '@alfa-client/tech-shared';
import { dispatchEventFromFixture, existsAsHtmlElement, mock, Mock, MockEvent, mockGetValue } from '@alfa-client/test-utils';
import { dispatchEventFromFixture, existsAsHtmlElement, mock, Mock, MockEvent } from '@alfa-client/test-utils';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TextEditorComponent } from '@ods/component';
import { ButtonComponent, PlusIconComponent } from '@ods/system';
import { MockComponent } from 'ng-mocks';
import {
getDataTestIdAttributeOf,
getDataTestIdOf,
getDynamicDataTestIdAttributOf,
} from '../../../../../tech-shared/test/data-test';
import { getDataTestIdAttributeOf, getDataTestIdOf } from '../../../../../tech-shared/test/data-test';
import { AdminCancelButtonComponent } from '../../../../shared/src/lib/admin-cancel-button/admin-cancel-button.component';
import { AdminSaveButtonComponent } from '../../../../shared/src/lib/admin-save-button/admin-save-button.component';
import { AdminStatistikFieldsFormComponent } from './admin-statistik-fields-form.component';
import { AdminStatistikFieldsFormMappingComponent } from './statistik-fields-form-mapping/statistik-fields-form-mapping.component';
import { StatistikFieldsFormService } from './statistik-fields.formservice';
describe('AdminStatistikFieldsFormComponent', () => {
......@@ -24,9 +21,6 @@ describe('AdminStatistikFieldsFormComponent', () => {
const formIdInputTestId: string = getDataTestIdOf('form-id-input');
const addMappingButton: string = getDataTestIdAttributeOf('add-mapping-button');
const mappingField: string = getDataTestIdOf('mapping-field-0');
const removeMappingButton: string = getDynamicDataTestIdAttributOf('remove-mapping-button-0');
const formBuilder: FormBuilder = new FormBuilder();
let formService: Mock<StatistikFieldsFormService>;
......@@ -37,22 +31,9 @@ describe('AdminStatistikFieldsFormComponent', () => {
[StatistikFieldsFormService.FIELD_FORM_ENGINE_NAME]: new FormControl(EMPTY_STRING),
[StatistikFieldsFormService.FIELD_FORM_ID]: new FormControl(EMPTY_STRING),
}),
[StatistikFieldsFormService.FIELD_MAPPINGS]: formBuilder.array([
new FormGroup({ sourcePath: new FormControl(EMPTY_STRING) }),
]),
});
formService = <any>{
...mock(StatistikFieldsFormService),
form,
addMapping: jest.fn(),
removeMapping: jest.fn(),
};
mockGetValue(
formService,
StatistikFieldsFormService.FIELD_MAPPINGS,
form.controls[StatistikFieldsFormService.FIELD_MAPPINGS],
);
formService = <any>{ ...mock(StatistikFieldsFormService), form };
await TestBed.configureTestingModule({
declarations: [
......@@ -62,6 +43,7 @@ describe('AdminStatistikFieldsFormComponent', () => {
MockComponent(PlusIconComponent),
MockComponent(AdminSaveButtonComponent),
MockComponent(AdminCancelButtonComponent),
MockComponent(AdminStatistikFieldsFormMappingComponent),
],
imports: [ReactiveFormsModule],
})
......@@ -126,21 +108,5 @@ describe('AdminStatistikFieldsFormComponent', () => {
});
});
});
describe('mapping input', () => {
it('should exists', () => {
fixture.detectChanges();
existsAsHtmlElement(fixture, mappingField);
});
});
describe('remove mapping button', () => {
it('should call formservice', () => {
dispatchEventFromFixture(fixture, removeMappingButton, MockEvent.CLICK);
expect(formService.removeMapping).toHaveBeenCalledWith(0);
});
});
});
});
import { ADMIN_FORMSERVICE, AdminCancelButtonComponent, AdminSaveButtonComponent, ROUTES } from '@admin-client/shared';
import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { TextEditorComponent } from '@ods/component';
import { ButtonComponent, DeleteIconComponent, PlusIconComponent } from '@ods/system';
import { AdminStatistikFieldsFormMappingComponent } from './statistik-fields-form-mapping/statistik-fields-form-mapping.component';
import { StatistikFieldsFormService } from './statistik-fields.formservice';
@Component({
......@@ -11,7 +11,6 @@ import { StatistikFieldsFormService } from './statistik-fields.formservice';
templateUrl: './admin-statistik-fields-form.component.html',
standalone: true,
imports: [
CommonModule,
ButtonComponent,
PlusIconComponent,
ReactiveFormsModule,
......@@ -19,6 +18,7 @@ import { StatistikFieldsFormService } from './statistik-fields.formservice';
DeleteIconComponent,
AdminSaveButtonComponent,
AdminCancelButtonComponent,
AdminStatistikFieldsFormMappingComponent,
],
providers: [{ provide: ADMIN_FORMSERVICE, useClass: StatistikFieldsFormService }],
})
......
<form [formGroup]="formService.form">
<div class="flex flex-col gap-4" [formArrayName]="StatistikFieldsFormService.FIELD_MAPPINGS">
<div
*ngFor="let mappingControl of formService.mappings.controls; let i = index"
[formGroupName]="i"
class="flex w-full gap-2"
>
<ods-text-editor
class="flex-1"
formControlName="sourcePath"
label="Pfad des Datenfeldes"
placeholder="Tragen Sie hier den gesamten Pfad des Datenfeldes ein, das Sie auswerten möchten."
[attr.data-test-id]="'mapping-field-' + i"
></ods-text-editor>
<ods-button
class="self-end"
variant="ghost"
size="fit"
destructive="true"
(clickEmitter)="formService.removeMapping(i)"
[dataTestId]="'remove-mapping-button-' + i"
>
<ods-delete-icon icon />
</ods-button>
</div>
</div>
</form>
import { ADMIN_FORMSERVICE } from '@admin-client/shared';
import { EMPTY_STRING } from '@alfa-client/tech-shared';
import { dispatchEventFromFixture, existsAsHtmlElement, mock, Mock, MockEvent, mockGetValue } from '@alfa-client/test-utils';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { TextEditorComponent } from '@ods/component';
import { ButtonComponent, DeleteIconComponent } from '@ods/system';
import { getDataTestIdOf, getDynamicDataTestIdAttributOf } from 'libs/tech-shared/test/data-test';
import { MockComponent } from 'ng-mocks';
import { StatistikFieldsFormService } from '../statistik-fields.formservice';
import { AdminStatistikFieldsFormMappingComponent } from './statistik-fields-form-mapping.component';
describe('AdminStatistikFieldsFormMappingComponent', () => {
let component: AdminStatistikFieldsFormMappingComponent;
let fixture: ComponentFixture<AdminStatistikFieldsFormMappingComponent>;
const mappingField: string = getDataTestIdOf('mapping-field-0');
const removeMappingButton: string = getDynamicDataTestIdAttributOf('remove-mapping-button-0');
const formBuilder: FormBuilder = new FormBuilder();
let formService: Mock<StatistikFieldsFormService>;
beforeEach(async () => {
const form: FormGroup = formBuilder.group({
[StatistikFieldsFormService.FIELD_MAPPINGS]: formBuilder.array([
new FormGroup({ sourcePath: new FormControl(EMPTY_STRING) }),
]),
});
formService = <any>{
...mock(StatistikFieldsFormService),
form,
addMapping: jest.fn(),
removeMapping: jest.fn(),
};
mockGetValue(
formService,
StatistikFieldsFormService.FIELD_MAPPINGS,
form.controls[StatistikFieldsFormService.FIELD_MAPPINGS],
);
await TestBed.configureTestingModule({
declarations: [
AdminStatistikFieldsFormMappingComponent,
MockComponent(TextEditorComponent),
MockComponent(ButtonComponent),
MockComponent(DeleteIconComponent),
],
imports: [ReactiveFormsModule],
providers: [
{
provide: StatistikFieldsFormService,
useValue: formService,
},
{
provide: ADMIN_FORMSERVICE,
useValue: formService,
},
],
}).compileComponents();
fixture = TestBed.createComponent(AdminStatistikFieldsFormMappingComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
describe('template', () => {
describe('mapping input', () => {
it('should exists', () => {
fixture.detectChanges();
existsAsHtmlElement(fixture, mappingField);
});
});
describe('remove mapping button', () => {
it('should call formservice', () => {
dispatchEventFromFixture(fixture, removeMappingButton, MockEvent.CLICK);
expect(formService.removeMapping).toHaveBeenCalledWith(0);
});
});
});
});
import { ADMIN_FORMSERVICE, AdminCancelButtonComponent, AdminSaveButtonComponent, ROUTES } from '@admin-client/shared';
import { CommonModule } from '@angular/common';
import { Component, inject } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { TextEditorComponent } from '@ods/component';
import { ButtonComponent, DeleteIconComponent, PlusIconComponent } from '@ods/system';
import { StatistikFieldsFormService } from '../statistik-fields.formservice';
@Component({
selector: 'statistik-fields-form-mapping',
templateUrl: './statistik-fields-form-mapping.component.html',
standalone: true,
imports: [
CommonModule,
ButtonComponent,
PlusIconComponent,
ReactiveFormsModule,
TextEditorComponent,
DeleteIconComponent,
AdminSaveButtonComponent,
AdminCancelButtonComponent,
],
})
export class AdminStatistikFieldsFormMappingComponent {
public readonly formService = <StatistikFieldsFormService>inject(ADMIN_FORMSERVICE);
public readonly StatistikFieldsFormService = StatistikFieldsFormService;
public readonly Routes = ROUTES;
}
......@@ -25,7 +25,6 @@ export class StatistikFieldsFormService extends AbstractFormService<AggregationM
}
protected doSubmit(): Observable<StateResource<AggregationMappingResource>> {
console.info('FormValue: ', this.getFormValue());
return this.service.create(this.getFormValue());
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment