[sitecore-jss-angular] Fix default empty field components to not rend…

…er unwanted wrapping HTML tags (#1937) * fix linkedList and image on Pages * add a defaultEmptyComponent method for link and image directives * remove unused variables * fix richtext directive * refactor default empty field components * update changelog * add line * fix changelog * refactor default empty text component * fix tests * fix changelog --------- Co-authored-by: Addy Pathania <[email protected]>
Sitecore · Oct 2, 2024 · 2794c8c · 2794c8c
1 parent 85de05b
commit 2794c8c
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ Our versioning strategy is as follows:
 * `[templates/nextjs]` `[templates/react]` `[templates/angular]` `[templates/vue]` Fixed an issue when environment variable is undefined (not present in .env), that produced an "undefined" value in generated config file ([#1875](https://github.com/Sitecore/jss/pull/1875))
 * `[templates/nextjs]` Fix embedded personalization not rendering correctly after navigation through router links. ([#1911](https://github.com/Sitecore/jss/pull/1911))
 * `[template/angular]` Prevent client-side dictionary API call when SSR data is available ([#1930](https://github.com/Sitecore/jss/pull/1930)) ([#1932](https://github.com/Sitecore/jss/pull/1932))
+* `[sitecore-jss-angular]` Fix default empty field components to not render the unwanted wrapping tags ([#1937](https://github.com/Sitecore/jss/pull/1937))
 
 ### 🎉 New Features & Improvements
 

diff --git a/packages/sitecore-jss-angular/src/components/base-field.directive.spec.ts b/packages/sitecore-jss-angular/src/components/base-field.directive.spec.ts
@@ -130,7 +130,9 @@ describe('<span *scTestBase />', () => {
         fixture.detectChanges();
 
         const rendered = de.nativeElement.innerHTML;
-        expect(rendered).toContain('<span>[No text in field]</span>');
+        expect(rendered).toContain(
+          '<span sc-default-empty-text-field-editing-placeholder="">[No text in field]</span>'
+        );
       });
 
       it('should render custom empty editing template if provided', () => {
@@ -199,7 +201,9 @@ describe('<span *scTestBase />', () => {
           comp.field = field;
           fixture.detectChanges();
 
-          const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder'));
+          const fieldValue = de.query(
+            By.css('span[sc-default-empty-text-field-editing-placeholder]')
+          );
           const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
           const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;
 

diff --git a/packages/sitecore-jss-angular/src/components/date.directive.spec.ts b/packages/sitecore-jss-angular/src/components/date.directive.spec.ts
@@ -160,7 +160,9 @@ describe('<span *scDate />', () => {
       fixture.detectChanges();
 
       const rendered = de.nativeElement.innerHTML;
-      expect(rendered).toContain('<span>[No text in field]</span>');
+      expect(rendered).toContain(
+        '<span sc-default-empty-text-field-editing-placeholder="">[No text in field]</span>'
+      );
     });
 
     it('should render default empty field component when field value is the default empty date value', () => {
@@ -172,7 +174,9 @@ describe('<span *scDate />', () => {
       fixture.detectChanges();
 
       const rendered = de.nativeElement.innerHTML;
-      expect(rendered).toContain('<span>[No text in field]</span>');
+      expect(rendered).toContain(
+        '<span sc-default-empty-text-field-editing-placeholder="">[No text in field]</span>'
+      );
     });
 
     it('should render custom empty field component when provided, when field value is empty', () => {
@@ -256,7 +260,9 @@ describe('<span *scDate />', () => {
           comp.field = field;
           fixture.detectChanges();
 
-          const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder'));
+          const fieldValue = de.query(
+            By.css('span[sc-default-empty-text-field-editing-placeholder]')
+          );
           const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
           const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;
 

diff --git a/...ore-jss-angular/src/components/default-empty-image-field-editing-placeholder.component.ts b/...ore-jss-angular/src/components/default-empty-image-field-editing-placeholder.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
  * Default component that will be rendered in pages when image field is empty.
  */
 @Component({
-  selector: 'sc-default-empty-image-field-editing-placeholder',
+  selector: '[sc-default-empty-image-field-editing-placeholder]',
   template: `
     <img
       alt=""

diff --git a/...core-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts b/...core-jss-angular/src/components/default-empty-text-field-editing-placeholder.component.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
  * Default component that will be rendered in pages when field is empty; applies for text, richtext, date and link fields.
  */
 @Component({
-  selector: 'sc-default-empty-text-field-editing-placeholder',
-  template: '<span>[No text in field]</span>',
+  selector: '<span>[sc-default-empty-text-field-editing-placeholder]</span>',
+  template: '[No text in field]',
 })
 export class DefaultEmptyFieldEditingComponent {}
diff --git a/packages/sitecore-jss-angular/src/components/generic-link.directive.spec.ts b/packages/sitecore-jss-angular/src/components/generic-link.directive.spec.ts
@@ -27,7 +27,8 @@ class TestComponent {
 
 const emptyLinkFieldEditingTemplateId = 'emptyLinkFieldEditingTemplate';
 const emptyLinkFieldEditingTemplate = '<span>[This is a *custom* empty field template]</span>';
-const emptyLinkFieldEditingTemplateDefaultTestString = '<span>[No text in field]</span>';
+const emptyLinkFieldEditingTemplateDefaultTestString =
+  '<span sc-default-empty-text-field-editing-placeholder="">[No text in field]</span>';
 
 @Component({
   selector: 'test-empty-template-generic-link',

diff --git a/packages/sitecore-jss-angular/src/components/image.directive.spec.ts b/packages/sitecore-jss-angular/src/components/image.directive.spec.ts
@@ -512,7 +512,7 @@ describe('<img *scImage />', () => {
           comp.field = field;
           fixture.detectChanges();
 
-          const fieldValue = de.query(By.css('sc-default-empty-image-field-editing-placeholder'));
+          const fieldValue = de.query(By.css('[sc-default-empty-image-field-editing-placeholder]'));
           const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
           const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;
 

diff --git a/packages/sitecore-jss-angular/src/components/link.directive.spec.ts b/packages/sitecore-jss-angular/src/components/link.directive.spec.ts
@@ -20,7 +20,8 @@ class TestComponent {
 
 const emptyLinkFieldEditingTemplateId = 'emptyLinkFieldEditingTemplate';
 const emptyLinkFieldEditingTemplate = '<span>[This is a *custom* empty field template]</span>';
-const emptyLinkFieldEditingTemplateDefaultTestString = '<span>[No text in field]</span>';
+const emptyLinkFieldEditingTemplateDefaultTestString =
+  '<span sc-default-empty-text-field-editing-placeholder="">[No text in field]</span>';
 
 @Component({
   selector: 'test-empty-template-link',
@@ -389,7 +390,9 @@ describe('<a *scLink />', () => {
           comp.field = field;
           fixture.detectChanges();
 
-          const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder'));
+          const fieldValue = de.query(
+            By.css('span[sc-default-empty-text-field-editing-placeholder]')
+          );
           const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
           const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;
 
@@ -740,7 +743,9 @@ describe('<a *scLink>children</a>', () => {
           comp.field = field;
           fixture.detectChanges();
 
-          const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder'));
+          const fieldValue = de.query(
+            By.css('span[sc-default-empty-text-field-editing-placeholder]')
+          );
           const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
           const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;
 

diff --git a/packages/sitecore-jss-angular/src/components/rich-text.directive.spec.ts b/packages/sitecore-jss-angular/src/components/rich-text.directive.spec.ts
@@ -172,7 +172,9 @@ describe('<div *scRichText />', () => {
       fixture.detectChanges();
 
       const rendered = de.nativeElement.innerHTML;
-      expect(rendered).toContain('<span>[No text in field]</span>');
+      expect(rendered).toContain(
+        '<span sc-default-empty-text-field-editing-placeholder="">[No text in field]</span>'
+      );
     });
 
     it('should render custom empty field component when provided, when field value is empty', () => {
@@ -238,7 +240,9 @@ describe('<div *scRichText />', () => {
           comp.field = field;
           fixture.detectChanges();
 
-          const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder'));
+          const fieldValue = de.query(
+            By.css('span[sc-default-empty-text-field-editing-placeholder]')
+          );
           const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
           const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;
 

diff --git a/packages/sitecore-jss-angular/src/components/router-link.directive.spec.ts b/packages/sitecore-jss-angular/src/components/router-link.directive.spec.ts
@@ -25,7 +25,8 @@ class TestComponent {
 
 const emptyLinkFieldEditingTemplateId = 'emptyLinkFieldEditingTemplate';
 const emptyLinkFieldEditingTemplate = '<span>[This is a *custom* empty field template]</span>';
-const emptyLinkFieldEditingTemplateDefaultTestString = '<span>[No text in field]</span>';
+const emptyLinkFieldEditingTemplateDefaultTestString =
+  '<span sc-default-empty-text-field-editing-placeholder="">[No text in field]</span>';
 
 @Component({
   selector: 'test-empty-template-router-link',

diff --git a/packages/sitecore-jss-angular/src/components/text.directive.spec.ts b/packages/sitecore-jss-angular/src/components/text.directive.spec.ts
@@ -215,7 +215,9 @@ describe('<span *scText />', () => {
       fixture.detectChanges();
 
       const rendered = de.nativeElement.innerHTML;
-      expect(rendered).toContain('<span>[No text in field]</span>');
+      expect(rendered).toContain(
+        '<span sc-default-empty-text-field-editing-placeholder="">[No text in field]</span>'
+      );
     });
 
     it('should render custom empty field component when provided, when field value is empty', () => {
@@ -281,7 +283,9 @@ describe('<span *scText />', () => {
           comp.field = field;
           fixture.detectChanges();
 
-          const fieldValue = de.query(By.css('sc-default-empty-text-field-editing-placeholder'));
+          const fieldValue = de.query(
+            By.css('span[sc-default-empty-text-field-editing-placeholder]')
+          );
           const metadataOpenTag = fieldValue.nativeElement.previousElementSibling;
           const metadataCloseTag = fieldValue.nativeElement.nextElementSibling;