alpine/tests/cypress/integration/plugins/sort.spec.js

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

test('basic drag sorting works',
    [html`
        <div x-data>
            <ul x-sort>
                <li id="1">foo</li>
                <li id="2">bar</li>
                <li id="3">baz</li>
            </ul>
        </div>
    `],
    async ({ get }) => {
        get('ul li').eq(0).should(haveText('foo'))
        get('ul li').eq(1).should(haveText('bar'))
        get('ul li').eq(2).should(haveText('baz'))

        await get('#1').drag('#3')

        get('ul li').eq(0).should(haveText('bar'))
        get('ul li').eq(1).should(haveText('baz'))
        get('ul li').eq(2).should(haveText('foo'))

        await get('#3').drag('#1')

        get('ul li').eq(0).should(haveText('bar'))
        get('ul li').eq(1).should(haveText('foo'))
        get('ul li').eq(2).should(haveText('baz'))
    },
)

test('can use a custom handle',
    [html`
        <div x-data>
            <ul x-sort>
                <li id="1"><span x-sort:handle>handle</span> - foo</li>
                <li id="2"><span x-sort:handle>handle</span> - bar</li>
            </ul>
        </div>
    `],
    async ({ get }) => {
        get('ul li').eq(0).should(haveText('handle - foo'))
        get('ul li').eq(1).should(haveText('handle - bar'))

        await get('#1 span').drag('#2')

        get('ul li').eq(0).should(haveText('handle - bar'))
        get('ul li').eq(1).should(haveText('handle - foo'))
    },
)

test('can move items between groups',
    [html`
        <div x-data>
            <ul x-sort.group.one>
                <li id="1">foo</li>
                <li id="2">bar</li>
            </ul>

            <ol x-sort.group.one>
                <li id="3">oof</li>
                <li id="4">rab</li>
            </ol>
        </div>
    `],
    async ({ get }) => {
        get('ul li').eq(0).should(haveText('foo'))
        get('ul li').eq(1).should(haveText('bar'))
        get('ol li').eq(0).should(haveText('oof'))
        get('ol li').eq(1).should(haveText('rab'))

        await get('#1').drag('#4')

        get('ul li').eq(0).should(haveText('bar'))
        get('ol li').eq(0).should(haveText('oof'))
        get('ol li').eq(1).should(haveText('foo'))
        get('ol li').eq(2).should(haveText('rab'))
    },
)

test('sort handle method',
    [html`
        <div x-data="{ handle(key, position) { $refs.outlet.textContent = key+'-'+position } }">
            <ul x-sort="handle">
                <li x-sort:key="1" id="1">foo</li>
                <li x-sort:key="2" id="2">bar</li>
                <li x-sort:key="3" id="3">baz</li>
            </ul>

            <h1 x-ref="outlet"></h1>
        </div>
    `],
    async ({ get }) => {
        await get('#1').drag('#3')

        get('h1').should(haveText('1-2'))

        await get('#3').drag('#1')

        get('h1').should(haveText('3-2'))
    },
)

test('can access key and position in handler',
    [html`
        <div x-data="{ handle(key, position) { $refs.outlet.textContent = key+'-'+position } }">
            <ul x-sort="handle($position, $key)">
                <li x-sort:key="1" id="1">foo</li>
                <li x-sort:key="2" id="2">bar</li>
                <li x-sort:key="3" id="3">baz</li>
            </ul>

            <h1 x-ref="outlet"></h1>
        </div>
    `],
    async ({ get }) => {
        await get('#1').drag('#3')

        get('h1').should(haveText('2-1'))

        await get('#3').drag('#1')

        get('h1').should(haveText('2-3'))
    },
)

test('can use custom sortablejs configuration',
    [html`
        <div x-data>
            <ul x-sort x-sort:config="{ filter: '[data-ignore]' }">
                <li id="1" data-ignore>foo</li>
                <li id="2">bar</li>
                <li id="3">baz</li>
            </ul>
        </div>
    `],
    async ({ get }) => {
        get('ul li').eq(0).should(haveText('foo'))
        get('ul li').eq(1).should(haveText('bar'))
        get('ul li').eq(2).should(haveText('baz'))

        await get('#1').drag('#3')

        get('ul li').eq(0).should(haveText('foo'))
        get('ul li').eq(1).should(haveText('bar'))
        get('ul li').eq(2).should(haveText('baz'))

        await get('#3').drag('#1')

        get('ul li').eq(0).should(haveText('baz'))
        get('ul li').eq(1).should(haveText('foo'))
        get('ul li').eq(2).should(haveText('bar'))
    },
)

test('works with Livewire morphing',
    [html`
        <div x-data>
            <ul x-sort>
                <!-- [if BLOCK]><![endif] -->
                <li id="1">foo</li>
                <li id="2">bar</li>
                <li id="3">baz</li>
                <!-- [if ENDBLOCK]><![endif] -->
            </ul>
        </div>
    `],
    async ({ get }) => {
        await get('#1').drag('#3')

        // This is the easiest way I can think of to assert the order of HTML comments doesn't change...
        get('ul').should('have.html', `\n                <!-- [if BLOCK]><![endif] -->\n                \n                <li x-sort:item="" id="2" style="">bar</li>\n                <li x-sort:item="" id="3" style="">baz</li>\n                \n            <li x-sort:item="" id="1" draggable="false" class="" style="opacity: 1;">foo</li><!-- [if ENDBLOCK]><![endif] -->`)
    },
)