devextreme/esm/__internal/ui/scroll_view/utils/get_element_style.test.js

JavaScript/TypeScript Component Suite for Responsive Web Development

/**
 * DevExtreme (esm/__internal/ui/scroll_view/utils/get_element_style.test.js)
 * Version: 25.2.7
 * Build date: Tue May 05 2026
 *
 * Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
import {
    describe,
    expect,
    it
} from "@jest/globals";
import {
    titleize
} from "../../../../core/utils/inflector";
import {
    setWindow
} from "../../../../core/utils/window";
import each from "jest-each";
import {
    getElementMargin,
    getElementOverflowX,
    getElementOverflowY,
    getElementPadding,
    getElementStyle,
    getElementTransform
} from "./get_element_style";
describe("getElementStyle", () => {
    it("element is not defined", () => {
        expect(getElementStyle(null)).toEqual(null)
    });
    it("hasWindow: false", () => {
        setWindow({}, false);
        expect(getElementStyle({})).toEqual(null)
    });
    it("hasWindow: true, window.getComputedStyle: undefined", () => {
        setWindow({}, true);
        expect(getElementStyle({})).toEqual(void 0)
    });
    it("hasWindow: true, window.getComputedStyle: { width: 120px }", () => {
        setWindow({
            getComputedStyle: () => ({
                paddingBottom: "120px"
            })
        }, true);
        expect(getElementStyle({})).toEqual({
            paddingBottom: "120px"
        })
    })
});
describe("getElementTransform", () => {
    it("element is not defined", () => {
        expect(getElementTransform(null)).toEqual("")
    });
    it("matrix(1, 0, 0, 1, 10, 20)", () => {
        setWindow({
            getComputedStyle: () => ({
                transform: "matrix(1, 0, 0, 1, 10, 20)"
            })
        }, true);
        expect(getElementTransform({})).toEqual("matrix(1, 0, 0, 1, 10, 20)")
    })
});
each(["top", "left", "right", "bottom"]).describe("side: %o", side => {
    describe(`getElementPadding(element, ${side})`, () => {
        it("element is not defined", () => {
            expect(getElementPadding(null, side)).toEqual(0)
        });
        it(`padding${titleize(side)}: 5px`, () => {
            setWindow({
                getComputedStyle: () => ({
                    [`padding${titleize(side)}`]: "5px"
                })
            }, true);
            expect(getElementPadding({}, side)).toEqual(5)
        })
    });
    describe(`getElementMargin(element, ${side})`, () => {
        it("element is not defined", () => {
            expect(getElementMargin(null, side)).toEqual(0)
        });
        it(`margin${titleize(side)}: 5px`, () => {
            setWindow({
                getComputedStyle: () => ({
                    [`margin${titleize(side)}`]: "5px"
                })
            }, true);
            expect(getElementMargin({}, side)).toEqual(5)
        })
    })
});
describe("getElementOverflowX", () => {
    it("element is not defined", () => {
        expect(getElementOverflowX(null)).toEqual("visible")
    });
    it("overflowX: hidden", () => {
        setWindow({
            getComputedStyle: () => ({
                overflowX: "hidden"
            })
        }, true);
        expect(getElementOverflowX({})).toEqual("hidden")
    })
});
describe("getElementOverflowY", () => {
    it("element is not defined", () => {
        expect(getElementOverflowY(null)).toEqual("visible")
    });
    it("overflowY: hidden", () => {
        setWindow({
            getComputedStyle: () => ({
                overflowY: "hidden"
            })
        }, true);
        expect(getElementOverflowY({})).toEqual("hidden")
    })
});