@json-editor/json-editor 2.9.1 → 2.10.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@json-editor/json-editor",
   "title": "JSONEditor",
   "description": "JSON Schema based editor",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "main": "dist/jsoneditor.js",
   "author": {
     "name": "Jeremy Dorn",

package/src/defaults.js

@@ -101,6 +101,20 @@ languages.en = {
   * @variables This key takes one variable: The maximum character count
   */
   error_maxLength: 'Value must be at most {{0}} characters long',
+  /**
+   * When no array items validates the contains schema
+   */
+  error_contains: 'No items match contains',
+  /**
+   * When an array have too few items that validate agaist contains schema
+   * @variables This key takes two variable: The valid items count and the minContains value
+   */
+  error_minContains: 'Contains match count {{0}} is less than minimum contains count of {{1}}',
+  /**
+   * When an array have too many items that validate agaist contains schema
+   * @variables This key takes two variable: The valid items count and the maxContains value
+   */
+  error_maxContains: 'Contains match count {{0}} exceeds maximum contains count of {{1}}',
   /**
   * When a value does not have enough characters
   * @variables This key takes one variable: The minimum character count
@@ -345,7 +359,7 @@ languages.en = {
   /**
   * Warning when deleting a node
   */
-  button_delete_node_warning: 'Are you sure you want to remove this node?'
+  button_delete_node_warning: 'Are you sure you want to remove this item?'
 }
 
 /* Default per-editor options */

package/src/editor.js

@@ -95,9 +95,17 @@ export class AbstractEditor {
     }
 
     Object.keys(deps).forEach(dependency => {
-      let path = this.path.split('.')
-      path[path.length - 1] = dependency
-      path = path.join('.')
+      let path
+      const isFullPath = dependency.startsWith(this.jsoneditor.root.path)
+
+      if (isFullPath) {
+        path = dependency
+      } else {
+        path = this.path.split('.')
+        path[path.length - 1] = dependency
+        path = path.join('.')
+      }
+
       this.jsoneditor.watch(path, () => {
         this.evaluateDependencies()
       })
@@ -114,14 +122,23 @@ export class AbstractEditor {
     if (!deps) {
       return
     }
+
     // Assume true and set to false if any unmet dependencies are found
     const previousStatus = this.dependenciesFulfilled
     this.dependenciesFulfilled = true
 
     Object.keys(deps).forEach(dependency => {
-      let path = this.path.split('.')
-      path[path.length - 1] = dependency
-      path = path.join('.')
+      let path
+      const isFullPath = dependency.startsWith(this.jsoneditor.root.path)
+
+      if (isFullPath) {
+        path = dependency
+      } else {
+        path = this.path.split('.')
+        path[path.length - 1] = dependency
+        path = path.join('.')
+      }
+
       const choices = deps[dependency]
       this.checkDependency(path, choices)
     })

package/src/editors/multiple.js

@@ -1,7 +1,7 @@
 /* Multiple Editor (for when `type` is an array, also when `oneOf` is present) */
 import { AbstractEditor } from '../editor.js'
 import { Validator } from '../validator.js'
-import { extend } from '../utilities.js'
+import { extend, mergeDeep } from '../utilities.js'
 
 export class MultipleEditor extends AbstractEditor {
   register () {
@@ -56,6 +56,8 @@ export class MultipleEditor extends AbstractEditor {
   }
 
   switchEditor (i) {
+    this.lastType = this.type
+
     if (!this.editors[i]) {
       this.buildChildEditor(i)
     }
@@ -68,11 +70,15 @@ export class MultipleEditor extends AbstractEditor {
 
     this.editors.forEach((editor, type) => {
       if (!editor) return
+
       if (this.type === type) {
-        if (this.keep_values) editor.setValue(currentValue, true)
+        if (this.keep_values || this.if) editor.setValue(currentValue, true)
         editor.container.style.display = ''
-      } else editor.container.style.display = 'none'
+      } else {
+        editor.container.style.display = 'none'
+      }
     })
+
     this.refreshValue()
     this.refreshHeaderText()
   }
@@ -140,6 +146,31 @@ export class MultipleEditor extends AbstractEditor {
       this.anyOf = true
       this.types = this.schema.anyOf
       delete this.schema.anyOf
+    } else if (this.schema.if) {
+      this.if = true
+      this.ifSchema = JSON.parse(JSON.stringify(this.schema.if))
+      this.thenSchema = { title: 'then' }
+      this.elseSchema = { title: 'else' }
+      this.types = []
+
+      if (this.schema.then) {
+        mergeDeep(this.thenSchema, this.schema, this.schema.then)
+      }
+
+      if (this.schema.else) {
+        mergeDeep(this.elseSchema, this.schema, this.schema.else)
+      }
+
+      this.types.push(this.thenSchema)
+      this.types.push(this.elseSchema)
+
+      this.types.forEach((schema) => {
+        delete schema.if
+        delete schema.then
+        delete schema.else
+      })
+
+      delete this.schema.if
     } else {
       if (!this.schema.type || this.schema.type === 'any') {
         this.types = ['string', 'number', 'integer', 'boolean', 'object', 'array', 'null']
@@ -169,12 +200,14 @@ export class MultipleEditor extends AbstractEditor {
 
   build () {
     const { container } = this
-
     this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
-    this.container.appendChild(this.header)
-
     this.switcher = this.theme.getSwitcher(this.display_text)
-    container.appendChild(this.switcher)
+
+    if (!this.if) {
+      this.container.appendChild(this.header)
+      container.appendChild(this.switcher)
+    }
+
     this.switcher.addEventListener('change', e => {
       e.preventDefault()
       e.stopPropagation()
@@ -220,6 +253,7 @@ export class MultipleEditor extends AbstractEditor {
       this.refreshHeaderText()
     }
 
+    this.switchIf()
     super.onChildEditorChange()
   }
 
@@ -234,6 +268,24 @@ export class MultipleEditor extends AbstractEditor {
     this.value = this.editors[this.type].getValue()
   }
 
+  switchIf () {
+    if (this.ifSchema && this.value) {
+      const type = this.getIfType(this.value)
+
+      if (this.lastType !== type) {
+        this.switchEditor(type)
+        this.editors[this.type].setValue(this.value, true)
+      }
+
+      this.switcher.value = this.display_text[this.type]
+    }
+  }
+
+  getIfType (value) {
+    const errors = this.jsoneditor.validator._validateSchema(this.ifSchema, value)
+    return errors.length === 0 ? 0 : 1
+  }
+
   setValue (val, initial) {
     /* Determine type by getting the first one that validates */
 
@@ -279,6 +331,9 @@ export class MultipleEditor extends AbstractEditor {
         finalI = fitTestVal.i
       }
     }
+    if (this.if) {
+      finalI = this.getIfType(val)
+    }
     if (finalI === null) {
       finalI = this.type
     }
@@ -286,8 +341,10 @@ export class MultipleEditor extends AbstractEditor {
     this.switcher.value = this.display_text[finalI]
 
     const typeChanged = this.type !== prevType
+
     if (typeChanged) {
       this.switchEditor(this.type)
+      this.editors[this.type].setValue(val, initial)
     }
 
     if (typeof val !== 'undefined') {

package/src/editors/object.js

@@ -893,7 +893,6 @@ export class ObjectEditor extends AbstractEditor {
     let labelText
 
     const checkbox = this.theme.getCheckbox()
-    checkbox.style.width = 'auto'
 
     if (this.schema.properties[key] && this.schema.properties[key].title) { labelText = this.schema.properties[key].title } else { labelText = key }
 

package/src/iconlibs/bootstrap.js

@@ -0,0 +1,28 @@
+import { AbstractIconLib } from '../iconlib.js'
+
+const iconPrefix = 'bi bi-'
+const mapping = {
+  collapse: 'chevron-down',
+  expand: 'chevron-right',
+  delete: 'trash',
+  edit: 'pencil',
+  add: 'plus',
+  subtract: 'dash',
+  cancel: 'x-circle',
+  save: 'save',
+  moveup: 'arrow-up',
+  moveright: 'arrow-right',
+  movedown: 'arrow-down',
+  moveleft: 'arrow-left',
+  copy: 'clipboard',
+  clear: 'x-circle',
+  time: 'clock',
+  calendar: 'calendar',
+  edit_properties: 'list-ul'
+}
+
+export class bootstrapIconlib extends AbstractIconLib {
+  constructor () {
+    super(iconPrefix, mapping)
+  }
+}

package/src/iconlibs/index.js

@@ -9,9 +9,11 @@ import { jqueryuiIconlib } from './jqueryui.js'
 // import  { materialiconsIconlib } from  './materialicons.js'
 import { openiconicIconlib } from './openiconic.js'
 import { spectreIconlib } from './spectre.js'
+import { bootstrapIconlib } from './bootstrap'
 
 export const iconlibs = {
   // bootstrap2: bootstrap2Iconlib,
+  bootstrap: bootstrapIconlib,
   bootstrap3: bootstrap3Iconlib,
   fontawesome3: fontawesome3Iconlib,
   fontawesome4: fontawesome4Iconlib,

package/src/resolvers.js

@@ -76,6 +76,9 @@ const arraysOfStrings = schema => {
 /* Use the multiple editor for schemas with `oneOf` or `anyOf` set */
 const oneOf = schema => (schema.oneOf || schema.anyOf) && 'multiple'
 
+/* Use the multiple editor for schemas with `if` set */
+const ifThenElse = schema => (schema.if) && 'multiple'
+
 /* Specialized editor for date, time and datetime-local formats */
 const date = schema => ['string', 'integer'].includes(schema.type) && ['date', 'time', 'datetime-local'].includes(schema.format) && 'datetime'
 
@@ -114,7 +117,7 @@ const markdown = schema => schema.type === 'string' && schema.format === 'markdo
 const xhtml = schema => schema.type === 'string' && ['xhtml', 'bbcode'].includes(schema.format) && 'sceditor'
 
 /* Use the ace editor for schemas with format equals any of ace editor modes */
-const aceModes = ['actionscript', 'batchfile', 'c', 'c++', 'cpp', 'coffee', 'csharp', 'css', 'dart', 'django', 'ejs', 'erlang', 'golang', 'groovy', 'handlebars', 'haskell', 'haxe', 'html', 'ini', 'jade', 'java', 'javascript', 'json', 'less', 'lisp', 'lua', 'makefile', 'matlab', 'mysql', 'objectivec', 'pascal', 'perl', 'pgsql', 'php', 'python', 'r', 'ruby', 'sass', 'scala', 'scss', 'smarty', 'sql', 'sqlserver', 'stylus', 'svg', 'twig', 'vbscript', 'xml', 'yaml']
+const aceModes = ['actionscript', 'batchfile', 'c', 'c++', 'cpp', 'coffee', 'csharp', 'css', 'dart', 'django', 'ejs', 'erlang', 'golang', 'groovy', 'handlebars', 'haskell', 'haxe', 'html', 'ini', 'jade', 'java', 'javascript', 'json', 'less', 'lisp', 'lua', 'makefile', 'matlab', 'mysql', 'objectivec', 'pascal', 'perl', 'pgsql', 'php', 'python', 'r', 'ruby', 'sass', 'scala', 'scss', 'sh', 'smarty', 'sql', 'sqlserver', 'stylus', 'svg', 'twig', 'vbscript', 'xml', 'yaml']
 const ace = schema => schema.type === 'string' && aceModes.includes(schema.format) && 'ace'
 
 const ip = schema => schema.type === 'string' && ['ip', 'ipv4', 'ipv6', 'hostname'].includes(schema.format) && 'ip'
@@ -122,4 +125,4 @@ const ip = schema => schema.type === 'string' && ['ip', 'ipv4', 'ipv6', 'hostnam
 const colorPicker = schema => schema.type === 'string' && schema.format === 'color' && 'colorpicker'
 
 /* Export resolvers in order of discovery, first to last */
-export const resolvers = [colorPicker, ip, ace, xhtml, markdown, jodit, autoComplete, uuid, info, button, stepper, describeBy, starratings, date, oneOf, arraysOfStrings, enumeratedProperties, enumSource, table, upload, base64, any, boolean, signature, primitive, object, defaultResolver]
+export const resolvers = [colorPicker, ip, ace, xhtml, markdown, jodit, autoComplete, uuid, info, button, stepper, describeBy, starratings, date, oneOf, ifThenElse, arraysOfStrings, enumeratedProperties, enumSource, table, upload, base64, any, boolean, signature, primitive, object, defaultResolver]

package/src/schemaloader.js

@@ -158,7 +158,9 @@ export class SchemaLoader {
     // If local ref
     if (refWithPointerSplit.length === 2 && !this.refs_with_info[_schema.$ref]) {
       const sub = this.expandRecursivePointer(this.schema, refWithPointerSplit[1])
-      return this.extendSchemas(_schema, this.expandSchema(sub))
+      const expandedSchema = this.extendSchemas(_schema, this.expandSchema(sub))
+      delete expandedSchema.$ref
+      return expandedSchema
     }
     const refObj = (refWithPointerSplit.length > 2)
       ? this.refs_with_info['#' + refWithPointerSplit[1]]

package/src/themes/bootstrap3.js

@@ -1,5 +1,5 @@
 import { AbstractTheme } from '../theme.js'
-import rules from './bootstrap3.css'
+import rules from './bootstrap3.css.js'
 
 export class bootstrap3Theme extends AbstractTheme {
   getSelectInput (options, multiple) {

package/src/utilities.js

@@ -104,3 +104,25 @@ export function generateUUID () {
     return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
   })
 }
+
+export function isObject (item) {
+  return (item && typeof item === 'object' && !Array.isArray(item))
+}
+
+export function mergeDeep (target, ...sources) {
+  if (!sources.length) return target
+  const source = sources.shift()
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} })
+        mergeDeep(target[key], source[key])
+      } else {
+        Object.assign(target, { [key]: source[key] })
+      }
+    }
+  }
+
+  return mergeDeep(target, ...sources)
+}

package/src/validator.js

@@ -11,6 +11,99 @@ export class Validator {
     this.defaults = defaults
 
     this._validateSubSchema = {
+      dependentSchemas (schema, value, path) {
+        let errors = []
+
+        Object.keys(schema.dependentSchemas).forEach((key) => {
+          if (typeof value[key] !== 'undefined') {
+            const dependentSchema = schema.dependentSchemas[key]
+            const tmpErrors = this._validateSchema(dependentSchema, value, path)
+            errors = [...errors, ...tmpErrors]
+          }
+        })
+
+        return errors
+      },
+      contains (schema, value, path) {
+        const errors = []
+        let counter = 0
+
+        value.forEach((item) => {
+          const containsErrors = this._validateSchema(schema.contains, item, path)
+
+          if (containsErrors.length === 0) {
+            counter++
+          }
+        })
+
+        const containsInvalid = (counter === 0)
+
+        if (typeof schema.minContains !== 'undefined') {
+          const minContainsInvalid = (counter < schema.minContains)
+
+          if (minContainsInvalid) {
+            errors.push({
+              message: this.translate('error_minContains', [counter, schema.minContains], schema),
+              path: path
+            })
+          }
+        } else {
+          if (containsInvalid) {
+            errors.push({
+              message: this.translate('error_contains', null, schema),
+              path: path
+            })
+          }
+        }
+
+        if (typeof schema.maxContains !== 'undefined') {
+          const maxContainsInvalid = (counter > schema.maxContains)
+
+          if (maxContainsInvalid) {
+            errors.push({
+              message: this.translate('error_maxContains', [counter, schema.maxContains], schema),
+              path: path
+            })
+          }
+        }
+
+        return errors
+      },
+      if (schema, value, path) {
+        if (typeof schema.then === 'undefined' && typeof schema.else === 'undefined') {
+          return []
+        }
+
+        const ifErrors = this._validateSchema(schema.if, value, path)
+        let thenErrors = []
+        let elseErrors = []
+
+        if (typeof schema.then !== 'undefined') {
+          thenErrors = this._validateSchema(schema.then, value, path)
+        }
+
+        if (typeof schema.else !== 'undefined') {
+          elseErrors = this._validateSchema(schema.else, value, path)
+        }
+
+        if (schema.if === true) {
+          return thenErrors
+        }
+
+        if (schema.if === false) {
+          return elseErrors
+        }
+
+        if (ifErrors.length === 0) {
+          return thenErrors
+        }
+
+        if (ifErrors.length > 0) {
+          return elseErrors
+        }
+
+        return []
+      },
       const (schema, value, path) {
         const valid = JSON.stringify(schema.const) === JSON.stringify(value) && !(Array.isArray(value) || typeof value === 'object')
         if (!valid) {

package/tests/codeceptjs/constrains/contains_test.js

@@ -0,0 +1,36 @@
+/* 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.dontSee('No items match contains')
+})
+
+Scenario('should display @minContains validation errors @contains', ({ I }) => {
+  I.amOnPage('minContains.html')
+  I.waitForElement('.je-ready')
+  I.dontSee('No items match contains')
+  I.waitForText('Contains match count 0 is less than minimum contains count of 2')
+  I.click('.json-editor-btn-add')
+  I.dontSee('No items match contains')
+  I.waitForText('Contains match count 1 is less than minimum contains count of 2')
+  I.click('.json-editor-btn-add')
+  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.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/dependentSchemas_test.js

@@ -0,0 +1,15 @@
+/* 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.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,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')
+})