@json-editor/json-editor 1.4.0-beta.0 → 1.17.0

package/tests/codeceptjs/editors/object_test.js

@@ -1,95 +1,337 @@
-var assert = require('assert');
-
-Feature('object');
-
-Scenario('should respect property orders', async (I) => {
-  I.amOnPage('object.html');
-  assert.equal(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(1) [data-schemapath^="root."]', 'data-schemapath'), 'root.age');
-  assert.equal(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(2) [data-schemapath^="root."]', 'data-schemapath'), 'root.name');
-  assert.equal(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(3) [data-schemapath^="root."]', 'data-schemapath'), 'root.single');
-  assert.equal(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(4) [data-schemapath^="root."]', 'data-schemapath'), 'root.values');
-  assert.equal(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(5) [data-schemapath^="root."]', 'data-schemapath'), 'root.zodiac');
-});
-
-Scenario('should validate required properties', async (I) => {
-  I.amOnPage('object.html');
-  I.see('Value must be at least 18.');
-});
-
-Scenario('should validate also not required properties', async (I) => {
-  I.amOnPage('object.html');
-  I.see('Value must be at least 3 characters long.');
-});
-
-Scenario('grid-strict rows and columns', (I) => {
-  I.amOnPage('grid-strict.html');
-  I.seeNumberOfVisibleElements('.row', 13);
-  I.seeElement('.col-md-1');
-  I.seeElement('.col-md-2');
-  I.seeElement('.col-md-3');
-  I.seeElement('.col-md-4');
-  I.seeElement('.col-md-5');
-  I.seeElement('.col-md-6');
-  I.seeElement('.col-md-7');
-  I.seeElement('.col-md-8');
-  I.seeElement('.col-md-9');
-  I.seeElement('.col-md-10');
-  I.seeElement('.col-md-11');
-  I.seeElement('.col-md-12');
-  I.seeElement('.col-md-offset-1');
-  I.seeElement('.col-md-offset-2');
-  I.seeElement('.col-md-offset-3');
-  I.seeElement('.col-md-offset-4');
-  I.seeElement('.col-md-offset-5');
-  I.seeElement('.col-md-offset-6');
-  I.seeElement('.col-md-offset-7');
-  I.seeElement('.col-md-offset-8');
-  I.seeElement('.col-md-offset-9');
-  I.seeElement('.col-md-offset-10');
-  I.seeElement('.col-md-offset-11');
-});
-
-Scenario('grid rows and columns', (I) => {
-  I.amOnPage('grid.html');
-  I.seeNumberOfVisibleElements('.row', 6);
-  I.seeNumberOfVisibleElements('.col-md-12', 1);
-  I.seeNumberOfVisibleElements('.col-md-6', 3);
-  I.seeNumberOfVisibleElements('.col-md-4', 3);
-  I.seeNumberOfVisibleElements('.col-md-3', 4);
-  I.seeNumberOfVisibleElements('.col-md-2', 6);
-  I.seeNumberOfVisibleElements('.col-md-1', 6);
-});
-
-Scenario('opt in optional properties', async (I) => {
-  I.amOnPage('object-required-properties.html');
+/* global Feature Scenario */
+
+const assert = require('assert')
+const { DEFAULT_WAIT_TIME } = require('../test-config')
+
+Feature('object')
+
+Scenario('should be readonly if specified and not disabled @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.seeDisabledAttribute('[name="root[object][string]"]')
+  I.seeDisabledAttribute('[name="root[object][number]"]')
+})
+
+Scenario('@case-sensitive-property-search', async ({ I }) => {
+  I.amOnPage('object-case-sensitive-property-search-true.html')
+  I.click('.json-editor-btn-edit_properties')
+  I.fillField('.property-selector-input', 'aaa')
+  I.see('aaa', '.form-check label')
+  I.dontSee('AAA', '.form-check label')
+  I.fillField('.property-selector-input', 'AAA')
+  I.see('AAA', '.form-check label')
+  I.dontSee('aaa', '.form-check label')
+
+  I.amOnPage('object-case-sensitive-property-search-false.html')
+  I.click('.json-editor-btn-edit_properties')
+  I.fillField('.property-selector-input', 'aaa')
+  I.see('aaa', '.form-check label')
+  I.see('AAA', '.form-check label')
+  I.fillField('.property-selector-input', 'AAA')
+  I.see('AAA', '.form-check label')
+  I.see('aaa', '.form-check label')
+})
+
+Scenario('should respect property orders', async ({ I }) => {
+  I.amOnPage('object.html')
+  assert.strictEqual(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(1) [data-schemapath^="root."]', 'data-schemapath'), 'root.age')
+  assert.strictEqual(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(2) [data-schemapath^="root."]', 'data-schemapath'), 'root.name')
+  assert.strictEqual(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(3) [data-schemapath^="root."]', 'data-schemapath'), 'root.single')
+  assert.strictEqual(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(4) [data-schemapath^="root."]', 'data-schemapath'), 'root.values')
+  assert.strictEqual(await I.grabAttributeFrom('[data-schemapath^="root"] .row:nth-of-type(5) [data-schemapath^="root."]', 'data-schemapath'), 'root.zodiac')
+})
+
+Scenario('should validate required properties', async ({ I }) => {
+  I.amOnPage('object.html')
+  I.see('Value must be at least 18.')
+})
+
+Scenario('should validate also not required properties', async ({ I }) => {
+  I.amOnPage('object.html')
+  I.see('Value must be at least 3 characters long.')
+})
+
+Scenario('grid-strict rows and columns', ({ I }) => {
+  I.amOnPage('grid-strict.html')
+  I.seeNumberOfVisibleElements('.row', 13)
+  I.seeElement('.col-md-1')
+  I.seeElement('.col-md-2')
+  I.seeElement('.col-md-3')
+  I.seeElement('.col-md-4')
+  I.seeElement('.col-md-5')
+  I.seeElement('.col-md-6')
+  I.seeElement('.col-md-7')
+  I.seeElement('.col-md-8')
+  I.seeElement('.col-md-9')
+  I.seeElement('.col-md-10')
+  I.seeElement('.col-md-11')
+  I.seeElement('.col-md-12')
+  I.seeElement('.col-md-1.offset-md-1')
+  I.seeElement('.col-md-1.offset-md-2')
+  I.seeElement('.col-md-1.offset-md-3')
+  I.seeElement('.col-md-1.offset-md-4')
+  I.seeElement('.col-md-1.offset-md-5')
+  I.seeElement('.col-md-1.offset-md-6')
+  I.seeElement('.col-md-1.offset-md-7')
+  I.seeElement('.col-md-1.offset-md-8')
+  I.seeElement('.col-md-1.offset-md-9')
+  I.seeElement('.col-md-1.offset-md-10')
+  I.seeElement('.col-md-1.offset-md-11')
+})
+
+Scenario('grid rows and columns', ({ I }) => {
+  I.amOnPage('grid.html')
+  I.seeNumberOfVisibleElements('.row', 6)
+  I.seeNumberOfVisibleElements('.col-md-12', 1)
+  I.seeNumberOfVisibleElements('.col-md-6', 3)
+  I.seeNumberOfVisibleElements('.col-md-4', 3)
+  I.seeNumberOfVisibleElements('.col-md-3', 4)
+  I.seeNumberOfVisibleElements('.col-md-2', 6)
+  I.seeNumberOfVisibleElements('.col-md-1', 6)
+})
+
+Scenario('opt in optional properties @show_opt_in', async ({ I }) => {
+  I.amOnPage('object-required-properties.html')
 
   // if an editor type "object" is disabled, also the child editors opt-in controls will be disabled.
+  I.seeDisabledAttribute('[data-schemapath="root.object.number"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[data-schemapath="root.object.boolean"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[data-schemapath="root.object.radio"] .json-editor-opt-in')
+
+  // tests merged from master 17.9.2019
+  I.dontSeeCheckedAttribute('[data-schemapath="root.string"] .json-editor-opt-in')
+  I.dontSeeDisabledAttribute('[data-schemapath="root.string"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[name="root[string]"]')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.radio"] .json-editor-opt-in')
+  I.dontSeeDisabledAttribute('[data-schemapath="root.radio"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[id="root[radio][0]"]')
+  I.seeDisabledAttribute('[id="root[radio][1]"]')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.object.number"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[data-schemapath="root.object.number"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[name="root[object][number]"]')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.object.boolean"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[data-schemapath="root.object.boolean"] .json-editor-opt-in')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.object.radio"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[data-schemapath="root.object.radio"] .json-editor-opt-in')
+
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":0,"boolean":false}')
+
+  // Opening and Closing "Edit JSON" should keep opt-in state.
 
-  assert.equal(await I.grabAttributeFrom('[data-schemapath="root.object.number"] .json-editor-opt-in', 'disabled'), 'true');
-  assert.equal(await I.grabAttributeFrom('[data-schemapath="root.object.boolean"] .json-editor-opt-in', 'disabled'), 'true');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"number":0,"boolean":false}');
+  I.click('[data-schemapath="root"] .json-editor-btn-edit')
+  I.click('[data-schemapath="root"] .json-editor-btn-edit')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.string"] .json-editor-opt-in')
+  I.dontSeeDisabledAttribute('[data-schemapath="root.string"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[name="root[string]"]')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.radio"] .json-editor-opt-in')
+  I.dontSeeDisabledAttribute('[data-schemapath="root.radio"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[id="root[radio][0]"]')
+  I.seeDisabledAttribute('[id="root[radio][1]"]')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.object.number"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[data-schemapath="root.object.number"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[name="root[object][number]"]')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.object.boolean"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[data-schemapath="root.object.boolean"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[name="root[object][boolean]"]')
+  I.seeDisabledAttribute('[data-schemapath="root.object.boolean"] .json-editor-opt-in')
+  I.dontSeeCheckedAttribute('[data-schemapath="root.object.radio"] .json-editor-opt-in')
+  I.seeDisabledAttribute('[data-schemapath="root.object.radio"] .json-editor-opt-in')
+
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":0,"boolean":false}')
 
   // opt-in string property
 
-  I.click('[data-schemapath="root.string"] .json-editor-opt-in');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"string":"","number":0,"boolean":false}');
+  I.click('[data-schemapath="root.string"] .json-editor-opt-in')
+  I.click('[data-schemapath="root.radio"] .json-editor-opt-in')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"string":"","number":0,"boolean":false,"radio":"Home"}')
 
   // opt-in array property
 
-  I.click('[data-schemapath="root.array"] .json-editor-opt-in');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"string":"","number":0,"boolean":false,"array":[]}');
+  I.click('[data-schemapath="root.array"] .json-editor-opt-in')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"string":"","number":0,"boolean":false,"radio":"Home","array":[]}')
 
   // opt-in object property
 
-  I.click('[data-schemapath="root.object"] .json-editor-opt-in');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"string":"","number":0,"boolean":false,"array":[],"object":{"string":"","array":[]}}');
+  I.click('[data-schemapath="root.object"] .json-editor-opt-in')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"string":"","number":0,"boolean":false,"radio":"Home","array":[],"object":{"string":"","array":[]}}')
 
   // if an editor type "object" is enabled, also the child editors opt-in controls will be enabled.
+  I.dontSeeDisabledAttribute('[data-schemapath="root.object.number"] .json-editor-opt-in')
+  I.dontSeeDisabledAttribute('[data-schemapath="root.object.boolean"] .json-editor-opt-in')
+  I.dontSeeDisabledAttribute('[data-schemapath="root.object.radio"] .json-editor-opt-in')
+})
+
+Scenario('set value opt in optional properties @show_opt_in', async ({ I }) => {
+  I.amOnPage('object-required-properties.html')
+
+  // all editors visible
+  I.waitForElement('[data-schemapath="root.string"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.number"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.boolean"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.radio"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.array"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object.string"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object.number"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object.boolean"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object.radio"]', DEFAULT_WAIT_TIME)
+
+  // set values
+  I.click('.set-value')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"string":"test","number":0,"boolean":false,"array":["test"],"object":{"string":"","number":10,"boolean":true,"array":[]}}')
+
+  // set empty values
+  I.click('.set-empty-value')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":0,"boolean":false}')
+
+  // all editorsstill visible
+  I.waitForElement('[data-schemapath="root.string"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.number"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.boolean"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.radio"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.array"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object.string"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object.number"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object.boolean"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.object.radio"]', DEFAULT_WAIT_TIME)
+})
+
+Scenario('set value opt in optional properties @show_opt_in_schema', async ({ I }) => {
+  I.amOnPage('object-show-opt-in.html')
+
+  // all editors visible
+  I.waitForElement('[data-schemapath="root"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_undefined"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_undefined.string"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_true"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_true.string"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_false"]', DEFAULT_WAIT_TIME)
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_false.string"]', DEFAULT_WAIT_TIME)
+
+  // checkboxes for optional properties should appear only when
+  // case 1) the parent option show_opt_in is enabled
+  // OR
+  // case 2) the parent option show_opt_in is disabled and the global option show_opt_in is enabled
+  // OR
+  // case 3) the parent option show_opt_in is not defined and the global option show_opt_in is enabled
+
+  // global show_opt_in true
+  I.dontSeeCheckedAttribute('#show-opt-in')
+  I.dontSeeElement('[data-schemapath="root.option_show_opt_in_undefined.string"] .json-editor-opt-in') // global show_opt_in: false && parent editor show_opt_in: 'undefined'
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_true.string"] .json-editor-opt-in', DEFAULT_WAIT_TIME) // global show_opt_in: false && parent editor show_opt_in: true
+  I.dontSeeElement('[data-schemapath="root.option_show_opt_in_false.string"] .json-editor-opt-in') // global show_opt_in: false && parent editor show_opt_in: false
+
+  // global show_opt_in false
+  I.click('#show-opt-in')
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_undefined.string"] .json-editor-opt-in') // global show_opt_in: true && parent editor show_opt_in: 'undefined'
+  I.waitForElement('[data-schemapath="root.option_show_opt_in_true.string"] .json-editor-opt-in', DEFAULT_WAIT_TIME) // global show_opt_in: true && parent editor show_opt_in: true
+  I.dontSeeElement('[data-schemapath="root.option_show_opt_in_false.string"] .json-editor-opt-in') // global show_opt_in: true && parent editor show_opt_in: false
+})
+
+Scenario('objects should contain properties defined with the properties keyword unless the property "additionalProperties: true" is specified in the object schema @additional-properties', async ({ I }) => {
+  I.amOnPage('object-no-additional-properties.html')
+  I.seeElement('[data-schemapath="root.aptrue.name"] input')
+  I.seeElement('[data-schemapath="root.aptrue.age"] input')
+  I.seeElement('[data-schemapath="root.apfalse.name"] input')
+  I.dontSeeElement('[data-schemapath="root.apfalse.age"] input')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"aptrue":{"name":"Albert","age":0},"apfalse":{"name":"Albert"}}')
+})
+
+Scenario('should have unique ids', ({ I }) => {
+  I.amOnPage('object-no-duplicated-id.html')
+  I.donSeeDuplicatedIds()
+  I.waitForText('i am actually a cat')
+  I.waitForText('i am actually a dog')
+  I.click('.json-editor-btn-edit_properties')
+  I.click('.form-group:nth-child(1) .form-check-input')
+  I.waitForText('i am actually a dog')
+  I.click('.form-group:nth-child(1) .form-check-input')
+  I.click('.form-group:nth-child(2) .form-check-input')
+  I.waitForText('i am actually a cat')
+})
+
+Scenario('should hide properties with unfulfilled dependencies @dependencies', ({ I }) => {
+  I.amOnPage('object-with-dependencies.html')
+  I.seeElement('[data-schemapath="root.enable_option"] input')
+  I.dontSeeElement('[data-schemapath="root.make_new"] input')
+  I.dontSeeElement('[data-schemapath="root.existing_name"] input')
+
+  I.click('[data-schemapath="root.enable_option"] input')
+  I.seeElement('[data-schemapath="root.enable_option"] input')
+  I.seeElement('[data-schemapath="root.make_new"] input')
+  I.dontSeeElement('[data-schemapath="root.existing_name"] input')
+})
+
+Scenario('should fulfill dependencies whit fully qualified paths @dependencies', ({ I }) => {
+  I.amOnPage('option-dependencies.html')
+  I.waitForText('Female specific question?')
+  I.waitForText('Female specific age question?')
+  I.dontSee('Male specific question?')
+  I.dontSee('Male specific age question?')
+  I.dontSee('What is your preferred gender?')
+  I.dontSee('Other specific age question?')
+
+  I.selectOption('[id="root[gender]"]', 'male')
+  I.dontSee('Female specific question?')
+  I.dontSee('Female specific age question?')
+  I.waitForText('Male specific question?')
+  I.waitForText('Male specific age question?')
+  I.dontSee('What is your preferred gender?')
+  I.dontSee('Other specific age question?')
+
+  I.selectOption('[id="root[gender]"]', 'other')
+  I.dontSee('Female specific question?')
+  I.dontSee('Female specific age question?')
+  I.dontSee('Male specific question?')
+  I.dontSee('Male specific age question?')
+  I.waitForText('What is your preferred gender?')
+  I.waitForText('Other specific age question?')
+})
+
+Scenario('should respect multiple dependency values @dependencies', ({ I }) => {
+  I.amOnPage('object-with-dependencies-array.html')
+  I.waitForVisible('[data-schemapath="root.question_1"] select', DEFAULT_WAIT_TIME)
+  I.selectOption('[name="root[question_1]"]', 'a')
+  I.waitForInvisible('[data-schemapath="root.question_1_feedback"]', DEFAULT_WAIT_TIME)
+  I.selectOption('[name="root[question_1]"]', 'b')
+  I.waitForVisible('[data-schemapath="root.question_1_feedback"]', DEFAULT_WAIT_TIME)
+  I.selectOption('[name="root[question_1]"]', 'c')
+  I.waitForInvisible('[data-schemapath="root.question_1_feedback"]', DEFAULT_WAIT_TIME)
+  I.selectOption('[name="root[question_1]"]', 'd')
+  I.waitForVisible('[data-schemapath="root.question_1_feedback"]', DEFAULT_WAIT_TIME)
+
+  I.waitForVisible('[data-schemapath="root.question_2"]', DEFAULT_WAIT_TIME)
+  I.waitForInvisible('[data-schemapath="root.question_2_feedback"]', DEFAULT_WAIT_TIME)
+  I.click('label[for="root[question_2]1"]')
+  I.click('label[for="root[question_2]2"]')
+  I.waitForVisible('[data-schemapath="root.question_2_feedback"]', DEFAULT_WAIT_TIME)
+  I.click('label[for="root[question_2]0"]')
+  I.click('label[for="root[question_2]3"]')
+  I.waitForInvisible('[data-schemapath="root.question_2_feedback"]', DEFAULT_WAIT_TIME)
+})
+
+Scenario('should open and close the properties modal', ({ I }) => {
+  I.amOnPage('object.html')
+  I.seeElement('.json-editor-btn-edit_properties')
+  I.click('.json-editor-btn-edit_properties')
+  I.seeElement('.je-modal .property-selector')
+  I.click('textarea')
+  I.dontSeeElement('.je-modal .property-selector')
+})
 
-  assert.equal(await I.grabAttributeFrom('[data-schemapath="root.object.number"] .json-editor-opt-in', 'disabled'), false);
-  assert.equal(await I.grabAttributeFrom('[data-schemapath="root.object.boolean"] .json-editor-opt-in', 'disabled'), false);
-});
+Scenario('should remove false properties @remove_false_properties', ({ I }) => {
+  I.amOnPage('remove-false-properties.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#value', '{}')
+  I.click('[for="root[a]"]')
+  I.waitForValue('#value', '{"a":true}')
+})

package/tests/codeceptjs/editors/option-no_default_values_test.js

@@ -0,0 +1,42 @@
+/* global Feature Scenario */
+
+Feature('option no_default_values')
+
+Scenario('should have correct initial value @no_default_values', async ({ I }) => {
+  I.amOnPage('option-no_default_values.html')
+  I.click('.get-value')
+  I.waitForValue('.debug', JSON.stringify({
+    integer: undefined,
+    number: undefined,
+    string: undefined
+  }))
+})
+
+Scenario('should have correct values on empty dirty field', async ({ I }) => {
+  I.amOnPage('option-no_default_values.html')
+  I.click('.get-value')
+
+  await I.fillField('[name="root[integer]"]', '3')
+  await I.fillField('[name="root[number]"]', '3')
+  await I.fillField('[name="root[string]"]', 'foo')
+  I.click('.force-change')
+  I.click('.get-value')
+
+  I.waitForValue('.debug', JSON.stringify({
+    number: 3.0,
+    string: 'foo',
+    integer: 3
+  }))
+
+  await I.clearField('[name="root[integer]"]')
+  await I.clearField('[name="root[number]"]')
+  await I.clearField('[name="root[string]"]')
+  I.click('.force-change')
+  I.click('.get-value')
+
+  I.waitForValue('.debug', JSON.stringify({
+    number: undefined,
+    string: '',
+    integer: undefined
+  }))
+})

package/tests/codeceptjs/editors/programmatic-changes_test.js

@@ -0,0 +1,20 @@
+/* global Feature Scenario */
+
+const { DEFAULT_WAIT_TIME } = require('../test-config')
+
+Feature('Programmatic changes')
+
+Scenario('should have correct initial value', async ({ I }) => {
+  I.amOnPage('programmatic-changes.html')
+  I.waitForText('READY', DEFAULT_WAIT_TIME, '.state')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"boolean":false,"boolean_checkbox":false,"string":"","integer":0,"number":0,"array":[],"array_checkbox":[],"array_select":[]}')
+})
+
+Scenario('should have correct values after setting them programmatically', async ({ I }) => {
+  I.amOnPage('programmatic-changes.html')
+  I.waitForText('READY', DEFAULT_WAIT_TIME, '.state')
+  I.click('.set-values')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"boolean":true,"boolean_checkbox":true,"string":"hello","integer":5,"number":5.5,"array":[1,2,3],"array_checkbox":["value1","value2"],"array_select":[1,2,3]}')
+})

package/tests/codeceptjs/editors/purify_test.js

@@ -0,0 +1,26 @@
+/* global Feature Scenario */
+
+Feature('purify')
+
+Scenario('Should @purify @optional XSS from direct input', async ({ I }) => {
+  I.amOnPage('purify.html')
+  I.waitForElement('[name="root[string]"]')
+  I.fillField('[name="root[string]"]', 'bla</script><script>alert(1)</script>')
+  I.pressKey('Tab')
+  I.wait(1)
+  I.click('.get-value')
+  I.wait(1)
+  I.waitForValue('#value', '{"string":"bla"}')
+})
+
+Scenario('Should @purify @optional XSS from setValue() via textarea', async ({ I }) => {
+  I.amOnPage('purify.html')
+  I.waitForElement('#value')
+  I.fillField('#value', 'bla</script><script>alert(1)</script>')
+  I.pressKey('Tab')
+  I.click('.set-value')
+  I.wait(2)
+  I.click('.get-value')
+  I.wait(1)
+  I.waitForValue('#value', '{"string":"bla"}')
+})

package/tests/codeceptjs/editors/radio_test.js

@@ -0,0 +1,9 @@
+/* global Feature Scenario */
+
+Feature('radio')
+
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeDisabledAttribute('[id="root[radio][0]"]')
+  I.seeDisabledAttribute('[id="root[radio][1]"]')
+})

package/tests/codeceptjs/editors/range_test.js

@@ -0,0 +1,10 @@
+/* global Feature Scenario */
+
+Feature('range')
+
+Scenario('should have and display initial value @range', async ({ I }) => {
+  I.amOnPage('range.html')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"speed":1}')
+  I.waitForText('1', 5, 'output')
+})

package/tests/codeceptjs/editors/rating_test.js

@@ -1,12 +1,12 @@
-var assert = require('assert');
+/* global Feature Scenario */
 
-Feature('rating');
+Feature('readonly')
 
-Scenario('should be disabled if "readonly" is specified', async (I) => {
-  I.amOnPage('read-only.html');
-  assert.equal(await I.grabAttributeFrom('[id="root[rating]5"]', 'disabled'), 'true');
-  assert.equal(await I.grabAttributeFrom('[id="root[rating]4"]', 'disabled'), 'true');
-  assert.equal(await I.grabAttributeFrom('[id="root[rating]3"]', 'disabled'), 'true');
-  assert.equal(await I.grabAttributeFrom('[id="root[rating]2"]', 'disabled'), 'true');
-  assert.equal(await I.grabAttributeFrom('[id="root[rating]1"]', 'disabled'), 'true');
-});
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeDisabledAttribute('[id="root[rating]5"]')
+  I.seeDisabledAttribute('[id="root[rating]4"]')
+  I.seeDisabledAttribute('[id="root[rating]3"]')
+  I.seeDisabledAttribute('[id="root[rating]2"]')
+  I.seeDisabledAttribute('[id="root[rating]1"]')
+})

package/tests/codeceptjs/editors/select_test.js

@@ -1,21 +1,50 @@
-var assert = require('assert');
+/* global Feature Scenario */
 
-Feature('select');
+Feature('select')
 
-Scenario('should return correct booleans values when selected', async (I) => {
-  I.amOnPage('select.html');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"boolean":true}');
-  I.selectOption('[name="root[boolean]"]', 'false');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"boolean":false}');
-  I.selectOption('[name="root[boolean]"]', 'true');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"boolean":true}');
-});
+Scenario('Should start with correct value @select-value', async ({ I }) => {
+  I.amOnPage('select-values.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#value', '{"data":[]}')
+  I.click('#set-value')
+  I.waitForValue('#value', '{"data":[{"baumart":"other_hardwood"},{"baumart":"beech"},{"baumart":"oak"},{"baumart":"spruce"}]}')
+  I.getSelectedValueAndAssert('select[name="root[data][0][baumart]"]', 'other_hardwood');
+  I.getSelectedValueAndAssert('select[name="root[data][1][baumart]"]', 'beech');
+  I.getSelectedValueAndAssert('select[name="root[data][2][baumart]"]', 'oak');
+  I.getSelectedValueAndAssert('select[name="root[data][3][baumart]"]', 'spruce');
+})
 
-Scenario('should be disabled if "readonly" is specified', async (I) => {
-  I.amOnPage('read-only.html');
-  I.seeElement('[name="root[select]"]');
-  assert.equal(await I.grabAttributeFrom('[name="root[select]"]', 'disabled'), 'true');
-});
+Scenario('Should render a non selectable placeholder options for not in enum values @placeholderOption', async ({ I }) => {
+  I.amOnPage('placeholder-options.html')
+  I.waitForElement('.je-ready')
+  I.waitForElement('option[value="_placeholder_"][disabled][hidden]')
+  I.waitForElement('option[value="a"]')
+  I.waitForElement('option[value="b"]')
+  I.click('#set-value')
+  I.waitForText('-select-')
+  I.waitForText('Value must be one of the enumerated values')
+  I.waitForValue('#value', '"other"')
+  I.selectOption('[name="root"]', 'a')
+  I.waitForValue('#value', '"a"')
+  I.dontSee('Value must be one of the enumerated values')
+  I.selectOption('[name="root"]', 'b')
+  I.waitForValue('#value', '"b"')
+  I.dontSee('Value must be one of the enumerated values')
+})
+
+Scenario('should return correct booleans values when selected @readOnly', async ({ I }) => {
+  I.amOnPage('select.html')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"boolean":true}')
+  I.selectOption('[name="root[boolean]"]', 'false')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"boolean":false}')
+  I.selectOption('[name="root[boolean]"]', 'true')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"boolean":true}')
+})
+
+Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeDisabledAttribute('[name="root[select]"]')
+})