@wirenboard/json-editor 2.5.3-wb13

package/src/validators/ip-validator.js

@@ -0,0 +1,51 @@
+/* Implements ipv4, ipv6 and hostname format validations as per https://tools.ietf.org/html/draft-fge-json-schema-validation-00#section-7.3.4 */
+const validateIpv4 = (value) => {
+  const parts = value.split('.')
+  if (parts.length !== 4) {
+    throw new Error('error_ipv4')
+  }
+  parts.forEach((part) => {
+    if (isNaN(+part) || +part < 0 || +part > 255) {
+      throw new Error('error_ipv4')
+    }
+  })
+}
+
+const validateIpv6 = (value) => {
+  if (!value.match(
+    '^(?:(?:(?:[a-fA-F0-9]{1,4}:){6}|(?=(?:[a-fA-F0-9]{0,4}:){2,6}(?:[0-9]{1,3}.){3}[0-9]{1,3}$)(([0-9a-fA-F]{1,4}:){1,5}|:)((:[0-9a-fA-F]{1,4}){1,5}:|:)|::(?:[a-fA-F0-9]{1,4}:){5})(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9]).){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])|(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}|(?=(?:[a-fA-F0-9]{0,4}:){0,7}[a-fA-F0-9]{0,4}$)(([0-9a-fA-F]{1,4}:){1,7}|:)((:[0-9a-fA-F]{1,4}){1,7}|:)|(?:[a-fA-F0-9]{1,4}:){7}:|:(:[a-fA-F0-9]{1,4}){7})$'
+  )) {
+    throw new Error('error_ipv6')
+  }
+}
+
+const validateHostname = (value) => {
+  if (!value.match(
+    '(?=^.{4,253}$)(^((?!-)[a-zA-Z0-9-]{0,62}[a-zA-Z0-9].)+[a-zA-Z]{2,63}$)'
+  )) {
+    throw new Error('error_hostname')
+  }
+}
+
+export function ipValidator (schema, value, path, translate) {
+  try {
+    switch (schema.format) {
+      case 'ipv4':
+        validateIpv4(value)
+        break
+      case 'ipv6':
+        validateIpv6(value)
+        break
+      case 'hostname':
+        validateHostname(value)
+        break
+    }
+    return []
+  } catch (err) {
+    return [{
+      path,
+      property: 'format',
+      message: translate(err.message)
+    }]
+  }
+}

package/tests/Dockerfile

@@ -0,0 +1,3 @@
+FROM node:12
+
+ENV PATH=/repo/node_modules/.bin:$PATH

package/tests/README.md

@@ -0,0 +1,48 @@
+# Testing
+
+## With Docker
+
+Configure Docker environment:
+
+```
+cp .env-dist .env
+```
+
+Install `node_modules` and start stack:
+```
+docker-compose run --rm node npm install
+docker-compose up -d
+```
+
+- Webserver URL: http://127.0.0.1:9100/
+- Selenium Firefox Browser URL: vnc://127.0.0.1:9059/
+- Selenium Chrome Browser URL: vnc://127.0.0.1:9060/
+
+```
+docker-compose exec node bash
+
+$ npm run build
+$ cd tests/codeceptjs
+$ codeceptjs run
+```
+
+Tests whose `Scenario` string contains the tag `@optional` will be ignored by the automated build process.
+
+
+### Development
+
+To watch changes, eg. while development or fixing code you can run
+
+```
+docker-compose run --rm node bash
+
+$ npm start
+```
+
+which effectively runs the Webpack development server in your project
+
+
+### References
+
+- CodeceptJS - https://codecept.io
+- Webdriver configuration - http://webdriver.io/guide/getstarted/configuration.html

package/tests/codeceptjs/codecept.json

@@ -0,0 +1,42 @@
+{
+  "tests": "./**/*_test.js",
+  "timeout": 10000,
+  "output": "./output",
+  "plugins": {
+    "pauseOnFail": {}
+  },
+  "helpers": {
+    "WebDriver": {
+      "url": "http://node:9001/tests/pages/",
+      "browser": "firefox",
+      "restart": false,
+      "host": "firefox",
+      "smartWait": 5000
+    },
+    "customHelpers": {
+      "require": "./../../config/codeceptjs_helpers.js"
+    }
+  },
+  "include": {
+    "I": "./steps_file.js"
+  },
+  "bootstrap": false,
+  "mocha": {},
+  "name": "codeceptjs",
+  "multiple": {
+    "parallel": {
+      "chunks": 2
+    },
+    "basic": {
+      "browsers": [
+        "firefox",
+        {
+          "url": "http://node:9001/tests/pages/",
+          "browser": "chrome",
+          "host": "chrome",
+          "restart": false
+        }
+      ]
+    }
+  }
+}

package/tests/codeceptjs/constrains/if-then-else_test.js

@@ -0,0 +1,143 @@
+/* global Feature Scenario */
+
+Feature('if-then-else')
+
+Scenario('validate agaist allOf of if schemas @if-then-else', async ({ I }) => {
+  I.amOnPage('if-then-else-allOf.html')
+  I.waitForElement('.je-ready')
+
+  I.selectOption('[name="root[country]"]', 'United States of America')
+  I.waitForText('Value must match the pattern [0-9]{5}(-[0-9]{4})?.')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.waitForText('Value must match the pattern [A-Z][0-9][A-Z] [0-9][A-Z][0-9].')
+
+  I.selectOption('[name="root[country]"]', 'Netherlands')
+  I.waitForText('Value must match the pattern [0-9]{4} [A-Z]{2}.')
+
+  I.fillField('#value', JSON.stringify({
+    street_address: '1600 Pennsylvania Avenue NW',
+    country: 'United States of America',
+    postal_code: '20500'
+  }))
+  I.click('#set-value')
+  I.dontSee('.invalid-feedback')
+
+  I.fillField('#value', JSON.stringify({
+    street_address: '1600 Pennsylvania Avenue NW',
+    postal_code: '20500'
+  }))
+  I.click('#set-value')
+  I.dontSee('.invalid-feedback')
+
+  I.fillField('#value', JSON.stringify({
+    street_address: '24 Sussex Drive',
+    country: 'Canada',
+    postal_code: 'K1M 1M4'
+  }))
+  I.click('#set-value')
+  I.dontSee('.invalid-feedback')
+
+  I.fillField('#value', JSON.stringify({
+    street_address: 'Adriaan Goekooplaan',
+    country: 'Netherlands',
+    postal_code: '2517 JX'
+  }))
+  I.click('#set-value')
+  I.dontSee('.invalid-feedback')
+
+  I.fillField('#value', JSON.stringify({
+    street_address: '24 Sussex Drive',
+    country: 'Canada',
+    postal_code: '10000'
+  }))
+  I.click('#set-value')
+  I.waitForText('Value must match the pattern [A-Z][0-9][A-Z] [0-9][A-Z][0-9].')
+  I.waitForElement('.invalid-feedback')
+
+  I.fillField('#value', JSON.stringify({
+    street_address: '1600 Pennsylvania Avenue NW',
+    postal_code: 'K1M 1M4'
+  }))
+  I.click('#set-value')
+  I.waitForElement('.invalid-feedback')
+})
+
+Scenario('validate agaist if-then-else @if-then-else', async ({ I }) => {
+  I.amOnPage('if-then-else.html')
+  I.waitForElement('.je-ready')
+
+  I.selectOption('[name="root[country]"]', 'America')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.waitForElement('.invalid-feedback')
+  I.waitForText('Value must match the pattern [0-9]{5}(-[0-9]{4})?.')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.waitForElement('.invalid-feedback')
+  I.waitForText('Value must match the pattern [A-Z][0-9][A-Z] [0-9][A-Z][0-9].')
+
+  I.selectOption('[name="root[country]"]', 'America')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+})
+
+Scenario('validate agaist if-then @if-then-else', async ({ I }) => {
+  I.amOnPage('if-then.html')
+  I.waitForElement('.je-ready')
+
+  I.selectOption('[name="root[country]"]', 'America')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.waitForElement('.invalid-feedback')
+  I.waitForText('Value must match the pattern [0-9]{5}(-[0-9]{4})?.')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'America')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+})
+
+Scenario('validate agaist if-else @if-then-else', async ({ I }) => {
+  I.amOnPage('if-else.html')
+  I.waitForElement('.je-ready')
+
+  I.selectOption('[name="root[country]"]', 'America')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.waitForElement('.invalid-feedback')
+  I.waitForText('Value must match the pattern [A-Z][0-9][A-Z] [0-9][A-Z][0-9].')
+
+  I.selectOption('[name="root[country]"]', 'America')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+})

package/tests/codeceptjs/core_test.js

@@ -0,0 +1,217 @@
+/* global Feature Scenario */
+
+var assert = require('assert')
+
+Feature('core')
+
+Scenario('should Disable and enable entire form', async (I) => {
+  I.amOnPage('core.html')
+  I.seeElement('[data-schemapath="root.name"] input')
+  I.seeElement('[data-schemapath="root.age"] input')
+  I.click('disable')
+  I.seeElement('[data-schemapath="root.age"] input:disabled')
+  I.seeElement('[data-schemapath="root.name"] input:disabled')
+  I.click('enable')
+  I.seeElement('[data-schemapath="root.age"] input:not(:disabled)')
+  I.seeElement('[data-schemapath="root.name"] input:not(:disabled)')
+})
+
+Scenario('should Disable and enable part of the form', async (I) => {
+  I.amOnPage('core.html')
+  I.seeElement('[data-schemapath="root.name"] input')
+  I.seeElement('[data-schemapath="root.age"] input')
+  I.click('disable part')
+  I.seeElement('[data-schemapath="root.name"] input:disabled')
+  I.click('enable part')
+  I.seeElement('[data-schemapath="root.name"] input:not(:disabled)')
+})
+
+Scenario('should destroy', async (I) => {
+  I.amOnPage('core.html')
+  I.seeElement('[data-schemapath="root"]')
+  I.click('destroy')
+  I.dontSeeElement('[data-schemapath="root"]')
+})
+
+Scenario('should set and get form value', async (I) => {
+  I.amOnPage('core.html')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.value'), '{"age":18,"name":"Francesco Avizzano"}')
+  I.click('.set-value')
+  I.click('.get-value')
+  assert.equal(await I.grabValueFrom('.value'), '{"age":40,"name":"John Smith"}')
+})
+
+Scenario('should set and get individual values', async (I) => {
+  I.amOnPage('core.html')
+  I.click('.get-individual-value')
+  assert.equal(await I.grabValueFrom('.value'), '"Francesco Avizzano"')
+  I.click('.set-individual-value')
+  assert.equal(await I.grabValueFrom('.value'), '"john kaminski"')
+})
+
+Scenario('should watch a specific field for changes', async (I) => {
+  I.amOnPage('core.html')
+  I.dontSeeElement('.name-changed')
+  I.click('.set-individual-value')
+  I.seeElement('.name-changed')
+})
+
+Scenario('should watch form for changes', async (I) => {
+  I.amOnPage('core.html')
+  I.dontSeeElement('.form-changed')
+  I.click('.set-value')
+  I.seeElement('.form-changed')
+})
+
+Scenario('should change the form if form_name_root option is set @core', async (I) => {
+  I.amOnPage('form-name.html')
+  I.see('Property must be set.', '.invalid-feedback')
+  I.seeElement('[data-schemapath="form_1"]')
+  I.seeElement('[data-schemapath="form_2"]')
+  I.seeElement('[name="form_1"]')
+  I.seeElement('[name="form_2"]')
+  I.seeElement('[id="form_1[0]"]')
+  I.seeElement('[id="form_1[1]"]')
+  I.seeElement('[id="form_1[2]"]')
+  I.seeElement('[id="form_2[0]"]')
+  I.seeElement('[id="form_2[1]"]')
+  I.seeElement('[id="form_2[2]"]')
+  I.seeElement('[for="form_1[0]"]')
+  I.seeElement('[for="form_1[1]"]')
+  I.seeElement('[for="form_1[2]"]')
+  I.seeElement('[for="form_2[0]"]')
+  I.seeElement('[for="form_2[1]"]')
+  I.seeElement('[for="form_2[2]"]')
+  I.click('[for="form_1[0]"]')
+  I.click('[for="form_2[1]"]')
+  I.dontSee('Property must be set.', '.invalid-feedback')
+  I.click('#get-value-form-1')
+  assert.equal(await I.grabValueFrom('#value-form-1'), '"yes"')
+  I.click('#get-value-form-2')
+  assert.equal(await I.grabValueFrom('#value-form-2'), '"no"')
+})
+
+Scenario('should validate against oneOf schemas and display single oneOf and editors error messages @core @oneof', async (I) => {
+  I.amOnPage('oneof.html')
+  I.waitForText('Object is missing the required property \'p4\'', '.alert-danger')
+  I.waitForText('Value must validate against exactly one of the provided schemas. It currently validates against 0 of the schemas.', '.alert-danger')
+  I.waitForText('Object is missing the required property \'p1\'', '.alert-danger')
+  I.waitForText('Object is missing the required property \'p2\'', '.alert-danger')
+  I.waitForText('Property must be set.', '[data-schemapath="root.p4"] .invalid-feedback')
+  I.waitForText('Property must be set.', '[data-schemapath="root.p5.p1"] .invalid-feedback')
+  I.waitForText('Property must be set.', '[data-schemapath="root.p5.p2"] .invalid-feedback')
+  I.fillField('root[p4]', 'to')
+  I.fillField('root[p5][p1]', 'to')
+  I.fillField('root[p5][p2]', 'to')
+  I.click('Get Value')
+  I.wait(3)
+  I.dontSee('Object is missing the required property \'p4\'', '.alert-danger')
+  I.dontSee('Object is missing the required property \'p1\'', '.alert-danger')
+  I.dontSee('Object is missing the required property \'p2\'', '.alert-danger')
+  I.waitForText('Value must be at least 4 characters long.', '[data-schemapath="root.p4"] .invalid-feedback')
+  I.waitForText('Value must be at least 4 characters long.', '[data-schemapath="root.p5.p1"] .invalid-feedback')
+  I.waitForText('Value must be at least 4 characters long.', '[data-schemapath="root.p5.p2"] .invalid-feedback')
+  I.fillField('root[p4]', 'todo')
+  I.fillField('root[p5][p1]', 'todo')
+  I.fillField('root[p5][p2]', 'todo')
+  I.click('Get Value')
+  I.wait(3)
+  I.dontSee('Value must be at least 4 characters long.', '[data-schemapath="root.p4"] .invalid-feedback')
+  I.dontSee('Value must be at least 4 characters long.', '[data-schemapath="root.p5.p1"] .invalid-feedback')
+  I.dontSee('Value must be at least 4 characters long.', '[data-schemapath="root.p5.p2"] .invalid-feedback')
+})
+
+Scenario('should validate against anyOf schemas and display single anyOf and editors error messages @core @anyof', async (I) => {
+  I.amOnPage('anyof.html')
+  I.dontSeeElement('.alert-danger')
+  I.selectOption('.je-switcher', 'Value, number')
+  I.dontSeeElement('.alert-danger')
+  I.selectOption('.je-switcher', 'Value, null')
+  I.dontSeeElement('.alert-danger')
+  I.selectOption('.je-switcher', 'Value, string')
+  I.waitForText('Object is missing the required property \'age\'', '.alert-danger')
+  I.waitForText('Property must be set.', '[data-schemapath="root.age"] .invalid-feedback')
+  I.fillField('root[age]', 'to')
+  I.click('Get Value')
+  I.wait(3)
+  I.dontSee('Object is missing the required property \'age\'', '.alert-danger')
+  I.dontSee('Property must be set.', '[data-schemapath="root.age"] .invalid-feedback')
+})
+
+Scenario('should display anyOf and oneOf error messages in the correct places @848', async (I) => {
+  I.amOnPage('issues/issue-gh-848.html')
+  I.selectOption('.je-switcher', 'Value, string')
+  I.waitForElement('[data-schemapath="root.list"] .invalid-feedback', 5)
+  I.dontSeeElement('[data-schemapath="root.list_group"] .invalid-feedback', 5)
+})
+
+Scenario('should validate against oneOf schemas and display single oneOf and editors error messages @core @translate-property', async (I) => {
+  I.amOnPage('translate-property.html?lang=en')
+  I.waitForText('Object Title')
+  I.waitForText('Object Description')
+  I.waitForText('Boolean Title')
+  I.waitForText('Boolean Description')
+  I.seeInSource('Boolean Info Text')
+  I.waitForText('String Title')
+  I.waitForText('String Description')
+  I.seeInSource('String Info Text')
+  I.waitForText('String Radio Title')
+  I.waitForText('String Radio Description')
+  I.seeInSource('String Radio Info Text')
+  I.waitForText('Integer Title')
+  I.waitForText('Integer Description')
+  I.seeInSource('Integer Info Text')
+  I.waitForText('Number Title')
+  I.waitForText('Number Description')
+  I.seeInSource('Number Info Text')
+  I.waitForText('Array Title')
+  I.waitForText('Array Description')
+  I.seeInSource('Array Info Text')
+  I.waitForText('Array Tabs Title')
+  I.waitForText('Array Tabs Description')
+  I.seeInSource('Array Tabs Info Text')
+  I.waitForText('Array Table Title')
+  I.waitForText('Array Table Description')
+  I.seeInSource('Array Table Info Text')
+  I.waitForText('Signature Title')
+  I.waitForText('Signature Description')
+  I.seeInSource('Signature Info Text')
+  I.waitForText('Rating Title')
+  I.waitForText('Rating Description')
+  I.seeInSource('Rating Info Text')
+
+  I.amOnPage('translate-property.html?lang=de')
+  I.waitForText('Object Title (but in german)')
+  I.waitForText('Object Description (but in german)')
+  I.waitForText('Boolean Title (but in german)')
+  I.waitForText('Boolean Description (but in german)')
+  I.seeInSource('Boolean Info Text (but in german)')
+  I.waitForText('String Title (but in german)')
+  I.waitForText('String Description (but in german)')
+  I.seeInSource('String Info Text (but in german)')
+  I.waitForText('String Radio Title (but in german)')
+  I.waitForText('String Radio Description (but in german)')
+  I.seeInSource('String Radio Info Text (but in german)')
+  I.waitForText('Integer Title (but in german)')
+  I.waitForText('Integer Description (but in german)')
+  I.seeInSource('Integer Info Text (but in german)')
+  I.waitForText('Number Title (but in german)')
+  I.waitForText('Number Description (but in german)')
+  I.seeInSource('Number Info Text (but in german)')
+  I.waitForText('Array Title (but in german)')
+  I.waitForText('Array Description (but in german)')
+  I.seeInSource('Array Info Text (but in german)')
+  I.waitForText('Array Tabs Title (but in german)')
+  I.waitForText('Array Tabs Description (but in german)')
+  I.seeInSource('Array Tabs Info Text (but in german)')
+  I.waitForText('Array Table Title (but in german)')
+  I.waitForText('Array Table Description (but in german)')
+  I.seeInSource('Array Table Info Text (but in german)')
+  I.waitForText('Signature Title (but in german)')
+  I.waitForText('Signature Description (but in german)')
+  I.seeInSource('Signature Info Text (but in german)')
+  I.waitForText('Rating Title (but in german)')
+  I.waitForText('Rating Description (but in german)')
+  I.seeInSource('Rating Info Text (but in german)')
+})

package/tests/codeceptjs/editors/advanced_test.js

@@ -0,0 +1,13 @@
+
+Feature('Advanced Editor');
+
+Scenario('test validation & delete', (I) => {
+    I.amOnPage('advanced.html');
+    I.seeElement('#valid_indicator');
+    I.see('valid', '#valid_indicator');
+    I.fillField('root[0][location][city]', 'Stuttgart');
+    I.waitForValue("[name='root[0][location][city]']", 'Stuttgart');
+    I.amAcceptingPopups();
+    I.click('.json-editor-btntype-deletelast');
+    I.acceptPopup();
+});

package/tests/codeceptjs/editors/array_any_of_test.js

@@ -0,0 +1,50 @@
+var assert = require('assert');
+
+Feature('anyof in array');
+
+Scenario('should have correct initial value', async (I) => {
+  I.amOnPage('array-anyof.html');
+  I.click('.get-value');
+  assert.equal(await I.grabValueFrom('.debug'), '{"correct":"","items":[]}');
+});
+
+Scenario('should show errors @optional', async (I) => {
+  I.amOnPage('array-anyof.html');
+  I.seeElement('[data-schemapath="root"]');
+  I.seeElement('[data-schemapath="root.items"]');
+
+  I.click('.get-value');
+  value = await I.grabValueFrom('.debug');
+  assert.equal(value, '{"correct":"","items":[]}');
+
+  I.fillField('root[correct]', 'a');
+  assert.equal(await I.dontSee('Value must match the pattern ^[a-zA-Z0-9_]+$.'), true, 'should show warning');
+
+  I.fillField('root[correct]', 'a!');
+  assert.equal(await I.seeInField('root[correct]', 'a!'), true, 'fillField failed');
+  assert.equal(await I.see('Value must match the pattern ^[a-zA-Z0-9_]+$.'), true, 'should show warning');
+
+  I.clearField('root[correct]');
+  I.seeInField('root[correct]', '');
+  assert.equal(await I.see('Value must match the pattern ^[a-zA-Z0-9_]+$.'), true, "should show warning");
+
+  I.fillField('root[correct]', 'a');
+  I.dontSee('Value must match the pattern ^[a-zA-Z0-9_]+$.');
+
+  I.click('.json-editor-btntype-add');
+  I.click('.get-value');
+  value = await I.grabValueFrom('.debug');
+  assert.equal(value, '{"correct":"a","items":[{"handler":"aaa","id":"","___a":""}]}');
+
+  I.fillField('root[items][0][id]', 'a');
+  I.dontSee('Value must match the pattern ^[a-zA-Z0-9_]+$.');
+
+  I.clearField('root[items][0][id]');
+  I.seeInField('root[items][0][id]', '');
+  // todo still not work
+  assert.equal(await I.see('Value must match the pattern ^[a-zA-Z0-9_]+$.'), true, 'should show warning');
+
+  I.fillField('root[items][0][id]', 'a!');
+  I.see('Value must match the pattern ^[a-zA-Z0-9_]+$.');
+
+});