Merge pull request 'OZG-6302-AnfrageFormular' (#718) from OZG-6302-AnfrageFormular into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/718


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/collaboration-shared/.eslintrc.json

+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

alfa-client/libs/collaboration-shared/README.md

+# collaboration-shared
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test collaboration-shared` to execute the unit tests.

alfa-client/libs/collaboration-shared/jest.config.ts

+/* eslint-disable */
+export default {
+  displayName: 'collaboration-shared',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../coverage/libs/collaboration-shared',
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+  transform: {
+    '^.+.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*.mjs$)'],
+};

alfa-client/libs/collaboration-shared/project.json

+{
+  "name": "collaboration-shared",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/collaboration-shared/src",
+  "prefix": "alfa",
+  "tags": [],
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "tsConfig": "libs/collaboration-shared/tsconfig.spec.json",
+        "jestConfig": "libs/collaboration-shared/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  }
+}

alfa-client/libs/collaboration-shared/src/index.ts

+export * from './lib/collaboration-shared.module';

alfa-client/libs/collaboration-shared/src/lib/collaboration-shared.module.spec.ts

+import { TestBed } from '@angular/core/testing';
+import { CollaborationSharedModule } from './collaboration-shared.module';
+
+describe('CollaborationSharedModule', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CollaborationSharedModule],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    expect(CollaborationSharedModule).toBeDefined();
+  });
+});

alfa-client/libs/collaboration-shared/src/lib/collaboration-shared.module.ts

+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { CollaborationService } from './collaboration.service';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [CollaborationService],
+})
+export class CollaborationSharedModule {}

alfa-client/libs/collaboration-shared/src/lib/collaboration.service.spec.ts

+import { CollaborationService } from './collaboration.service';
+
+describe('CollaborationService', () => {
+  let service: CollaborationService;
+
+  beforeEach(() => {
+    service = new CollaborationService();
+  });
+
+  describe('is request form visible', () => {
+    it('should return value', (done) => {
+      service.showRequestForm$.next(false);
+
+      service.isRequestFormVisible().subscribe((isVisible: boolean) => {
+        expect(isVisible).toBeTruthy();
+        done();
+      });
+
+      service.showRequestForm();
+    });
+  });
+
+  describe('show anfrage formular', () => {
+    it('should set "showRequestForm" to true', () => {
+      service.showRequestForm$.next(false);
+
+      service.showRequestForm();
+
+      expect(service.showRequestForm$.value).toBeTruthy();
+    });
+  });
+
+  describe('hide anfrage formular', () => {
+    it('should set "showRequestForm" to false', () => {
+      service.showRequestForm$.next(true);
+
+      service.hideRequestForm();
+
+      expect(service.showRequestForm$.value).toBeFalsy();
+    });
+  });
+});

alfa-client/libs/collaboration-shared/src/lib/collaboration.service.ts

+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable()
+export class CollaborationService {
+  showRequestForm$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  public isRequestFormVisible(): Observable<boolean> {
+    return this.showRequestForm$.asObservable();
+  }
+
+  public showRequestForm(): void {
+    this.showRequestForm$.next(true);
+  }
+
+  public hideRequestForm(): void {
+    this.showRequestForm$.next(false);
+  }
+}

alfa-client/libs/collaboration-shared/src/test-setup.ts

+import '@testing-library/jest-dom';
+import 'jest-preset-angular/setup-jest';
+
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting,
+} from '@angular/platform-browser-dynamic/testing';
+
+getTestBed().resetTestEnvironment();
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+  teardown: { destroyAfterEach: false },
+  errorOnUnknownProperties: true,
+  errorOnUnknownElements: true,
+});

alfa-client/libs/collaboration-shared/tsconfig.json

+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "compilerOptions": {
+    "target": "es2022"
+  }
+}

alfa-client/libs/collaboration-shared/tsconfig.lib.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/test-setup.ts", "src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

alfa-client/libs/collaboration-shared/tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"],
+    "target": "ES2022",
+    "useDefineForClassFields": false
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.test.ts", "**/*.spec.ts", "**/*.d.ts", "jest.config.ts"]
+}

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.html

-<ods-button variant="outline" text="Anfrage erstellen" dataTestId="anfrage-erstellen-button">
+<ng-template #anfrageErstellenButton>
+  <ods-button
+    variant="outline"
+    text="Anfrage erstellen"
+    data-test-id="anfrage-erstellen-button"
+    (clickEmitter)="showRequestForm()"
+  >
     <ods-collaboration-icon icon />
   </ods-button>
+</ng-template>
+
+<ng-container *ngIf="isRequestFormVisible$ | async; else anfrageErstellenButton">
+  <alfa-collaboration-request-container
+    data-test-id="collaboration-request-container"
+    (hideRequestForm)="hideRequestForm()"
+  ></alfa-collaboration-request-container>
+</ng-container>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.spec.ts

+import {
+  Mock,
+  dispatchEventFromFixture,
+  existsAsHtmlElement,
+  mock,
+  notExistsAsHtmlElement,
+} from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ButtonComponent, CollaborationIconComponent, SaveIconComponent } from '@ods/system';
+import { CollaborationService } from 'libs/collaboration-shared/src/lib/collaboration.service';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
 import { CollaborationInVorgangContainerComponent } from './collaboration-in-vorgang-container.component';
+import { CollaborationRequestContainerComponent } from './collaboration-request-container/collaboration-request-container.component';
 
 describe('CollaborationInVorgangContainerComponent', () => {
   let component: CollaborationInVorgangContainerComponent;
   let fixture: ComponentFixture<CollaborationInVorgangContainerComponent>;
 
+  const anfrageErstellenButton: string = getDataTestIdOf('anfrage-erstellen-button');
+  const collaborationRequestContainer: string = getDataTestIdOf('collaboration-request-container');
+
+  const service: Mock<CollaborationService> = {
+    ...mock(CollaborationService),
+    isRequestFormVisible: jest.fn().mockReturnValue(of(false)),
+  };
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ButtonComponent, SaveIconComponent],
       declarations: [
         CollaborationInVorgangContainerComponent,
+        MockComponent(CollaborationRequestContainerComponent),
         MockComponent(CollaborationIconComponent),
       ],
+      providers: [
+        {
+          provide: CollaborationService,
+          useValue: service,
+        },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(CollaborationInVorgangContainerComponent);
@@ -24,4 +50,71 @@ describe('CollaborationInVorgangContainerComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('ngOnInit', () => {
+    it('should call service', () => {
+      component.ngOnInit();
+
+      expect(service.isRequestFormVisible).toHaveBeenCalled();
+    });
+  });
+
+  describe('anfrage erstellen button', () => {
+    describe('on request form visibility false', () => {
+      beforeEach(() => {
+        component.isRequestFormVisible$ = of(false);
+      });
+
+      it('should be shown', () => {
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, anfrageErstellenButton);
+      });
+
+      it('should call service on click', () => {
+        fixture.detectChanges();
+
+        dispatchEventFromFixture(fixture, anfrageErstellenButton, 'clickEmitter');
+
+        expect(service.showRequestForm).toHaveBeenCalled();
+      });
+    });
+
+    it('should be hidden if request form visibility is true', () => {
+      component.isRequestFormVisible$ = of(true);
+
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, anfrageErstellenButton);
+    });
+  });
+
+  describe('zustaendige stelle', () => {
+    describe('on request form visibility true', () => {
+      beforeEach(() => {
+        component.isRequestFormVisible$ = of(true);
+      });
+      it('should be shown', () => {
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, collaborationRequestContainer);
+      });
+
+      it('should call service on hideFormular output', () => {
+        fixture.detectChanges();
+
+        dispatchEventFromFixture(fixture, collaborationRequestContainer, 'hideRequestForm');
+
+        expect(service.hideRequestForm).toHaveBeenCalled();
+      });
+    });
+
+    it('should be hidden if request form visibility is false', () => {
+      component.isRequestFormVisible$ = of(false);
+
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, collaborationRequestContainer);
+    });
+  });
 });

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.ts

-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { CollaborationService } from 'libs/collaboration-shared/src/lib/collaboration.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'alfa-collaboration-in-vorgang-container',
   templateUrl: './collaboration-in-vorgang-container.component.html',
 })
-export class CollaborationInVorgangContainerComponent {}
+export class CollaborationInVorgangContainerComponent implements OnInit {
+  public isRequestFormVisible$: Observable<boolean>;
+
+  constructor(private service: CollaborationService) {}
+
+  ngOnInit(): void {
+    this.isRequestFormVisible$ = this.service.isRequestFormVisible();
+  }
+
+  public showRequestForm(): void {
+    this.service.showRequestForm();
+  }
+
+  public hideRequestForm(): void {
+    this.service.hideRequestForm();
+  }
+}

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.html

+<ods-button
+  variant="outline"
+  text="Zuständige Stelle auswählen"
+  dataTestId="zustaendige-stelle-search-button"
+>
+  <ods-search-icon icon />
+</ods-button>
+
+<div class="my-6">
+  <alfa-collaboration-request-form></alfa-collaboration-request-form>
+</div>
+
+<div class="flex items-center gap-6">
+  <ods-button text="Zuarbeit anfragen" data-test-id="zuarbeit-anfragen-button"></ods-button>
+  <ods-button
+    variant="outline"
+    text="Abbrechen"
+    data-test-id="collaboration-request-abbrechen-button"
+    (clickEmitter)="hideRequestForm.emit()"
+  >
+    <ods-close-icon icon class="fill-primary"></ods-close-icon>
+  </ods-button>
+</div>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.spec.ts

+import { dispatchEventFromFixture } from '@alfa-client/test-utils';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ButtonComponent, CloseIconComponent } from '@ods/system';
+import { SearchIconComponent } from 'libs/design-system/src/lib/icons/search-icon/search-icon.component';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
+import { MockComponent } from 'ng-mocks';
+import { CollaborationRequestContainerComponent } from './collaboration-request-container.component';
+import { CollaborationRequestFormComponent } from './collaboration-request-form/collaboration-request-form.component';
+
+describe('CollaborationRequestContainerComponent', () => {
+  let component: CollaborationRequestContainerComponent;
+  let fixture: ComponentFixture<CollaborationRequestContainerComponent>;
+
+  const abbrechenButton: string = getDataTestIdOf('collaboration-request-abbrechen-button');
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent],
+      declarations: [
+        CollaborationRequestContainerComponent,
+        MockComponent(SearchIconComponent),
+        MockComponent(CloseIconComponent),
+        MockComponent(CollaborationRequestFormComponent),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CollaborationRequestContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('abbrechen button', () => {
+    it('should emit hideRequestForm', () => {
+      const emitSpy = (component.hideRequestForm.emit = jest.fn());
+
+      dispatchEventFromFixture(fixture, abbrechenButton, 'clickEmitter');
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+});

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.ts

+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'alfa-collaboration-request-container',
+  templateUrl: './collaboration-request-container.component.html',
+})
+export class CollaborationRequestContainerComponent {
+  @Output() public hideRequestForm: EventEmitter<void> = new EventEmitter<void>();
+}

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component.html

+<form [formGroup]="formService.form" class="flex flex-col gap-2">
+  <ods-text-editor
+    label="Titel"
+    [formControlName]="formServiceClass.FIELD_TITLE"
+    [isRequired]="true"
+  ></ods-text-editor>
+  <ods-textarea-editor
+    label="Nachricht"
+    [formControlName]="formServiceClass.FIELD_NACHRICHT"
+    [isRequired]="true"
+  ></ods-textarea-editor>
+</form>