Move some view form text over to labels

Started the view form unit tests

TODO.txt

@@ -35,7 +35,9 @@ Look at:
         * Once you add it, it cannot be removed
     * Always qualify the record page target with the sobject types it's appropriate for
 
-
+    * use standard validation techniques
+        * Add the property data-validatable
+        * call reportValidity, binding it to the LWC
 
 * To finalise the core architecture:
     * Do we need to have a non all-or-nothing version of commitWork?

framework/default/ortoo-core/default/labels/ortoo-core-CustomLabels.labels-meta.xml

@@ -105,6 +105,13 @@
         <shortDescription>The word 'Save', capitalised.</shortDescription>
         <value>Save</value>
     </labels>
+    <labels>
+        <fullName>ortoo_core_edit</fullName>
+        <language>en_US</language>
+        <protected>false</protected>
+        <shortDescription>The word 'Edit', capitalised.</shortDescription>
+        <value>Edit</value>
+    </labels>
     <labels>
         <fullName>ortoo_core_error_title</fullName>
         <language>en_US</language>

framework/default/ortoo-core/default/lwc/viewAndEditForm/__tests__/viewAndEditForm.test.js

@@ -0,0 +1,73 @@
+import { createElement } from 'lwc';
+import ViewAndEditForm from 'c/viewAndEditForm';
+
+describe('c-view-and-edit-form', () => {
+    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('When inEditMode, has a save and cancel button, but no edit', () => {
+        const element = createElement('c-view-and-edit-form', {
+            is: ViewAndEditForm
+        });
+        element.inEditMode = true;
+        document.body.appendChild(element);
+
+        const saveButton = element.shadowRoot.querySelector( '[data-name="save"]' );
+        expect( saveButton ).not.toBe( null );
+
+        const cancelButton = element.shadowRoot.querySelector( '[data-name="cancel"]' );
+        expect( cancelButton ).not.toBe( null );
+
+        const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' );
+        expect( editButton ).toBe( null );
+    });
+
+    it('When not inEditMode, has an edit button, but no  save or cancel', () => {
+        const element = createElement('c-view-and-edit-form', {
+            is: ViewAndEditForm
+        });
+        element.inEditMode = false;
+        document.body.appendChild(element);
+
+        const saveButton = element.shadowRoot.querySelector( '[data-name="save"]' );
+        expect( saveButton ).toBe( null );
+
+        const cancelButton = element.shadowRoot.querySelector( '[data-name="cancel"]' );
+        expect( cancelButton ).toBe( null );
+
+        const editButton = element.shadowRoot.querySelector( '[data-name="edit"]' );
+        expect( editButton ).not.toBe( null );
+    });
+
+    it('When inEditMode, has an editForm slot but no viewForm slot', () => {
+        const element = createElement('c-view-and-edit-form', {
+            is: ViewAndEditForm
+        });
+        element.inEditMode = true;
+        document.body.appendChild(element);
+
+        const viewForm = element.shadowRoot.querySelector( 'slot[name="viewForm"]' );
+        expect( viewForm ).toBe( null );
+
+        const editForm = element.shadowRoot.querySelector( 'slot[name="editForm"]' );
+        expect( editForm ).not.toBe( null );
+    });
+
+    it('When not inEditMode, has a viewForm slot but no editForm slot', () => {
+        const element = createElement('c-view-and-edit-form', {
+            is: ViewAndEditForm
+        });
+        element.inEditMode = false;
+        document.body.appendChild(element);
+
+        const viewForm = element.shadowRoot.querySelector( 'slot[name="viewForm"]' );
+        expect( viewForm ).not.toBe( null );
+
+        const editForm = element.shadowRoot.querySelector( 'slot[name="editForm"]' );
+        expect( editForm ).toBe( null );
+    });
+});

framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.html

@@ -13,6 +13,7 @@
                     class="slds-m-top_small slds-float_right"
                     variant="default"
                     name="edit"
+                    data-name="edit"
                     label={editButtonLabel}
                     onclick={handleEditClick}
                 ></lightning-button>
@@ -43,6 +44,7 @@
                 <lightning-button
                     variant="default"
                     name="cancel"
+                    data-name="cancel"
                     label={cancelButtonLabel}
                     onclick={handleCancelClick}
                 ></lightning-button>
@@ -52,6 +54,7 @@
                 <lightning-button
                     variant="brand"
                     name="save"
+                    data-name="save"
                     label={saveButtonLabel}
                     onclick={handleSaveClick}
                 ></lightning-button>

framework/default/ortoo-core/default/lwc/viewAndEditForm/viewAndEditForm.js

@@ -1,13 +1,19 @@
 import { LightningElement, api } from 'lwc';
 
+import SAVE_LABEL from '@salesforce/label/c.ortoo_core_save';
+import CANCEL_LABEL from '@salesforce/label/c.ortoo_core_cancel';
+import EDIT_LABEL from '@salesforce/label/c.ortoo_core_edit';
+
+/**
+ * Provides a standard format for a dual mode, view and edit form, including the rendering of edit / save and cancel buttons
+ */
 export default class ViewAndEditForm extends LightningElement {
 
     @api inEditMode = false;
 
-    // TODO: labels
-    @api editButtonLabel   = 'Edit';
-    @api cancelButtonLabel = 'Cancel';
-    @api saveButtonLabel   = 'Save';
+    @api editButtonLabel   = EDIT_LABEL;
+    @api cancelButtonLabel = CANCEL_LABEL;
+    @api saveButtonLabel   = SAVE_LABEL;
 
     @api displayDensity;