Add tracking attributes to links in card block (#1003)

Co-authored-by: Ruchika Sinha <tek10248@Ruchikas-MacBook-Pro.local>

libs/blocks/card/card.js

@@ -1,6 +1,7 @@
 import { decorateButtons } from '../../utils/decorate.js';
 import { loadStyle, getConfig, createTag } from '../../utils/utils.js';
 import { getMetadata } from '../section-metadata/section-metadata.js';
+import { decorateLinkAnalytics } from '../../martech/attributes.js';
 
 const HALF = 'OneHalfCard';
 const HALF_HEIGHT = 'HalfHeightCard';
@@ -115,6 +116,8 @@ const addFooter = (links, container, merch) => {
 };
 
 const init = (el) => {
+  const headings = el.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  decorateLinkAnalytics(el, headings);
   const { miloLibs, codeRoot } = getConfig();
   const base = miloLibs || codeRoot;
   loadStyle(`${base}/deps/caas.css`);

test/blocks/card/card.test.js

@@ -86,4 +86,23 @@ describe('Card', () => {
       expect(document.querySelector('.consonant-CardsGrid--2up')).to.exist;
     });
   });
+
+  describe('Analytics', () => {
+    before(async () => {
+      document.body.innerHTML = await readFile({ path: './mocks/two-up-cards.html' });
+    });
+
+    it('Analytics attribute are added to the links and headings in the card', () => {
+      const card = document.querySelector('.card');
+      init(card);
+      const links = card.querySelectorAll('a');
+      const headings = card.querySelectorAll('h1, h2, h3, h4, h5, h6');
+      links.forEach((link) => {
+        expect(link.hasAttribute('daa-ll'));
+      });
+      headings.forEach((heading) => {
+        expect(heading.hasAttribute('daa-lh'));
+      });
+    });
+  });
 });