OZG-5294 Fix tests in vorgang-detail-page

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.html

@@ -24,14 +24,16 @@
 
 -->
 <ng-container *ngIf="vorgangStateResource$ | async as vorgangStateResource">
-  <ozgcloud-subnavigation class="mat-typography mat-app-background">
+  <ozgcloud-subnavigation class="mat-typography mat-app-background" data-test-id="subnavigation">
     <alfa-vorgang-detail-back-button-container></alfa-vorgang-detail-back-button-container>
     <ng-container *ngIf="vorgangStateResource.resource">
       <alfa-vorgang-detail-action-buttons
         [vorgangWithEingang]="vorgangStateResource.resource"
+        data-test-id="action-buttons"
       ></alfa-vorgang-detail-action-buttons>
       <alfa-vorgang-detail-more-menu
         [vorgangWithEingang]="vorgangStateResource.resource"
+        data-test-id="more-menu"
       ></alfa-vorgang-detail-more-menu>
     </ng-container>
   </ozgcloud-subnavigation>
@@ -40,6 +42,7 @@
     <alfa-vorgang-detail-area
       *ngIf="vorgangStateResource"
       [vorgangStateResource]="vorgangStateResource"
+      data-test-id="detail-area"
     ></alfa-vorgang-detail-area>
   </div>
 </ng-container>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-page.component.spec.ts

@@ -23,11 +23,7 @@
  */
 import { LoeschAnforderungService } from '@alfa-client/loesch-anforderung-shared';
 import { StateResource, createStateResource } from '@alfa-client/tech-shared';
-import {
-  getDebugElementFromFixtureByCss,
-  getElementFromFixture,
-  mock,
-} from '@alfa-client/test-utils';
+import { Mock, existsAsHtmlElement, mock, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { SpinnerComponent, SpinnerTransparencyComponent } from '@alfa-client/ui';
 import {
   VorgangCommandService,
@@ -50,27 +46,34 @@ import { VorgangDetailBackButtonContainerComponent } from './vorgang-detail-back
 import { VorgangDetailMoreMenuComponent } from './vorgang-detail-more-menu/vorgang-detail-more-menu.component';
 import { VorgangDetailPageComponent } from './vorgang-detail-page.component';
 
+type withGetVorgang = {
+  getVorgangWithEingang: () => Subject<StateResource<VorgangWithEingang>>;
+};
+
 describe('VorgangDetailPageComponent', () => {
   let component: VorgangDetailPageComponent;
   let fixture: ComponentFixture<VorgangDetailPageComponent>;
 
-  const getVorgangWithEingangSubj: Subject<StateResource<VorgangWithEingang>> = new Subject();
-  const vorgangService = {
-    ...mock(VorgangService),
-    getVorgangWithEingang: () => getVorgangWithEingangSubj,
-  };
+  let vorgangWithEingangSubj: Subject<StateResource<VorgangWithEingang>>;
+  let vorgangService: Mock<VorgangService> | withGetVorgang;
   const vorgangCommandService = mock(VorgangCommandService);
   const loeschAnforderungService = mock(LoeschAnforderungService);
 
   const vorgangWithEingang: VorgangWithEingangResource = createVorgangWithEingangResource();
 
-  const subnavigation: string = getDataTestIdOf('ozgcloud-subnavigation');
-  const actionButtons: string = getDataTestIdOf('alfa-vorgang-detail-action-buttons');
-  const moreMenu: string = getDataTestIdOf('alfa-vorgang-detail-more-menu');
-  const detailArea: string = getDataTestIdOf('alfa-vorgang-detail-area');
+  const subnavigation: string = getDataTestIdOf('subnavigation');
+  const actionButtons: string = getDataTestIdOf('action-buttons');
+  const moreMenu: string = getDataTestIdOf('more-menu');
+  const detailArea: string = getDataTestIdOf('detail-area');
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
+  beforeEach(() => {
+    vorgangWithEingangSubj = new Subject();
+    vorgangService = {
+      ...mock(VorgangService),
+      getVorgangWithEingang: () => vorgangWithEingangSubj,
+    };
+
+    TestBed.configureTestingModule({
       declarations: [
         VorgangDetailPageComponent,
         MatIcon,
@@ -99,9 +102,7 @@ describe('VorgangDetailPageComponent', () => {
         },
       ],
     });
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(VorgangDetailPageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
@@ -135,81 +136,65 @@ describe('VorgangDetailPageComponent', () => {
 
   describe('subnavigation', () => {
     it('should be hidden', () => {
-      getVorgangWithEingangSubj.next(null);
+      vorgangWithEingangSubj.next(null);
       fixture.detectChanges();
 
-      const subnavigationElement = getDebugElementFromFixtureByCss(fixture, subnavigation);
-
-      expect(subnavigationElement).toBeNull();
+      notExistsAsHtmlElement(fixture, subnavigation);
     });
 
     it('should be visible', () => {
-      getVorgangWithEingangSubj.next(createStateResource(vorgangWithEingang));
+      vorgangWithEingangSubj.next(createStateResource(vorgangWithEingang));
       fixture.detectChanges();
 
-      const subnavigationElement = getDebugElementFromFixtureByCss(fixture, subnavigation);
-
-      expect(subnavigationElement).toBeDefined();
+      existsAsHtmlElement(fixture, subnavigation);
     });
   });
 
   describe('action buttons', () => {
     it('should be hidden', () => {
-      getVorgangWithEingangSubj.next(null);
+      vorgangWithEingangSubj.next(createStateResource(null));
       fixture.detectChanges();
 
-      const actionButtonsElement = getElementFromFixture(fixture, actionButtons);
-
-      expect(actionButtonsElement).toBeNull();
+      notExistsAsHtmlElement(fixture, actionButtons);
     });
 
     it('should be visible', () => {
-      getVorgangWithEingangSubj.next(createStateResource(vorgangWithEingang));
+      vorgangWithEingangSubj.next(createStateResource(vorgangWithEingang));
       fixture.detectChanges();
 
-      const actionButtonsElement = getElementFromFixture(fixture, actionButtons);
-
-      expect(actionButtonsElement).toBeDefined();
+      existsAsHtmlElement(fixture, actionButtons);
     });
   });
 
   describe('more menu', () => {
     it('should be hidden', () => {
-      getVorgangWithEingangSubj.next(null);
+      vorgangWithEingangSubj.next(createStateResource(null));
       fixture.detectChanges();
 
-      const moreMenuElement = getElementFromFixture(fixture, moreMenu);
-
-      expect(moreMenuElement).toBeNull();
+      notExistsAsHtmlElement(fixture, moreMenu);
     });
 
     it('should be visible', () => {
-      getVorgangWithEingangSubj.next(createStateResource(vorgangWithEingang));
+      vorgangWithEingangSubj.next(createStateResource(vorgangWithEingang));
       fixture.detectChanges();
 
-      const moreMenuElement = getElementFromFixture(fixture, moreMenu);
-
-      expect(moreMenuElement).toBeDefined();
+      existsAsHtmlElement(fixture, moreMenu);
     });
   });
 
   describe('detail area', () => {
     it('should be hidden', () => {
-      getVorgangWithEingangSubj.next(null);
+      vorgangWithEingangSubj.next(null);
       fixture.detectChanges();
 
-      const detailAreaElement = getElementFromFixture(fixture, detailArea);
-
-      expect(detailAreaElement).toBeNull();
+      notExistsAsHtmlElement(fixture, detailArea);
     });
 
     it('should be visible', () => {
-      getVorgangWithEingangSubj.next(createStateResource(vorgangWithEingang));
+      vorgangWithEingangSubj.next(createStateResource(vorgangWithEingang));
       fixture.detectChanges();
 
-      const detailAreaElement = getElementFromFixture(fixture, detailArea);
-
-      expect(detailAreaElement).toBeDefined();
+      existsAsHtmlElement(fixture, detailArea);
     });
   });
 });