Merge pull request 'OZG-6314 Fix empty header bug' (#704) from...

Merge pull request 'OZG-6314 Fix empty header bug' (#704) from OZG-6314-fix-attachment-wrapper into master

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


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

alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.html

@@ -27,10 +27,13 @@
   *ngIf="binaryFileListStateResource.resource"
   [stateResource]="binaryFileListStateResource"
 >
-  <ods-attachment-wrapper [title]="title" data-test-id="file-list">
-    <ods-attachment-header [title]="title">
+  <ods-attachment-wrapper data-test-id="file-list">
+    <ods-attachment-header
+      [title]="title"
+      *ngIf="title || archiveDownloadUri"
+      data-test-id="file-list-header"
+    >
       <alfa-download-archive-file-button-container
-        *ngIf="archiveDownloadUri"
         data-test-class="download-archive-file-button"
         [downloadUri]="archiveDownloadUri"
         action-buttons

alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.spec.ts

@@ -37,7 +37,7 @@ import {
   createBinaryFileListResource,
   createBinaryFileResource,
 } from 'libs/binary-file-shared/test/binary-file';
-import { getDataTestClassOf } from 'libs/tech-shared/test/data-test';
+import { getDataTestClassOf, getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
 import { BinaryFile2ContainerComponent } from '../binary-file2-container/binary-file2-container.component';
 import { DownloadArchiveFileButtonContainerComponent } from '../download-archive-file-button-container/download-archive-file-button-container.component';
@@ -48,6 +48,7 @@ describe('VerticalBinaryFileListComponent', () => {
   let fixture: ComponentFixture<VerticalBinaryFileListComponent>;
 
   const downloadArchiveFileButton: string = getDataTestClassOf('download-archive-file-button');
+  const fileListHeader: string = getDataTestIdOf('file-list-header');
 
   const binaryFile: BinaryFileResource = createBinaryFileResource();
 
@@ -109,6 +110,32 @@ describe('VerticalBinaryFileListComponent', () => {
     });
   });
 
+  describe('attachment header', () => {
+    it('should show header if there is title', () => {
+      component.title = 'Title';
+
+      fixture.detectChanges();
+
+      existsAsHtmlElement(fixture, fileListHeader);
+    });
+
+    it('should show header if there is uri', () => {
+      component.archiveDownloadUri = faker.internet.url();
+
+      fixture.detectChanges();
+
+      existsAsHtmlElement(fixture, fileListHeader);
+    });
+
+    it('should not show header if there is no uri or title', () => {
+      component.title = '';
+
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, fileListHeader);
+    });
+  });
+
   describe('download archive button', () => {
     const downloadUri: ResourceUri = faker.internet.url();
 

alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.component.spec.ts

+import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AttachmentHeaderComponent } from './attachment-header.component';
 
@@ -18,4 +19,19 @@ describe('AttachmentHeaderComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+  describe('title', () => {
+    it('should show heading', () => {
+      component.title = 'Test';
+      fixture.detectChanges();
+
+      existsAsHtmlElement(fixture, 'h4');
+    });
+
+    it('should not show heading', () => {
+      component.title = '';
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, 'h4');
+    });
+  });
 });

alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.component.ts

@@ -5,8 +5,8 @@ import { Component, Input } from '@angular/core';
   selector: 'ods-attachment-header',
   standalone: true,
   imports: [CommonModule],
-  template: `<div class="flex h-11 items-center justify-between px-3">
-    <h4 class="text-sm font-medium text-text">{{ title }}</h4>
+  template: `<div class="flex h-11 items-center justify-between px-3 empty:hidden">
+    <h4 class="text-sm font-medium text-text" *ngIf="title">{{ title }}</h4>
     <ng-content select="[action-buttons]"></ng-content>
   </div>`,
 })