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

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:18
+
+ENV PATH=/repo/node_modules/.bin:$PATH

package/tests/README.md

@@ -2,27 +2,47 @@
 
 ## With Docker
 
-Go to the `tests/` directory and install node modules, start test application with node (webserver), Firefox (browser) and CodeceptJS (testing).
+Configure Docker environment:
 
 ```
-cd tests
+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:9001/
+- 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 run --rm codeceptjs bash
+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
+- Webdriver configuration - http://webdriver.io/guide/getstarted/configuration.html

package/tests/codeceptjs/codecept.json

@@ -1,13 +1,20 @@
 {
   "tests": "./**/*_test.js",
-  "timeout": 10000,
+  "timeout": 30,
   "output": "./output",
+  "plugins": {
+    "pauseOnFail": {}
+  },
   "helpers": {
     "WebDriver": {
       "url": "http://node:9001/tests/pages/",
       "browser": "firefox",
+      "restart": false,
       "host": "firefox",
-      "smartWait": 5000
+      "smartWait": 10000
+    },
+    "customHelpers": {
+      "require": "./../../config/codeceptjs_helpers.js"
     }
   },
   "include": {

package/tests/codeceptjs/constrains/contains_test.js

@@ -0,0 +1,37 @@
+/* global Feature Scenario */
+
+Feature('contains')
+
+Scenario('should display contains validation errors @contains', ({ I }) => {
+  I.amOnPage('contains.html')
+  I.waitForElement('.je-ready')
+  I.waitForText('No items match contains')
+  I.click('.json-editor-btn-add')
+  I.waitForInvisible('.alert-danger')
+  I.dontSee('No items match contains')
+})
+
+Scenario('should display @minContains validation errors @contains', ({ I }) => {
+  I.amOnPage('minContains.html')
+  I.waitForElement('.je-ready')
+  I.waitForText('Contains match count 0 is less than minimum contains count of 2')
+  I.click('.json-editor-btn-add')
+  I.waitForText('Contains match count 1 is less than minimum contains count of 2')
+  I.click('.json-editor-btn-add')
+  I.waitForInvisible('.alert-danger')
+  I.dontSee('No items match contains')
+  I.dontSee('minimum contains count of 2')
+})
+
+Scenario('should display @maxContains validation errors @contains', ({ I }) => {
+  I.amOnPage('maxContains.html')
+  I.waitForElement('.je-ready')
+  I.waitForText('No items match contains')
+  I.click('.json-editor-btn-add')
+  I.waitForInvisible('.alert-danger')
+  I.dontSee('No items match contains')
+  I.click('.json-editor-btn-add')
+  I.dontSee('No items match contains')
+  I.click('.json-editor-btn-add')
+  I.waitForText('Contains match count 3 exceeds maximum contains count of 2')
+})

package/tests/codeceptjs/constrains/dependentRequired_test.js

@@ -0,0 +1,33 @@
+/* global Feature Scenario */
+
+Feature('dependentRequired')
+
+Scenario('@dependentRequired should display validation errors', ({ I }) => {
+  I.amOnPage('dependentRequired.html')
+  I.waitForElement('.je-ready')
+  I.waitForValue('#textarea-value', '{"name":""}')
+
+  I.click('[data-schemapath="root.credit_card"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","credit_card":0,"billing_address_1":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.billing_address_1"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","credit_card":0,"billing_address_1":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.billing_address_2"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","credit_card":0,"billing_address_1":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.credit_card"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","billing_address_1":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.billing_address_1"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":"","billing_address_2":""}')
+  I.waitForText('Must have the required properties: billing_address_3')
+
+  I.click('[data-schemapath="root.billing_address_2"] .json-editor-opt-in')
+  I.waitForValue('#textarea-value', '{"name":""}')
+  I.dontSee('Must have the required properties: billing_address_3')
+})

package/tests/codeceptjs/constrains/dependentSchemas_test.js

@@ -0,0 +1,16 @@
+/* global Feature Scenario */
+
+Feature('dependentSchemas')
+
+Scenario('@dependentSchemas should display validation errors', ({ I }) => {
+  I.amOnPage('dependentSchemas.html')
+  I.waitForElement('.je-ready')
+  I.dontSee('Object is missing the required property \'billing_address\'')
+  I.click('[data-schemapath="root.credit_card"] .json-editor-opt-in')
+  I.waitForText('Object is missing the required property \'billing_address\'')
+  I.click('[data-schemapath="root.billing_address"] .json-editor-opt-in')
+  I.waitForInvisible('.alert-danger')
+  I.dontSee('Object is missing the required property \'billing_address\'')
+  I.click('[data-schemapath="root.credit_card"] .json-editor-opt-in')
+  I.dontSee('Object is missing the required property \'billing_address\'')
+})

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

@@ -0,0 +1,186 @@
+/* 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.waitForElement('[name="root[postal_code]"]')
+  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.waitForElement('[name="root[postal_code]"]')
+  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.waitForElement('[name="root[postal_code]"]')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.waitForElement('[name="root[postal_code]"]')
+  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.waitForElement('[name="root[postal_code]"]')
+  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.waitForElement('[name="root[postal_code]"]')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'America')
+  I.waitForElement('[name="root[postal_code]"]')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.waitForElement('[name="root[postal_code]"]')
+  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.waitForElement('[name="root[postal_code]"]')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.waitForElement('[name="root[postal_code]"]')
+  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.waitForElement('[name="root[postal_code]"]')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.waitForElement('[name="root[postal_code]"]')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+})
+
+Scenario('validate agaist if-then-else when disabled fields are present in fields @if-then-else', async ({ I }) => {
+  I.amOnPage('if-then-else-disable-fields.html')
+  I.waitForElement('.je-ready')
+
+  I.selectOption('[name="root[country]"]', 'America')
+  I.waitForElement('[name="root[postal_code]"]')
+  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.waitForElement('[name="root[postal_code]"]')
+  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.waitForElement('[name="root[postal_code]"]')
+  I.fillField('[name="root[postal_code]"]', '10000')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+
+  I.selectOption('[name="root[country]"]', 'Canada')
+  I.waitForElement('[name="root[postal_code]"]')
+  I.fillField('[name="root[postal_code]"]', 'K1M 1M4')
+  I.pressKey('Tab')
+  I.dontSee('.invalid-feedback')
+})