[sitecore-jss-angular] Prevent the scLink directive from adding an empty href attribute (#406)

Author: sc-illiakovalenko

packages/sitecore-jss-angular/src/components/link.directive.spec.ts

@@ -87,6 +87,23 @@ describe('<a *scLink />', () => {
     expect(rendered.nativeElement.innerHTML).toBe(field.text);
   });
 
+  it('should render value without href', () => {
+    const field = {
+      value: {
+        href: '',
+      },
+      text: 'ipsum',
+    };
+    comp.editable = false;
+    comp.field = field;
+    fixture.detectChanges();
+
+    const rendered = de.query(By.css('a'));
+
+    expect(rendered.nativeElement.href).toBe('');
+    expect(rendered.nativeElement.innerHTML).toBe(field.text);
+  });
+
   it('should render ee HTML', () => {
     const field = {
       editableFirstPart: eeLinkData,
@@ -219,4 +236,20 @@ describe('<a *scLink>children</a>', () => {
     expect(rendered.nativeElement.href).toContain(field.href);
     expect(rendered.nativeElement.innerHTML).toContain('<span>hello world</span>');
   });
+
+  it('should render children and value without href', () => {
+    const field = {
+      value: {
+        href: '',
+      },
+      text: 'ipsum',
+    };
+    comp.field = field;
+    fixture.detectChanges();
+
+    const rendered = de.query(By.css('a'));
+
+    expect(rendered.nativeElement.href).toBe('');
+    expect(rendered.nativeElement.innerHTML).toContain('<span>hello world</span>')
+  });
 });

packages/sitecore-jss-angular/src/components/link.directive.ts

@@ -50,6 +50,14 @@ export class LinkDirective implements OnChanges {
 
     viewRef.rootNodes.forEach((node) => {
       Object.entries(props).forEach(([key, propValue]: [string, any]) => {
+        if (key === 'href' && !propValue) {
+          if (!node.href) {
+            return;
+          }
+
+          propValue = node.href;
+        }
+
         if (key === 'class' && node.className) {
           propValue += ` ${node.className}`;
         }