Updated ids to the standard in the view and edit form

OrtooApps · Jan 11, 2022 · 897e31a · 897e31a
1 parent c5a1dd5
commit 897e31a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 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
@@ -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
@@ -11,10 +11,9 @@
                     <slot name="additional-view-buttons"></slot>
 
                     <lightning-button
+                        data-ortoo-elem-id={editId}
                         class="slds-m-top_small slds-float_right"
                         variant="default"
-                        name="edit"
-                        data-name="edit"
                         label={editLabel}
                         onclick={handleEditClick}
                     ></lightning-button>

diff --git 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 @@
     <c-modal
         visible={visible}
         oncancel={handleCancelModalClick}
+        ortoo-elem-id-prefix={modalId}
         hide-footer={hideModalFooter}
     >
 
@@ -15,10 +16,9 @@
             <slot name="additional-view-buttons"></slot>
 
             <lightning-button
+                data-ortoo-elem-id={editId}
                 class="slds-float_right"
                 variant="default"
-                name="edit"
-                data-name="edit"
                 label={editLabel}
                 onclick={handleEditClick}
             ></lightning-button>

diff --git 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 ];
     }