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

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>

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();
+    });
+});

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>

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');
+    }
+}

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>

force-app/test/jest-mocks/lightning/logger.js

@@ -0,0 +1 @@
+export const log = jest.fn();

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,