popmotion-pose/lib/_tests/index.js

A declarative animation library for HTML and SVG

import pose from '../';
var getDiv = function () { return document.createElement('div'); };
test('initialPose via init', function () {
    var poser = pose(getDiv(), {
        init: { backgroundColor: '#f77' }
    });
    expect(poser.get('backgroundColor').get()).toBe('#f77');
});
test('initialPose via prop', function () {
    var poser = pose(getDiv(), {
        foo: { x: 5 },
        bar: { x: 10 },
        initialPose: 'bar'
    });
    expect(poser.get('x').get()).toBe(10);
});
test('uses default transition', function () {
    var poser = pose(getDiv(), {
        init: { x: 0 },
        foo: { x: 50 }
    });
    return poser.set('foo').then(function () { return expect(poser.get('x').get()).toBe(50); });
});
test('correctly rounds values', function () {
    var isRounded = true;
    var poser = pose(getDiv(), {
        init: {
            x: 0,
            transition: {
                duration: 50,
                round: false
            }
        },
        foo: {
            x: 50,
            transition: {
                duration: 50,
                round: true
            }
        },
        onChange: {
            x: function (v) { return (isRounded === true ? (isRounded = !(v % 1)) : false); }
        }
    });
    return poser
        .set('foo')
        .then(function () {
        expect(isRounded).toBe(true);
        return poser.set('init');
    })
        .then(function () {
        expect(isRounded).toBe(false);
    });
});
test('correctly caps values', function () {
    var isActive = false;
    var largerThanTen = false;
    var smallerThanThree = false;
    var poser = pose(getDiv(), {
        init: { x: 0 },
        foo: {
            x: 12,
            transition: {
                duration: 50,
                min: 3,
                max: 10
            }
        },
        onChange: {
            x: function (v) {
                if (isActive) {
                    largerThanTen = largerThanTen || v > 10;
                    smallerThanThree = smallerThanThree || v < 3;
                }
            }
        }
    });
    isActive = true;
    return poser.set('foo').then(function () {
        expect(largerThanTen).toBe(false);
        expect(smallerThanThree).toBe(false);
    });
});
test('correctly delays animations', function () {
    var isDelayed = true;
    var poser = pose(getDiv(), {
        init: { x: 0 },
        foo: {
            x: 10,
            delay: 50,
            transition: { duration: 50 }
        },
        bar: {
            x: 20,
            transition: {
                delay: 50,
                duration: 50
            }
        }
    });
    setTimeout(function () {
        if (poser.get('x').get() > 0)
            isDelayed = false;
    }, 40);
    return poser
        .set('foo')
        .then(function () {
        expect(isDelayed).toBe(true);
        setTimeout(function () {
            if (poser.get('x').get() > 10)
                isDelayed = false;
        }, 40);
        return poser.set('bar');
    })
        .then(function () {
        expect(isDelayed).toBe(true);
    });
});
test('correctly animates children', function () {
    var poser = pose(getDiv(), {});
    var childPoser = poser.addChild(getDiv(), {
        init: { x: 0 },
        foo: { x: 100, transition: { duration: 50 } }
    });
    return poser.set('foo').then(function () {
        expect(childPoser.get('x').get()).toBe(100);
    });
});
test('passive values', function () {
    var poser = pose(getDiv(), {
        init: { x: 0 },
        foo: { x: 100, transition: { duration: 50 } },
        passive: {
            y: ['x', function (v) { return -v; }]
        }
    });
    return poser.set('foo').then(function () {
        expect(poser.get('y').get()).toBe(-100);
    });
});
test('hover events', function () {
    var div = getDiv();
    var poser = pose(div, {
        hoverable: true,
        init: { scale: 1, transition: { duration: 50 } },
        hover: { scale: 1.2, transition: { duration: 50 } }
    });
    div.dispatchEvent(new MouseEvent('mouseenter'));
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            poser.get('scale').get() === 1.2 ? resolve() : reject();
        }, 75);
    }).then(function () {
        return new Promise(function (resolve, reject) {
            div.dispatchEvent(new MouseEvent('mouseleave'));
            setTimeout(function () {
                poser.get('scale').get() === 1 ? resolve() : reject();
            }, 75);
        });
    });
});
test('focus events', function () {
    var input = document.createElement('input');
    var poser = pose(input, {
        focusable: true,
        init: { scale: 1, transition: { duration: 50 } },
        focus: { scale: 1.2, transition: { duration: 50 } }
    });
    input.dispatchEvent(new FocusEvent('focus'));
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            poser.get('scale').get() === 1.2 ? resolve() : reject();
        }, 75);
    }).then(function () {
        return new Promise(function (resolve, reject) {
            input.dispatchEvent(new FocusEvent('blur'));
            setTimeout(function () {
                poser.get('scale').get() === 1 ? resolve() : reject();
            }, 75);
        });
    });
});
test('applyAtEnd for positional key when transitioning it from one unit type to another', function () {
    var poser = pose(getDiv(), {
        closed: { width: '0%' },
        opened: {
            width: '300px',
            applyAtEnd: {
                width: '400px',
            },
        },
    });
    return poser
        .set('closed')
        .then(function () { return poser.set('opened'); })
        .then(function () {
        expect(poser.get('width').get()).toBe('400px');
    });
});
test("correct final values are applied when transitioning between unit types for posers with shared applyAtEnd", function () {
    var applyAtEnd = {
        backgroundColor: 'blue',
    };
    var poserA = pose(getDiv(), {
        initialPose: 'closed',
        closed: {
            width: '0%',
        },
        opened: {
            width: '300px',
            applyAtEnd: applyAtEnd,
        },
    });
    var poserB = pose(getDiv(), {
        initialPose: 'closed',
        closed: {
            width: '0%',
        },
        opened: {
            width: '40vw',
            applyAtEnd: applyAtEnd,
        },
    });
    return poserA.set('opened')
        .then(function () { return poserB.set('opened'); })
        .then(function () {
        expect(poserB.get('width').get()).toBe('40vw');
    });
});
//# sourceMappingURL=index.js.map