fix an issue where metadata-view-elements containing only images would be hidden

src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.html

@@ -1,4 +1,4 @@
-<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0">
+<div class="simple-view-element" [class.d-none]="content.textContent.trim().length === 0 && hasNoValue(content.querySelector('img'))">
   <h5 class="simple-view-element-header" *ngIf="label">{{ label }}</h5>
   <div #content class="simple-view-element-body">
     <ng-content></ng-content>

src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.spec.ts

@@ -1,18 +1,41 @@
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { Component, DebugElement } from '@angular/core';
 
 import { MetadataFieldWrapperComponent } from './metadata-field-wrapper.component';
 
+/* tslint:disable:max-classes-per-file */
 @Component({
-    selector: 'ds-component-with-content',
+    selector: 'ds-component-without-content',
     template: '<ds-metadata-field-wrapper [label]="\'test label\'">\n' +
-      '    <div class="my-content">\n' +
-      '    <span></span>\n' +
-      '    </div>\n' +
       '</ds-metadata-field-wrapper>'
 })
-class ContentComponent {}
+class NoContentComponent {}
+
+@Component({
+    selector: 'ds-component-with-empty-spans',
+    template: '<ds-metadata-field-wrapper [label]="\'test label\'">\n' +
+      '    <span></span>\n' +
+      '    <span></span>\n' +
+      '</ds-metadata-field-wrapper>'
+})
+class SpanContentComponent {}
+
+@Component({
+    selector: 'ds-component-with-text',
+    template: '<ds-metadata-field-wrapper [label]="\'test label\'">\n' +
+      '    <span>The quick brown fox jumps over the lazy dog</span>\n' +
+      '</ds-metadata-field-wrapper>'
+})
+class TextContentComponent {}
+
+@Component({
+    selector: 'ds-component-with-image',
+    template: '<ds-metadata-field-wrapper [label]="\'test label\'">\n' +
+      '    <img src="https://some/image.png" alt="an alt text">\n' +
+      '</ds-metadata-field-wrapper>'
+})
+class ImgContentComponent {}
+/* tslint:enable:max-classes-per-file */
 
 describe('MetadataFieldWrapperComponent', () => {
   let component: MetadataFieldWrapperComponent;
@@ -20,7 +43,7 @@ describe('MetadataFieldWrapperComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [MetadataFieldWrapperComponent, ContentComponent]
+      declarations: [MetadataFieldWrapperComponent, NoContentComponent, SpanContentComponent, TextContentComponent, ImgContentComponent]
     }).compileComponents();
   }));
 
@@ -30,23 +53,21 @@ describe('MetadataFieldWrapperComponent', () => {
   });
 
   const wrapperSelector = '.simple-view-element';
-  const labelSelector = '.simple-view-element-header';
-  const contentSelector = '.my-content';
 
   it('should create', () => {
     expect(component).toBeDefined();
   });
 
   it('should not show the component when there is no content', () => {
-    component.label = 'test label';
+    const parentFixture = TestBed.createComponent(NoContentComponent);
-    fixture.detectChanges();
+    parentFixture.detectChanges();
-    const parentNative = fixture.nativeElement;
+    const parentNative = parentFixture.nativeElement;
     const nativeWrapper = parentNative.querySelector(wrapperSelector);
     expect(nativeWrapper.classList.contains('d-none')).toBe(true);
   });
 
-  it('should not show the component when there is DOM content but no text', () => {
+  it('should not show the component when there is DOM content but not text or an image', () => {
-    const parentFixture = TestBed.createComponent(ContentComponent);
+    const parentFixture = TestBed.createComponent(SpanContentComponent);
     parentFixture.detectChanges();
     const parentNative = parentFixture.nativeElement;
     const nativeWrapper = parentNative.querySelector(wrapperSelector);
@@ -54,11 +75,18 @@ describe('MetadataFieldWrapperComponent', () => {
   });
 
   it('should show the component when there is text content', () => {
-    const parentFixture = TestBed.createComponent(ContentComponent);
+    const parentFixture = TestBed.createComponent(TextContentComponent);
+    parentFixture.detectChanges();
+    const parentNative = parentFixture.nativeElement;
+    const nativeWrapper = parentNative.querySelector(wrapperSelector);
+    parentFixture.detectChanges();
+    expect(nativeWrapper.classList.contains('d-none')).toBe(false);
+  });
+
+  it('should show the component when there is img content', () => {
+    const parentFixture = TestBed.createComponent(ImgContentComponent);
     parentFixture.detectChanges();
     const parentNative = parentFixture.nativeElement;
-    const nativeContent = parentNative.querySelector(contentSelector);
-    nativeContent.textContent = 'lorem ipsum';
     const nativeWrapper = parentNative.querySelector(wrapperSelector);
     parentFixture.detectChanges();
     expect(nativeWrapper.classList.contains('d-none')).toBe(false);

src/app/+item-page/field-components/metadata-field-wrapper/metadata-field-wrapper.component.ts

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core';
+import { hasNoValue } from '../../../shared/empty.util';
 
 /**
  * This component renders any content inside this wrapper.
@@ -16,4 +17,10 @@ export class MetadataFieldWrapperComponent {
    */
   @Input() label: string;
 
+  /**
+   * Make hasNoValue() available in the template
+   */
+  hasNoValue(o: any): boolean {
+    return hasNoValue(o);
+  }
 }