@operato/property-editor 10.29.8 → 10.29.11

package/test/number-map.test.ts

@@ -15,7 +15,7 @@ describe('number-map', () => {
   ]
   const make = () =>
     fixture<OxPropertyEditorNumberMap>(html`<ox-property-editor-number-map name="designInputs" .property=${{ entries }} .value=${{ pitch: 150 }}></ox-property-editor-number-map>`)
-  const field = (el: OxPropertyEditorNumberMap, key: string) => el.renderRoot.querySelector(`input[data-key="${key}"]`) as HTMLInputElement
+  const field = (el: OxPropertyEditorNumberMap, key: string) => el.renderRoot.querySelector(`input[type=number][data-key="${key}"]`) as HTMLInputElement
 
   it('shows each value, or its default, with its range', async () => {
     const el = await make()
@@ -59,4 +59,28 @@ describe('number-map', () => {
     expect(el.value).to.deep.equal({ pitch: 150 })
     expect(input.value).to.equal('10')
   })
+
+  it('★ a ranged entry has a slider: every step of a drag is told, and the number follows', async () => {
+    const el = await make()
+    const slider = el.renderRoot.querySelector('input[type=range][data-key="gap"]') as HTMLInputElement
+    let told = 0
+    el.addEventListener('change', () => told++)
+    slider.value = '30'
+    slider.dispatchEvent(new Event('input', { bubbles: true }))
+    expect(field(el, 'gap').value).to.equal('30')
+    expect(told).to.equal(1)
+    expect(el.value).to.deep.equal({ pitch: 150, gap: 30 })
+    slider.value = '40'
+    slider.dispatchEvent(new Event('input', { bubbles: true }))
+    expect(told).to.equal(2)
+    expect(el.value).to.deep.equal({ pitch: 150, gap: 40 })
+  })
+
+  it('an entry without a range has no slider; its field takes the room', async () => {
+    const el = await fixture<OxPropertyEditorNumberMap>(
+      html`<ox-property-editor-number-map name="clips" .property=${{ entries: [{ key: 'run', label: 'run', min: 0 }] }}></ox-property-editor-number-map>`
+    )
+    expect(el.renderRoot.querySelector('input[type=range]')).to.equal(null)
+    expect(field(el, 'run').hasAttribute('wide')).to.equal(true)
+  })
 })