Fixed text highlight to not fire when attributes are changed on the d…

…irective. (#15)

src/app/public/modules/text-highlight/fixtures/text-highlight.component.fixture.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { SkyTextHighlightDirective } from '../text-highlight.directive';
 
 @Component({
     selector: 'sky-text-highlight-component',
@@ -10,4 +11,7 @@ export class SkyTextHighlightTestComponent {
   public showAdditionalContent: boolean = false;
   public innerText1: string = 'Here is some test text.';
   public innerText2: string = 'Here is additional text that was previously hidden in src\\app.';
+
+  @ViewChild(SkyTextHighlightDirective)
+  public textHighlightDirective: SkyTextHighlightDirective;
 }

src/app/public/modules/text-highlight/text-highlight.directive.spec.ts

@@ -138,6 +138,21 @@ describe('Text Highlight', () => {
     });
   }));
 
+  it('highlight should NOT be called when DOM attributes are changed', ((done) => {
+    const spy = spyOn<any>(component.textHighlightDirective, 'highlight').and.callThrough();
+
+    updateInputText(fixture, 'text');
+
+    const div = nativeElement.querySelector('.sky-test-div-container');
+    div.setAttribute('foo', 'bar');
+    fixture.detectChanges();
+
+    window.setTimeout(() => {
+      expect(spy).toHaveBeenCalledTimes(1);
+      done();
+    });
+  }));
+
   it('should highlight case insensitive search term', () => {
     updateInputText(fixture, 'here');
 

src/app/public/modules/text-highlight/text-highlight.directive.ts

@@ -142,7 +142,7 @@ export class SkyTextHighlightDirective
 
   private observeDom() {
     if (this.observer) {
-      const config = { attributes: true, childList: true, characterData: true };
+      const config = { attributes: false, childList: true, characterData: true };
       this.observer.observe(this.el.nativeElement, config);
     }
   }