basic working test

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

@@ -0,0 +1,24 @@
+import { createElement } from 'lwc';
+import MiscPermissionBasedUI from 'c/miscPermissionBasedUI';
+
+describe('c-misc-permission-based-u-i', () => {
+    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);
+        }
+    });
+
+    // This is a placeholder test that simulates the "assigned permission" behavior
+    // of this component. Currently exploring correct way to mock the permission
+    // values of true and undefined that are experienced at runtime.
+    it('displays the correct UI when custom permission is true', () => {
+        const element = createElement('c-misc-permission-based-u-i', {
+            is: MiscPermissionBasedUI
+        });
+        document.body.appendChild(element);
+
+        const pEl = element.shadowRoot.querySelector('p');
+        expect(pEl.textContent).toBe('The permission set is assigned');
+    });
+});

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

@@ -10,9 +10,9 @@
         </div>
         <c-view-source source="lwc/miscPermissionBasedUI" slot="footer">
             Use custom permission to conditionally render UI. To change the
-            rendered UI assign the
-            <strong>Access_Restricted_UI</strong> permission set to this user
-            and refresh the page.
+            rendered UI assign
+            the&nbsp;<strong>Access_Restricted_UI</strong>&nbsp;permission set
+            to this user and refresh the page.
         </c-view-source>
     </lightning-card>
 </template>