Merge pull request #829 from adobecom/promptcard-analytics

MWPW-159091 Add analytics event for clicking a prompt card

acrobat/blocks/prompt-card/prompt-card.js

@@ -1,8 +1,10 @@
+/* eslint-disable prefer-template */
 /* eslint-disable compat/compat */
 import { setLibs } from '../../scripts/utils.js';
 
 const miloLibs = setLibs('/libs');
 const { createTag } = await import(`${miloLibs}/utils/utils.js`);
+const { processTrackingLabels } = await import(`${miloLibs}/martech/attributes.js`);
 
 const classToastShow = 'prompt-toast--show';
 const getPlaceHolder = (x) => (window.mph?.[x] || x);
@@ -37,6 +39,7 @@ async function createBlock(element, cfg) {
     'data-toast': cfg.toast,
     'daa-im': true,
     'daa-lh': 'Featured prompts | Executive summary',
+    'daa-ll': 'promptcard-' + processTrackingLabels(cfg.prefix) + '-' + processTrackingLabels(cfg.title),
   });
   const prefix = createTag('div', { class: 'prompt-prefix' });
   const icon = createTag('img', {

test/blocks/prompt-card/mocks/body-template-group-more.html

@@ -0,0 +1,55 @@
+<main>
+  <div>
+    <div class="prompt-card template group">
+      <div>
+        <div>Prefix</div>
+        <div>Ask</div>
+      </div>
+      <div>
+        <div>Rows</div>
+        <div>1</div>
+      </div>
+      <div>
+        <div></div>
+      </div>
+      <div>
+        <div>Title</div>
+        <div>Prompt</div>
+      </div>
+      <div>
+        <div>Sum it up</div>
+        <div>Summarize this document in 3 sentences.</div>
+      </div>
+      <div>
+        <div>Organize your thoughts</div>
+        <div>Suggest a few essay topics based on this reading that can help me get started.</div>
+      </div>
+      <div>
+        <div>Refresh your memory.</div>
+        <div>Provide 10 sample test questions that my professor could ask me.</div>
+      </div>
+      <div>
+        <div>Point out tech advantages</div>
+        <div>What are the key benefits for users of this proposed technology solution?</div>
+      </div>
+      <div>
+        <div>Point out tech advantages</div>
+        <div>What are the key benefits for users of this proposed technology solution?</div>
+      </div>
+      <div>
+        <div>Shorten up the intro</div>
+        <div>Rewrite the introduction so it has only 200 words and a Flesch reading score above 50.</div>
+      </div>
+    </div>
+    <div class="section-metadata">
+      <div>
+        <div>style</div>
+        <div>Four up, xl-spacing</div>
+      </div>
+      <div>
+        <div>background</div>
+        <div>#f8f8f8</div>
+      </div>
+    </div>
+  </div>
+</main>

test/blocks/prompt-card/prompt-card-template-group-more.test.js

@@ -0,0 +1,27 @@
+/* eslint-disable no-promise-executor-return */
+/* eslint-disable compat/compat */
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import { delay } from '../../helpers/waitfor.js';
+
+describe('prompt-cards using the template and group features', () => {
+  before(async () => {
+    document.head.innerHTML = await readFile({ path: './mocks/head.html' });
+    document.body.innerHTML = await readFile({ path: './mocks/body-template-group-more.html' });
+    await import('../../../acrobat/scripts/scripts.js');
+    await delay(500);
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+  });
+
+  it('creates prompt cards', () => {
+    const blades = document.querySelectorAll('.prompt-card:not(.hidden)');
+    expect([...blades].length).to.equal(2);
+  });
+
+  it('shows all cards after click view-all button', async () => {
+    const button = document.querySelector('.view-all .con-button');
+    button.click();
+    const promptcards = document.querySelectorAll('.prompt-card:not(.hidden)');
+    expect([...promptcards].length).to.equal(6);
+  });
+});