alpine/tests/cypress/integration/entangle.spec.js

import { haveValue, html, test } from '../utils'

test.skip('can entangle to getter/setter pairs',
    [html`
    <div x-data="{ outer: 'foo' }">
        <input x-model="outer" outer>

        <div x-data="{ inner: 'bar' }" x-init="() => {}; Alpine.entangle(
            {
                get() { return outer },
                set(value) { outer = value },
            },
            {
                get() { return inner },
                set(value) { inner = value },
            }
        )">
            <input x-model="inner" inner>
        </div>
    </div>
    `],
    ({ get }) => {
        get('input[outer]').should(haveValue('foo'))
        get('input[inner]').should(haveValue('foo'))

        get('input[inner]').type('bar')
        get('input[inner]').should(haveValue('foobar'))
        get('input[outer]').should(haveValue('foobar'))

        get('input[outer]').type('baz')
        get('input[outer]').should(haveValue('foobarbaz'))
        get('input[inner]').should(haveValue('foobarbaz'))
    }
)

test.skip('can release entanglement',
    [html`
        <div x-data="{ outer: 'foo' }">
            <input x-model="outer" outer>

            <div x-data="{ inner: 'bar', release: () => {} }" x-init="() => {}; release = Alpine.entangle(
                {
                    get() { return outer },
                    set(value) { outer = value },
                },
                {
                    get() { return inner },
                    set(value) { inner = value },
                }
            )">
                <input x-model="inner" inner>

                <button @click="release()">release</button>
            </div>
        </div>
    `],
    ({ get }) => {
        get('input[outer]').should(haveValue('foo'))
        get('input[inner]').should(haveValue('foo'))

        get('input[inner]').type('bar')
        get('input[inner]').should(haveValue('foobar'))
        get('input[outer]').should(haveValue('foobar'))

        get('button').click()

        get('input[inner]').type('baz')
        get('input[inner]').should(haveValue('foobarbaz'))
        get('input[outer]').should(haveValue('foobar'))
    }
)

test(
    "can handle undefined",
    [
        html`
            <div x-data="{ outer: undefined }">
                <input x-model="outer" outer />

                <div
                    x-data="{ inner: 'bar' }"
                    x-init="() => {}; Alpine.entangle(
            {
                get() { return outer },
                set(value) { outer = value },
            },
            {
                get() { return inner },
                set(value) { inner = value },
            }
        )"
                >
                    <input x-model="inner" inner />
                </div>
            </div>
        `,
    ],
    ({ get }) => {
        get("input[outer]").should(haveValue(''));
        get("input[inner]").should(haveValue(''));

        get("input[inner]").type("bar");
        get("input[inner]").should(haveValue("bar"));
        get("input[outer]").should(haveValue("bar"));
    }
);