Merge pull request json-editor#1136 from germanbisurgi/feature/autoco…

…mplete-test Fix for autocomplete (json-editor#1124) + test
sparklerl · Mar 9, 2022 · 87659ae · 87659ae
2 parents 9d66b3c + c5c7a33
commit 87659ae
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 4 deletions.
diff --git a/src/editors/autocomplete.js b/src/editors/autocomplete.js
@@ -29,18 +29,19 @@ export class AutocompleteEditor extends StringEditor {
       /* Get options, either global options from "this.defaults.options.autocomplete" or */
       /* single property options from schema "options.autocomplete" */
       options = this.expandCallbacks('autocomplete', extend({}, {
-        search: (jseditor, input) => {
+        search: (jseditor) => {
           // eslint-disable-next-line no-console
           console.log(`No "search" callback defined for autocomplete in property "${jseditor.key}"`)
           return []
         },
+        onSubmit: () => {
+          this.input.blur()
+        },
         baseClass: 'autocomplete'
       }, this.defaults.options.autocomplete || {}, this.options.autocomplete || {}))
 
       this.autocomplete_wrapper.classList.add(options.baseClass)
       this.autocomplete_dropdown.classList.add(`${options.baseClass}-result-list`)
-      /* this.input.classList.add(options.baseClass + '-input'); */
-
       this.autocomplete_instance = new window.Autocomplete(this.autocomplete_wrapper, options)
     }
     super.afterInputReady()

diff --git a/tests/codeceptjs/editors/autocomplete_test.js b/tests/codeceptjs/editors/autocomplete_test.js
@@ -0,0 +1,16 @@
+/* global Feature Scenario */
+
+var assert = require('assert')
+
+Feature('autocomplete')
+
+Scenario('autocomplete should work @autocomplete', async (I) => {
+  I.amOnPage('autocomplete.html')
+  I.waitForElement('.je-ready', 10)
+  I.fillField('root', 'ir')
+  I.waitForText('iran', 10, '.autocomplete-result-list')
+  I.waitForText('iraq', 10, '.autocomplete-result-list')
+  I.click('iraq', '.autocomplete-result:nth-child(2)')
+  I.wait(1)
+  assert.equal(await I.grabValueFrom('.value'), '"iraq"')
+})
diff --git a/tests/codeceptjs/editors/button_test.js b/tests/codeceptjs/editors/button_test.js
@@ -4,13 +4,15 @@ Feature('button');
 
 Scenario('should work with button editor callbacks', async (I) => {
   I.amOnPage('button-callbacks.html');
+  I.waitForElement('.je-ready', 10)
   I.seeElement('[data-schemapath="root.button1"] button');
   I.click('[data-schemapath="root.button1"] button');
   assert.equal(await I.grabValueFrom('.value'), 'button1CB');
 });
 
 Scenario('should work with option "validated"', async (I) => {
   I.amOnPage('button-callbacks.html');
+  I.waitForElement('.je-ready', 10)
   I.seeElement('[data-schemapath="root.button1"] button');
   I.retry({ retries: 3, minTimeout: 500 }).seeDisabledAttribute('[data-schemapath="root.button2"] button');
 
@@ -24,12 +26,13 @@ Scenario('should work with option "validated"', async (I) => {
 
 Scenario('should not leave any footprints in result', async (I) => {
   I.amOnPage('button-callbacks.html');
+  I.waitForElement('.je-ready', 10)
   I.click('.get-value');
   assert.equal(await I.grabValueFrom('.value'), JSON.stringify({"textinput":""}));
 });
 
 Scenario('should be disabled if "readonly" is specified', async (I) => {
   I.amOnPage('read-only.html');
-
+  I.waitForElement('.je-ready', 10)
   I.seeDisabledAttribute('[data-schemapath="root.button"] button');
 });
diff --git a/tests/pages/autocomplete.html b/tests/pages/autocomplete.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <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">
+    <script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>
+    <script src="../../dist/jsoneditor.js"></script>
+</head>
+<body>
+
+<div class="container">
+    <textarea class="value form-control" rows="10"></textarea>
+    <div class='json-editor-container'></div>
+</div>
+
+
+<script>
+  window.addEventListener('load', function () {
+    var jsonEditorContainer = document.querySelector('.json-editor-container')
+    var value = document.querySelector('.value')
+
+    JSONEditor.defaults.callbacks = {
+      'autocomplete': {
+        'search': function (editor, input) {
+          var countries = [
+            'germany',
+            'iran',
+            'iraq',
+            'spain'
+          ]
+
+          if (input.length < 1) { return [] }
+
+          return countries.filter(country => {
+            return country.toLowerCase().startsWith(input.toLowerCase())
+          })
+        }
+      }
+    }
+
+    var schema = {
+      'title': 'Test',
+      'type': 'string',
+      'format': 'autocomplete',
+      'options': {
+        'autocomplete': {
+          'search': 'search',
+          'autoSelect': true
+        }
+      }
+    }
+
+    var editor = new JSONEditor(jsonEditorContainer, {
+      schema: schema,
+      theme: 'bootstrap4',
+      required_by_default: true,
+      show_errors: 'always'
+    })
+
+    editor.on('change', function () {
+      value.value = JSON.stringify(editor.getValue())
+    })
+  })
+</script>
+
+</body>
+</html>