test(quantic): playwright tests added for user actions feature

packages/quantic/force-app/examples/main/lwc/exampleQuanticUserActionsToggle/exampleQuanticUserActionsToggle.css

@@ -0,0 +1,7 @@
+.user-actions-toggle-container {
+  height: 3rem;
+}
+
+.user-actions-container {
+  height: 32rem;
+}

packages/quantic/force-app/examples/main/lwc/exampleQuanticUserActionsToggle/exampleQuanticUserActionsToggle.html

@@ -0,0 +1,19 @@
+<template>
+  <c-example-layout title={pageTitle} description={pageDescription} show-preview={isConfigured}>
+
+    <div slot="configuration">
+      <c-configurator options={options} ontryitnow={handleTryItNow}>
+      </c-configurator>
+    </div>
+
+    <c-quantic-insight-interface slot="preview" engine-id={engineId} insight-id={insightId}>
+      <div class="user-actions-container">
+        <div class="user-actions-toggle-container">
+          <c-quantic-user-actions-toggle engine-id={engineId} user-id={config.userId}
+            ticket-creation-date-time={config.ticketCreationDateTime}>
+          </c-quantic-user-actions-toggle>
+        </div>
+      </div>
+    </c-quantic-insight-interface>
+  </c-example-layout>
+</template>

packages/quantic/force-app/examples/main/lwc/exampleQuanticUserActionsToggle/exampleQuanticUserActionsToggle.js

@@ -0,0 +1,35 @@
+import {api, LightningElement, track} from 'lwc';
+
+export default class ExampleQuanticUserActionsToggle extends LightningElement {
+  @api engineId = 'quantic-user-actions-toggle-engine';
+  insightId = '6a333202-b1e0-451e-8664-26a1f93c2faf';
+  @track config = {};
+  isConfigured = false;
+
+  pageTitle = 'Quantic User Actions Toggle';
+  pageDescription =
+    'The `QuanticUserActionsToggle` component displays a button that opens a modal containing the user actions timeline component.';
+  options = [
+    {
+      attribute: 'userId',
+      label: 'User Id',
+      description:
+        'The ID of the user whose actions are being displayed. For example in email format "[email protected]".',
+    },
+    {
+      attribute: 'ticketCreationDateTime',
+      label: 'Ticket Creation Date Time',
+      description:
+        'The date and time when the ticket was created. For example "2024-01-01T00:00:00Z"',
+    },
+  ];
+
+  get notConfigured() {
+    return !this.isConfigured;
+  }
+
+  handleTryItNow(evt) {
+    this.config = evt.detail;
+    this.isConfigured = true;
+  }
+}

packages/quantic/force-app/examples/main/lwc/exampleQuanticUserActionsToggle/exampleQuanticUserActionsToggle.js-meta.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>52.0</apiVersion>
+    <isExposed>true</isExposed>
+    <targets>
+      <target>lightning__RecordPage</target>
+      <target>lightning__AppPage</target>
+      <target>lightning__HomePage</target>
+      <target>lightningCommunity__Page</target>
+      <target>lightningCommunity__Default</target>
+  </targets>
+</LightningComponentBundle>

packages/quantic/force-app/main/default/lwc/quanticUserActionsToggle/__tests__/quanticUserActionsToggle.test.js

@@ -119,6 +119,24 @@ describe('c-quantic-user-actions-toggle', () => {
     cleanup();
   });
 
+  describe('controller initialization', () => {
+    it('should build the controller with the right parameters', async () => {
+      createTestComponent();
+      await flushPromises();
+
+      expect(functionsMocks.buildUserActions).toHaveBeenCalledTimes(1);
+      expect(functionsMocks.buildUserActions).toHaveBeenCalledWith(
+        exampleEngine,
+        {
+          options: {
+            ticketCreationDate: exampleTicketCreationDateTime,
+            excludedCustomActions: exampleExcludedCustomActions,
+          },
+        }
+      );
+    });
+  });
+
   it('should display the user actions toggle button', async () => {
     const element = createTestComponent();
     await flushPromises();

packages/quantic/force-app/main/default/lwc/quanticUserActionsToggle/e2e/data.ts

@@ -0,0 +1,32 @@
+const followingSessionsActions = [
+  {
+    name: 'CUSTOM',
+    value:
+      '{"event_type":"example","event_value":"exampleCustomAction","origin_level_1":"default"}',
+    time: new Date('2024-09-01T15:30:00Z').valueOf(),
+  },
+];
+
+const ticketCreationSessionActions = [
+  {
+    name: 'CUSTOM',
+    value:
+      '{"event_type":"errors","event_value":"One","origin_level_1":"default","origin_level_2":"default"}',
+    time: new Date('2024-08-30T00:10:00Z').valueOf(),
+  },
+];
+
+const precedingSessionsActions = [
+  {
+    name: 'CUSTOM',
+    value:
+      '{"event_type":"example","event_value":"exampleCustomAction","origin_level_1":"default"}',
+    time: new Date('2024-08-29T15:40:00Z').valueOf(),
+  },
+];
+
+export const exampleUserActionsData = [
+  ...followingSessionsActions,
+  ...ticketCreationSessionActions,
+  ...precedingSessionsActions,
+];

packages/quantic/force-app/main/default/lwc/quanticUserActionsToggle/e2e/fixture.ts

@@ -0,0 +1,32 @@
+import {quanticBase} from '../../../../../../playwright/fixtures/baseFixture';
+import {UserActionsToggleObject} from './pageObject';
+import {exampleUserActionsData} from './data';
+
+const pageUrl = 's/quantic-user-actions-toggle';
+
+interface UserActionsToggleOptions {
+  userId: string;
+  ticketCreationDateTime: string;
+}
+type QuanticUserActionsToggleE2EFixtures = {
+  userActionsToggle: UserActionsToggleObject;
+  options: UserActionsToggleOptions;
+};
+
+export const testInsight =
+  quanticBase.extend<QuanticUserActionsToggleE2EFixtures>({
+    options: {
+      userId: '[email protected]',
+      ticketCreationDateTime: '2024-01-01T00:00:00Z',
+    },
+    userActionsToggle: async ({page, options, configuration}, use) => {
+      await page.goto(pageUrl);
+      configuration.configure({...options});
+      const userActionsToggleObject = new UserActionsToggleObject(page);
+      userActionsToggleObject.mockUserActions(exampleUserActionsData);
+      await userActionsToggleObject.waitForUserActionsResponse(options.userId);
+      await use(userActionsToggleObject);
+    },
+  });
+
+export {expect} from '@playwright/test';

packages/quantic/force-app/main/default/lwc/quanticUserActionsToggle/e2e/pageObject.ts

@@ -0,0 +1,71 @@
+import {Locator, Page, Request, Response} from '@playwright/test';
+import {isUaCustomEvent} from '../../../../../../playwright/utils/requests';
+
+const userActionsRequestRegex =
+  /\/rest\/organizations\/.*\/machinelearning\/user\/actions$/;
+
+export class UserActionsToggleObject {
+  constructor(public page: Page) {
+    this.page = page;
+  }
+
+  get userActionsToggleButton(): Locator {
+    return this.page.getByRole('button', {name: /User actions/i});
+  }
+
+  get userActionsModal(): Locator {
+    return this.page.locator(
+      'c-quantic-user-actions-toggle > c-quantic-modal > div'
+    );
+  }
+
+  get userActionsModalCloseButton(): Locator {
+    return this.page.locator(
+      'c-quantic-user-actions-toggle > c-quantic-modal button[title="Close"]'
+    );
+  }
+
+  async mockUserActions(
+    userActions: Array<{name: string; value: string; time: number}>
+  ) {
+    await this.page.route(userActionsRequestRegex, async (route) => {
+      const body = {value: userActions};
+
+      await route.fulfill({
+        body: JSON.stringify(body),
+        status: 200,
+        headers: {
+          'content-type': 'text/html',
+        },
+      });
+    });
+  }
+
+  async waitForUserActionsResponse(userId: string): Promise<Response> {
+    return this.page.waitForResponse((response) => {
+      const request = response.request();
+      if (request.url().match(userActionsRequestRegex)) {
+        const requestBody = request.postDataJSON?.();
+        return requestBody?.objectId === userId;
+      }
+      return false;
+    });
+  }
+
+  async waitForOpenUserActionsUaAnalytics(): Promise<Request> {
+    const uaRequest = this.page.waitForRequest((request) => {
+      if (isUaCustomEvent(request)) {
+        const requestBody = request.postDataJSON?.();
+        const expectedFields = {
+          eventType: 'User Actions',
+          eventValue: 'openUserActions',
+        };
+        return Object.keys(expectedFields).every(
+          (key) => requestBody?.[key] === expectedFields[key]
+        );
+      }
+      return false;
+    });
+    return uaRequest;
+  }
+}

packages/quantic/force-app/main/default/lwc/quanticUserActionsToggle/e2e/quanticUserActionsToggle.e2e.ts

@@ -0,0 +1,39 @@
+import {testInsight, expect} from './fixture';
+
+const exampleUserId = 'exampleUserId';
+const exampleTicketCreateDateTime = encodeURIComponent('2024-08-30');
+
+testInsight.use({
+  options: {
+    userId: exampleUserId,
+    ticketCreationDateTime: exampleTicketCreateDateTime,
+  },
+});
+
+testInsight.describe('quantic user actions toggle', () => {
+  testInsight.describe('when opening the user action modal', () => {
+    testInsight(
+      'should open the user actions timeline and log analytics',
+      async ({userActionsToggle}) => {
+        await expect(userActionsToggle.userActionsModal).not.toBeVisible();
+        const uaPromise = userActionsToggle.waitForOpenUserActionsUaAnalytics();
+        await userActionsToggle.userActionsToggleButton.click();
+        await expect(userActionsToggle.userActionsModal).toBeVisible();
+        await uaPromise;
+      }
+    );
+  });
+
+  testInsight.describe('when closing the user action modal', () => {
+    testInsight(
+      'should close the user actions timeline',
+      async ({userActionsToggle}) => {
+        await expect(userActionsToggle.userActionsModal).not.toBeVisible();
+        await userActionsToggle.userActionsToggleButton.click();
+        await expect(userActionsToggle.userActionsModal).toBeVisible();
+        await userActionsToggle.userActionsModalCloseButton.click();
+        await expect(userActionsToggle.userActionsModal).not.toBeVisible();
+      }
+    );
+  });
+});

packages/quantic/quantic-examples-community/experiences/Quantic_Examples1/routes/quanticUserActionsToggle.json

@@ -0,0 +1,11 @@
+{
+  "activeViewId": "5f71a149-8177-4097-8c70-fd34c6b83912",
+  "appPageId": "2199ef25-89a9-44a1-ad69-7cb8bd918245",
+  "configurationTags": [],
+  "id": "047ef1ed-8f06-4f45-9612-1f4e06d8d324",
+  "label": "Quantic User Actions Toggle",
+  "pageAccess": "UseParent",
+  "routeType": "custom-quantic-user-actions-toggle",
+  "type": "route",
+  "urlPrefix": "quantic-user-actions-toggle"
+}