@json-editor/json-editor 2.9.1 → 2.10.0

package/tests/codeceptjs/issues/issue-gh-812_test.js

@@ -0,0 +1,25 @@
+/* global Feature Scenario */
+
+Feature('issues')
+
+Scenario('GitHub issue 812 should remain fixed @issue-812', async ({ I }) => {
+  I.amOnPage('issues/issue-gh-812.html')
+  I.click('.get-value')
+  I.waitForValue('.debug', '{"students":[{"name":"AAA","sessions":[{"student_name":"AAA","minutes":15},{"student_name":"AAA","minutes":15}]},{"name":"BBB","sessions":[{"student_name":"BBB","minutes":20}]},{"name":"CCC","sessions":[{"student_name":"CCC","minutes":10}]}]}')
+
+  I.amAcceptingPopups()
+  I.click('//*[@id="root.students.0"]/span[2]/button[contains(@class, "json-editor-btn-delete") and @data-i="0"]')
+  I.retry({ retries: 5, minTimeout: 500 }).seeInPopup('Are you sure you want to remove this item?')
+  I.acceptPopup()
+
+  I.click('.get-value')
+  I.waitForValue('.debug', '{"students":[{"name":"BBB","sessions":[{"student_name":"BBB","minutes":20}]},{"name":"CCC","sessions":[{"student_name":"CCC","minutes":10}]}]}')
+
+  I.amAcceptingPopups()
+  I.click('//*[@id="root.students.0"]/span[2]/button[contains(@class, "json-editor-btn-delete") and @data-i="0"]')
+  I.retry({ retries: 5, minTimeout: 500 }).seeInPopup('Are you sure you want to remove this item?')
+  I.acceptPopup()
+
+  I.click('.get-value')
+  I.waitForValue('.debug', '{"students":[{"name":"CCC","sessions":[{"student_name":"CCC","minutes":10}]}]}')
+})

package/tests/codeceptjs/meta-schema_test.js

@@ -1,6 +1,6 @@
 /* global Feature Scenario */
+
 const { DEFAULT_WAIT_TIME } = require('./test-config')
-var assert = require('assert')
 
 Feature('meta-schema')
 
@@ -9,7 +9,7 @@ Scenario('work with json-schema meta-schema @meta-schema-core', async ({ I }) =>
   I.waitForElement('.je-ready')
 
   I.selectOption('.je-switcher', 'Object')
-  assert.equal(await I.grabValueFrom('#value'), '{"properties":{},"title":"","type":"object"}')
+  I.waitForValue('#value', '{"properties":{},"title":"","type":"object"}')
   I.click('.json-editor-btn-edit_properties')
   I.waitForText('type', '.property-selector')
   I.waitForText('title', '.property-selector')
@@ -37,22 +37,22 @@ Scenario('work with json-schema meta-schema @meta-schema-core', async ({ I }) =>
   I.waitForText('format', '.property-selector')
 
   I.selectOption('.je-switcher', 'Array')
-  assert.equal(await I.grabValueFrom('#value'), '{"items":{"properties":{},"title":"","type":"object"},"title":"","type":"array"}')
+  I.waitForValue('#value', '{"items":{"properties":{},"title":"","type":"object"},"title":"","type":"array"}')
 
   I.selectOption('.je-switcher', 'String')
-  assert.equal(await I.grabValueFrom('#value'), '{"title":"","type":"string"}')
+  I.waitForValue('#value', '{"title":"","type":"string"}')
 
   I.selectOption('.je-switcher', 'Number')
-  assert.equal(await I.grabValueFrom('#value'), '{"title":"","type":"number"}')
+  I.waitForValue('#value', '{"title":"","type":"number"}')
 
   I.selectOption('.je-switcher', 'Integer')
-  assert.equal(await I.grabValueFrom('#value'), '{"title":"","type":"integer"}')
+  I.waitForValue('#value', '{"title":"","type":"integer"}')
 
   I.selectOption('.je-switcher', 'Boolean')
-  assert.equal(await I.grabValueFrom('#value'), '{"title":"","type":"boolean"}')
+  I.waitForValue('#value', '{"title":"","type":"boolean"}')
 
   I.selectOption('.je-switcher', 'Null')
-  assert.equal(await I.grabValueFrom('#value'), '{"title":"","type":"null"}')
+  I.waitForValue('#value', '{"title":"","type":"null"}')
 })
 
 // https://github.com/json-editor/json-editor/issues/823
@@ -71,14 +71,14 @@ Scenario('work with json-schema meta-schema @meta-schema', async ({ I }) => {
 })
 
 // https://github.com/json-editor/json-editor/issues/1233
-Scenario('passing meta-schema example @meta-schema', async ({ I }) => {
+Scenario('passing meta-schema example @meta-schema @schemaloader', async ({ I }) => {
   I.amOnPage('issues/issue-gh-1233-passing.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
   I.waitForElement('[name="root[name]"]', DEFAULT_WAIT_TIME)
 })
 
 // https://github.com/json-editor/json-editor/issues/1233
-Scenario('failing meta-schema example  @meta-schema @optional', async ({ I }) => {
+Scenario('failing meta-schema example @meta-schema @schemaloader', async ({ I }) => {
   I.amOnPage('issues/issue-gh-1233-failing.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
   I.waitForElement('[name="root[name]"]', DEFAULT_WAIT_TIME)

package/tests/codeceptjs/schemaloader_test.js

@@ -1,14 +1,14 @@
-var assert = require('assert');
+/* global Feature Scenario */
+
 const { DEFAULT_WAIT_TIME } = require('./test-config')
 
-Feature('schemaloader');
+Feature('schemaloader')
 
 Scenario('resolving nested external URNs', async ({ I }) => {
-  I.amOnPage('urn.html');
-  I.waitForElement('[data-schemapath="root"] h3', DEFAULT_WAIT_TIME);
+  I.amOnPage('urn.html')
+  I.waitForElement('[data-schemapath="root"] h3', DEFAULT_WAIT_TIME)
   I.seeElementInDOM('[data-schemapath="root.fname"]')
   I.seeElementInDOM('[data-schemapath="root.lname"]')
-
   I.click('.get-value')
-  assert.equal(await I.grabValueFrom('.value'), '{"fname":"John","lname":"Doe"}');
-});
+  I.waitForValue('.value', '{"fname":"John","lname":"Doe"}')
+})

package/tests/codeceptjs/themes_test.js

@@ -256,6 +256,37 @@ Scenario('It should hide button Labels: null | bootstrap3', async ({ I }) => {
   I.seeElementInDOM('i.glyphicon.glyphicon-copy')
   I.seeElementInDOM('i.glyphicon.glyphicon-list')
 })
+
+Scenario('It should hide button Labels: null | bootstrap icons @themes @iconlib', async ({ I }) => {
+  I.amOnPage('themes.html')
+  I.selectOption('iconlib', 'bootstrap')
+  I.waitForText('Themes Test Page')
+  I.dontSee('Collapse')
+  I.dontSee('Edit JSON')
+  I.dontSee('Object Properties')
+  I.dontSee('Delete item')
+  I.dontSee('Delete Last item')
+  I.dontSee('Delete All')
+  I.dontSee('Move down')
+  I.dontSee('Move up')
+
+  I.click('Collapse')
+  I.seeElementInDOM('i.bi.bi-chevron-down')
+  I.seeElementInDOM('i.bi.bi-chevron-right')
+  I.seeElementInDOM('i.bi.bi-trash')
+  I.seeElementInDOM('i.bi.bi-pencil')
+  I.seeElementInDOM('i.bi.bi-plus')
+  I.seeElementInDOM('i.bi.bi-dash')
+  I.seeElementInDOM('i.bi.bi-x-circle')
+  I.seeElementInDOM('i.bi.bi-save')
+  I.seeElementInDOM('i.bi.bi-arrow-up')
+  I.seeElementInDOM('i.bi.bi-arrow-right')
+  I.seeElementInDOM('i.bi.bi-arrow-down')
+  I.seeElementInDOM('i.bi.bi-arrow-left')
+  I.seeElementInDOM('i.bi.bi-clipboard')
+  I.seeElementInDOM('i.bi.bi-list-ul')
+})
+
 /*
 Scenario('It should hide button Labels: null | fontawesome3', async (I) => {
   I.amOnPage('themes.html')

package/tests/pages/autocomplete.html

@@ -5,6 +5,7 @@
     <title>Autocomplete</title>
     <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
     <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+    <link rel="stylesheet" href="https://unpkg.com/@trevoreyre/autocomplete-js/dist/style.css"/>
     <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
     <script src="../../dist/jsoneditor.js"></script>
 </head>

package/tests/pages/contains.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>contains</title>
+    <script src="../../dist/jsoneditor.js"></script>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+    <div id='editor-container'></div>
+</div>
+
+<script>
+  var editorContainer = document.querySelector('#editor-container')
+  var schema = {
+    'title': 'contains',
+    "type": "array",
+    "contains": {
+      "type": "number"
+    },
+    "items": {
+      "type": "number"
+    }
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome',
+    show_errors: 'always'
+  })
+</script>
+
+</body>
+</html>

package/tests/pages/dependentSchemas.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>dependentSchemas</title>
+    <script src="../../dist/jsoneditor.js"></script>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+    <div id='editor-container'></div>
+</div>
+
+<script>
+  var editorContainer = document.querySelector('#editor-container')
+  var schema = {
+    "type": "object",
+    "properties": {
+      "credit_card": {
+        "type": "number"
+      },
+      "billing_address": {
+        "type": "string"
+      }
+    },
+    "dependentSchemas": {
+      "credit_card": {
+        "properties": {
+          "billing_address": {
+            "type": "string"
+          }
+        },
+        "required": [
+          "billing_address"
+        ]
+      }
+    }
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome',
+    show_errors: 'always',
+    show_opt_in: true
+  })
+</script>
+
+</body>
+</html>

package/tests/pages/if-else.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>If-Else</title>
+    <script src="../../dist/jsoneditor.js"></script>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+    <div id='editor-container'></div>
+</div>
+
+<script>
+  var editorContainer = document.querySelector('#editor-container')
+  var schema = {
+    'type': 'object',
+    'properties': {
+      'country': {
+        'type': 'string',
+        'default': 'America',
+        'enum': [
+          'America',
+          'Canada'
+        ]
+      },
+      'postal_code': {
+        'type': 'string'
+      }
+    },
+    'if': {
+      'properties': {
+        'country': {
+          'const': 'America'
+        }
+      }
+    },
+    'else': {
+      'properties': {
+        'postal_code': {
+          'pattern': '[A-Z][0-9][A-Z] [0-9][A-Z][0-9]'
+        }
+      }
+    }
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome'
+  })
+</script>
+
+</body>
+</html>

package/tests/pages/if-then-else-allOf.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>If-Then-Else-UI</title>
+    <script src="../../dist/jsoneditor.js"></script>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+    <div id='editor-container'></div>
+
+    <div class="form-group">
+        <label for="value">Value</label>
+        <textarea class="form-control" id="value" cols="30" rows="10"></textarea>
+        <button id="set-value">set value</button>
+    </div>
+</div>
+
+<script>
+  var editorContainer = document.querySelector('#editor-container')
+  var value = document.querySelector('#value')
+  var setValue = document.querySelector('#set-value')
+  var schema = {
+    "type": "object",
+    "required": [
+      "country"
+    ],
+    "properties": {
+      "country": {
+        "type": "string",
+        "default": "United States of America",
+        "enum": [
+          "United States of America",
+          "Canada",
+          "Netherlands"
+        ]
+      },
+      "postal_code": {
+        "type": "string"
+      },
+      "street_address": {
+        "type": "string"
+      }
+    },
+    "allOf": [
+      {
+        "if": {
+          "properties": {
+            "country": {
+              "const": "United States of America"
+            }
+          }
+        },
+        "then": {
+          "properties": {
+            "postal_code": {
+              "pattern": "[0-9]{5}(-[0-9]{4})?"
+            }
+          }
+        }
+      },
+      {
+        "if": {
+          "properties": {
+            "country": {
+              "const": "Canada"
+            }
+          }
+        },
+        "then": {
+          "properties": {
+            "postal_code": {
+              "pattern": "[A-Z][0-9][A-Z] [0-9][A-Z][0-9]"
+            }
+          }
+        }
+      },
+      {
+        "if": {
+          "properties": {
+            "country": {
+              "const": "Netherlands"
+            }
+          }
+        },
+        "then": {
+          "properties": {
+            "postal_code": {
+              "pattern": "[0-9]{4} [A-Z]{2}"
+            }
+          }
+        }
+      }
+    ]
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome',
+    show_errors: 'always'
+  })
+
+  editor.on('change', function () {
+    value.value = JSON.stringify(editor.getValue())
+  })
+
+  setValue.addEventListener('click', function () {
+    editor.setValue(JSON.parse(value.value))
+  })
+</script>
+
+</body>
+</html>

package/tests/pages/if-then-else.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>If-Then-Else</title>
+    <script src="../../dist/jsoneditor.js"></script>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+    <div id='editor-container'></div>
+</div>
+
+<script>
+  var editorContainer = document.querySelector('#editor-container')
+  var schema = {
+    'type': 'object',
+    'properties': {
+      'country': {
+        'type': 'string',
+        'default': 'America',
+        'enum': [
+          'America',
+          'Canada'
+        ]
+      },
+      'postal_code': {
+        'type': 'string'
+      }
+    },
+    'if': {
+      'properties': {
+        'country': {
+          'const': 'America'
+        }
+      }
+    },
+    'then': {
+      'properties': {
+        'postal_code': {
+          'pattern': '[0-9]{5}(-[0-9]{4})?'
+        }
+      }
+    },
+    'else': {
+      'properties': {
+        'postal_code': {
+          'pattern': '[A-Z][0-9][A-Z] [0-9][A-Z][0-9]'
+        }
+      }
+    }
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome'
+  })
+</script>
+
+</body>
+</html>

package/tests/pages/if-then.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>If-Then</title>
+    <script src="../../dist/jsoneditor.js"></script>
+    <link rel="stylesheet" id="theme-link" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
+    <link rel="stylesheet" id="iconlib-link" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
+</head>
+<body>
+
+<div class="container">
+    <div id='editor-container'></div>
+</div>
+
+<script>
+  var editorContainer = document.querySelector('#editor-container')
+  var schema = {
+    'type': 'object',
+    'properties': {
+      'country': {
+        'type': 'string',
+        'default': 'America',
+        'enum': [
+          'America',
+          'Canada'
+        ]
+      },
+      'postal_code': {
+        'type': 'string'
+      }
+    },
+    'if': {
+      'properties': {
+        'country': {
+          'const': 'America'
+        }
+      }
+    },
+    'then': {
+      'properties': {
+        'postal_code': {
+          'pattern': '[0-9]{5}(-[0-9]{4})?'
+        }
+      }
+    }
+  }
+
+  var editor = new JSONEditor(editorContainer, {
+    schema: schema,
+    theme: 'bootstrap4',
+    iconlib: 'fontawesome'
+  })
+</script>
+
+</body>
+</html>