Skip to content

Commit

Permalink
fix(seo): UI disabled tab buttons in seo toolbar don't show properly (#…
Browse files Browse the repository at this point in the history 
…26490)

* Adding twitter fixes

* #26193 Adding disabled for tab buttons

* Adding PR feedback

* Adding aria attr
  • Loading branch information
@manuelrojas @dsolistorres
manuelrojas authored and dsolistorres committed Nov 6, 2023
1 parent 2cf43bf commit 8a6c050
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 90 deletions.
172 changes: 90 additions & 82 deletions ...ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.spec.ts
View file
Expand Up @@ -12,10 +12,14 @@ import { DotSeoMetaTagsService } from './dot-seo-meta-tags.service';
import { seoOGTagsResultOgMock } from '../../../seo/components/dot-results-seo-tool/mocks';
import { IMG_NOT_FOUND_KEY } from '../dot-edit-content-html/models/meta-tags-model';

function createTestDocument(): XMLDocument {
return document.implementation.createDocument('http://www.w3.org/1999/xhtml', 'html', null);
}

describe('DotSetMetaTagsService', () => {
let service: DotSeoMetaTagsService;
let serviceUtil: DotSeoMetaTagsUtilService;
let testDoc: Document;
let testDoc: XMLDocument;
let head: HTMLElement;
let getImageFileSizeSpy;

Expand Down Expand Up @@ -117,7 +121,9 @@ describe('DotSetMetaTagsService', () => {
'seo.rules.og-description.description.not.found':
'og:description meta tag, and Meta Description not found!',
'seo.rules.twitter-card-description.description.not.found':
'twitter:description meta tag not found! Showing Description instead.'
'twitter:description meta tag, and Meta Description not found!',
'seo.rules.twitter-card-title.title.not.found':
'twitter:title meta tag not found, and HTML Title not found!'
})
},
DotUploadService
Expand All @@ -132,11 +138,7 @@ describe('DotSetMetaTagsService', () => {
})
);

testDoc = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
testDoc = createTestDocument();

const title = document.createElement('title');
title.innerText = 'Costa Rica Special Offer';
Expand Down Expand Up @@ -279,11 +281,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should og:description meta tag, and Meta Description not found!', (done) => {
const testDoc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const testDoc: XMLDocument = createTestDocument();

service.getMetaTagsResults(testDoc).subscribe((value) => {
expect(value[5].items[0].message).toEqual(
Expand All @@ -294,11 +292,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should og:image meta tag not found!', (done) => {
const imageDocument: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const imageDocument: XMLDocument = createTestDocument();

const head = imageDocument.createElement('head');
imageDocument.documentElement.appendChild(head);
Expand All @@ -321,11 +315,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should og:image meta tag not found!', (done) => {
const descriptionDocument: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const descriptionDocument: XMLDocument = createTestDocument();

const head = descriptionDocument.createElement('head');
descriptionDocument.documentElement.appendChild(head);
Expand All @@ -347,11 +337,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found title meta tag, with an appropriate amount of content!', (done) => {
const titleDoc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const titleDoc: XMLDocument = createTestDocument();

const head = titleDoc.createElement('head');
titleDoc.documentElement.appendChild(head);
Expand All @@ -369,11 +355,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found title meta tag, with an appropriate amount of content!', (done) => {
const titleDoc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const titleDoc: XMLDocument = createTestDocument();

const head = titleDoc.createElement('head');
titleDoc.documentElement.appendChild(head);
Expand All @@ -391,11 +373,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found title meta tag, with an appropriate amount of content when min limit', (done) => {
const titleDoc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const titleDoc: XMLDocument = createTestDocument();

const head = titleDoc.createElement('head');
titleDoc.documentElement.appendChild(head);
Expand All @@ -413,11 +391,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found title meta tag, with an appropriate amount of content when max limit', (done) => {
const titleDoc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const titleDoc: XMLDocument = createTestDocument();

const head = titleDoc.createElement('head');
titleDoc.documentElement.appendChild(head);
Expand All @@ -435,11 +409,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found description meta tag, with an appropriate amount of content when min limit', (done) => {
const doc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);
Expand All @@ -456,11 +426,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found description meta tag, with an appropriate amount of content when max limit', (done) => {
const doc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);
Expand All @@ -478,11 +444,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found og:title meta tag, with an appropriate amount of content when max limit', (done) => {
const doc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);
Expand All @@ -501,11 +463,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found og:title meta tag, with an appropriate amount of content when min limit', (done) => {
const doc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);
Expand All @@ -524,11 +482,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found og:description meta tag, with an appropriate amount of content when max limit', (done) => {
const doc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);
Expand All @@ -547,11 +501,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found og:description meta tag, with an appropriate amount of content when max limit', (done) => {
const doc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);
Expand All @@ -571,11 +521,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found twitter:description meta tag, with an appropriate amount of content when min limit', (done) => {
const doc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);
Expand All @@ -595,11 +541,7 @@ describe('DotSetMetaTagsService', () => {
});

it('should found twitter:description meta tag, with an appropriate amount of content when max limit', (done) => {
const doc: Document = document.implementation.createDocument(
'http://www.w3.org/1999/xhtml',
'html',
null
);
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);
Expand All @@ -616,4 +558,70 @@ describe('DotSetMetaTagsService', () => {
done();
});
});

it('should found twitter:description meta tag not found! Showing Description instead.', (done) => {
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);

const metaDesc = document.createElement('meta');
metaDesc.name = 'description';
metaDesc.content =
'Get down to Costa Rica this winter for some of the best surfing int he world. Large winter swell is pushing across the Pacific.';
head.appendChild(metaDesc);

service.getMetaTagsResults(doc).subscribe((value) => {
expect(value[8].items[0].message).toEqual(
'<code>twitter:description</code> meta tag not found! Showing Description instead.'
);
done();
});
});

it('should found twitter:description meta tag', (done) => {
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);

service.getMetaTagsResults(doc).subscribe((value) => {
expect(value[8].items[0].message).toEqual(
'<code>twitter:description</code> meta tag, and Meta Description not found!'
);
done();
});
});

it('should found twitter:title meta tag not found and HTML Title not found!', (done) => {
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);

service.getMetaTagsResults(doc).subscribe((value) => {
expect(value[7].items[0].message).toEqual(
'<code>twitter:title</code> meta tag not found, and HTML Title not found!'
);
done();
});
});

it('should found twitter:title meta tag, Showing HTML Title instead.', (done) => {
const doc: XMLDocument = createTestDocument();

const head = doc.createElement('head');
doc.documentElement.appendChild(head);

const title = document.createElement('title');
title.innerText = 'Costa Rica Special Offer';
head.appendChild(title);

service.getMetaTagsResults(doc).subscribe((value) => {
expect(value[7].items[0].message).toEqual(
'<code>twitter:title</code> meta tag not found! Showing HTML Title instead.'
);
done();
});
});
});
22 changes: 15 additions & 7 deletions ...tcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts
View file
Expand Up @@ -548,11 +548,13 @@ export class DotSeoMetaTagsService {
const result: SeoRulesResult[] = [];
const titleCardElements = metaTagsObject['twitterTitleElements'];
const titleCard = metaTagsObject['twitter:title'];
const title = metaTagsObject['og:title'];
const titleElements = metaTagsObject['titleOgElements'];
const titleOg = metaTagsObject['og:title'];
const titleOgElements = metaTagsObject['titleOgElements'];
const title = metaTagsObject['title'];
const titleElements = metaTagsObject['titleElements'];

if (
title &&
(title || titleOg) &&
this.dotSeoMetaTagsUtilService.areAllFalsyOrEmpty([titleCard, titleCardElements])
) {
result.push(
Expand All @@ -567,7 +569,9 @@ export class DotSeoMetaTagsService {
title,
titleCard,
titleElements,
titleCardElements
titleCardElements,
titleOgElements,
titleOg
])
) {
result.push(
Expand Down Expand Up @@ -631,11 +635,13 @@ export class DotSeoMetaTagsService {
const result: SeoRulesResult[] = [];
const twitterDescriptionElements = metaTagsObject['twitterDescriptionElements'];
const twitterDescription = metaTagsObject['twitter:description'];
const ogDescriptionElements = metaTagsObject['ogDescriptionElements'];
const ogDescriptionElements = metaTagsObject['descriptionOgElements'];
const ogDescription = metaTagsObject['og:description'];
const descriptionElements = metaTagsObject['descriptionElements'];
const description = metaTagsObject['description'];

if (
ogDescription &&
(description || ogDescription) &&
this.dotSeoMetaTagsUtilService.areAllFalsyOrEmpty([
twitterDescription,
twitterDescriptionElements
Expand All @@ -653,7 +659,9 @@ export class DotSeoMetaTagsService {
twitterDescription,
twitterDescriptionElements,
ogDescriptionElements,
ogDescriptionElements
descriptionElements,
ogDescription,
description
])
) {
result.push(
Expand Down
2 changes: 1 addition & 1 deletion ...tlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts
View file
Expand Up @@ -94,7 +94,7 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges {

const twitterTitle = twitterTitleProperties
.map((property) =>
this.seoOGTags[property]?.slice(0, SEO_LIMITS.MAX_TWITTER_DESCRIPTION_LENGTH)
this.seoOGTags[property]?.slice(0, SEO_LIMITS.MAX_TWITTER_TITLE_LENGTH)
)
.find((value) => value !== undefined);

Expand Down
3 changes: 3 additions & 0 deletions core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.html
View file
Expand Up @@ -9,6 +9,7 @@
}"
[value]="item.value.id"
[disabled]="item.disabled"
[item.disabled]="item.disabled"
[pTooltip]="'editpage.toolbar.' + item.label.toLowerCase() + '.page.clipboard' | dm"
(click)="onClickOption($event, item.value.id)"
data-testId="dot-tab-button-text"
Expand All @@ -19,6 +20,8 @@
<button
class="dot-tab__dropdown"
*ngIf="item.value.showDropdownButton"
[disabled]="item.disabled"
[aria-disabled]="item.disabled"
[ngClass]="{ 'dot-tab-dropdown--active': activeId === item.value.id }"
(click)="onClickDropdown($event, item.value.id)"
data-testId="dot-tab-button-dropdown">
Expand Down

0 comments on commit 8a6c050

Please sign in to comment.