MWPW-144683 Remove Null from Article Header

blog/scripts/utils.js

@@ -114,7 +114,7 @@ async function buildArticleHeader(el) {
   const { locale } = getConfig();
   const authorURL = getMetadata('author-url') || (author ? `${locale.contentRoot}/authors/${author.replace(/[^0-9a-z]/gi, '-').toLowerCase()}` : null);
   const publicationDate = getMetadata('publication-date');
-  const categoryTag = getLinkForTopic(category);
+  const categoryTag = category ? getLinkForTopic(category) : '';
   const articleHeaderBlockEl = buildBlock('article-header', [
     [`<p>${categoryTag}</p>`],
     [h1],

test/scripts/mocks/blocks/article-feed/article-helpers.js

@@ -0,0 +1,11 @@
+export function loadTaxonomy() {
+
+}
+
+export function getLinkForTopic() {
+  return '#';
+}
+
+export function getTaxonomyModule() {
+  return true;
+}

test/scripts/mocks/tagsBody.html → test/scripts/mocks/body.html

@@ -1,6 +1,9 @@
 <main>
   <div>
     <h1 id="connecting-external-data-sources-to-adobe-experience-manager-guides-is-now-a-breeze">Connecting external data sources to Adobe Experience Manager Guides is now a breeze</h1>
+    <picture>
+      <img src="">
+    </picture>
     <p><em>Rohit Bansal is a principal product marketing manager at Adobe, leading global go-to-market strategy for Adobe Experience Manager Guides. With over 14 years of experience, Rohit has led marketing for product and services firms in the B2B domain — and managed key functions like product marketing, digital marketing, thought leadership, demand generation, and partner relations. A passionate data-driven marketer, he is also a big advocate of the customer experience.</em></p>
   </div>
 </main>

test/scripts/mocks/head.html

@@ -0,0 +1,4 @@
+<meta name="publication-date" content="08-10-2023">
+<meta property="article:tag" content="Customer Intelligence">
+<meta property="article:tag" content="Customer Success">
+<meta name="category" content="The Latest">

test/scripts/mocks/utils/utils.js

@@ -0,0 +1,8 @@
+export function getMetadata(name, doc = document) {
+  const attr = name && name.includes(':') ? 'property' : 'name';
+  const meta = doc.head.querySelector(`meta[${attr}="${name}"]`);
+  return meta && meta.content;
+}
+export function getConfig() {
+  return { locale: '' };
+}

test/scripts/utils.test.js

@@ -46,13 +46,14 @@ describe('Libs', () => {
   });
 });
 
-const metadata = await readFile({ path: './mocks/tagsHead.html' });
+const metadata = await readFile({ path: './mocks/head.html' });
 
 window.lana = { log: () => {} };
 
 describe('Auto Blocks', () => {
   before(() => {
-    setLibs('/libs');
+    setLibs('/test/scripts/mocks', { hostname: 'none', search: '' });
+    document.head.innerHTML = metadata;
   });
 
   beforeEach(() => {
@@ -64,30 +65,39 @@ describe('Auto Blocks', () => {
   });
 
   it('catches errors', async () => {
-    document.head.innerHTML = metadata;
     document.body.innerHTML = '';
     await buildAutoBlocks();
     expect(window.lana.log.called).to.be.true;
   });
 
   it('builds the tags block', async () => {
-    document.head.innerHTML = metadata;
-    document.body.innerHTML = await readFile({ path: './mocks/tagsBody.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
     await buildAutoBlocks();
     expect(document.querySelector('.tags')).to.exist;
   });
 
   it('inserts the tags block before recommended articles if present', async () => {
-    document.head.innerHTML = metadata;
     document.body.innerHTML = await readFile({ path: './mocks/tagsWithRecBody.html' });
     await buildAutoBlocks();
     expect(document.querySelector('.tags + .recommended-articles')).to.exist;
   });
 
   it('inserts the tags block in section before recommended articles if present', async () => {
-    document.head.innerHTML = metadata;
     document.body.innerHTML = await readFile({ path: './mocks/tagsWithRecSectionBody.html' });
     await buildAutoBlocks();
     expect(document.querySelector('.before-rec .tags')).to.exist;
   });
+
+  it('builds the article header block', async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    await buildAutoBlocks();
+    expect(document.querySelector('.article-header')).to.exist;
+  });
+
+  it('does not display null category', async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/noCategoryHead.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+    await buildAutoBlocks();
+    expect(document.querySelector('.article-header > div').textContent).to.not.equal('null');
+  });
 });