MWPW-144470 Support article header author without link (#2863)

adobecom · Sep 16, 2024 · 66694aa · 66694aa
1 parent 2ee8d3b
commit 66694aa
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/libs/blocks/article-header/article-header.js b/libs/blocks/article-header/article-header.js
@@ -32,14 +32,15 @@ function openPopup(e) {
 }
 
 async function buildAuthorInfo(authorEl, bylineContainer) {
-  const { href, textContent } = authorEl;
+  const { textContent } = authorEl;
+  const link = authorEl.href || authorEl.dataset.authorPage;
   const config = getConfig();
   const base = config.miloLibs || config.codeRoot;
   const authorImg = createTag('div', { class: 'article-author-image' });
   authorImg.style.backgroundImage = `url(${base}/blocks/article-header/adobe-logo.svg)`;
   bylineContainer.prepend(authorImg);
 
-  const doc = await validateAuthorUrl(href);
+  const doc = await validateAuthorUrl(link);
   if (!doc) {
     const p = createTag('p', null, textContent);
     authorEl.replaceWith(p);
@@ -48,7 +49,7 @@ async function buildAuthorInfo(authorEl, bylineContainer) {
 
   const img = doc.querySelector('img');
   if (img) {
-    img.setAttribute('alt', authorEl.textContent);
+    img.setAttribute('alt', textContent);
     authorImg.append(img);
     if (!img.complete) {
       img.addEventListener('load', () => {
@@ -197,7 +198,7 @@ export default async function init(blockEl) {
   bylineContainer.firstElementChild.classList.add('article-byline-info');
 
   const authorContainer = bylineContainer.firstElementChild.firstElementChild;
-  const authorEl = authorContainer.querySelector('a');
+  const authorEl = authorContainer.firstElementChild;
   authorContainer.classList.add('article-author');
 
   buildAuthorInfo(authorEl, bylineContainer);

diff --git a/test/blocks/article-header/article-header.test.js b/test/blocks/article-header/article-header.test.js
@@ -105,6 +105,21 @@ describe('article header', () => {
     const categoryLink = document.querySelector('.article-category a');
     expect(categoryLink.href.includes('/topics/')).to.be.true;
   });
+
+  it('adds an author image from a link', () => {
+    const img = document.querySelector('.article-author-image img');
+    const link = document.querySelector('.article-author a');
+    expect(img).to.exist;
+    expect(link).to.exist;
+  });
+
+  it('adds an author image from data attribute', async () => {
+    await init(document.querySelector('#article-header-no-author-link'));
+    const img = document.querySelector('.article-author-image img');
+    const author = document.querySelector('.article-author [data-author-page]');
+    expect(img).to.exist;
+    expect(author).to.exist;
+  });
 });
 
 describe('test the invalid article header', () => {

diff --git a/test/blocks/article-header/mocks/body.html b/test/blocks/article-header/mocks/body.html
@@ -39,3 +39,31 @@ <h1 id="celebrating-a-special-milestone-10-things-you-might-not-know-about-adobe
     </div>
   </div>
 </div>
+<div id="article-header-no-author-link" class="article-header">
+  <div>
+    <div>
+      <p><a href="" data-topic-link="Adobe Life">Adobe Life</a></p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <h1 id="celebrating-a-special-milestone-10-things-you-might-not-know-about-adobes-40-years-of-innovation">
+        Celebrating a special milestone: 10 things you might not know about Adobe’s 40 years of innovation</h1>
+    </div>
+  </div>
+  <div>
+    <div>
+      <p><span data-author-page="/test/blocks/article-header/mocks/adobe-communication-team">Adobe Communications Team</span></p>
+      <p>12-05-2022</p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <p>
+        <picture>
+        </picture>
+        <em>Caption</em>
+      </p>
+    </div>
+  </div>
+</div>