import mergeToNew from "@insite/client-framework/Common/mergeToNew";
import { css } from "styled-components";

describe("mergeToNew", () => {
    test("should merge basic objects", () => {
        const result = mergeToNew({ one: 1 }, { two: 2 });
        expect(result).toStrictEqual({ one: 1, two: 2 });
    });

    test("should merge css properly", () => {
        const baseStyles = {
            wrapper: {
                css: css`
                    background: ${"red"};
                `,
            },
        };

        const extendedStyles = {
            wrapper: {
                css: css`
                    border: 3px solid blue;
                `,
            },
        };

        const result = mergeToNew(baseStyles, extendedStyles);

        expect(result.wrapper.css.map(o => o!.toString().trim()).join("")).toBe(
            `background:red;border: 3px solid blue;`,
        );
    });

    test("should merge cssOverrides properly", () => {
        const baseStyles = {
            cssOverrides: {
                pagination: css`
                    background: ${"red"};
                `,
            },
        };

        const extendedStyles = {
            cssOverrides: {
                pagination: css`
                    border: 3px solid blue;
                `,
            },
        };

        const result = mergeToNew(baseStyles, extendedStyles);

        expect(result.cssOverrides.pagination.map(o => o!.toString().trim()).join("")).toBe(
            `background:red;border: 3px solid blue;`,
        );
    });
});
