From c01495cf634f75e2438e8493931dd60c9f2a7f79 Mon Sep 17 00:00:00 2001
From: Alba Rivas <aazcona@salesforce.com>
Date: Tue, 22 Oct 2024 09:18:35 +0200
Subject: [PATCH] Add logger recipe (Esteve Graells code) (#957)

* Add logger recipe

* Add event monitoring setup warning

* Add component to page and clarify usage

* Revert platformWorkspaceAPi change
---
 .../Misc_Techniques.flexipage-meta.xml        |  6 ++++
 .../miscLogger/__tests__/miscLogger.test.js   | 29 +++++++++++++++++++
 .../default/lwc/miscLogger/miscLogger.html    | 27 +++++++++++++++++
 .../main/default/lwc/miscLogger/miscLogger.js | 15 ++++++++++
 .../lwc/miscLogger/miscLogger.js-meta.xml     |  9 ++++++
 force-app/test/jest-mocks/lightning/logger.js |  1 +
 jest.config.js                                |  4 ++-
 7 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 force-app/main/default/lwc/miscLogger/__tests__/miscLogger.test.js
 create mode 100644 force-app/main/default/lwc/miscLogger/miscLogger.html
 create mode 100644 force-app/main/default/lwc/miscLogger/miscLogger.js
 create mode 100644 force-app/main/default/lwc/miscLogger/miscLogger.js-meta.xml
 create mode 100644 force-app/test/jest-mocks/lightning/logger.js

diff --git a/force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml b/force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml
index 044c3cf3f..e52565baa 100644
--- a/force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml
+++ b/force-app/main/default/flexipages/Misc_Techniques.flexipage-meta.xml
@@ -63,6 +63,12 @@
                 <identifier>miscDomQuery</identifier>
             </componentInstance>
         </itemInstances>
+        <itemInstances>
+            <componentInstance>
+                <componentName>miscLogger</componentName>
+                <identifier>c_miscLogger</identifier>
+            </componentInstance>
+        </itemInstances>
         <name>region3</name>
         <type>Region</type>
     </flexiPageRegions>
diff --git a/force-app/main/default/lwc/miscLogger/__tests__/miscLogger.test.js b/force-app/main/default/lwc/miscLogger/__tests__/miscLogger.test.js
new file mode 100644
index 000000000..b26c26e6c
--- /dev/null
+++ b/force-app/main/default/lwc/miscLogger/__tests__/miscLogger.test.js
@@ -0,0 +1,29 @@
+import { createElement } from 'lwc';
+import MiscLogger from 'c/miscLogger';
+import { log } from 'lightning/logger';
+
+describe('c-misc-logger', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('When log to event monitoring is clicked, the lightning log function is called', () => {
+        // Create component
+        const element = createElement('c-misc-logger', {
+            is: MiscLogger
+        });
+        document.body.appendChild(element);
+
+        // Click button
+        const buttonEl = element.shadowRoot.querySelector(
+            'div.event-monitoring lightning-button'
+        );
+        buttonEl.click();
+
+        // Check log function has been called
+        expect(log).toHaveBeenCalled();
+    });
+});
diff --git a/force-app/main/default/lwc/miscLogger/miscLogger.html b/force-app/main/default/lwc/miscLogger/miscLogger.html
new file mode 100644
index 000000000..76893cff2
--- /dev/null
+++ b/force-app/main/default/lwc/miscLogger/miscLogger.html
@@ -0,0 +1,27 @@
+<template>
+    <lightning-card title="MiscLogger" icon-name="custom:custom63">
+        <div class="slds-var-m-around_medium">
+            <p class="slds-var-m-bottom_small">
+                <lightning-button
+                    label="Log a message to the console"
+                    onclick={logMessageConsole}
+                ></lightning-button>
+            </p>
+        </div>
+        <div class="slds-var-m-around_medium event-monitoring">
+            <p class="slds-var-m-bottom_small">
+                <lightning-button
+                    label="Log a message to the console and Event Monitoring"
+                    onclick={logMessageEventMonitoring}
+                ></lightning-button>
+            </p>
+        </div>
+
+        <c-view-source source="lwc/misclogger" slot="footer">
+            Log custom messages to Event Monitoring, adding observability to
+            your LWCs. To use this feature, enable Lightning Logger Events from
+            Setup, under Event Monitoring Settings. View the logger output in
+            the console by launching the developer tools.
+        </c-view-source>
+    </lightning-card>
+</template>
diff --git a/force-app/main/default/lwc/miscLogger/miscLogger.js b/force-app/main/default/lwc/miscLogger/miscLogger.js
new file mode 100644
index 000000000..8d85ff3f6
--- /dev/null
+++ b/force-app/main/default/lwc/miscLogger/miscLogger.js
@@ -0,0 +1,15 @@
+import { LightningElement } from 'lwc';
+import { log } from 'lightning/logger';
+
+export default class MiscLogger extends LightningElement {
+    logMessageEventMonitoring() {
+        let msg = {
+            type: 'click',
+            action: 'Log'
+        };
+        log(msg);
+    }
+    logMessageConsole() {
+        console.log('This message is logged to the console');
+    }
+}
diff --git a/force-app/main/default/lwc/miscLogger/miscLogger.js-meta.xml b/force-app/main/default/lwc/miscLogger/miscLogger.js-meta.xml
new file mode 100644
index 000000000..be2844404
--- /dev/null
+++ b/force-app/main/default/lwc/miscLogger/miscLogger.js-meta.xml
@@ -0,0 +1,9 @@
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+	<apiVersion>61.0</apiVersion>
+	<isExposed>true</isExposed>
+	<targets>
+        <target>lightning__AppPage</target>
+        <target>lightning__RecordPage</target>
+        <target>lightning__HomePage</target>
+    </targets>
+</LightningComponentBundle>
diff --git a/force-app/test/jest-mocks/lightning/logger.js b/force-app/test/jest-mocks/lightning/logger.js
new file mode 100644
index 000000000..f885c644c
--- /dev/null
+++ b/force-app/test/jest-mocks/lightning/logger.js
@@ -0,0 +1 @@
+export const log = jest.fn();
diff --git a/jest.config.js b/jest.config.js
index c5c2f7a1d..32ef6f7a8 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -24,7 +24,9 @@ module.exports = {
         '^lightning/modal$':
             '<rootDir>/force-app/test/jest-mocks/lightning/modal',
         '^lightning/refresh$':
-            '<rootDir>/force-app/test/jest-mocks/lightning/refresh'
+            '<rootDir>/force-app/test/jest-mocks/lightning/refresh',
+        '^lightning/logger$':
+            '<rootDir>/force-app/test/jest-mocks/lightning/logger'
     },
     setupFiles: ['jest-canvas-mock'],
     setupFilesAfterEnv,