Merge pull request #937 from robocoder/read-only-patch

add more read-only tests for #831

src/editors/button.js

@@ -38,8 +38,7 @@ export class ButtonEditor extends AbstractEditor {
     this.input.addEventListener('click', options.action, false)
 
     if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
-      this.always_disabled = true
-      this.input.setAttribute('readonly', 'true')
+      this.disable(true)
     }
 
     /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */

src/editors/checkbox.js

@@ -40,8 +40,7 @@ export class CheckboxEditor extends AbstractEditor {
     this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
 
     if (this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true
-      this.input.disabled = true
+      this.disable(true)
     }
 
     this.input.addEventListener('change', e => {

src/editors/multiselect.js

@@ -86,7 +86,9 @@ export class MultiSelectEditor extends AbstractEditor {
       this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
     }
 
-    if (this.schema.readOnly || this.schema.readonly) this.disable(true)
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+    }
 
     this.container.appendChild(this.control)
 

src/editors/radio.js

@@ -46,11 +46,7 @@ export class RadioEditor extends SelectEditor {
     }
 
     if (this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true
-      for (let j = 0; j < this.radioGroup.length; j++) {
-        this.radioGroup[j].disabled = true
-      }
-      this.radioContainer.classList.add('readonly')
+      this.disable(true)
     }
 
     const radioContainerWrapper = this.theme.getContainer()

src/editors/select.js

@@ -170,8 +170,7 @@ export class SelectEditor extends AbstractEditor {
     this.theme.setSelectOptions(this.input, this.enum_options, this.enum_display)
 
     if (this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true
-      this.input.disabled = true
+      this.disable(true)
     }
 
     /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
@@ -330,8 +329,8 @@ export class SelectEditor extends AbstractEditor {
   enable () {
     if (!this.always_disabled) {
       this.input.disabled = false
+      super.enable()
     }
-    super.enable()
   }
 
   disable (alwaysDisabled) {

src/editors/signature.js

@@ -53,7 +53,8 @@ export class SignatureEditor extends StringEditor {
       if (this.options.compact) this.container.setAttribute('class', `${this.container.getAttribute('class')} compact`)
 
       if (this.schema.readOnly || this.schema.readonly) {
-        this.always_disabled = true
+        this.disable(true)
+
         Array.from(this.inputs).forEach(input => {
           canvas.setAttribute('readOnly', 'readOnly')
           input.disabled = true

src/editors/starrating.js

@@ -59,11 +59,7 @@ export class StarratingEditor extends StringEditor {
     }
 
     if (this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true
-      for (let j = 0; j < this.radioGroup.length; j++) {
-        this.radioGroup[j].disabled = true
-      }
-      this.ratingContainer.classList.add('readonly')
+      this.disable(true)
     }
 
     const ratingsContainerWrapper = this.theme.getContainer()
@@ -83,7 +79,7 @@ export class StarratingEditor extends StringEditor {
         this.radioGroup[i].disabled = false
       }
       this.ratingContainer.classList.remove('readonly')
-      super.enable()
+      this.disabled = false
     }
   }
 
@@ -93,7 +89,7 @@ export class StarratingEditor extends StringEditor {
       this.radioGroup[i].disabled = true
     }
     this.ratingContainer.classList.add('readonly')
-    super.disable()
+    this.disabled = true
   }
 
   destroy () {

src/editors/string.js

@@ -127,8 +127,7 @@ export class StringEditor extends AbstractEditor {
     } else if (this.options.input_width) this.input.style.width = this.options.input_width
 
     if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
-      this.always_disabled = true
-      this.input.setAttribute('readonly', 'true')
+      this.disable(true)
     }
 
     /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
@@ -301,6 +300,7 @@ export class StringEditor extends AbstractEditor {
   disable (alwaysDisabled) {
     if (alwaysDisabled) this.always_disabled = true
     this.input.disabled = true
+    this.input.setAttribute('readonly', 'true')
     super.disable()
   }
 

src/editors/uuid.js

@@ -20,8 +20,7 @@ export class UuidEditor extends StringEditor {
   build () {
     super.build()
     /* Set field to readonly */
-    this.always_disabled = true
-    this.input.setAttribute('readonly', 'true')
+    this.disable(true)
   }
 
   sanitize (value) {

tests/codeceptjs/editors/array_test.js

@@ -873,9 +873,9 @@ Scenario('should work well with nested array editors', async (I) => {
 Scenario('should work well with selectize multiselect editors', async (I) => {
   I.amOnPage('array-selectize.html');
   I.click('Add item');
+  await I.seeElement('[data-schemapath="root.0"]');
   I.click('Add item');
-  I.seeElement('[data-schemapath="root.0"]');
-  I.seeElement('[data-schemapath="root.1"]');
+  await I.seeElement('[data-schemapath="root.1"]');
   I.click('.get-value');
   value = await I.grabValueFrom('.debug');
   // ensure defaults

tests/codeceptjs/editors/button_test.js

@@ -28,3 +28,8 @@ Scenario('should not leave any footprints in result', async (I) => {
   assert.equal(await I.grabValueFrom('.value'), JSON.stringify({"textinput":""}));
 });
 
+Scenario('should be disabled if "readonly" is specified', async (I) => {
+  I.amOnPage('read-only.html');
+
+  I.seeDisabledAttribute('[data-schemapath="root.button"] button');
+});

tests/codeceptjs/editors/radio_test.js

@@ -0,0 +1,10 @@
+var assert = require('assert');
+
+Feature('radio');
+
+Scenario('should be disabled if "readonly" is specified', async (I) => {
+  I.amOnPage('read-only.html');
+
+  I.seeDisabledAttribute('[id="root[radio][0]"]');
+  I.seeDisabledAttribute('[id="root[radio][1]"]');
+});

tests/pages/read-only.html

@@ -55,6 +55,22 @@
         "type": "boolean",
         "readOnly": true
       },
+      checkbox: {
+        "title": "checkbox",
+        "format": "checkbox",
+        "type": "boolean",
+        "readOnly": true
+      },
+      radio: {
+        "title": "radio",
+        "format": "radio",
+        "type": "string",
+        "enum": [
+          "yes",
+          "no"
+        ],
+        "readOnly": true
+      },
       rating: {
         "title": "rating",
         "readOnly": true,
@@ -63,10 +79,9 @@
         "maximum": "5",
         "exclusiveMaximum": false
       },
-      checkbox: {
-        "title": "checkbox",
-        "format": "checkbox",
-        "type": "boolean",
+      button: {
+        "title": "button",
+        "format": "button",
         "readOnly": true
       }
     }