refactor: extract enum dropdown into own component

for easier re-use and testing

src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.html

@@ -1,14 +1,6 @@
-<mat-form-field [formGroup]="parent">
-  <mat-label>
-    {{ label }}
-  </mat-label>
-  <mat-select [formControlName]="formControlName" [multiple]="multi" [compareWith]="compareFun">
-    <mat-option *appConfigurableEnum="let o of enumId" [value]="o">
-      {{ o.label }}
-    </mat-option>
-  </mat-select>
-  <mat-error *ngIf="formControl.errors?.required" i18n="Error message for any input">
-    This field is required
-  </mat-error>
-</mat-form-field>
-
+<app-enum-dropdown
+  [form]="formControl"
+  [label]="label"
+  [multi]="multi"
+  [enumId]="enumId"
+></app-enum-dropdown>

src/app/core/configurable-enum/edit-configurable-enum/edit-configurable-enum.component.ts

@@ -6,12 +6,12 @@ import {
 import { ConfigurableEnumValue } from "../configurable-enum.interface";
 import { DynamicComponent } from "../../view/dynamic-components/dynamic-component.decorator";
 import { arrayEntitySchemaDatatype } from "../../entity/schema-datatypes/datatype-array";
-import { compareEnums } from "../../../utils/utils";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { ReactiveFormsModule } from "@angular/forms";
 import { MatSelectModule } from "@angular/material/select";
 import { ConfigurableEnumDirective } from "../configurable-enum-directive/configurable-enum.directive";
 import { NgIf } from "@angular/common";
+import { EnumDropdownComponent } from "../enum-dropdown/enum-dropdown.component";
 
 @DynamicComponent("EditConfigurableEnum")
 @Component({
@@ -23,13 +23,13 @@ import { NgIf } from "@angular/common";
     MatSelectModule,
     ConfigurableEnumDirective,
     NgIf,
+    EnumDropdownComponent,
   ],
   standalone: true,
 })
 export class EditConfigurableEnumComponent extends EditComponent<ConfigurableEnumValue> {
   enumId: string;
   multi = false;
-  compareFun = compareEnums;
 
   onInitFromDynamicConfig(config: EditPropertyConfig<ConfigurableEnumValue>) {
     super.onInitFromDynamicConfig(config);

src/app/core/configurable-enum/enum-dropdown/enum-dropdown.component.html

@@ -0,0 +1,17 @@
+<mat-form-field>
+  <mat-label>
+    {{ label }}
+  </mat-label>
+  <mat-select
+    [formControl]="form"
+    [multiple]="multi"
+    [compareWith]="compareFun"
+  >
+    <mat-option *appConfigurableEnum="let o of enumId" [value]="o">
+      {{ o.label }}
+    </mat-option>
+  </mat-select>
+  <mat-error *ngIf="form.errors?.required" i18n="Error message for any input">
+    This field is required
+  </mat-error>
+</mat-form-field>

src/app/core/configurable-enum/enum-dropdown/enum-dropdown.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { EnumDropdownComponent } from "./enum-dropdown.component";
+import { ConfigService } from "../../config/config.service";
+import { FormControl } from "@angular/forms";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+
+describe("EnumDropdownComponent", () => {
+  let component: EnumDropdownComponent;
+  let fixture: ComponentFixture<EnumDropdownComponent>;
+
+  let mockConfigService: jasmine.SpyObj<ConfigService>;
+
+  beforeEach(async () => {
+    mockConfigService = jasmine.createSpyObj(["getConfig"]);
+    mockConfigService.getConfig.and.returnValue([]);
+
+    await TestBed.configureTestingModule({
+      imports: [EnumDropdownComponent, NoopAnimationsModule],
+      providers: [{ provide: ConfigService, useValue: mockConfigService }],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EnumDropdownComponent);
+    component = fixture.componentInstance;
+
+    component.form = new FormControl();
+    component.enumId = "test-enum";
+
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/configurable-enum/enum-dropdown/enum-dropdown.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from "@angular/core";
+import { MatSelectModule } from "@angular/material/select";
+import { FormControl, ReactiveFormsModule } from "@angular/forms";
+import { ConfigurableEnumDirective } from "../configurable-enum-directive/configurable-enum.directive";
+import { compareEnums } from "../../../utils/utils";
+import { NgIf } from "@angular/common";
+
+@Component({
+  selector: "app-enum-dropdown",
+  templateUrl: "./enum-dropdown.component.html",
+  styleUrls: ["./enum-dropdown.component.scss"],
+  standalone: true,
+  imports: [
+    MatSelectModule,
+    ReactiveFormsModule,
+    ConfigurableEnumDirective,
+    NgIf,
+  ],
+})
+export class EnumDropdownComponent {
+  @Input() form: FormControl; // cannot be named "formControl" - otherwise the angular directive grabs this
+  @Input() label: string;
+  @Input() enumId: string;
+  @Input() multi?: boolean;
+
+  compareFun = compareEnums;
+}

src/app/core/configurable-enum/enum-dropdown/enum-dropdown.stories.ts

@@ -0,0 +1,37 @@
+import { Meta, Story } from "@storybook/angular/types-6-0";
+import { moduleMetadata } from "@storybook/angular";
+import { StorybookBaseModule } from "../../../utils/storybook-base.module";
+import { EnumDropdownComponent } from "./enum-dropdown.component";
+import { FormControl } from "@angular/forms";
+
+export default {
+  title: "Core/EntityComponents/Entity Property Fields/Enum Dropdown",
+  component: EnumDropdownComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [EnumDropdownComponent, StorybookBaseModule],
+      providers: [],
+    }),
+  ],
+} as Meta;
+
+const Template: Story<EnumDropdownComponent> = (
+  args: EnumDropdownComponent
+) => ({
+  props: args,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  form: new FormControl(""),
+  label: "test field",
+  enumId: "center",
+};
+
+export const Multi = Template.bind({});
+Multi.args = {
+  form: new FormControl(""),
+  label: "test field",
+  enumId: "center",
+  multi: true,
+};

src/app/core/entity-components/entity-utils/dynamic-form-components/edit-number/edit-number.stories.ts

@@ -1,7 +1,6 @@
-import { Story, Meta } from "@storybook/angular/types-6-0";
+import { Meta, Story } from "@storybook/angular/types-6-0";
 import { moduleMetadata } from "@storybook/angular";
 import { EntitySchemaService } from "../../../../entity/schema/entity-schema.service";
-import { EntityFormComponent } from "../../../entity-form/entity-form/entity-form.component";
 import { FormFieldConfig } from "../../../entity-form/entity-form/FormConfig";
 import { EntityMapperService } from "../../../../entity/entity-mapper.service";
 import { Entity } from "../../../../entity/model/entity";
@@ -12,27 +11,35 @@ import {
   entityFormStorybookDefaulParameters,
   StorybookBaseModule,
 } from "../../../../../utils/storybook-base.module";
+import { AppModule } from "../../../../../app.module";
+import { mockEntityMapper } from "../../../../entity/mock-entity-mapper-service";
+import { FormComponent } from "../../../entity-details/form/form.component";
 
 export default {
   title: "Core/EntityComponents/Entity Property Fields/Number",
-  component: EntityFormComponent,
+  component: FormComponent,
   decorators: [
     moduleMetadata({
-      imports: [EntityFormComponent, EditNumberComponent, StorybookBaseModule],
+      imports: [
+        FormComponent,
+        EditNumberComponent,
+        AppModule,
+        StorybookBaseModule,
+      ],
       providers: [
         EntitySchemaService,
         {
           provide: EntityMapperService,
-          useValue: { save: () => Promise.resolve() },
+          useValue: mockEntityMapper(),
         },
       ],
     }),
   ],
   parameters: entityFormStorybookDefaulParameters,
 } as Meta;
 
-const Template: Story<EntityFormComponent> = (args: EntityFormComponent) => ({
-  component: EntityFormComponent,
+const Template: Story<FormComponent<any>> = (args: FormComponent<any>) => ({
+  component: FormComponent,
   props: args,
 });
 
@@ -53,6 +60,7 @@ const testEntity = new TestEntity();
 testEntity.test = 5;
 
 export const Primary = Template.bind({});
+console.log("X");
 Primary.args = {
   columns: [[fieldConfig]],
   entity: testEntity,

src/app/features/reporting/reporting/reporting.stories.ts

@@ -5,8 +5,8 @@ import { ActivatedRoute } from "@angular/router";
 import { of } from "rxjs";
 import { DataAggregationService } from "../data-aggregation.service";
 import { genders } from "../../../child-dev-project/children/model/genders";
-import { ExportService } from "../../../core/export/export-service/export.service";
 import { StorybookBaseModule } from "../../../utils/storybook-base.module";
+import { DataTransformationService } from "../../../core/export/data-transformation-service/data-transformation.service";
 
 const reportingService = {
   calculateReport: () => {
@@ -194,8 +194,8 @@ export default {
         },
         { provide: DataAggregationService, useValue: reportingService },
         {
-          provide: ExportService,
-          useValue: { createJson: () => {}, createCsv: () => {} },
+          provide: DataTransformationService,
+          useValue: { queryAndTransformData: () => [] },
         },
       ],
     }),