@json-editor/json-editor 2.9.0 → 2.10.0

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

@@ -1,11 +1,11 @@
 /* global Feature Scenario */
 
-var assert = require('assert')
+const assert = require('assert')
 const { DEFAULT_WAIT_TIME } = require('./test-config')
 
 Feature('core')
 
-Scenario('should set per-editor options @per-editor-options', async (I) => {
+Scenario('should set per-editor options @per-editor-options', async ({ I }) => {
   I.amOnPage('per-editor-options.html')
   I.waitForElement('.je-ready')
   I.waitForElement('[title="Expand"]')
@@ -13,7 +13,7 @@ Scenario('should set per-editor options @per-editor-options', async (I) => {
   I.dontSeeElement('.card')
 })
 
-Scenario('should set container attributes @container-attributes', async (I) => {
+Scenario('should set container attributes @container-attributes', async ({ I }) => {
   I.amOnPage('container-attributes.html')
   I.waitForElement('.je-ready')
   I.waitForElement('.container-class')
@@ -22,18 +22,18 @@ Scenario('should set container attributes @container-attributes', async (I) => {
   I.dontSeeElement('[data-schemaid="blank"]')
 })
 
-Scenario('should not set inputs name attributes @use-name-attributes', async (I) => {
+Scenario('should not set inputs name attributes @use-name-attributes', async ({ I }) => {
   I.amOnPage('use-name-attributes.html')
   I.waitForElement('.je-ready')
   I.dontSeeElement('[name]')
 })
 
-Scenario('should have class je-ready when ready @core @ready', async (I) => {
+Scenario('should have class je-ready when ready @core @ready', async ({ I }) => {
   I.amOnPage('ready.html')
   I.waitForElement('.je-ready')
 })
 
-Scenario('should Disable and enable entire form', async (I) => {
+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')
@@ -45,7 +45,7 @@ Scenario('should Disable and enable entire form', async (I) => {
   I.seeElement('[data-schemapath="root.name"] input:not(:disabled)')
 })
 
-Scenario('should Disable and enable part of the form', async (I) => {
+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')
@@ -55,45 +55,45 @@ Scenario('should Disable and enable part of the form', async (I) => {
   I.seeElement('[data-schemapath="root.name"] input:not(:disabled)')
 })
 
-Scenario('should destroy', async (I) => {
+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) => {
+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.waitForValue('.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"}')
+  I.waitForValue('.value', '{"age":40,"name":"John Smith"}')
 })
 
-Scenario('should set and get individual values', async (I) => {
+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.waitForValue('.value', '"Francesco Avizzano"')
   I.click('.set-individual-value')
-  assert.equal(await I.grabValueFrom('.value'), '"john kaminski"')
+  I.waitForValue('.value', '"john kaminski"')
 })
 
-Scenario('should watch a specific field for changes', async (I) => {
+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) => {
+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) => {
+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"]')
@@ -116,12 +116,12 @@ Scenario('should change the form if form_name_root option is set @core', async (
   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.waitForValue('#value-form-1', '"yes"')
   I.click('#get-value-form-2')
-  assert.equal(await I.grabValueFrom('#value-form-2'), '"no"')
+  I.waitForValue('#value-form-2', '"no"')
 })
 
-Scenario('should validate against oneOf schemas and display single oneOf and editors error messages @core @oneof', async (I) => {
+Scenario('should validate against oneOf schemas and display single oneOf and editors error messages @core @oneof', async ({ I }) => {
   I.amOnPage('oneof.html')
   I.waitForElement('.je-ready')
   I.waitForText('Object is missing the required property \'p4\'', DEFAULT_WAIT_TIME, '.alert-danger')
@@ -152,7 +152,7 @@ Scenario('should validate against oneOf schemas and display single oneOf and edi
   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) => {
+Scenario('should validate against anyOf schemas and display single anyOf and editors error messages @core @anyof', async ({ I }) => {
   I.amOnPage('anyof.html')
   I.waitForElement('.je-ready')
   I.waitForElement('.alert-danger')
@@ -170,84 +170,84 @@ Scenario('should validate against anyOf schemas and display single anyOf and edi
   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) => {
+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', DEFAULT_WAIT_TIME)
   I.dontSeeElement('[data-schemapath="root.list_group"] .invalid-feedback', DEFAULT_WAIT_TIME)
 })
 
-Scenario('Should switch between all json 7 data types in @oneof and display error messages for each one @core', async (I) => {
+Scenario('Should switch between all json 7 data types in @oneof and display error messages for each one @core', async ({ I }) => {
   I.amOnPage('oneof-2.html')
   I.waitForElement('.je-ready')
 
   I.selectOption('.je-switcher', 'Value, string')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":""}')
+  I.waitForValue('#value', '{"test":""}')
   I.waitForText('Value must validate against exactly one of the provided schemas.')
   I.waitForText('Value must be the constant value')
 
   I.selectOption('.je-switcher', 'Value, boolean')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":false}')
+  I.waitForValue('#value', '{"test":false}')
   I.waitForText('Value must validate against exactly one of the provided schemas.')
   I.waitForText('Value must be the constant value')
 
   I.selectOption('.je-switcher', 'Value, array')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":[]}')
+  I.waitForValue('#value', '{"test":[]}')
   I.waitForText('Value must validate against exactly one of the provided schemas.')
   I.waitForText('Value must be the constant value')
 
   I.selectOption('.je-switcher', 'Value, object')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":{}}')
+  I.waitForValue('#value', '{"test":{}}')
   I.waitForText('Value must validate against exactly one of the provided schemas.')
   I.waitForText('Value must be the constant value')
   I.waitForText('Object is missing the required property \'test\'')
 
   I.selectOption('.je-switcher', 'Value, number')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":0}')
+  I.waitForValue('#value', '{"test":0}')
   I.waitForText('Value must validate against exactly one of the provided schemas.')
   I.waitForText('Value must be the constant value')
 
   I.selectOption('.je-switcher', 'Value, integer')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":0}')
+  I.waitForValue('#value', '{"test":0}')
   I.waitForText('Value must validate against exactly one of the provided schemas.')
   I.waitForText('Value must be the constant value')
 
   I.selectOption('.je-switcher', 'Value, null')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":null}')
+  I.waitForValue('#value', '{"test":null}')
 })
 
-Scenario('Should switch between all json 7 data types in @anyof and display error messages for each one @core', async (I) => {
+Scenario('Should switch between all json 7 data types in @anyof and display error messages for each one @core', ({ I }) => {
   I.amOnPage('anyof-2.html')
   I.waitForElement('.je-ready')
 
-  assert.equal(await I.grabValueFrom('#value'), '{"test":""}')
+  I.waitForValue('#value', '{"test":""}')
   I.waitForText('Value must validate against at least one of the provided schemas')
 
   I.selectOption('.je-switcher', 'Value, boolean')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":false}')
+  I.waitForValue('#value', '{"test":false}')
   I.waitForText('Value must validate against at least one of the provided schemas')
 
   I.selectOption('.je-switcher', 'Value, array')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":[]}')
+  I.waitForValue('#value', '{"test":[]}')
   I.waitForText('Value must validate against at least one of the provided schemas')
 
   I.selectOption('.je-switcher', 'Value, object')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":{}}')
+  I.waitForValue('#value', '{"test":{}}')
   I.waitForText('Value must validate against at least one of the provided schemas')
 
   I.selectOption('.je-switcher', 'Value, number')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":0}')
+  I.waitForValue('#value', '{"test":0}')
   I.waitForText('Value must validate against at least one of the provided schemas')
 
   I.selectOption('.je-switcher', 'Value, integer')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":0}')
+  I.waitForValue('#value', '{"test":0}')
   I.waitForText('Value must validate against at least one of the provided schemas')
 
   I.selectOption('.je-switcher', 'Value, null')
-  assert.equal(await I.grabValueFrom('#value'), '{"test":null}')
+  I.waitForValue('#value', '{"test":null}')
 })
 
-Scenario('should validate against oneOf schemas and display single oneOf and editors error messages @core @translate-property', async (I) => {
+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')
@@ -317,7 +317,7 @@ Scenario('should validate against oneOf schemas and display single oneOf and edi
   I.seeInSource('Rating Info Text (but in german)')
 })
 
-Scenario('should load internal schema definitions, external schema definitions and external schema properties @core @references', async (I) => {
+Scenario('should load internal schema definitions, external schema definitions and external schema properties @core @references', async ({ I }) => {
   I.amOnPage('references.html')
   I.waitForText('References JSON Editor Example')
 
@@ -346,21 +346,21 @@ Scenario('should load internal schema definitions, external schema definitions a
     '../fixtures/string.json',
     '../fixtures/definitions.json',
     '../fixtures/basic_person.json',
-    '../fixtures/person.json',
+    '../fixtures/person.json'
   ]
   for (const path of schemaPaths) {
-    let key = 'je-cache::' + currentPath + path;
+    const key = 'je-cache::' + currentPath + path
 
     const item = await I.executeScript(function (storageKey) {
-      return window.localStorage.getItem(storageKey);
+      return window.localStorage.getItem(storageKey)
     }, key)
     const itemDecoded = JSON.parse(item)
-    assert.equal(itemDecoded.cacheBuster, 'abc123');
-    assert(itemDecoded, 'Cached schema found');
+    assert.strictEqual(itemDecoded.cacheBuster, 'abc123')
+    assert(itemDecoded, 'Cached schema found')
   }
 })
 
-Scenario('should override error messages if specified in schema options @core @errors-messages', async (I) => {
+Scenario('should override error messages if specified in schema options @core @errors-messages', async ({ I }) => {
   I.amOnPage('error-messages.html')
   I.waitForText('Error Messages')
 

package/tests/codeceptjs/editors/advanced_test.js

@@ -1,13 +1,14 @@
+/* global Feature Scenario */
 
-Feature('Advanced Editor');
+Feature('Advanced Editor')
 
-Scenario('test validation & delete', (I) => {
-    I.amOnPage('advanced.html');
-    I.retry({ retries: 5, minTimeout: 500 }).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();
-});
+Scenario('test validation & delete', ({ I }) => {
+  I.amOnPage('advanced.html')
+  I.retry({ retries: 5, minTimeout: 500 }).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

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