ÿØÿà JFIF ÿá Exif MM * ÿÛ C
Server IP : 199.250.214.225 / Your IP : 18.226.172.225 Web Server : Apache System : Linux vps64074.inmotionhosting.com 3.10.0-1160.105.1.vz7.214.3 #1 SMP Tue Jan 9 19:45:01 MSK 2024 x86_64 User : nicngo5 ( 1001) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : OFF Directory : /home/nicngo5/funds.upgrade.nicn.gov.ng/funds-upgraded/node_modules/alpinejs/test/ |
Upload File : |
import Alpine from 'alpinejs' import { wait, fireEvent } from '@testing-library/dom' global.MutationObserver = class { observe() { } } test('x-model has value binding when initialized', async () => { document.body.innerHTML = ` <div x-data="{ foo: 'bar' }"> <input x-model="foo"></input> </div> ` Alpine.start() expect(document.querySelector('input').value).toEqual('bar') }) test('x-model updates value when updated via input event', async () => { document.body.innerHTML = ` <div x-data="{ foo: 'bar' }"> <input x-model="foo"></input> </div> ` Alpine.start() fireEvent.input(document.querySelector('input'), { target: { value: 'baz' } }) await wait(() => { expect(document.querySelector('input').value).toEqual('baz') }) }) test('x-model reflects data changed elsewhere', async () => { document.body.innerHTML = ` <div x-data="{ foo: 'bar' }"> <input x-model="foo"></input> <button x-on:click="foo = 'baz'"></button> </div> ` Alpine.start() document.querySelector('button').click() await wait(() => { expect(document.querySelector('input').value).toEqual('baz') }) }) test('x-model casts value to number if number modifier is present', async () => { document.body.innerHTML = ` <div x-data="{ foo: null }"> <input type="number" x-model.number="foo"></input> </div> ` Alpine.start() fireEvent.input(document.querySelector('input'), { target: { value: '123' } }) await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(123) }) }) test('x-model with number modifier returns: null if empty, original value if casting fails, numeric value if casting passes', async () => { document.body.innerHTML = ` <div x-data="{ foo: 0, bar: '' }"> <input type="number" x-model.number="foo"></input> <input x-model.number="bar"></input> </div> ` Alpine.start() 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: '-' } }) await wait(() => { expect(document.querySelector('[x-data]').__x.$data.foo).toEqual(null) }) 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: '' } }) await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual(null) }) 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' } }) await wait(() => { expect(document.querySelector('[x-data]').__x.$data.bar).toEqual(-123) }) }) test('x-model trims value if trim modifier is present', async () => { document.body.innerHTML = ` <div x-data="{ foo: '' }"> <input x-model.trim="foo"></input> <span x-text="foo"></span> </div> ` Alpine.start() fireEvent.input(document.querySelector('input'), { target: { value: 'bar ' } }) await wait(() => { expect(document.querySelector('span').textContent).toEqual('bar') }) }) test('x-model updates value when updated via changed event when lazy modifier is present', async () => { document.body.innerHTML = ` <div x-data="{ foo: 'bar' }"> <input x-model.lazy="foo"></input> </div> ` Alpine.start() fireEvent.change(document.querySelector('input'), { target: { value: 'baz' } }) await wait(() => { expect(document.querySelector('input').value).toEqual('baz') }) }) test('x-model binds checkbox value', async () => { document.body.innerHTML = ` <div x-data="{ foo: true }"> <input type="checkbox" x-model="foo"></input> <span x-bind:bar="JSON.stringify(foo)"></span> </div> ` Alpine.start() expect(document.querySelector('input').checked).toEqual(true) expect(document.querySelector('span').getAttribute('bar')).toEqual("true") fireEvent.change(document.querySelector('input'), { target: { checked: false } }) await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("false") }) }) test('x-model binds checkbox value to array', async () => { document.body.innerHTML = ` <div x-data="{ foo: ['bar'] }"> <input type="checkbox" x-model="foo" value="bar"></input> <input type="checkbox" x-model="foo" value="baz"></input> <span x-bind:bar="foo"></span> </div> ` Alpine.start() expect(document.querySelectorAll('input')[0].checked).toEqual(true) 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 } }) await wait(() => { expect(document.querySelectorAll('input')[0].checked).toEqual(true) expect(document.querySelectorAll('input')[1].checked).toEqual(true) expect(document.querySelector('span').getAttribute('bar')).toEqual("bar,baz") }) }) test('x-model checkbox array binding supports .number modifier', async () => { document.body.innerHTML = ` <div x-data="{ selected: [2] }" > <input type="checkbox" value="1" x-model.number="selected" /> <input type="checkbox" value="2" x-model.number="selected" /> <input type="checkbox" value="3" x-model.number="selected" /> <span x-bind:bar="JSON.stringify(selected)"></span> </div> ` Alpine.start() expect(document.querySelectorAll('input[type=checkbox]')[0].checked).toEqual(false) expect(document.querySelectorAll('input[type=checkbox]')[1].checked).toEqual(true) 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 } }) await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[2,3]") }) 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 } }) await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[3]") }) }) test('x-model checkbox array binding is consistent (if value is initially checked, it can be unchecked)', async () => { // https://github.com/alpinejs/alpine/issues/814 document.body.innerHTML = ` <div x-data="{ selected: [2] }" > <input type="checkbox" value="2" x-model="selected" /> <span x-bind:bar="JSON.stringify(selected)"></span> </div> ` Alpine.start() expect(document.querySelector('input[type=checkbox]').checked).toEqual(true) expect(document.querySelector('span').getAttribute('bar')).toEqual("[2]") fireEvent.change(document.querySelector('input[type=checkbox]'), { target: { checked: false } }) await wait(() => { expect(document.querySelector('span').getAttribute('bar')).toEqual("[]") }) }) test('x-model binds radio value', async () => { document.body.innerHTML = ` <div x-data="{ foo: 'bar' }"> <input type="radio" x-model="foo" value="bar"></input> <input type="radio" x-model="foo" value="baz"></input> <span x-bind:bar="foo"></span> </div> ` Alpine.start() expect(document.querySelectorAll('input')[0].checked).toEqual(true) 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 } }) await wait(() => { expect(document.querySelectorAll('input')[0].checked).toEqual(false) expect(document.querySelectorAll('input')[1].checked).toEqual(true) expect(document.querySelector('span').getAttribute('bar')).toEqual('baz') }) }) test('x-model binds select dropdown', async () => { document.body.innerHTML = ` <div x-data="{ foo: 'bar' }"> <select x-model="foo"> <option disabled value="">Please select one</option> <option>bar</option> <option>baz</option> </select> <span x-text="foo"></span> </div> ` Alpine.start() expect(document.querySelectorAll('option')[0].selected).toEqual(false) expect(document.querySelectorAll('option')[1].selected).toEqual(true) expect(document.querySelectorAll('option')[2].selected).toEqual(false) expect(document.querySelector('span').textContent).toEqual('bar') fireEvent.change(document.querySelector('select'), { target: { value: 'baz' } }); await wait(() => { expect(document.querySelectorAll('option')[0].selected).toEqual(false) expect(document.querySelectorAll('option')[1].selected).toEqual(false) expect(document.querySelectorAll('option')[2].selected).toEqual(true) expect(document.querySelector('span').textContent).toEqual('baz') }) }) test('x-model binds multiple select dropdown', async () => { document.body.innerHTML = ` <div x-data="{ foo: ['bar'] }"> <select x-model="foo" multiple> <option disabled value="">Please select one</option> <option>bar</option> <option>baz</option> </select> <span x-text="foo"></span> </div> ` Alpine.start() expect(document.querySelectorAll('option')[0].selected).toEqual(false) expect(document.querySelectorAll('option')[1].selected).toEqual(true) expect(document.querySelectorAll('option')[2].selected).toEqual(false) expect(document.querySelector('span').textContent).toEqual('bar') document.querySelectorAll('option')[2].selected = true fireEvent.change(document.querySelector('select')); await wait(() => { expect(document.querySelectorAll('option')[0].selected).toEqual(false) expect(document.querySelectorAll('option')[1].selected).toEqual(true) expect(document.querySelectorAll('option')[2].selected).toEqual(true) expect(document.querySelector('span').textContent).toEqual('bar,baz') }) }) test('x-model binds nested keys', async () => { document.body.innerHTML = ` <div x-data="{ some: { nested: { key: 'foo' } } }"> <input type="text" x-model="some.nested.key"> <span x-text="some.nested.key"></span> </div> ` Alpine.start() expect(document.querySelector('input').value).toEqual('foo') expect(document.querySelector('span').textContent).toEqual('foo') fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } }) await wait(() => { expect(document.querySelector('input').value).toEqual('bar') expect(document.querySelector('span').textContent).toEqual('bar') }) }) test('x-model undefined nested model key defaults to empty string', async () => { document.body.innerHTML = ` <div x-data="{ some: { nested: {} } }"> <input type="text" x-model="some.nested.key"> <span x-text="some.nested.key"></span> </div> ` Alpine.start() expect(document.querySelector('input').value).toEqual('') expect(document.querySelector('span').textContent).toEqual('') fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } }) await wait(() => { expect(document.querySelector('input').value).toEqual('bar') expect(document.querySelector('span').textContent).toEqual('bar') }) }) test('x-model can listen for custom input event dispatches', async () => { document.body.innerHTML = ` <div x-data="{ foo: 'bar' }" x-model="foo"> <button @click="$dispatch('input', 'baz')"></button> <span x-text="foo"></span> </div> ` Alpine.start() expect(document.querySelector('span').textContent).toEqual('bar') document.querySelector('button').click() await wait(() => { expect(document.querySelector('span').textContent).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').textContent).toEqual('#ff0000') fireEvent.input(document.querySelector('input'), { target: { value: '#00ff00' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('#00ff00') expect(document.querySelector('span').textContent).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').textContent).toEqual('foo') fireEvent.input(document.querySelector('input'), { target: { value: 'bar' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('bar') expect(document.querySelector('span').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).toEqual('11') fireEvent.input(document.querySelector('input'), { target: { value: '2021' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('2021') expect(document.querySelector('span').textContent).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').textContent).toEqual('SecretKey') fireEvent.input(document.querySelector('input'), { target: { value: 'NewSecretKey' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('NewSecretKey') expect(document.querySelector('span').textContent).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').textContent).toEqual('10') fireEvent.input(document.querySelector('input'), { target: { value: '20' } }); await wait(() => { expect(document.querySelector('input').value).toEqual('20') expect(document.querySelector('span').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).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').textContent).toEqual(newValue) }) }) test('x-model sets value before x-on directive expression is processed', async () => { window.selectValueA window.selectValueB document.body.innerHTML = ` <div x-data="{ a: 'foo', b: 'foo' }"> <select x-model="a" @change="window.selectValueA = a"> <option>foo</option> <option>bar</option> </select> <select @change="window.selectValueB = b" x-model="b"> <option>foo</option> <option>bar</option> </select> </div> ` Alpine.start() fireEvent.change(document.querySelectorAll('select')[0], { target: { value: 'bar' } }); fireEvent.change(document.querySelectorAll('select')[1], { target: { value: 'bar' } }); await wait(() => { expect(window.selectValueA).toEqual('bar') expect(window.selectValueB).toEqual('bar') }) })