fix: minor tweaks to workspace API recipes (#940)

force-app/main/default/lwc/workspaceAPI/__tests__/workspaceAPI.test.js

@@ -1,6 +1,7 @@
 import { createElement } from 'lwc';
 import WorkspaceAPI from 'c/workspaceAPI';
 import { getNavigateCalledWith } from 'lightning/navigation';
+import { IsConsoleNavigation } from 'lightning/platformWorkspaceApi';
 
 describe('c-workspace-api', () => {
     afterEach(() => {
@@ -12,6 +13,12 @@ describe('c-workspace-api', () => {
         jest.clearAllMocks();
     });
 
+    // Helper function to wait until the microtask queue is empty. This is needed for promise
+    // timing when calling async functions
+    async function flushPromises() {
+        return Promise.resolve();
+    }
+
     it('navigates to Workspace API page when Take me there! button clicked', async () => {
         const API_NAME = 'Workspace_API';
         const INPUT_TYPE = 'standard__navItemPage';
@@ -22,12 +29,16 @@ describe('c-workspace-api', () => {
         });
         document.body.appendChild(element);
 
+        // Simulate console navigation
+        IsConsoleNavigation.emit(true);
+        await flushPromises();
+
         // Click button
         const buttonEl = element.shadowRoot.querySelector('lightning-button');
         buttonEl.click();
 
         // Verify the component under test called the correct navigate event
-        // type and sent the expected recordId defined above
+        // type and sent the expected api name
         const { pageReference } = getNavigateCalledWith();
         expect(pageReference.type).toBe(INPUT_TYPE);
         expect(pageReference.attributes.apiName).toBe(API_NAME);

force-app/main/default/lwc/workspaceAPI/workspaceAPI.html

@@ -4,15 +4,20 @@
         icon-name="standard:scheduling_workspace"
     >
         <div class="slds-text-align_center slds-var-m-around_medium">
-            To see the Workspace API examples in action, you'll need to open the
-            "LWC Recipes Console App". If you are already there, open the
-            Workspace API examples on a tab by clicking on this button.
-            <p class="slds-var-m-around_medium">
-                <lightning-button
-                    label="Take me there!"
-                    onclick={navigateToWorkspaceAPIExamples}
-                ></lightning-button>
-            </p>
+            <template lwc:if={isConsoleNavigation}>
+                Open the Workspace API examples in a new tab by clicking on this
+                button:
+                <p class="slds-var-m-around_medium">
+                    <lightning-button
+                        label="Take me there!"
+                        onclick={navigateToWorkspaceAPIExamples}
+                    ></lightning-button>
+                </p>
+            </template>
+            <template lwc:else>
+                To see the Workspace API examples in action, open the "LWC
+                Recipes Console App".
+            </template>
         </div>
     </lightning-card>
 </template>

force-app/main/default/lwc/workspaceAPI/workspaceAPI.js

@@ -1,9 +1,10 @@
 import { LightningElement, wire } from 'lwc';
 import { NavigationMixin } from 'lightning/navigation';
-import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';
+import { IsConsoleNavigation } from 'lightning/platformWorkspaceApi';
 
-export default class Lds extends NavigationMixin(LightningElement) {
-    @wire(getSingleContact) contact;
+export default class WorkspaceApi extends NavigationMixin(LightningElement) {
+    @wire(IsConsoleNavigation)
+    isConsoleNavigation;
 
     navigateToWorkspaceAPIExamples() {
         this[NavigationMixin.Navigate]({

force-app/main/default/lwc/workspaceAPICloseTab/__tests__/workspaceAPICloseTab.test.js

@@ -3,7 +3,7 @@ import {
     IsConsoleNavigation,
     getFocusedTabInfo,
     closeTab,
-    FOCUSED_TAB
+    FOCUSED_TAB_ID
 } from 'lightning/platformWorkspaceApi';
 import WorkspaceAPICloseTab from 'c/workspaceAPICloseTab';
 
@@ -36,9 +36,9 @@ describe('c-workspace-api-close-tab', () => {
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(getFocusedTabInfo).toHaveBeenCalled();
-        expect(closeTab).toHaveBeenCalledWith(FOCUSED_TAB);
+        expect(closeTab).toHaveBeenCalledWith(FOCUSED_TAB_ID);
     });
 
     it('is accessible', async () => {

force-app/main/default/lwc/workspaceAPIDisableTabClose/__tests__/workspaceAPIDisableTabClose.test.js

@@ -3,7 +3,7 @@ import {
     disableTabClose,
     IsConsoleNavigation,
     getFocusedTabInfo,
-    FOCUSED_TAB
+    FOCUSED_TAB_ID
 } from 'lightning/platformWorkspaceApi';
 
 import WorkspaceAPIDisableTabClose from 'c/workspaceAPIDisableTabClose';
@@ -40,9 +40,12 @@ describe('c-workspace-api-disable-tab-close', () => {
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(getFocusedTabInfo).toHaveBeenCalled();
-        expect(disableTabClose).toHaveBeenCalledWith(FOCUSED_TAB, toggleValue);
+        expect(disableTabClose).toHaveBeenCalledWith(
+            FOCUSED_TAB_ID,
+            toggleValue
+        );
     });
 
     it('is accessible', async () => {

force-app/main/default/lwc/workspaceAPIFocusTab/__tests__/workspaceAPIFocusTab.test.js

@@ -4,7 +4,7 @@ import {
     IsConsoleNavigation,
     getFocusedTabInfo,
     getAllTabInfo,
-    FOCUSED_TAB
+    TAB1
 } from 'lightning/platformWorkspaceApi';
 import WorkspaceAPIFocusTab from 'c/workspaceAPIFocusTab';
 
@@ -37,15 +37,11 @@ describe('c-workspace-api-focus-tab', () => {
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(getFocusedTabInfo).toHaveBeenCalled();
         expect(getAllTabInfo).toHaveBeenCalled();
-        const allTabs = await getAllTabInfo();
-        const selectedTabIndex = allTabs.findIndex(
-            (possibleNextTab) => possibleNextTab.tabId === FOCUSED_TAB
-        );
-        const nextTabId = allTabs[selectedTabIndex + 1].tabId;
-        expect(focusTab).toHaveBeenCalledWith(nextTabId);
+        // Based on our mock, next tab that receives focus should be TAB1
+        expect(focusTab).toHaveBeenCalledWith(TAB1);
     });
 
     it('is accessible', async () => {

force-app/main/default/lwc/workspaceAPIHighlightTab/__tests__/workspaceAPIHighlightTab.test.js

@@ -4,7 +4,7 @@ import {
     IsConsoleNavigation,
     getFocusedTabInfo,
     setTabHighlighted,
-    FOCUSED_TAB
+    FOCUSED_TAB_ID
 } from 'lightning/platformWorkspaceApi';
 
 describe('c-workspace-api-highlight-tab', () => {
@@ -38,9 +38,9 @@ describe('c-workspace-api-highlight-tab', () => {
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(getFocusedTabInfo).toHaveBeenCalled();
-        expect(setTabHighlighted).toHaveBeenCalledWith(FOCUSED_TAB, true, {
+        expect(setTabHighlighted).toHaveBeenCalledWith(FOCUSED_TAB_ID, true, {
             pulse: true,
             state: 'success'
         });

force-app/main/default/lwc/workspaceAPIOpenSubtab/__tests__/workspaceAPIOpenSubtab.test.js

@@ -28,17 +28,16 @@ describe('c-workspace-api-open-subtab', () => {
         });
         document.body.appendChild(element);
 
-        const enclosingTabId = 'tab0';
         IsConsoleNavigation.emit(true);
-        EnclosingTabId.emit(enclosingTabId);
+        EnclosingTabId.emit(ENCLOSING_TAB_ID);
 
         // Query lightning-button component element
         const buttonEl = element.shadowRoot.querySelector('lightning-button');
         buttonEl.click();
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(openSubtab).toHaveBeenCalledWith(ENCLOSING_TAB_ID, {
             pageReference: {
                 type: 'standard__objectPage',

force-app/main/default/lwc/workspaceAPIOpenTab/__tests__/workspaceAPIOpenTab.test.js

@@ -31,7 +31,7 @@ describe('c-workspace-api-open-tab', () => {
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(openTab).toHaveBeenCalledWith({
             pageReference: {
                 type: 'standard__objectPage',

force-app/main/default/lwc/workspaceAPIRefreshTab/__tests__/workspaceAPIRefreshTab.test.js

@@ -3,7 +3,7 @@ import {
     IsConsoleNavigation,
     getFocusedTabInfo,
     refreshTab,
-    FOCUSED_TAB
+    FOCUSED_TAB_ID
 } from 'lightning/platformWorkspaceApi';
 import WorkspaceAPIRefreshTab from 'c/workspaceAPIRefreshTab';
 
@@ -28,6 +28,7 @@ describe('c-workspace-api-refresh-tab', () => {
         });
         document.body.appendChild(element);
 
+        // Simulate console navigation
         IsConsoleNavigation.emit(true);
 
         // Query lightning-button component element
@@ -36,9 +37,9 @@ describe('c-workspace-api-refresh-tab', () => {
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(getFocusedTabInfo).toHaveBeenCalled();
-        expect(refreshTab).toHaveBeenCalledWith(FOCUSED_TAB, {
+        expect(refreshTab).toHaveBeenCalledWith(FOCUSED_TAB_ID, {
             includeAllSubtabs: true
         });
     });

force-app/main/default/lwc/workspaceAPISetTabIcon/__tests__/workspaceAPISetTabIcon.test.js

@@ -4,7 +4,7 @@ import {
     IsConsoleNavigation,
     getFocusedTabInfo,
     setTabIcon,
-    FOCUSED_TAB
+    FOCUSED_TAB_ID
 } from 'lightning/platformWorkspaceApi';
 
 describe('c-workspace-api-set-tab-icon', () => {
@@ -38,9 +38,9 @@ describe('c-workspace-api-set-tab-icon', () => {
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(getFocusedTabInfo).toHaveBeenCalled();
-        expect(setTabIcon).toHaveBeenCalledWith(FOCUSED_TAB, TAB_ICON, {
+        expect(setTabIcon).toHaveBeenCalledWith(FOCUSED_TAB_ID, TAB_ICON, {
             iconAlt: TAB_ICON_ALT_TEXT
         });
     });

force-app/main/default/lwc/workspaceAPISetTabLabel/__tests__/workspaceAPISetTabLabel.test.js

@@ -4,7 +4,7 @@ import {
     IsConsoleNavigation,
     getFocusedTabInfo,
     setTabLabel,
-    FOCUSED_TAB
+    FOCUSED_TAB_ID
 } from 'lightning/platformWorkspaceApi';
 
 describe('c-workspace-api-set-tab-label', () => {
@@ -37,9 +37,9 @@ describe('c-workspace-api-set-tab-label', () => {
 
         await flushPromises();
 
-        // Compare if related platformWorkspaceApi functions have been called
+        // Check that related platformWorkspaceApi functions have been called
         expect(getFocusedTabInfo).toHaveBeenCalled();
-        expect(setTabLabel).toHaveBeenCalledWith(FOCUSED_TAB, TAB_LABEL);
+        expect(setTabLabel).toHaveBeenCalledWith(FOCUSED_TAB_ID, TAB_LABEL);
     });
 
     it('is accessible', async () => {

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

@@ -1,16 +1,21 @@
 import { createTestWireAdapter } from '@salesforce/wire-service-jest-util';
 
-// This mock assumes two tabs are open, and the first one is focused
-export const FOCUSED_TAB = 'tab0';
-export const ENCLOSING_TAB_ID = 'tab0';
+// Mock values that are not part of lightning/platformWorkspaceApi
+export const TAB0 = 'tab0';
+export const TAB1 = 'tab1';
+// In our mock, we assume that two tabs are open, and the first one is focused
+export const FOCUSED_TAB_ID = TAB0;
+export const ENCLOSING_TAB_ID = TAB0;
+
+// Mocked methods and attributes from lightning/platformWorkspaceApi
 export const closeTab = jest.fn().mockResolvedValue(true);
 export const disableTabClose = jest.fn().mockResolvedValue(true);
 export const focusTab = jest.fn().mockResolvedValue(true);
 export const getAllTabInfo = jest
     .fn()
-    .mockResolvedValue([{ tabId: 'tab0' }, { tabId: 'tab1' }]);
-export const getFocusedTabInfo = jest.fn().mockResolvedValue({ tabId: 'tab0' });
-export const getTabInfo = jest.fn().mockResolvedValue({ tabId: 'tab0' });
+    .mockResolvedValue([{ tabId: TAB0 }, { tabId: 'tab1' }]);
+export const getFocusedTabInfo = jest.fn().mockResolvedValue({ tabId: TAB0 });
+export const getTabInfo = jest.fn().mockResolvedValue({ tabId: TAB0 });
 export const openSubtab = jest.fn().mockResolvedValue(true);
 export const openTab = jest.fn().mockResolvedValue(true);
 export const refreshTab = jest.fn().mockResolvedValue(true);