From 897e31a311d1e54460e1f987880c078cc36c3993 Mon Sep 17 00:00:00 2001 From: Robert Baillie Date: Tue, 11 Jan 2022 15:51:42 +0000 Subject: [PATCH] Updated ids to the standard in the view and edit form --- .../__tests__/viewAndEditForm.test.js | 12 ++++++------ .../lwc/viewAndEditForm/viewAndEditForm-card.html | 3 +-- .../lwc/viewAndEditForm/viewAndEditForm-modal.html | 4 ++-- .../default/lwc/viewAndEditForm/viewAndEditForm.js | 13 ++++++++++++- 4 files changed, 21 insertions(+), 11 deletions(-) diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/__tests__/viewAndEditForm.test.js b/framework/default/ortoo-core/default/lwc/viewAndEditForm/__tests__/viewAndEditForm.test.js index 5e9969e8b4a..7d7e7f434e8 100644 --- a/framework/default/ortoo-core/default/lwc/viewAndEditForm/__tests__/viewAndEditForm.test.js +++ b/framework/default/ortoo-core/default/lwc/viewAndEditForm/__tests__/viewAndEditForm.test.js @@ -20,7 +20,7 @@ describe('c-view-and-edit-form', () => { const saveButtons = element.shadowRoot.querySelector( 'c-save-buttons' ); expect( saveButtons ).not.toBe( null ); - const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' ); + const editButton = element.shadowRoot.querySelector( '[data-ortoo-elem-id="viewandeditform-edit"]' ); expect( editButton ).toBe( null ); const additionalViewButtons = element.shadowRoot.querySelector( 'slot[name="additional-view-buttons"' ); @@ -41,7 +41,7 @@ describe('c-view-and-edit-form', () => { const saveButtons = element.shadowRoot.querySelector( 'c-save-buttons' ); expect( saveButtons ).toBe( null ); - const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' ); + const editButton = element.shadowRoot.querySelector( '[data-ortoo-elem-id="viewandeditform-edit"]' ); expect( editButton ).not.toBe( null ); const additionalViewButtons = element.shadowRoot.querySelector( 'slot[name="additional-view-buttons"' ); @@ -137,7 +137,7 @@ describe('c-view-and-edit-form', () => { return Promise.resolve() .then( () => { const clickEvent = new CustomEvent( 'click', {} ); - return element.shadowRoot.querySelector( '[data-name="edit"]' ).click(); + return element.shadowRoot.querySelector( '[data-ortoo-elem-id="viewandeditform-edit"]' ).click(); }) .then( () => { expect( eventHandler ).toBeCalled(); @@ -156,7 +156,7 @@ describe('c-view-and-edit-form', () => { const saveButtons = element.shadowRoot.querySelector( 'c-save-buttons' ); expect( saveButtons ).not.toBe( null ); - const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' ); + const editButton = element.shadowRoot.querySelector( '[data-ortoo-elem-id="viewandeditform-edit"]' ); expect( editButton ).toBe( null ); const additionalViewButtons = element.shadowRoot.querySelector( 'slot[name="additional-view-buttons"' ); @@ -178,7 +178,7 @@ describe('c-view-and-edit-form', () => { const saveButtons = element.shadowRoot.querySelector( 'c-save-buttons' ); expect( saveButtons ).toBe( null ); - const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' ); + const editButton = element.shadowRoot.querySelector( '[data-ortoo-elem-id="viewandeditform-edit"]' ); expect( editButton ).not.toBe( null ); const additionalViewButtons = element.shadowRoot.querySelector( 'slot[name="additional-view-buttons"' ); @@ -279,7 +279,7 @@ describe('c-view-and-edit-form', () => { return Promise.resolve() .then( () => { const clickEvent = new CustomEvent( 'click', {} ); - return element.shadowRoot.querySelector( '[data-name="edit"]' ).click(); + return element.shadowRoot.querySelector( '[data-ortoo-elem-id="viewandeditform-edit"]' ).click(); }) .then( () => { expect( eventHandler ).toBeCalled(); diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-card.html b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-card.html index dd91ccd4037..da40073d40f 100644 --- a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-card.html +++ b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-card.html @@ -11,10 +11,9 @@ diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-modal.html b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-modal.html index b8a57e72b14..0eedf3e2f73 100644 --- a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-modal.html +++ b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm-modal.html @@ -3,6 +3,7 @@ @@ -15,10 +16,9 @@ diff --git a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.js b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.js index e558f4275e5..e44e54aff9c 100644 --- a/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.js +++ b/framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.js @@ -1,4 +1,5 @@ import { LightningElement, api } from 'lwc'; +import configureElementIdGenerator from 'c/elementIdGenerator'; import cardTemplate from './viewAndEditForm-card.html'; import modalTemplate from './viewAndEditForm-modal.html'; @@ -20,7 +21,6 @@ export default class ViewAndEditForm extends LightningElement { @api inEditMode = false; @api visible = false; - // TODO: test these @api editLabel = EDIT_LABEL; @api cancelLabel = CANCEL_LABEL; @api saveLabel = SAVE_LABEL; @@ -42,6 +42,17 @@ export default class ViewAndEditForm extends LightningElement { this._mode = value; } + @api ortooElemIdPrefix = 'viewandeditform'; + + ortooIdConfiguration = { + modalId: '', + editId: 'edit' + } + + connectedCallback() { + configureElementIdGenerator( this ); + } + render() { return templates[ this.mode ]; }