feat: added test cases for the modal component (#880)

* feat: added test cases for the modal component

* removed unnecessary console.log statement

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

@@ -0,0 +1,76 @@
+import { createElement } from 'lwc';
+import MyModal from 'c/myModal';
+
+describe('c-my-modal', () => {
+    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('displays label in the header', () => {
+        // Create component and set the header public property
+        const element = createElement('c-my-modal', {
+            is: MyModal
+        });
+        element.header = 'My Modal Heading';
+        document.body.appendChild(element);
+
+        // Validate the modal header to have rendered with correct label
+        expect(
+            element.shadowRoot.querySelector('lightning-modal-header').label
+        ).toBe('My Modal Heading');
+    });
+
+    it('displays content in the body', () => {
+        // Create component and set the content public property
+        const element = createElement('c-my-modal', {
+            is: MyModal
+        });
+        element.content = 'My Modal Content';
+        document.body.appendChild(element);
+
+        // Validate the modal body to have rendered with correct content
+        expect(element.modalBody$().textContent).toBe(
+            'Content: My Modal Content'
+        );
+    });
+
+    it('displays close button in footer', () => {
+        // Create component and set the content public property
+        const element = createElement('c-my-modal', {
+            is: MyModal
+        });
+        document.body.appendChild(element);
+
+        // Validate the modal footer to have rendered with close button
+        expect(element.modalFooter$('lightning-button').label).toBe('Close');
+    });
+
+    it('returns value when close button is clicked', () => {
+        // Create component and set the content public property
+        const element = createElement('c-my-modal', {
+            is: MyModal
+        });
+        document.body.appendChild(element);
+
+        // Query lightning-button element
+        const buttonEl = element.modalFooter$('lightning-button');
+        buttonEl.click();
+
+        // Validate the element passes the value into this.close() method
+        expect(element.closeValue).toBe('return value');
+    });
+
+    it('is accessible when error is returned', async () => {
+        // Create component
+        const element = createElement('c-my-modal', {
+            is: MyModal
+        });
+        document.body.appendChild(element);
+
+        // Check accessibility
+        await expect(element).toBeAccessible();
+    });
+});

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

@@ -1,6 +1,6 @@
 <template>
     <lightning-modal-header label={header}></lightning-modal-header>
-    <lightning-modal-body> Content: {content} </lightning-modal-body>
+    <lightning-modal-body>Content: {content}</lightning-modal-body>
     <lightning-modal-footer>
         <lightning-button
             label="Close"

jest.config.js

@@ -21,7 +21,7 @@ module.exports = {
             '<rootDir>/force-app/test/jest-mocks/lightning/messageService',
         '^lightning/actions$':
             '<rootDir>/force-app/test/jest-mocks/lightning/actions',
-        '^lightning/modal*':
+        '^lightning/modal$':
             '<rootDir>/force-app/test/jest-mocks/lightning/modal',
         '^lightning/refresh$':
             '<rootDir>/force-app/test/jest-mocks/lightning/refresh'