import { buildFlexStyles, splitProps } from "./propUtils";

describe("buildFlexStyles", () => {
  describe("given a list of props", () => {
    it("returns a specified list of flex props", () => {
      const props = {
        flexDirection: "row",
        flexWrap: "wrap",
        flexGrow: "1",
        flex: "1 1 0px",
        justifyContent: "start",
        alignItems: "stretch",
        alignContent: "center",
        gap: 10,
        rowGap: 20,
        columnGap: 30,
      } as const;

      const transformedProps = {
        gap: "10px",
        rowGap: "20px",
        columnGap: "30px",
      };

      const expectedProps = {
        ...props,
        ...transformedProps,
      };

      const actual = buildFlexStyles(props);

      expect(actual).toStrictEqual(expectedProps);
    });
  });

  describe("given a list of partially defined props", () => {
    it("returns flex props that are defined", () => {
      const props = {
        flexDirection: "row",
        flexWrap: undefined,
        flexGrow: "1",
        flex: undefined,
        justifyContent: "start",
        alignItems: undefined,
        alignContent: "center",
        gap: undefined,
        rowGap: 20,
        columnGap: undefined,
      } as const;

      const expectedProps = {
        flexDirection: "row",
        flexGrow: "1",
        justifyContent: "start",
        alignContent: "center",
        rowGap: "20px",
      };

      const actual = buildFlexStyles(props);

      expect(actual).toStrictEqual(expectedProps);
    });
  });
});

describe("splitProps", () => {
  describe("given a list of props", () => {
    it("returns an array with two items: 1) specified flex props; 2) all other props", () => {
      const flexProps = {
        flexDirection: "row",
        flexWrap: "wrap",
        flexGrow: "1",
        flex: "1 1 0px",
        justifyContent: "start",
        alignItems: "stretch",
        alignContent: "center",
        gap: 10,
        rowGap: 20,
        columnGap: 30,
      } as const;

      const otherProps = {
        a: 1,
        b: "Two",
        c: [],
        d: {},
      };

      const props = {
        ...flexProps,
        ...otherProps,
      };

      const actual = splitProps(props);

      const expected = [flexProps, otherProps];

      expect(actual).toStrictEqual(expected);
    });
  });
});
