@tdb/util/lib/helpers/css/test/css-positioning.test.js

Shared helpers and utilities.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var chai_1 = require("chai");
var css_1 = require("../css");
describe('React: transformStyle - positioning', function () {
    describe('converting from transformStyle - function', function () {
        it('converts an `Absolute` value (deep)', function () {
            var style = css_1.transformStyle({ Absolute: '10 20em 30px 40' });
            chai_1.expect(style.position).to.equal('absolute');
            chai_1.expect(style.top).to.equal(10);
            chai_1.expect(style.right).to.equal('20em');
            chai_1.expect(style.bottom).to.equal(30);
            chai_1.expect(style.left).to.equal(40);
        });
        it('converts a `Fixed` value', function () {
            var style = css_1.transformStyle({ Fixed: '10 20em 30px 40' });
            chai_1.expect(style.position).to.equal('fixed');
            chai_1.expect(style.top).to.equal(10);
            chai_1.expect(style.right).to.equal('20em');
            chai_1.expect(style.bottom).to.equal(30);
            chai_1.expect(style.left).to.equal(40);
        });
        it('converts array value (with null\'s)', function () {
            var style = css_1.transformStyle({
                Absolute: ['10', null, '30px', '40em'],
            });
            chai_1.expect(style.position).to.equal('absolute');
            chai_1.expect(style.top).to.equal(10);
            chai_1.expect(style.right).to.equal(undefined);
            chai_1.expect(style.bottom).to.equal(30);
            chai_1.expect(style.left).to.equal('40em');
        });
        it('does nothing with an [undefined] value', function () {
            chai_1.expect(css_1.transformStyle({ Absolute: undefined })).to.eql({});
        });
        it('does nothing with an [empty-string] value', function () {
            chai_1.expect(css_1.transformStyle({ Absolute: '' })).to.eql({});
        });
    });
    describe('AbsoluteCenter', function () {
        it('converts `x`', function () {
            var style = css_1.transformStyle({ AbsoluteCenter: 'x' });
            chai_1.expect(style.position).to.equal('absolute');
            chai_1.expect(style.left).to.equal('50%');
            chai_1.expect(style.top).to.equal(undefined);
            chai_1.expect(style.transform).to.equal('translateX(-50%)');
        });
        it('converts `y`', function () {
            var style = css_1.transformStyle({ AbsoluteCenter: 'y' });
            chai_1.expect(style.position).to.equal('absolute');
            chai_1.expect(style.left).to.equal(undefined);
            chai_1.expect(style.top).to.equal('50%');
            chai_1.expect(style.transform).to.equal('translateY(-50%)');
        });
        it('converts `xy`', function () {
            var style = css_1.transformStyle({ AbsoluteCenter: 'xy' });
            chai_1.expect(style.position).to.equal('absolute');
            chai_1.expect(style.left).to.equal('50%');
            chai_1.expect(style.top).to.equal('50%');
            chai_1.expect(style.transform).to.equal('translate(-50%, -50%)');
        });
        it('retains top value (x)', function () {
            var style = css_1.transformStyle({
                left: 0,
                top: 0,
                AbsoluteCenter: 'x',
            });
            chai_1.expect(style.position).to.equal('absolute');
            chai_1.expect(style.left).to.equal('50%');
            chai_1.expect(style.top).to.equal(0);
            chai_1.expect(style.transform).to.equal('translateX(-50%)');
        });
        it('retains left value (y)', function () {
            var style = css_1.transformStyle({
                left: 0,
                top: 0,
                AbsoluteCenter: 'y',
            });
            chai_1.expect(style.position).to.equal('absolute');
            chai_1.expect(style.left).to.equal(0);
            chai_1.expect(style.top).to.equal('50%');
            chai_1.expect(style.transform).to.equal('translateY(-50%)');
        });
    });
    describe('toPositionEdges', function () {
        it('all edges from string', function () {
            var style = css_1.toPositionEdges('Absolute', '10 20 30em 40');
            chai_1.expect(style.position).to.equal('absolute');
            chai_1.expect(style.top).to.equal(10);
            chai_1.expect(style.right).to.equal(20);
            chai_1.expect(style.bottom).to.equal('30em');
            chai_1.expect(style.left).to.equal(40);
        });
        it('string containing `null`', function () {
            var style = css_1.toPositionEdges('Absolute', '10 null 30em null');
            chai_1.expect(style.top).to.equal(10);
            chai_1.expect(style.right).to.equal(undefined);
            chai_1.expect(style.bottom).to.equal('30em');
            chai_1.expect(style.left).to.equal(undefined);
        });
        describe('array', function () {
            it('all edges', function () {
                var style = css_1.toPositionEdges('Absolute', [
                    '10',
                    '20',
                    '30em',
                    '40',
                ]);
                chai_1.expect(style.top).to.equal(10);
                chai_1.expect(style.right).to.equal(20);
                chai_1.expect(style.bottom).to.equal('30em');
                chai_1.expect(style.left).to.equal(40);
            });
            it('all edges (0)', function () {
                var style = css_1.toPositionEdges('Absolute', [0, 0, 0, 0]);
                chai_1.expect(style.top).to.equal(0);
                chai_1.expect(style.right).to.equal(0);
                chai_1.expect(style.bottom).to.equal(0);
                chai_1.expect(style.left).to.equal(0);
            });
            it('empty array', function () {
                var style = css_1.toPositionEdges('Absolute', []);
                chai_1.expect(style).to.equal(undefined);
            });
            it('single value array [0]', function () {
                var style = css_1.toPositionEdges('Absolute', [0]);
                chai_1.expect(style.top).to.equal(0);
                chai_1.expect(style.right).to.equal(0);
                chai_1.expect(style.bottom).to.equal(0);
                chai_1.expect(style.left).to.equal(0);
            });
            it('array containing `null` values', function () {
                var style = css_1.toPositionEdges('Absolute', [
                    null,
                    10,
                    null,
                    null,
                ]);
                chai_1.expect(style.top).to.equal(undefined);
                chai_1.expect(style.right).to.equal(10);
                chai_1.expect(style.bottom).to.equal(undefined);
                chai_1.expect(style.left).to.equal(undefined);
            });
            it('array containing all `null` values', function () {
                var style = css_1.toPositionEdges('Absolute', [
                    null,
                    null,
                    null,
                    null,
                ]);
                chai_1.expect(style).to.equal(undefined);
            });
        });
        describe('shorthand', function () {
            it('empty-string', function () {
                var style = css_1.toPositionEdges('Absolute', '');
                chai_1.expect(style).to.equal(undefined);
            });
            it('undefined', function () {
                var style = css_1.toPositionEdges('Absolute');
                chai_1.expect(style).to.equal(undefined);
            });
            it('1-value', function () {
                var style = css_1.toPositionEdges('Absolute', '10');
                chai_1.expect(style.top).to.equal(10);
                chai_1.expect(style.right).to.equal(10);
                chai_1.expect(style.bottom).to.equal(10);
                chai_1.expect(style.left).to.equal(10);
            });
            it('1-value / Number', function () {
                var style = css_1.toPositionEdges('Absolute', 10);
                chai_1.expect(style.top).to.equal(10);
                chai_1.expect(style.right).to.equal(10);
                chai_1.expect(style.bottom).to.equal(10);
                chai_1.expect(style.left).to.equal(10);
            });
            it('2-values', function () {
                var style = css_1.toPositionEdges('Absolute', '10 30em');
                chai_1.expect(style.top).to.equal(10);
                chai_1.expect(style.right).to.equal('30em');
                chai_1.expect(style.bottom).to.equal(10);
                chai_1.expect(style.left).to.equal('30em');
            });
            it('3-values', function () {
                var style = css_1.toPositionEdges('Absolute', '10 30em 40');
                chai_1.expect(style.top).to.equal(10);
                chai_1.expect(style.right).to.equal('30em');
                chai_1.expect(style.left).to.equal('30em');
                chai_1.expect(style.bottom).to.equal(40);
            });
        });
    });
});
//# sourceMappingURL=css-positioning.test.js.map