Added types to the confirmation dialog and improved its testing

OrtooApps · Dec 13, 2021 · 0f2ad8c · 0f2ad8c
1 parent 6ef85c9
commit 0f2ad8c
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 11 deletions.
diff --git a/TODO.txt b/TODO.txt
@@ -22,6 +22,7 @@ Look at:
 
 * Standards
     * data-name to identify elements in a test
+        * e.g. [data-name="cancel"]
     * Labels should be:
         * Imported into a static named _LABEL
         * Referenced in an object named 'labels'.

diff --git a/framework/default/ortoo-core/default/labels/ortoo-core-CustomLabels.labels-meta.xml b/framework/default/ortoo-core/default/labels/ortoo-core-CustomLabels.labels-meta.xml
@@ -84,4 +84,25 @@
         <shortDescription>The word 'Confirm', capitalised.</shortDescription>
         <value>Confirm</value>
     </labels>
+    <labels>
+        <fullName>ortoo_core_yes</fullName>
+        <language>en_US</language>
+        <protected>false</protected>
+        <shortDescription>The word 'Yes', capitalised.</shortDescription>
+        <value>Yes</value>
+    </labels>
+    <labels>
+        <fullName>ortoo_core_no</fullName>
+        <language>en_US</language>
+        <protected>false</protected>
+        <shortDescription>The word 'No', capitalised.</shortDescription>
+        <value>No</value>
+    </labels>
+    <labels>
+        <fullName>ortoo_core_save</fullName>
+        <language>en_US</language>
+        <protected>false</protected>
+        <shortDescription>The word 'Save', capitalised.</shortDescription>
+        <value>Save</value>
+    </labels>
 </CustomLabels>
diff --git a/...rk/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js b/...rk/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js
@@ -55,18 +55,41 @@ describe('c-confirmation-dialog', () => {
         const element = createElement('c-confirmation-dialog', {
             is: ConfirmationDialog
         });
-        element.confirmLabel = 'Confirm';
-        element.cancelLabel  = 'Cancel';
+        element.type = 'save';
+        element.confirmLabel = 'Confirm thing';
+        element.cancelLabel  = 'Cancel thing';
         element.visible = true;
         document.body.appendChild(element);
 
         const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="footer"]' );
         expect( expectedElement ).not.toBe( null );
 
-        expect( expectedElement.querySelector( '[data-name="confirm"]' ).title ).toBe( element.confirmLabel );
-        expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).toBe( element.confirmLabel );
-        expect( expectedElement.querySelector( '[data-name="cancel"]' ).title ).toBe( element.cancelLabel );
-        expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).toBe( element.cancelLabel );
+        expect( expectedElement.querySelector( '[data-name="confirm"]' ).title ).toBe( 'Confirm thing' );
+        expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).toBe( 'Confirm thing' );
+        expect( expectedElement.querySelector( '[data-name="cancel"]' ).title ).toBe( 'Cancel thing' );
+        expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).toBe( 'Cancel thing' );
+    });
+
+    it('When set to visible and passed a valid type, contains a div containing cancel and confirm buttons with the specified labels, directing them to the modal footer slot', () => {
+        const element = createElement('c-confirmation-dialog', {
+            is: ConfirmationDialog
+        });
+        element.type = 'save';
+        element.visible = true;
+        document.body.appendChild(element);
+
+        const expectedElement = element.shadowRoot.querySelector( 'c-modal div[slot="footer"]' );
+        expect( expectedElement ).not.toBe( null );
+
+        expect( expectedElement.querySelector( '[data-name="confirm"]' ).label ).not.toBe( null );
+        expect( expectedElement.querySelector( '[data-name="cancel"]' ).label ).not.toBe( null );
+    });
+
+    it('When set to an invalid type, will throw an error', () => {
+        const element = createElement('c-confirmation-dialog', {
+            is: ConfirmationDialog
+        });
+        expect( () => element.type = 'invalid' ).toThrowError( 'Invalid type specified, should be one of confirm, yesNo, save' );
     });
 
     it('Clicking the confirm button will issue an event containing the confirm event message', () => {

diff --git a/framework/default/ortoo-core/default/lwc/confirmationDialog/confirmationDialog.js b/framework/default/ortoo-core/default/lwc/confirmationDialog/confirmationDialog.js
@@ -2,14 +2,61 @@ import { LightningElement, api } from 'lwc';
 
 import CONFIRM_LABEL from '@salesforce/label/c.ortoo_core_confirm';
 import CANCEL_LABEL from '@salesforce/label/c.ortoo_core_cancel';
+import YES_LABEL from '@salesforce/label/c.ortoo_core_yes';
+import NO_LABEL from '@salesforce/label/c.ortoo_core_no';
+import SAVE_LABEL from '@salesforce/label/c.ortoo_core_save';
 
+const type = {
+    confirm: 'confirm',
+    yesNo  : 'yesNo',
+    save   : 'save'
+};
+
+const buttonLabels = {
+    confirm: {
+        confirm: CONFIRM_LABEL,
+        cancel : CANCEL_LABEL
+    },
+    yesNo: {
+        confirm: YES_LABEL,
+        cancel : NO_LABEL
+    },
+    save: {
+        confirm: SAVE_LABEL,
+        cancel : CANCEL_LABEL
+    }
+};
 export default class ConfirmationDialog extends LightningElement {
 
-    // TODO: consider standard variations - No / *Yes ; Cancel / *Confirm ; Cancel / *Save
-        // yesNoConfirmationDialog
-        // saveConfirmationDialog
-    @api confirmLabel = CONFIRM_LABEL;
-    @api cancelLabel  = CANCEL_LABEL;
+    _type
+    @api
+    get type() {
+        return this._type ? this._type : type.confirm;
+    };
+    set type( value ) {
+        if ( ! type.hasOwnProperty( value ) ) {
+            throw 'Invalid type specified, should be one of ' + type;
+        }
+        this._type = value;
+    }
+
+    _confirmLabel
+    @api
+    get confirmLabel() {
+        return this._confirmLabel ? this._confirmLabel : buttonLabels[ this.type ].confirm;
+    }
+    set confirmLabel( value ) {
+        this._confirmLabel = value;
+    }
+
+    _cancelLabel
+    @api
+    get cancelLabel() {
+        return this._cancelLabel ? this._cancelLabel : buttonLabels[ this.type ].cancel;
+    }
+    set cancelLabel( value ) {
+        this._cancelLabel = value;
+    }
 
     // The message to send back to the parent component when the confirmation button is clicked
     @api confirmEventMessage;
@@ -19,6 +66,11 @@ export default class ConfirmationDialog extends LightningElement {
 
     @api visible;
 
+    connectedCallback() {
+        this.confirmLabel = this.confirmLabel ? this.confirmLabel : buttonLabels[ this.type ].confirm;
+        this.cancelLabel = this.cancelLabel ? this.cancelLabel : buttonLabels[ this.type ].cancel;
+    }
+
     handleCancel( event ) {
         this.dispatchEvent( new CustomEvent( 'cancel', { detail: this.cancelEventMessage } ) );
     }