97399 WIP: Tests for ContextHelpDirective

src/app/page-internal-server-error/page-internal-server-error.component.html

@@ -1,6 +1,6 @@
 <div class="page-internal-server-error container">
   <h1>500</h1>
-  <h2><small>{{"500.page-internal-server-error" | translate}}</small></h2>
+  <h2><small *dsContextHelp="{content: 'context-help.multi-para.test'}">{{"500.page-internal-server-error" | translate}}</small></h2>
   <br/>
   <p>{{"500.help" | translate}}</p>
   <br/>

src/app/shared/context-help-wrapper/context-help-wrapper.component.ts

@@ -53,7 +53,7 @@ export class ContextHelpWrapperComponent {
    * into link-free pieces of text and objects of the form
    * {href: string, text: string} (which represent links).
    * This function makes no effort to check whether the href is a
-   * correct URL. Currently this function does not support escape
+   * correct URL. Currently, this function does not support escape
    * characters: its behavior when given a string containing square
    * brackets that do not deliminate a link is undefined.
    * Regular parentheses outside of links do work, however.
@@ -66,7 +66,7 @@ export class ContextHelpWrapperComponent {
    *   " is a link, and ",
    *   {href: "https://youtube.com", text: "so is this"}
    * ]
-   */ 
+   */
   private parseLinks(content: string): (string | {href: string, text: string})[] {
     // Implementation note: due to unavailability of `matchAll` method on strings,
     // separate "split" and "parse" steps are needed.
@@ -93,4 +93,4 @@ export class ContextHelpWrapperComponent {
 }
 
 
-  
+

src/app/shared/context-help.directive.spec.ts

@@ -1,8 +1,65 @@
-import { ContextHelpDirective } from './context-help.directive';
+import { Component, DebugElement, Input } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { of as observableOf, Observable } from 'rxjs';
+import { ContextHelpDirective, ContextHelpDirectiveInput } from './context-help.directive';
+import { TranslateService } from '@ngx-translate/core';
+import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  template: `<div *dsContextHelp="contextHelpParams()">some text</div>`
+})
+class TestComponent {
+  @Input() content = '';
+  contextHelpParams(): ContextHelpDirectiveInput {
+    return {
+      content: this.content
+    };
+  }
+}
+
+// tslint:disable-next-line:max-classes-per-file
+class MockTranslateService {
+  messages: {[index: string]: string} = {
+    lorem: 'lorem ipsum dolor sit amet',
+    linkTest: 'This is text, [this](https://dspace.lyrasis.org) is a link, and [so is this](https://google.com)'
+  };
+
+  get(key: string): Observable<string> {
+    return observableOf(this.messages[key]);
+  }
+}
 
 describe('ContextHelpDirective', () => {
-  it('should create an instance', () => {
+  let component: TestComponent;
-    const directive = new ContextHelpDirective();
+  let fixture: ComponentFixture<TestComponent>;
-    expect(directive).toBeTruthy();
+  // let el: DebugElement;
+  // let translateService: TranslateService;
+
+  beforeEach(() => {
+    console.log('Anyone hear that?');
+    fixture = TestBed.configureTestingModule({
+      imports: [NgbTooltipModule],
+      providers: [
+        { provide: TranslateService, useClass: MockTranslateService }
+      ],
+      declarations: [TestComponent, ContextHelpWrapperComponent, ContextHelpDirective]
+    }).createComponent(TestComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should add the tooltip icon', () => {
+    component.content = 'lorem';
+    fixture.detectChanges();
+
+    expect(component).toBeDefined();
+    const [wrapper] = fixture.nativeElement.children;
+    const [i, div] = wrapper.children;
+    expect(wrapper.tagName).toBe('DS-CONTEXT-HELP-WRAPPER');
+    expect(i.tagName).toBe('I');
+    expect(div.tagName).toBe('DIV');
+    expect(div.innerHTML).toBe('some text');
+    i.click(); // TODO: triggers a type error
   });
 });

src/app/shared/context-help.directive.ts

@@ -3,10 +3,10 @@ import { PlacementArray } from '@ng-bootstrap/ng-bootstrap/util/positioning';
 import { ContextHelpWrapperComponent } from './context-help-wrapper/context-help-wrapper.component';
 import { PlacementDir } from './context-help-wrapper/placement-dir.model';
 
-export type ContextHelpDirectiveInput = {
+export interface ContextHelpDirectiveInput {
-  content: string,
+  content: string;
-  tooltipPlacement?: PlacementArray,
+  tooltipPlacement?: PlacementArray;
-  iconPlacement?: PlacementDir
+  iconPlacement?: PlacementDir;
 }
 
 /*