From 0f2ad8cd8166e6be2cdba4e26b22f97cb9a4a18d Mon Sep 17 00:00:00 2001 From: Robert Baillie Date: Mon, 13 Dec 2021 14:15:28 +0000 Subject: [PATCH] Added types to the confirmation dialog and improved its testing --- TODO.txt | 1 + .../ortoo-core-CustomLabels.labels-meta.xml | 21 +++++++ .../__tests__/confirmationDialog.test.js | 35 +++++++++-- .../confirmationDialog/confirmationDialog.js | 62 +++++++++++++++++-- 4 files changed, 108 insertions(+), 11 deletions(-) diff --git a/TODO.txt b/TODO.txt index 7f127230b40..de89de59fb5 100644 --- 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 index 516abc38685..f9f05b33dbd 100644 --- 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 @@ The word 'Confirm', capitalised. Confirm + + ortoo_core_yes + en_US + false + The word 'Yes', capitalised. + Yes + + + ortoo_core_no + en_US + false + The word 'No', capitalised. + No + + + ortoo_core_save + en_US + false + The word 'Save', capitalised. + Save + \ No newline at end of file diff --git a/framework/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js b/framework/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js index b7628ac7003..7e2dc8fb7f7 100644 --- a/framework/default/ortoo-core/default/lwc/confirmationDialog/__tests__/confirmationDialog.test.js +++ b/framework/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 index 0d36eefe494..4ae57cb8fec 100644 --- 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 } ) ); }