MWPW-145852 Remove Category and Tags from Article Page (#48)

* MWPW-145852 Remove Category and Tags from Article Page * variable for unit test body mock
adobecom · May 9, 2024 · 34dc856 · 34dc856
1 parent 812c52a
commit 34dc856
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 83 deletions.
diff --git a/blog/scripts/utils.js b/blog/scripts/utils.js
@@ -61,27 +61,6 @@ function buildBlock(blockName, content) {
   return (blockEl);
 }
 
-function buildTagsBlock() {
-  const metadata = document.head.querySelectorAll('meta[property="article:tag"]');
-  if (!metadata.length) return;
-  const tagsArray = [...metadata].map((el) => el.content);
-  const tagsBlock = buildBlock('tags', tagsArray.join(', '));
-  const main = document.querySelector('main');
-  const recBlock = main.querySelector('.recommended-articles');
-
-  if (!recBlock) {
-    main.lastElementChild.append(tagsBlock);
-    return;
-  }
-
-  // Put tags block before recommended articles block
-  if (recBlock.parentElement.childElementCount === 1) {
-    recBlock.parentElement.previousElementSibling.append(tagsBlock);
-  } else {
-    recBlock.before(tagsBlock);
-  }
-}
-
 function getImageCaption(picture) {
   // Check if the parent element has a caption
   const parentEl = picture.parentNode;
@@ -99,24 +78,18 @@ function getImageCaption(picture) {
 async function buildArticleHeader(el) {
   const miloLibs = getLibs();
   const { getMetadata, getConfig } = await import(`${miloLibs}/utils/utils.js`);
-  const { loadTaxonomy, getLinkForTopic, getTaxonomyModule } = await import(`${miloLibs}/blocks/article-feed/article-helpers.js`);
-  if (!getTaxonomyModule()) {
-    await loadTaxonomy();
-  }
   const div = document.createElement('div');
   const h1 = el.querySelector('h1');
   const picture = el.querySelector('picture');
   const caption = getImageCaption(picture);
   const figure = document.createElement('div');
   figure.append(picture, caption);
-  const category = getMetadata('category');
   const author = getMetadata('author') || 'Adobe Communications Team';
   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 articleHeaderBlockEl = buildBlock('article-header', [
-    [`<p>${categoryTag}</p>`],
+    ['<p></p>'],
     [h1],
     [`<p>${authorURL ? `<a href="${authorURL}">${author}</a>` : author}</p>
       <p>${publicationDate}</p>`],
@@ -132,7 +105,6 @@ export async function buildAutoBlocks() {
   const mainEl = document.querySelector('main');
   try {
     if (getMetadata('publication-date') && !mainEl.querySelector('.article-header')) {
-      buildTagsBlock(mainEl);
       await buildArticleHeader(mainEl);
     }
   } catch (error) {

diff --git a/test/scripts/mocks/tagsHead.html b/test/scripts/mocks/tagsHead.html
diff --git a/test/scripts/mocks/tagsWithRecBody.html b/test/scripts/mocks/tagsWithRecBody.html
diff --git a/test/scripts/mocks/tagsWithRecSectionBody.html b/test/scripts/mocks/tagsWithRecSectionBody.html
diff --git a/test/scripts/utils.test.js b/test/scripts/utils.test.js
@@ -47,6 +47,7 @@ describe('Libs', () => {
 });
 
 const metadata = await readFile({ path: './mocks/head.html' });
+const body = await readFile({ path: './mocks/body.html' });
 
 window.lana = { log: () => {} };
 
@@ -56,8 +57,9 @@ describe('Auto Blocks', () => {
     document.head.innerHTML = metadata;
   });
 
-  beforeEach(() => {
+  beforeEach(async () => {
     sinon.stub(window.lana, 'log');
+    document.body.innerHTML = body;
   });
 
   afterEach(() => {
@@ -70,27 +72,14 @@ describe('Auto Blocks', () => {
     expect(window.lana.log.called).to.be.true;
   });
 
-  it('builds the tags block', async () => {
-    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.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.body.innerHTML = await readFile({ path: './mocks/tagsWithRecSectionBody.html' });
+  it('builds the article header block', async () => {
     await buildAutoBlocks();
-    expect(document.querySelector('.before-rec .tags')).to.exist;
+    expect(document.querySelector('.article-header')).to.exist;
   });
 
-  it('builds the article header block', async () => {
-    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+  it('does not show the category', async () => {
     await buildAutoBlocks();
-    expect(document.querySelector('.article-header')).to.exist;
+    const category = document.head.querySelector('meta[name=category]').content;
+    expect(document.querySelector('.article-header').innerText.includes(category)).to.be.false;
   });
 });