@api-client/ui 0.0.17 → 0.1.1

package/test/elements/modeling/domain-property-editor.spec.ts

@@ -1,1551 +0,0 @@
-import { fixture, assert, nextFrame, html } from '@open-wc/testing'
-import sinon from 'sinon'
-import { DataDomain, DomainProperty, DomainEntity, DomainModel } from '@api-client/core/browser.js'
-import type { DomainPropertyEditorElement } from '../../../src/elements/modeling/domain-property-editor.js'
-import type { MdOutlinedSelect } from '@material/web/select/outlined-select.js'
-import type { MdOutlinedTextField } from '@material/web/textfield/outlined-text-field.js'
-import type { MdCheckbox } from '@material/web/checkbox/checkbox.js'
-import type { MdSwitch } from '@material/web/switch/switch.js'
-import type { MdIconButton } from '@material/web/iconbutton/icon-button.js'
-import type { UiOutlinedButtonElement } from '../../../src/md/button/ui-outlined-button.js'
-import '../../../src/elements/modeling/domain-property-editor.js'
-
-describe('<domain-property-editor>', () => {
-  async function basicFixture(root?: DataDomain, selected?: string): Promise<DomainPropertyEditorElement> {
-    const element = await fixture(
-      html`<domain-property-editor .root="${root}" .selected="${selected}"></domain-property-editor>`
-    )
-    await nextFrame()
-    return element as DomainPropertyEditorElement
-  }
-
-  describe('Initialization', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      const dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      const e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('sets the dataProperty', async () => {
-      const element = await basicFixture(root, selected)
-      assert.typeOf(element['domainElement'], 'object', 'dataProperty is set')
-      assert.deepEqual(element['domainElement']?.key, p1.key, 'dataProperty has the value')
-    })
-
-    it('sets hasDefaultValueInput to false when no default value', async () => {
-      const element = await basicFixture(root, selected)
-      assert.isFalse(element['hasDefaultValueInput'])
-    })
-
-    it('sets enumEnabled to false when no enum', async () => {
-      const element = await basicFixture(root, selected)
-      assert.isFalse(element['enumEnabled'])
-    })
-
-    it('sets hasDefaultValueInput to true when default value is literal', async () => {
-      p1.schema = {
-        defaultValue: {
-          type: 'literal',
-          value: 'test',
-        },
-      }
-      const element = await basicFixture(root, selected)
-      assert.isTrue(element['hasDefaultValueInput'])
-    })
-
-    it('sets enumEnabled to true when enum is defined', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      assert.isTrue(element['enumEnabled'])
-    })
-
-    it('sets cachedEnumValues to undefined', async () => {
-      const element = await basicFixture(root, selected)
-      assert.isUndefined(element['cachedEnumValues'])
-    })
-
-    it('sets schemaInputConfig to default', async () => {
-      const element = await basicFixture(root, selected)
-      assert.deepEqual(element.schemaInputConfig, { type: 'text' })
-    })
-
-    it('sets schemaInputConfig to correct value when format is set', async () => {
-      p1.bindings = [
-        {
-          type: 'web',
-          schema: {
-            format: 'float',
-          },
-        },
-      ]
-      const element = await basicFixture(root, selected)
-      assert.deepEqual(element.schemaInputConfig, {
-        type: 'number',
-        step: 0.000001,
-        help: '32-bit number with decimals',
-      })
-    })
-
-    it('does not set dataProperty when no root', async () => {
-      const element = await basicFixture(undefined, selected)
-      assert.isUndefined(element['domainElement'])
-    })
-
-    it('does not set dataProperty when no selected', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.isUndefined(element['domainElement'])
-    })
-
-    it('does not set dataProperty when selected is invalid', async () => {
-      const element = await basicFixture(root, 'invalid-key')
-      assert.isUndefined(element['domainElement'])
-    })
-  })
-
-  describe('toggleEnum()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('toggles enumEnabled from false to true', async () => {
-      const element = await basicFixture(root, selected)
-      assert.isFalse(element['enumEnabled'])
-      element.toggleEnum()
-      assert.isTrue(element['enumEnabled'])
-    })
-
-    it('toggles enumEnabled from true to false', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      element.toggleEnum()
-      assert.isFalse(element['enumEnabled'])
-      element.toggleEnum()
-      assert.isTrue(element['enumEnabled'])
-    })
-
-    it('sets enum to [""] when enabling and no cached values', async () => {
-      const element = await basicFixture(root, selected)
-      element.toggleEnum()
-      assert.deepEqual(p1.schema?.enum, [''])
-    })
-
-    it('restores cachedEnumValues when enabling', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      element.toggleEnum() // disable
-      element.toggleEnum() // enable
-      assert.deepEqual(p1.schema?.enum, ['a', 'b'])
-    })
-
-    it('sets cachedEnumValues when disabling', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      element.toggleEnum() // disable
-      assert.deepEqual(element['cachedEnumValues'], ['a', 'b'])
-      assert.isUndefined(p1.schema?.enum)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      element.toggleEnum()
-      assert.isFalse(element['enumEnabled'])
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.toggleEnum()
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('updateEnum()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('updates an existing enum value', async () => {
-      p1.schema = {
-        enum: ['a', 'b', 'c'],
-      }
-      const element = await basicFixture(root, selected)
-      element.updateEnum(1, 'new-value')
-      assert.deepEqual(p1.schema?.enum, ['a', 'new-value', 'c'])
-    })
-
-    it('throws RangeError when index is negative', async () => {
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.updateEnum(-1, 'test'), RangeError)
-    })
-
-    it('throws TypeError when value is not a string', async () => {
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.updateEnum(0, 123 as unknown as string), TypeError)
-    })
-
-    it('throws RangeError when index is out of bounds', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.updateEnum(2, 'test'), RangeError)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.doesNotThrow(() => element.updateEnum(0, 'test'))
-    })
-
-    it('creates enum array when it does not exist', async () => {
-      const element = await basicFixture(root, selected)
-      element.toggleEnum() // enable enum
-      element.updateEnum(0, 'test')
-      assert.deepEqual(p1.schema?.enum, ['test'])
-    })
-
-    it('dispatches change event', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.updateEnum(0, 'test')
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('addEnum()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('adds a new enum value', async () => {
-      const element = await basicFixture(root, selected)
-      element.toggleEnum() // enable enum
-      element.addEnum('new-value')
-      assert.deepEqual(p1.schema?.enum, ['', 'new-value'])
-    })
-
-    it('adds a new enum value when enum array does not exist', async () => {
-      const element = await basicFixture(root, selected)
-      element.toggleEnum() // enable enum
-      p1.schema = {}
-      element.addEnum('new-value')
-      assert.deepEqual(p1.schema?.enum, ['new-value'])
-    })
-
-    it('adds an empty enum value when no value is passed', async () => {
-      const element = await basicFixture(root, selected)
-      element.toggleEnum() // enable enum
-      element.addEnum()
-      assert.deepEqual(p1.schema?.enum, ['', ''])
-    })
-
-    it('throws TypeError when value is not a string', async () => {
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.addEnum(123 as unknown as string), TypeError)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.doesNotThrow(() => element.addEnum('test'))
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      element.toggleEnum() // enable enum
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.addEnum('test')
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('deleteEnum()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('deletes an existing enum value', async () => {
-      p1.schema = {
-        enum: ['a', 'b', 'c'],
-      }
-      const element = await basicFixture(root, selected)
-      element.deleteEnum(1)
-      assert.deepEqual(p1.schema?.enum, ['a', 'c'])
-    })
-
-    it('throws RangeError when index is negative', async () => {
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.deleteEnum(-1), RangeError)
-    })
-
-    it('throws RangeError when index is out of bounds', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.deleteEnum(2), RangeError)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.doesNotThrow(() => element.deleteEnum(0))
-    })
-
-    it('dispatches change event', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.deleteEnum(0)
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('setDefaultValue()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('sets a literal default value', async () => {
-      const element = await basicFixture(root, selected)
-      element.setDefaultValue('test', 'literal')
-      assert.deepEqual(p1.schema?.defaultValue, { type: 'literal', value: 'test' })
-    })
-
-    it('sets a function default value', async () => {
-      const element = await basicFixture(root, selected)
-      element.setDefaultValue('random', 'function')
-      assert.deepEqual(p1.schema?.defaultValue, { type: 'function', value: 'random' })
-    })
-
-    it('removes the default value when value is empty', async () => {
-      p1.schema = {
-        defaultValue: {
-          type: 'literal',
-          value: 'test',
-        },
-      }
-      const element = await basicFixture(root, selected)
-      element.setDefaultValue()
-      assert.isUndefined(p1.schema?.defaultValue)
-    })
-
-    it('does nothing when the value is the same', async () => {
-      p1.schema = {
-        defaultValue: {
-          type: 'literal',
-          value: 'test',
-        },
-      }
-      const element = await basicFixture(root, selected)
-      element.setDefaultValue('test', 'literal')
-      assert.deepEqual(p1.schema?.defaultValue, { type: 'literal', value: 'test' })
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.doesNotThrow(() => element.setDefaultValue('test', 'literal'))
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.setDefaultValue('test', 'literal')
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('setDataType()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('updates the data type', async () => {
-      const element = await basicFixture(root, selected)
-      element.setDataType('number')
-      assert.equal(p1.type, 'number')
-    })
-
-    it('sets format to int64 when type is number', async () => {
-      const element = await basicFixture(root, selected)
-      element.setDataType('number')
-      assert.equal(p1.getWebBinding().format, 'int64')
-    })
-
-    it('sets format to base64 when type is binary', async () => {
-      const element = await basicFixture(root, selected)
-      element.setDataType('binary')
-      assert.equal(p1.getWebBinding().format, 'base64')
-    })
-
-    it('removes format when type is not number, datetime, or binary', async () => {
-      const element = await basicFixture(root, selected)
-      element.setDataType('number')
-      element.setDataType('string')
-      assert.isUndefined(p1.getWebBinding().format)
-    })
-
-    it('throws TypeError when type is invalid', async () => {
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.setDataType('invalid-type'), TypeError)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.doesNotThrow(() => element.setDataType('number'))
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.setDataType('number')
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('setModelAttribute()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('sets the required attribute', async () => {
-      const element = await basicFixture(root, selected)
-      element.setModelAttribute('required', true)
-      assert.isTrue(p1.required)
-    })
-
-    it('sets the multiple attribute', async () => {
-      const element = await basicFixture(root, selected)
-      element.setModelAttribute('multiple', true)
-      assert.isTrue(p1.multiple)
-    })
-
-    it('sets the primary attribute', async () => {
-      const element = await basicFixture(root, selected)
-      element.setModelAttribute('primary', true)
-      assert.isTrue(p1.primary)
-    })
-
-    it('sets the index attribute', async () => {
-      const element = await basicFixture(root, selected)
-      element.setModelAttribute('index', true)
-      assert.isTrue(p1.index)
-    })
-
-    it('sets the readOnly attribute', async () => {
-      const element = await basicFixture(root, selected)
-      element.setModelAttribute('readOnly', true)
-      assert.isTrue(p1.readOnly)
-    })
-
-    it('sets the writeOnly attribute', async () => {
-      const element = await basicFixture(root, selected)
-      element.setModelAttribute('writeOnly', true)
-      assert.isTrue(p1.writeOnly)
-    })
-
-    it('throws TypeError when name is invalid', async () => {
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.setModelAttribute('invalid-name', true), TypeError)
-    })
-
-    it('throws TypeError when value is not boolean', async () => {
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.setModelAttribute('required', 'true' as unknown as boolean), TypeError)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.doesNotThrow(() => element.setModelAttribute('required', true))
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.setModelAttribute('required', true)
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('setFormat()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('sets the format', async () => {
-      const element = await basicFixture(root, selected)
-      element.setFormat('int32')
-      assert.equal(p1.getWebBinding().format, 'int32')
-    })
-
-    it('sets the format to undefined', async () => {
-      p1.getWebBinding().format = 'int32'
-      const element = await basicFixture(root, selected)
-      element.setFormat(undefined)
-      assert.isUndefined(p1.getWebBinding().format)
-    })
-
-    it('throws TypeError when format is invalid', async () => {
-      const element = await basicFixture(root, selected)
-      assert.throws(() => element.setFormat('invalid-format'), TypeError)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.doesNotThrow(() => element.setFormat('int32'))
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.setFormat('int32')
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('updates schemaInputConfig', async () => {
-      const element = await basicFixture(root, selected)
-      // @ts-expect-error Protected property and testing
-      const spy = sinon.spy(element, 'updateSchemaInputConfig')
-      element.setFormat('int32')
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('setExampleValue()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('sets an example value', async () => {
-      const element = await basicFixture(root, selected)
-      element.setExampleValue('example-value')
-      assert.deepEqual(p1.schema?.examples, ['example-value'])
-    })
-
-    it('removes the example value when value is empty', async () => {
-      p1.schema = {
-        examples: ['example-value'],
-      }
-      const element = await basicFixture(root, selected)
-      element.setExampleValue()
-      assert.isUndefined(p1.schema?.examples)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      assert.doesNotThrow(() => element.setExampleValue('example-value'))
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      element.setExampleValue('example-value')
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('updates the example value', async () => {
-      p1.schema = {
-        examples: ['old-example'],
-      }
-      const element = await basicFixture(root, selected)
-      element.setExampleValue('new-example')
-      assert.deepEqual(p1.schema?.examples, ['new-example'])
-    })
-  })
-
-  describe('handleFormatChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'number', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('updates the format when a new value is selected', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.ok(select)
-      select.value = 'int32'
-      select.dispatchEvent(new Event('change'))
-      assert.equal(p1.getWebBinding().format, 'int32')
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.notOk(select)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.ok(select)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      select.value = 'int32'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('updates schemaInputConfig', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.ok(select)
-      // @ts-expect-error Protected property and testing
-      const spy = sinon.spy(element, 'updateSchemaInputConfig')
-      select.value = 'int32'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('handleMetaChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('updates the name', async () => {
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="name"]')
-      assert.ok(input)
-      input.value = 'new-name'
-      input.dispatchEvent(new Event('change'))
-      assert.equal(p1.info.name, 'new-name')
-    })
-
-    it('updates the display name', async () => {
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="displayName"]')
-      assert.ok(input)
-      input.value = 'new-display-name'
-      input.dispatchEvent(new Event('change'))
-      assert.equal(p1.info.displayName, 'new-display-name')
-    })
-
-    it('updates the description', async () => {
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="description"]')
-      assert.ok(input)
-      input.value = 'new-description'
-      input.dispatchEvent(new Event('change'))
-      assert.equal(p1.info.description, 'new-description')
-    })
-
-    it('updates the literal default value', async () => {
-      const element = await basicFixture(root, selected)
-      p1.schema = {
-        defaultValue: {
-          type: 'literal',
-          value: 'test',
-        },
-      }
-      element['hasDefaultValueInput'] = true
-      await element.updateComplete
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>(
-        'md-outlined-text-field[name="literalDefaultValue"]'
-      )
-      assert.ok(input)
-      input.value = 'new-default-value'
-      input.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.defaultValue, { type: 'literal', value: 'new-default-value' })
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="name"]')
-      assert.notOk(input)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="name"]')
-      assert.ok(input)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      input.value = 'new-name'
-      input.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('handleDataTypeChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('updates the data type when a new value is selected', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="datatype"]')
-      assert.ok(select)
-      select.value = 'number'
-      select.dispatchEvent(new Event('change'))
-      assert.equal(p1.type, 'number')
-    })
-
-    it('sets format to int64 when type is number', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="datatype"]')
-      assert.ok(select)
-      select.value = 'number'
-      select.dispatchEvent(new Event('change'))
-      assert.equal(p1.getWebBinding().format, 'int64')
-    })
-
-    it('sets format to base64 when type is binary', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="datatype"]')
-      assert.ok(select)
-      select.value = 'binary'
-      select.dispatchEvent(new Event('change'))
-      assert.equal(p1.getWebBinding().format, 'base64')
-    })
-
-    it('removes format when type is not number or binary', async () => {
-      p1.getWebBinding().format = 'double'
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="datatype"]')
-      assert.ok(select)
-      select.value = 'string'
-      select.dispatchEvent(new Event('change'))
-      assert.isUndefined(p1.getWebBinding().format)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="datatype"]')
-      assert.notOk(select)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="datatype"]')
-      assert.ok(select)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      select.value = 'number'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('updates schemaInputConfig', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="datatype"]')
-      assert.ok(select)
-      // @ts-expect-error Protected property and testing
-      const spy = sinon.spy(element, 'updateSchemaInputConfig')
-      select.value = 'number'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('handleAttributeOptionChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('sets the required attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="required"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      await nextFrame()
-      assert.isTrue(p1.required)
-    })
-
-    it('sets the multiple attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="multiple"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      await nextFrame()
-      assert.isTrue(p1.multiple)
-    })
-
-    it('sets the primary attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="primary"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      await nextFrame()
-      assert.isTrue(p1.primary)
-    })
-
-    it('sets the index attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="index"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      await nextFrame()
-      assert.isTrue(p1.index)
-    })
-
-    it('sets the readOnly attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="readOnly"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      await nextFrame()
-      assert.isTrue(p1.readOnly)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="required"]')
-      assert.notOk(checkbox)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="required"]')
-      assert.ok(checkbox)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      checkbox.checked = true
-      checkbox.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('handleAttributeOptionChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('sets the required attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="required"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      assert.isTrue(p1.required)
-    })
-
-    it('sets the multiple attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="multiple"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      assert.isTrue(p1.multiple)
-    })
-
-    it('sets the primary attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="primary"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      assert.isTrue(p1.primary)
-    })
-
-    it('sets the index attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="index"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      assert.isTrue(p1.index)
-    })
-
-    it('sets the readOnly attribute', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="readOnly"]')
-      assert.ok(checkbox)
-      checkbox.click()
-      assert.isTrue(p1.readOnly)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="required"]')
-      assert.notOk(checkbox)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="required"]')
-      assert.ok(checkbox)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      checkbox.checked = true
-      checkbox.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-
-    // We do not support it yet.
-    // it('sets the writeOnly attribute', async () => {
-    //   const element = await basicFixture(root, selected)
-    //   const checkbox = element.renderRoot.querySelector<MdCheckbox>('md-checkbox[name="writeOnly"]')
-    //   assert.ok(checkbox)
-    //   checkbox.checked = true
-    //   checkbox.dispatchEvent(new Event('change'))
-    //   assert.isTrue(p1.writeOnly)
-    // })
-  })
-
-  describe('handleDefaultValueChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('sets the hasDefaultValueInput property', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="defaultValue"]')
-      assert.ok(select)
-      select.value = 'literal'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(element['hasDefaultValueInput'])
-    })
-
-    it('sets a function default value', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="defaultValue"]')
-      assert.ok(select)
-      select.value = 'function.random'
-      select.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.defaultValue, { type: 'function', value: 'random' })
-      assert.isFalse(element['hasDefaultValueInput'])
-    })
-
-    it('removes the default value when value is empty', async () => {
-      p1.schema = {
-        defaultValue: {
-          type: 'literal',
-          value: 'test',
-        },
-      }
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="defaultValue"]')
-      assert.ok(select)
-      select.value = ''
-      select.dispatchEvent(new Event('change'))
-      assert.isUndefined(p1.schema?.defaultValue)
-      assert.isFalse(element['hasDefaultValueInput'])
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="defaultValue"]')
-      assert.notOk(select)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="defaultValue"]')
-      assert.ok(select)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      select.value = 'function.random'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('sets the hasDefaultValueInput when value is "literal"', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="defaultValue"]')
-      assert.ok(select)
-      select.value = 'literal'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(element['hasDefaultValueInput'])
-    })
-
-    it('sets default value when value is "literal.false"', async () => {
-      p1.type = 'boolean'
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="defaultValue"]')
-      assert.ok(select)
-      select.value = 'literal.false'
-      select.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.defaultValue, { type: 'literal', value: 'false' })
-      assert.isFalse(element['hasDefaultValueInput'])
-    })
-
-    it('clears the value when switching from a function to a literal', async () => {
-      p1.schema = {
-        defaultValue: {
-          type: 'function',
-          value: 'random',
-        },
-      }
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="defaultValue"]')
-      assert.ok(select)
-      select.value = 'literal'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(element['hasDefaultValueInput'])
-      assert.deepEqual(p1.schema?.defaultValue, { type: 'literal', value: '' })
-    })
-  })
-
-  describe('handleFormatChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'number', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('updates the format when a new value is selected', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.ok(select)
-      select.value = 'float'
-      select.dispatchEvent(new Event('change'))
-      assert.equal(p1.getWebBinding().format, 'float')
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.notOk(select)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.ok(select)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      select.value = 'float'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('updates schemaInputConfig', async () => {
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.ok(select)
-      // @ts-expect-error Protected property and testing
-      const spy = sinon.spy(element, 'updateSchemaInputConfig')
-      select.value = 'float'
-      select.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('does not update the format when the value is the same', async () => {
-      p1.getWebBinding().format = 'float'
-      const element = await basicFixture(root, selected)
-      const select = element.renderRoot.querySelector<MdOutlinedSelect>('md-outlined-select[name="format"]')
-      assert.ok(select)
-      const spy = sinon.spy(element, 'notifyChange')
-      select.value = 'float'
-      select.dispatchEvent(new Event('change'))
-      assert.isFalse(spy.called)
-    })
-  })
-
-  describe('handleEnumOptionChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('toggles enumEnabled from false to true', async () => {
-      const element = await basicFixture(root, selected)
-      const toggle = element.renderRoot.querySelector<MdSwitch>('md-switch#enumValues')
-      assert.ok(toggle)
-      assert.isFalse(element['enumEnabled'])
-      toggle.dispatchEvent(new Event('change'))
-      assert.isTrue(element['enumEnabled'])
-    })
-
-    it('toggles enumEnabled from true to false', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const toggle = element.renderRoot.querySelector<MdSwitch>('md-switch#enumValues')
-      assert.ok(toggle)
-      toggle.dispatchEvent(new Event('change'))
-      assert.isFalse(element['enumEnabled'])
-    })
-
-    it('sets enum to [""] when enabling and no cached values', async () => {
-      const element = await basicFixture(root, selected)
-      const toggle = element.renderRoot.querySelector<MdSwitch>('md-switch#enumValues')
-      assert.ok(toggle)
-      toggle.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.enum, [''])
-    })
-
-    it('restores cachedEnumValues when enabling', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const toggle = element.renderRoot.querySelector<MdSwitch>('md-switch#enumValues')
-      assert.ok(toggle)
-      toggle.dispatchEvent(new Event('change')) // disable
-      toggle.dispatchEvent(new Event('change')) // enable
-      assert.deepEqual(p1.schema?.enum, ['a', 'b'])
-    })
-
-    it('sets cachedEnumValues when disabling', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const toggle = element.renderRoot.querySelector<MdSwitch>('md-switch#enumValues')
-      assert.ok(toggle)
-      toggle.dispatchEvent(new Event('change')) // disable
-      assert.deepEqual(element['cachedEnumValues'], ['a', 'b'])
-      assert.isUndefined(p1.schema?.enum)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const toggle = element.renderRoot.querySelector<MdSwitch>('md-switch#enumValues')
-      assert.notOk(toggle)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const toggle = element.renderRoot.querySelector<MdSwitch>('md-switch#enumValues')
-      assert.ok(toggle)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      toggle.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('handleEnumChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('updates an existing enum value', async () => {
-      p1.schema = {
-        enum: ['a', 'b', 'c'],
-      }
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>(
-        'md-outlined-text-field[name="enum"][data-index="1"]'
-      )
-      assert.ok(input)
-      input.value = 'new-value'
-      input.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.enum, ['a', 'new-value', 'c'])
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="enum"]')
-      assert.notOk(input)
-    })
-
-    it('dispatches change event', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>(
-        'md-outlined-text-field[name="enum"][data-index="0"]'
-      )
-      assert.ok(input)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      input.value = 'test'
-      input.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('does not update the enum when the input is invalid', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>(
-        'md-outlined-text-field[name="enum"][data-index="0"]'
-      )
-      assert.ok(input)
-      sinon.stub(input, 'reportValidity').returns(false)
-      input.value = 'test'
-      input.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.enum, ['a', 'b'])
-    })
-
-    it('updates an existing enum value when the input is valid', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>(
-        'md-outlined-text-field[name="enum"][data-index="0"]'
-      )
-      assert.ok(input)
-      input.value = 'test'
-      input.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.enum, ['test', 'b'])
-    })
-  })
-
-  describe('handleAddEnum()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('adds a new enum value', async () => {
-      const element = await basicFixture(root, selected)
-      element['enumEnabled'] = true
-      await element.updateComplete
-      const button = element.renderRoot.querySelector<UiOutlinedButtonElement>('ui-outlined-button')
-      assert.ok(button)
-      button.click()
-      assert.deepEqual(p1.schema?.enum, [''])
-    })
-
-    it('adds a new enum value when enum array does not exist', async () => {
-      const element = await basicFixture(root, selected)
-      element['enumEnabled'] = true
-      await element.updateComplete
-      p1.schema = {}
-      const button = element.renderRoot.querySelector<UiOutlinedButtonElement>('ui-outlined-button')
-      assert.ok(button)
-      button.click()
-      assert.deepEqual(p1.schema?.enum, [''])
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const button = element.renderRoot.querySelector<UiOutlinedButtonElement>('ui-outlined-button')
-      assert.notOk(button)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      element['enumEnabled'] = true
-      await element.updateComplete
-      const button = element.renderRoot.querySelector<UiOutlinedButtonElement>('ui-outlined-button')
-      assert.ok(button)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      button.click()
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('handleDeleteEnum()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('deletes an existing enum value', async () => {
-      p1.schema = {
-        enum: ['a', 'b', 'c'],
-      }
-      const element = await basicFixture(root, selected)
-      const button = element.renderRoot.querySelector<MdIconButton>('md-icon-button[data-index="1"]')
-      assert.ok(button)
-      button.click()
-      assert.deepEqual(p1.schema?.enum, ['a', 'c'])
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const button = element.renderRoot.querySelector<MdIconButton>('md-icon-button[data-index="0"]')
-      assert.notOk(button)
-    })
-
-    it('dispatches change event', async () => {
-      p1.schema = {
-        enum: ['a', 'b'],
-      }
-      const element = await basicFixture(root, selected)
-      const button = element.renderRoot.querySelector<MdIconButton>('md-icon-button[data-index="0"]')
-      assert.ok(button)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      button.click()
-      assert.isTrue(spy.calledOnce)
-    })
-  })
-
-  describe('handleExampleChange()', () => {
-    let root: DataDomain
-    let selected: string
-    let p1: DomainProperty
-    let e1: DomainEntity
-    let dm1: DomainModel
-
-    beforeEach(async () => {
-      root = new DataDomain()
-      dm1 = root.addModel({ key: 'dm1', info: { name: 'dm1' } })
-      e1 = dm1.addEntity({ key: 'e1', info: { name: 'e1' } })
-      p1 = e1.addProperty({ type: 'string', key: 'p1', info: { name: 'p1' } })
-      selected = p1.key
-    })
-
-    it('updates the example value', async () => {
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="example"]')
-      assert.ok(input)
-      input.value = 'new-example'
-      input.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.examples, ['new-example'])
-    })
-
-    it('removes the example value when input is empty', async () => {
-      p1.schema = {
-        examples: ['old-example'],
-      }
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="example"]')
-      assert.ok(input)
-      input.value = ''
-      input.dispatchEvent(new Event('change'))
-      assert.isUndefined(p1.schema?.examples)
-    })
-
-    it('does nothing when no dataProperty', async () => {
-      const element = await basicFixture(root, undefined)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="example"]')
-      assert.notOk(input)
-    })
-
-    it('dispatches change event', async () => {
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="example"]')
-      assert.ok(input)
-      const spy = sinon.spy()
-      element.addEventListener('change', spy)
-      input.value = 'new-example'
-      input.dispatchEvent(new Event('change'))
-      assert.isTrue(spy.calledOnce)
-    })
-
-    it('does not update the example when the input is invalid', async () => {
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="example"]')
-      assert.ok(input)
-      sinon.stub(input, 'reportValidity').returns(false)
-      input.value = 'new-example'
-      input.dispatchEvent(new Event('change'))
-      assert.isUndefined(p1.schema?.examples)
-    })
-
-    it('updates the example value when the input is valid', async () => {
-      const element = await basicFixture(root, selected)
-      const input = element.renderRoot.querySelector<MdOutlinedTextField>('md-outlined-text-field[name="example"]')
-      assert.ok(input)
-      input.value = 'new-example'
-      input.dispatchEvent(new Event('change'))
-      assert.deepEqual(p1.schema?.examples, ['new-example'])
-    })
-  })
-})