@json-editor/json-editor 1.3.5 → 1.17.0

package/tests/codeceptjs/editors/autocomplete_test.js

@@ -0,0 +1,15 @@
+/* global Feature Scenario */
+
+Feature('autocomplete')
+
+Scenario('autocomplete should work @autocomplete', async ({ I }) => {
+  I.amOnPage('autocomplete.html')
+  I.waitForElement('.je-ready', 10)
+  I.click('[name="root"]')
+  I.pressKey('i')
+  I.pressKey('r')
+  I.waitForText('iran', 20, '.autocomplete-result-list')
+  I.waitForText('iraq', 20, '.autocomplete-result-list')
+  I.click('iraq', '.autocomplete-result:nth-child(2)')
+  I.waitForValue('.value', '"iraq"')
+})

package/tests/codeceptjs/editors/button_test.js

@@ -0,0 +1,50 @@
+/* global Feature Scenario */
+
+const { DEFAULT_WAIT_TIME } = require('../test-config')
+
+Feature('button')
+
+Scenario('should work with button editor callbacks', async ({ I }) => {
+  I.amOnPage('button-callbacks.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.seeElement('[data-schemapath="root.button1"] button')
+  I.click('[data-schemapath="root.button1"] button')
+  I.waitForValue('.value', 'button1CB')
+})
+
+Scenario('should work with option "validated" @validated', async ({ I }) => {
+  I.amOnPage('button-callbacks.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.seeElement('[data-schemapath="root.button1"] button')
+  I.retry({ retries: 3, minTimeout: 500 }).seeDisabledAttribute('[data-schemapath="root.button2"] button')
+  await I.fillField('[name="root[textinput]"]', 'Hello World')
+  I.pressKey('Tab')
+  I.dontSeeDisabledAttribute('[data-schemapath="root.button2"] button')
+  I.click('[data-schemapath="root.button2"] button')
+  I.waitForValue('.value', 'button2CB')
+})
+
+Scenario('should not leave any footprints in result', async ({ I }) => {
+  I.amOnPage('button-callbacks.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.click('.get-value')
+  I.waitForValue('.value', JSON.stringify({ textinput: '' }))
+})
+
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.seeDisabledAttribute('[data-schemapath="root.button"] button')
+})
+
+Scenario('should set icon @button @button-icon', async ({ I }) => {
+  I.amOnPage('button-icons.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.waitForElement('i.fas.fa-search', DEFAULT_WAIT_TIME)
+})
+
+Scenario('should be disable if we disable parent @button-disable', async ({ I }) => {
+  I.amOnPage('disable-button-in-object-editors.html')
+  I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
+  I.seeDisabledAttribute('[data-schemapath="root.some_button"] button')
+})

package/tests/codeceptjs/editors/checkbox_test.js

@@ -1,10 +1,23 @@
-var assert = require('assert');
-var value = '';
+/* global Feature Scenario */
 
-Feature('checkbox');
+const { DEFAULT_WAIT_TIME } = require('../test-config')
 
-Scenario('should be disabled if "readonly" is specified', async (I) => {
-  I.amOnPage('read-only.html');
-  value = await I.grabAttributeFrom('[name="root[checkbox]"]', 'disabled');
-  assert.equal(value, 'true');
-});
+Feature('checkbox')
+
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.waitForText('READY', DEFAULT_WAIT_TIME, '.state')
+  I.seeDisabledAttribute('[name="root[checkbox]"]')
+})
+
+Scenario('label should be visible for items at top level, but not in tables', async ({ I }) => {
+  I.amOnPage('checkbox-labels.html')
+  I.waitForText('READY', DEFAULT_WAIT_TIME, '.state')
+  I.seeElement('//label[contains(@for, "root[Awesome Compact]")]')
+  I.seeElement('//label[contains(@for, "root[Awesome Not Compact]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][0][Awesome in Object Table]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][1][Awesome in Object Table]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][2][Awesome in Object Table]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][3][Awesome in Object Table]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][4][Awesome in Object Table]")]')
+})

package/tests/codeceptjs/editors/colorpicker_test.js

@@ -0,0 +1,29 @@
+/* global Feature Scenario */
+
+const assert = require('assert')
+
+Feature('colorpicker')
+
+Scenario('test ColorPicker Editor  without third party library', async ({ I }) => {
+  I.amOnPage('colorpicker-no-3rd-party.html')
+  I.seeElement('[name="root[colorpicker]')
+  I.click('.get-value')
+  I.waitForValue('.debug', JSON.stringify({ colorpicker: '#efefef' }))
+})
+
+Scenario('test ColorPicker Editor  using vanilla-picker', async ({ I }) => {
+  I.amOnPage('colorpicker-use-vanilla-picker.html')
+  I.click('.get-value')
+  I.waitForValue('.debug', JSON.stringify({ colorpicker: 'rgba(0,0,0,1)' }))
+  I.click('[data-schemapath="root.colorpicker"]')
+  I.seeElement('[name="root[colorpicker]"]')
+  await I.dragAndDrop('[data-schemapath="root.colorpicker"] .picker_wrapper .picker_sl .picker_selector', '[data-schemapath="root.colorpicker"] .picker_wrapper .picker_sl')
+  await I.dragAndDrop('[data-schemapath="root.colorpicker"] .picker_wrapper .picker_hue .picker_selector', '[data-schemapath="root.colorpicker"] .picker_wrapper .picker_hue')
+  await I.dragAndDrop('[data-schemapath="root.colorpicker"] .picker_wrapper .picker_alpha .picker_selector', '[data-schemapath="root.colorpicker"] .picker_wrapper .picker_alpha')
+  I.click('.picker_done button')
+  // I.click('.get-value');
+  I.click('.get-value')
+  const color = await I.grabValueFrom('.debug')
+  const reg = /\{"colorpicker":"rgba\(6\d,19\d,19\d,0.5\d*\)"\}/
+  assert.ok(reg.test(color), color + ' match ' + reg)
+})

package/tests/codeceptjs/editors/datetime_test.js

@@ -0,0 +1,33 @@
+/* global Feature Scenario */
+
+const assert = require('assert')
+
+const today = (offset) => {
+  const t = new Date()
+  t.setDate(t.getDate() + (offset || 0))
+  return t.toISOString().split('T')[0]
+}
+
+Feature('datetime')
+
+Scenario('should have correct initial value @datetime', async ({ I }) => {
+  I.amOnPage('datetime.html')
+  I.wait(1)
+  I.click('#get-value')
+  I.waitForValue('#value', '{"time":"12:00","date":"' + today() + '","datetimelocal":"' + today() + 'T00:00' + '"}')
+})
+
+Scenario('time should have max and min attributes @datetime', async ({ I }) => {
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[time]"]', 'min'), '11:00')
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[time]"]', 'max'), '13:00')
+})
+
+Scenario('date should have max and min attributes @datetime', async ({ I }) => {
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[date]"]', 'min'), '1970-01-01')
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[date]"]', 'max'), '2100-01-01')
+})
+
+Scenario('datetimelocal should have max and min attributes @datetime', async ({ I }) => {
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[datetimelocal]"]', 'min'), '1970-01-01T00:00')
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[datetimelocal]"]', 'max'), '2100-01-01T00:00')
+})

package/tests/codeceptjs/editors/inheritance_test.js

@@ -0,0 +1,10 @@
+/* global Feature Scenario */
+
+Feature('inheritance')
+
+Scenario('should display all required fields in the allOf hierarchy', async ({ I }) => {
+  I.amOnPage('inheritance.html')
+  I.seeElement('[data-schemapath="root.breed"]')
+  I.seeElement('[data-schemapath="root.numLegs"]')
+  I.seeElement('[data-schemapath="root.id"]')
+})

package/tests/codeceptjs/editors/integer_test.js

@@ -1,76 +1,87 @@
-var assert = require('assert');
-var value = '';
+/* global Feature Scenario Event */
 
-Feature('integer');
+const { DEFAULT_WAIT_TIME } = require('../test-config')
 
-Scenario('should have correct initial value', async (I) => {
-  I.amOnPage('integer.html');
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"integer":5,"integer_number":5,"integer_range":5}');
-});
+Feature('integer')
 
-Scenario('should respect step by incrementing and decrementing the value of a number', async (I) => {
-  I.amOnPage('integer.html');
-  I.seeElement('[data-schemapath="root.integer"] input');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.integer_number"] input');
-    range.stepUp();
-    var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"integer":5,"integer_number":10,"integer_range":5}');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.integer_number"] input');
-    range.stepDown();
-    var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"integer":5,"integer_number":5,"integer_range":5}');
-});
+Scenario('should have correct initial value', async ({ I }) => {
+  I.amOnPage('integer.html')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":5}')
+})
 
-Scenario('should respect step by incrementing and decrementing the value of a range', async (I) => {
-  I.amOnPage('integer.html');
-  I.seeElement('[data-schemapath="root.integer_range"] input');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.integer_range"] input');
-    range.stepUp();
-    var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"integer":5,"integer_number":5,"integer_range":10}');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.integer_range"] input');
-    range.stepDown();
-    var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"integer":5,"integer_number":5,"integer_range":5}');
-});
+Scenario('should respect step by incrementing and decrementing the value of a number', async ({ I }) => {
+  I.amOnPage('integer.html')
+  I.seeElement('[data-schemapath="root.integer"] input')
+  I.executeScript(function () {
+    const range = document.querySelector('[data-schemapath="root.integer_number"] input')
+    range.stepUp()
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":10,"integer_range":5}')
+  I.executeScript(function () {
+    const range = document.querySelector('[data-schemapath="root.integer_number"] input')
+    range.stepDown()
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":5}')
+})
 
-Scenario('should be readonly if specified and not disabled', async (I) => {
-  I.amOnPage('read-only.html');
-  I.seeElement('[name="root[integer]"]');
-  value = await I.grabAttributeFrom('[name="root[integer]"]', 'readonly');
-  assert.equal(value, 'true');
-});
+Scenario('should respect step by incrementing and decrementing the value of a range', async ({ I }) => {
+  I.amOnPage('integer.html')
+  I.seeElement('[data-schemapath="root.integer_range"] input')
+  I.executeScript(function () {
+    const range = document.querySelector('[data-schemapath="root.integer_range"] input')
+    range.stepUp()
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":10}')
+  I.executeScript(function () {
+    const range = document.querySelector('[data-schemapath="root.integer_range"] input')
+    range.stepDown()
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":5}')
+})
+
+Scenario('should be readonly if specified and not disabled @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeReadOnlyAttribute('[name="root[integer]"]')
+})
+
+Scenario('should update output when (method) setValue is called @integer_range', async ({ I }) => {
+  I.amOnPage('integer.html')
+  I.waitForElement('.je-ready')
+  I.waitForText('5', DEFAULT_WAIT_TIME, '[data-schemapath="root.integer_range"] output')
+  I.click('.set-value')
+  I.wait(1)
+  I.waitForText('2', DEFAULT_WAIT_TIME, '[data-schemapath="root.integer_range"] output')
+})
+
+Scenario('should validate value', async ({ I }) => {
+  I.amOnPage('integer.html')
+  await I.fillField('[name="root[integer]"]', '5-5')
+  I.click('.get-value')
+  I.see('Value must be of type integer.', '[data-schemapath="root.integer"] div')
+  I.waitForValue('.value', '{"integer":"5-5","integer_number":5,"integer_range":5}')
+})

package/tests/codeceptjs/editors/jodit_test.js

@@ -0,0 +1,23 @@
+/* global Feature Scenario */
+
+Feature('jodit')
+
+Scenario('should have correct initial value', async ({ I }) => {
+  I.amOnPage('string-jodit-editor.html')
+  I.click('.get-value')
+  I.waitForValue('.debug', '[]')
+})
+
+Scenario('should have coerent values', async ({ I }) => {
+  I.amOnPage('string-jodit-editor.html')
+  I.click('Add item')
+  I.see('item 1')
+  I.seeElement('.jodit-wysiwyg_mode')
+
+  I.click('.jodit-toolbar-button_bold button')
+  I.pressKeys('__JODIT__')
+  I.see('__JODIT__')
+
+  I.click('.get-value')
+  I.waitForValue('.debug', JSON.stringify([{ editor: '<p><strong>__JODIT__</strong><br></p>' }]))
+})

package/tests/codeceptjs/editors/multiple_test.js

@@ -0,0 +1,27 @@
+/* global Feature Scenario Event */
+
+const { DEFAULT_WAIT_TIME } = require('../test-config')
+
+Feature('multiple')
+
+Scenario('should hide switcher input @switcher-option', async ({ I }) => {
+  I.amOnPage('switcher-option.html')
+  I.waitForElement('.je-ready')
+  I.dontSeeElement('.je-switcher')
+
+  I.fillField('[name="root[name]"]', 'a')
+  I.pressKey('Tab')
+  I.waitForText('If provided, value must be at least 4 and at most 10')
+
+  I.fillField('[name="root[name]"]', '')
+  I.pressKey('Tab')
+  I.dontSee('If provided, value must be at least 4 and at most 10')
+
+  I.fillField('[name="root[name]"]', 'abcdefghijklmnopq')
+  I.pressKey('Tab')
+  I.waitForText('If provided, value must be at least 4 and at most 10')
+
+  I.fillField('[name="root[name]"]', 'test')
+  I.pressKey('Tab')
+  I.dontSee('If provided, value must be at least 4 and at most 10')
+})

package/tests/codeceptjs/editors/multiselect_test.js

@@ -1,11 +1,8 @@
-var assert = require('assert');
-var value = '';
+/* global Feature Scenario */
 
-Feature('multiselect');
+Feature('multiselect')
 
-Scenario('should be disabled if "readonly" is specified', async (I) => {
-  I.amOnPage('read-only.html');
-  I.seeElement('[name="root[multiselect]"]');
-  value = await I.grabAttributeFrom('[name="root[multiselect]"]', 'disabled');
-  assert.equal(value, 'true');
-});
+Scenario('should be disabled if "readonly" is specified @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeDisabledAttribute('[name="root[multiselect]"]')
+})

package/tests/codeceptjs/editors/number_test.js

@@ -1,76 +1,84 @@
-var assert = require('assert');
-var value = '';
+/* global Feature Scenario Event */
 
-Feature('number');
+const { DEFAULT_WAIT_TIME } = require('../test-config')
 
-Scenario('should have correct initial value', async (I) => {
-  I.amOnPage('number.html');
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"number":5.75,"number_number":5.75,"number_range":5.75}');
-});
+Feature('number')
 
-Scenario('should respect step by incrementing and decrementing the value of a number', async (I) => {
-  I.amOnPage('number.html');
-  I.seeElement('[data-schemapath="root.number_number"] input');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.number_number"] input');
-    range.stepUp();
+Scenario('should have correct initial value @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+})
+
+Scenario('should validate value @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  await I.fillField('[name="root[number]"]', '12-12')
+  I.click('.get-value')
+  I.waitForText('Value must be of type number.', DEFAULT_WAIT_TIME, '[data-schemapath="root.number"] .invalid-feedback')
+  I.waitForValue('.value', '{"number":"12-12","number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+})
+
+Scenario('should respect step by incrementing and decrementing the value of a  @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  I.seeElement('[data-schemapath="root.number_number"] input')
+  I.executeScript(function () {
+    var range = document.querySelector('[data-schemapath="root.number_number"] input')
+    range.stepUp()
     var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"number":5.75,"number_number":6,"number_range":5.75}');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.number_number"] input');
-    range.stepDown();
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":6,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+  I.executeScript(function () {
+    var range = document.querySelector('[data-schemapath="root.number_number"] input')
+    range.stepDown()
     var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"number":5.75,"number_number":5.75,"number_range":5.75}');
-});
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+})
 
-Scenario('should respect step by incrementing and decrementing the value of a range', async (I) => {
-  I.amOnPage('number.html');
-  I.seeElement('[data-schemapath="root.number_range"] input');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.number_range"] input');
-    range.stepUp();
+Scenario('should respect step by incrementing and decrementing the value of a range @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  I.seeElement('[data-schemapath="root.number_range"] input')
+  I.executeScript(function () {
+    var range = document.querySelector('[data-schemapath="root.number_range"] input')
+    range.stepUp()
     var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"number":5.75,"number_number":5.75,"number_range":6}');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.number_range"] input');
-    range.stepDown();
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":6,"stepper_number_default":5,"stepper_integer_default":5}')
+  I.executeScript(function () {
+    var range = document.querySelector('[data-schemapath="root.number_range"] input')
+    range.stepDown()
     var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  value = await I.grabValueFrom('.value');
-  assert.equal(value, '{"number":5.75,"number_number":5.75,"number_range":5.75}');
-});
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+})
+
+Scenario('should be readonly if specified and not disabled @number @readOnly', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeReadOnlyAttribute('[name="root[number]"]')
+})
 
-Scenario('should be readonly if specified and not disabled', async (I) => {
-  I.amOnPage('read-only.html');
-  I.seeElement('[name="root[number]"]');
-  value = await I.grabAttributeFrom('[name="root[number]"]', 'readonly');
-  assert.equal(value, 'true');
-});
+Scenario('should update output when setValue is called @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  I.click('.set-value')
+  I.see('2', '[data-schemapath="root.number_range"] output')
+})