Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[sitecore-jss-angular] Fix default empty field components to not render unwanted wrapping HTML tags #1937

Merged
merged 11 commits into from
Oct 2, 2024
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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))

addy-pathania marked this conversation as resolved.
Show resolved Hide resolved
### 🎉 New Features & Improvements

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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=""
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>',
illiakovalenko marked this conversation as resolved.
Show resolved Hide resolved
template: '[No text in field]',
})
export class DefaultEmptyFieldEditingComponent {}
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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;

Expand Down