Merge pull request #647 from Marvinified/tests-model-bind-all-input-types

Tests x-model binding for all input types

test/model.spec.js

@@ -2,7 +2,7 @@ import Alpine from 'alpinejs'
 import { wait, fireEvent } from '@testing-library/dom'
 
 global.MutationObserver = class {
-    observe() {}
+    observe() { }
 }
 
 test('x-model has value binding when initialized', async () => {
@@ -26,7 +26,7 @@ test('x-model updates value when updated via input event', async () => {
 
     Alpine.start()
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'baz' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'baz' } })
 
     await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
 })
@@ -56,7 +56,7 @@ test('x-model casts value to number if number modifier is present', async () =>
 
     Alpine.start()
 
-    fireEvent.input(document.querySelector('input'), { target: { value: '123' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: '123' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(123) })
 })
@@ -71,27 +71,27 @@ test('x-model with number modifier returns: null if empty, original value if cas
 
     Alpine.start()
 
-    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '' }})
+    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(null) })
 
-    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-' }})
+    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(null) })
 
-    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-123' }})
+    fireEvent.input(document.querySelectorAll('input')[0], { target: { value: '-123' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(-123) })
 
-    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '' }})
+    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual(null) })
 
-    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-' }})
+    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual('-') })
 
-    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-123' }})
+    fireEvent.input(document.querySelectorAll('input')[1], { target: { value: '-123' } })
 
     await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual(-123) })
 })
@@ -107,7 +107,7 @@ test('x-model trims value if trim modifier is present', async () => {
 
     Alpine.start()
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'bar   ' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'bar   ' } })
 
     await wait(() => { expect(document.querySelector('span').innerText).toEqual('bar') })
 })
@@ -121,7 +121,7 @@ test('x-model updates value when updated via changed event when lazy modifier is
 
     Alpine.start()
 
-    fireEvent.change(document.querySelector('input'), { target: { value: 'baz' }})
+    fireEvent.change(document.querySelector('input'), { target: { value: 'baz' } })
 
     await wait(() => { expect(document.querySelector('input').value).toEqual('baz') })
 })
@@ -140,7 +140,7 @@ test('x-model binds checkbox value', async () => {
     expect(document.querySelector('input').checked).toEqual(true)
     expect(document.querySelector('span').getAttribute('bar')).toEqual("true")
 
-    fireEvent.change(document.querySelector('input'), { target: { checked: false }})
+    fireEvent.change(document.querySelector('input'), { target: { checked: false } })
 
     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("false") })
 })
@@ -161,7 +161,7 @@ test('x-model binds checkbox value to array', async () => {
     expect(document.querySelectorAll('input')[1].checked).toEqual(false)
     expect(document.querySelector('span').getAttribute('bar')).toEqual("bar")
 
-    fireEvent.change(document.querySelectorAll('input')['1'], { target: { checked: true }})
+    fireEvent.change(document.querySelectorAll('input')['1'], { target: { checked: true } })
 
     await wait(() => {
         expect(document.querySelectorAll('input')[0].checked).toEqual(true)
@@ -192,16 +192,16 @@ test('x-model checkbox array binding supports .number modifier', async () => {
     expect(document.querySelectorAll('input[type=checkbox]')[2].checked).toEqual(false)
     expect(document.querySelector('span').getAttribute('bar')).toEqual("[2]")
 
-    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[2], { target: { checked: true }})
+    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[2], { target: { checked: true } })
 
     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[2,3]") })
 
-    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[0], { target: { checked: true }})
+    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[0], { target: { checked: true } })
 
     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[2,3,1]") })
 
-    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[0], { target: { checked: false }})
-    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[1], { target: { checked: false }})
+    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[0], { target: { checked: false } })
+    fireEvent.change(document.querySelectorAll('input[type=checkbox]')[1], { target: { checked: false } })
     await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[3]") })
 })
 
@@ -221,7 +221,7 @@ test('x-model binds radio value', async () => {
     expect(document.querySelectorAll('input')[1].checked).toEqual(false)
     expect(document.querySelector('span').getAttribute('bar')).toEqual('bar')
 
-    fireEvent.change(document.querySelectorAll('input')[1], { target: { checked: true }})
+    fireEvent.change(document.querySelectorAll('input')[1], { target: { checked: true } })
 
     await wait(() => {
         expect(document.querySelectorAll('input')[0].checked).toEqual(false)
@@ -250,7 +250,7 @@ test('x-model binds select dropdown', async () => {
     expect(document.querySelectorAll('option')[2].selected).toEqual(false)
     expect(document.querySelector('span').innerText).toEqual('bar')
 
-    fireEvent.change(document.querySelector('select'), { target: { value: 'baz' }});
+    fireEvent.change(document.querySelector('select'), { target: { value: 'baz' } });
 
     await wait(() => {
         expect(document.querySelectorAll('option')[0].selected).toEqual(false)
@@ -304,7 +304,7 @@ test('x-model binds nested keys', async () => {
     expect(document.querySelector('input').value).toEqual('foo')
     expect(document.querySelector('span').innerText).toEqual('foo')
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } })
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('bar')
@@ -325,7 +325,7 @@ test('x-model undefined nested model key defaults to empty string', async () =>
     expect(document.querySelector('input').value).toEqual('')
     expect(document.querySelector('span').innerText).toEqual('')
 
-    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' }})
+    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } })
 
     await wait(() => {
         expect(document.querySelector('input').value).toEqual('bar')
@@ -352,3 +352,346 @@ test('x-model can listen for custom input event dispatches', async () => {
         expect(document.querySelector('span').innerText).toEqual('baz')
     })
 })
+
+// <input type="color"> 
+test('x-model bind color input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '#ff0000' }">
+        <input type="color" x-model="key">
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('#ff0000')
+    expect(document.querySelector('span').innerText).toEqual('#ff0000')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: '#00ff00' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('#00ff00')
+        expect(document.querySelector('span').innerText).toEqual('#00ff00')
+    })
+
+})
+
+// <input type="button"> 
+test('x-model bind button input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: 'foo' }">
+        <input type="button" x-model="key">
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('foo')
+    expect(document.querySelector('span').innerText).toEqual('foo')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('bar')
+        expect(document.querySelector('span').innerText).toEqual('bar')
+    })
+})
+
+// <input type="date"> 
+test('x-model bind date input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '2020-07-10' }">
+      <input type="date" x-model="key" />
+      <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('2020-07-10')
+    expect(document.querySelector('span').innerText).toEqual('2020-07-10')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: '2021-01-01' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('2021-01-01')
+        expect(document.querySelector('span').innerText).toEqual('2021-01-01')
+    })
+})
+
+// <input type="datetime-local"> 
+test('x-model bind datetime-local input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '2020-01-01T20:00' }">
+      <input type="datetime-local" x-model="key" />
+      <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('2020-01-01T20:00')
+    expect(document.querySelector('span').innerText).toEqual('2020-01-01T20:00')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: '2021-02-02T20:00' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('2021-02-02T20:00')
+        expect(document.querySelector('span').innerText).toEqual('2021-02-02T20:00')
+    })
+})
+
+// <input type="email"> 
+test('x-model bind email input', async () => {
+})
+
+// <input type="month"> 
+test('x-model bind month input', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ key: '2020-04' }">
+        <input type="month" x-model="key" />
+        <span x-text="key"></span>
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('2020-04')
+    expect(document.querySelector('span').innerText).toEqual('2020-04')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: '2021-05' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('2021-05')
+        expect(document.querySelector('span').innerText).toEqual('2021-05')
+    })
+})
+
+
+// <input type="number"> 
+test('x-model bind number input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '11' }">
+        <input type="number" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('11')
+    expect(document.querySelector('span').innerText).toEqual('11')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: '2021' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('2021')
+        expect(document.querySelector('span').innerText).toEqual('2021')
+    })
+})
+
+// <input type="password"> 
+test('x-model bind password input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: 'SecretKey' }">
+        <input type="password" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('SecretKey')
+    expect(document.querySelector('span').innerText).toEqual('SecretKey')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: 'NewSecretKey' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('NewSecretKey')
+        expect(document.querySelector('span').innerText).toEqual('NewSecretKey')
+    })
+})
+
+// <input type="range"> 
+test('x-model bind range input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '10' }">
+        <input type="range" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('10')
+    expect(document.querySelector('span').innerText).toEqual('10')
+
+    fireEvent.input(document.querySelector('input'), { target: { value: '20' } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual('20')
+        expect(document.querySelector('span').innerText).toEqual('20')
+    })
+})
+
+// <input type="search"> 
+test('x-model bind search input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '' }">
+        <input type="search" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('')
+    expect(document.querySelector('span').innerText).toEqual('')
+
+    const newValue = 'Frontend Frameworks';
+    fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual(newValue)
+        expect(document.querySelector('span').innerText).toEqual(newValue)
+    })
+})
+
+// <input type="tel"> 
+test('x-model bind tel input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '+12345678901' }">
+        <input type="tel" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('+12345678901')
+    expect(document.querySelector('span').innerText).toEqual('+12345678901')
+
+    const newValue = '+1239874560';
+    fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual(newValue)
+        expect(document.querySelector('span').innerText).toEqual(newValue)
+    })
+})
+
+// <input type="tel"> 
+test('x-model bind tel input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '+12345678901' }">
+        <input type="tel" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('+12345678901')
+    expect(document.querySelector('span').innerText).toEqual('+12345678901')
+
+    const newValue = '+1239874560';
+    fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual(newValue)
+        expect(document.querySelector('span').innerText).toEqual(newValue)
+    })
+})
+
+// <input type="tel"> 
+test('x-model bind time input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '22:00' }">
+        <input type="time" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('22:00')
+    expect(document.querySelector('span').innerText).toEqual('22:00')
+
+    const newValue = '23:00';
+    fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual(newValue)
+        expect(document.querySelector('span').innerText).toEqual(newValue)
+    })
+})
+
+// <input type="time"> 
+test('x-model bind time input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '22:00' }">
+        <input type="time" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('22:00')
+    expect(document.querySelector('span').innerText).toEqual('22:00')
+
+    const newValue = '23:00';
+    fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual(newValue)
+        expect(document.querySelector('span').innerText).toEqual(newValue)
+    })
+})
+
+// <input type="week"> 
+test('x-model bind week input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: '2020-W20' }">
+        <input type="week" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('2020-W20')
+    expect(document.querySelector('span').innerText).toEqual('2020-W20')
+
+    const newValue = '2020-W30';
+    fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual(newValue)
+        expect(document.querySelector('span').innerText).toEqual(newValue)
+    })
+})
+
+// <input type="url"> 
+test('x-model bind url input', async () => {
+    document.body.innerHTML = `
+    <div x-data="{ key: 'https://example.com' }">
+        <input type="url" x-model="key" />
+        <span x-text="key"></span>
+    </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input').value).toEqual('https://example.com')
+    expect(document.querySelector('span').innerText).toEqual('https://example.com')
+
+    const newValue = 'https://alpine.io';
+    fireEvent.input(document.querySelector('input'), { target: { value: newValue } });
+
+    await wait(() => {
+        expect(document.querySelector('input').value).toEqual(newValue)
+        expect(document.querySelector('span').innerText).toEqual(newValue)
+    })
+})