Added ability to disable the save button in saveButtons

OrtooApps · Feb 4, 2022 · c3e29f5 · c3e29f5
1 parent 0625bcb
commit c3e29f5
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 22 deletions.
diff --git a/framework/default/ortoo-core/default/lwc/saveButtons/__tests__/saveButtons.test.js b/framework/default/ortoo-core/default/lwc/saveButtons/__tests__/saveButtons.test.js
@@ -1,17 +1,28 @@
 import { createElement } from 'lwc';
 import SaveButtons from 'c/saveButtons';
 
-describe('c-save-buttons', () => {
-    afterEach(() => {
-    });
+const SAVE_BUTTON_SELECTOR = '[data-ortoo-elem-id="savebuttons-save"]';
+const CANCEL_BUTTON_SELECTOR = '[data-ortoo-elem-id="savebuttons-cancel"]';
 
-    it( 'Will issue a cancel event when cancel button is pressed', () => {
+describe('c-save-buttons', () => {
 
+    beforeEach(() => {
         const element = createElement('c-save-buttons', {
             is: SaveButtons
         });
-
         document.body.appendChild( element );
+    });
+
+    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( 'Will issue a cancel event when cancel button is pressed', () => {
+
+        const element = document.body.querySelector( 'c-save-buttons' );
 
         const cancelHandler = jest.fn();
         element.addEventListener( 'cancel', cancelHandler );
@@ -22,7 +33,7 @@ describe('c-save-buttons', () => {
         return Promise.resolve()
             .then( () => {
                 const clickEvent = new CustomEvent( 'click', {} );
-                return element.shadowRoot.querySelector( '[data-ortoo-elem-id="savebuttons-cancel"]' ).dispatchEvent( clickEvent );
+                return element.shadowRoot.querySelector( CANCEL_BUTTON_SELECTOR ).dispatchEvent( clickEvent );
             })
             .then( () => {
                 expect( saveHandler ).not.toHaveBeenCalled();
@@ -32,11 +43,7 @@ describe('c-save-buttons', () => {
 
     it( 'Will issue a save event when save button is pressed', () => {
 
-        const element = createElement('c-save-buttons', {
-            is: SaveButtons
-        });
-
-        document.body.appendChild( element );
+        const element = document.body.querySelector( 'c-save-buttons' );
 
         const cancelHandler = jest.fn();
         element.addEventListener( 'cancel', cancelHandler );
@@ -47,7 +54,7 @@ describe('c-save-buttons', () => {
         return Promise.resolve()
             .then( () => {
                 const clickEvent = new CustomEvent( 'click', {} );
-                return element.shadowRoot.querySelector( '[data-ortoo-elem-id="savebuttons-save"]' ).dispatchEvent( clickEvent );
+                return element.shadowRoot.querySelector( SAVE_BUTTON_SELECTOR ).dispatchEvent( clickEvent );
             })
             .then( () => {
                 expect( saveHandler ).toHaveBeenCalled();
@@ -57,11 +64,7 @@ describe('c-save-buttons', () => {
 
     it( 'Has an additional-buttons slot', () => {
 
-        const element = createElement('c-save-buttons', {
-            is: SaveButtons
-        });
-
-        document.body.appendChild( element );
+        const element = document.body.querySelector( 'c-save-buttons' );
 
         return Promise.resolve()
             .then( () => {
@@ -72,18 +75,84 @@ describe('c-save-buttons', () => {
 
     it( 'Will use the passed prefix to define the element ids', () => {
 
-        const element = createElement('c-modal', {
-            is: SaveButtons
-        });
+        const element = document.body.querySelector( 'c-save-buttons' );
+
         element.visible = true;
         element.ortooElemIdPrefix = 'definedsavebuttons'
 
-        document.body.appendChild( element );
-
         return Promise.resolve()
             .then( () => {
                 expect( element.shadowRoot.querySelector( '[data-ortoo-elem-id="definedsavebuttons-save"]' ) ).not.toBe( null );
                 expect( element.shadowRoot.querySelector( '[data-ortoo-elem-id="definedsavebuttons-cancel"]' ) ).not.toBe( null );
             })
     });
+
+    it( 'When given a saveLabel, will use it for the save button', () => {
+
+        const element = document.body.querySelector( 'c-save-buttons' );
+
+        element.visible = true;
+        element.saveLabel = 'Save it!';
+
+        return Promise.resolve()
+            .then( () => {
+                expect( element.shadowRoot.querySelector( SAVE_BUTTON_SELECTOR ).label ).toBe( 'Save it!' );
+                expect( element.shadowRoot.querySelector( CANCEL_BUTTON_SELECTOR ).label ).not.toBe( 'Save it!' );
+            })
+    });
+
+    it( 'When given a cancelLabel, will use it for the cancel button', () => {
+
+        const element = document.body.querySelector( 'c-save-buttons' );
+
+        element.visible = true;
+        element.cancelLabel = 'Cancel it!';
+
+        return Promise.resolve()
+            .then( () => {
+                expect( element.shadowRoot.querySelector( SAVE_BUTTON_SELECTOR ).label ).not.toBe( 'Cancel it!' );
+                expect( element.shadowRoot.querySelector( CANCEL_BUTTON_SELECTOR ).label ).toBe( 'Cancel it!' );
+            })
+    });
+
+    it( 'When not given labels, will default them', () => {
+
+        const element = document.body.querySelector( 'c-save-buttons' );
+
+        element.visible = true;
+
+        return Promise.resolve()
+            .then( () => {
+                expect( element.shadowRoot.querySelector( SAVE_BUTTON_SELECTOR ).label ).not.toBeFalsy();
+                expect( element.shadowRoot.querySelector( CANCEL_BUTTON_SELECTOR ).label ).not.toBeFalsy();
+            })
+    });
+
+    it( 'When told to disable the save button, will disable it', () => {
+
+        const element = document.body.querySelector( 'c-save-buttons' );
+
+        element.visible = true;
+        element.disableSave = true;
+
+        return Promise.resolve()
+            .then( () => {
+                expect( element.shadowRoot.querySelector( SAVE_BUTTON_SELECTOR ).disabled ).toBe( true );
+                expect( element.shadowRoot.querySelector( CANCEL_BUTTON_SELECTOR ).disabled ).not.toBe( true );
+            })
+    });
+
+    it( 'When told to not disable the save button, will not disable it', () => {
+
+        const element = document.body.querySelector( 'c-save-buttons' );
+
+        element.visible = true;
+        element.disableSave = false;
+
+        return Promise.resolve()
+            .then( () => {
+                expect( element.shadowRoot.querySelector( SAVE_BUTTON_SELECTOR ).disabled ).not.toBe( true );
+                expect( element.shadowRoot.querySelector( CANCEL_BUTTON_SELECTOR ).disabled ).not.toBe( true );
+            })
+    });
 });
diff --git a/framework/default/ortoo-core/default/lwc/saveButtons/saveButtons.html b/framework/default/ortoo-core/default/lwc/saveButtons/saveButtons.html
@@ -15,6 +15,7 @@
         data-ortoo-elem-id={saveButtonId}
         variant="brand"
         label={saveLabel}
+        disabled={disableSave}
         onclick={handleSaveClick}
     ></lightning-button>
 

diff --git a/framework/default/ortoo-core/default/lwc/saveButtons/saveButtons.js b/framework/default/ortoo-core/default/lwc/saveButtons/saveButtons.js
@@ -16,6 +16,8 @@ export default class SaveButtons extends LightningElement {
     @api cancelLabel = CANCEL_LABEL;
     @api saveLabel   = SAVE_LABEL;
 
+    @api disableSave;
+
     @api ortooElemIdPrefix = 'savebuttons';
 
     ortooIdConfiguration = {