apphouse/dist/themes/utils/styles.utils.test.ts

Component library for React that uses observable state management and theme-able components.

import { getPreviewWithTagFromBaseComponent } from "./styles.utils";

jest.mock("./color.utils", () => {
  const originalModule = jest.requireActual("./color.utils");

  //Mock the default export and named export 'foo'
  return {
    __esModule: true,
    ...originalModule,
    // default: jest.fn(() => "mocked setAlpha"),
    setAlpha: () => "rgba(0,0,0,1)",
    fromColorStringToRgbaObject: () => ({ r: 0, g: 0, b: 0, a: 0 }),
    getStringRgbaColor: () => "rgba(0,0,0,1)",
  };
});

describe("style.utils", () => {
  test("getPreviewWithTagFromBaseComponent", () => {
    const tag = getPreviewWithTagFromBaseComponent("typography");
    expect(tag).toEqual("p");
  });
  // test("getCssFromCssPropertyStyles", () => {
  //   const css = toCss([
  //     {
  //       property: "backgroundColor",
  //       value: "theme.background",
  //       isSelector: false,
  //       reference: {
  //         key: "backgroundColor",
  //         value: "black",
  //         type: "color",
  //       },
  //     },
  //     {
  //       property: "color",
  //       value: "pink",
  //       isSelector: false,
  //       reference: {
  //         key: "color",
  //         value: "pink",
  //         type: "color",
  //       },
  //     },
  //     {
  //       property: ":focus",
  //       value: [
  //         {
  //           property: "backgroundColor",
  //           value: "theme.background",
  //           isSelector: false,
  //           reference: {
  //             key: "backgroundColor",
  //             value: "black",
  //             type: "color",
  //           },
  //         },
  //         {
  //           property: "color",
  //           value: "pink",
  //           isSelector: false,
  //           reference: {
  //             key: "color",
  //             value: "pink",
  //             type: "color",
  //           },
  //         },
  //       ],
  //       isSelector: true,
  //       reference: null,
  //     },
  //   ]);
  //   expect(css).toEqual({
  //     backgroundColor: "theme.background",
  //     color: "pink",
  //     ":focus": {
  //       backgroundColor: "theme.background",
  //       color: "pink",
  //     },
  //   });
  // });
  // test("convertObjectToStyleProperty", () => {
  //   const colorsLookup = getColorTokensLookupReferenceFromPalettes(
  //     SampleTestTheme.palette,
  //     "base"
  //   );
  //   const tokensLookup = SampleTestTheme.tokensLookupTable;
  //   const l = { ...colorsLookup, ...tokensLookup };
  //   const s = convertObjectToStyleProperty(
  //     styles.button.primary,
  //     l,
  //     "button.primary"
  //   );
  //   expect(s).toEqual([
  //     {
  //       property: "backgroundColor",
  //       value: "theme.background",
  //       isSelector: false,
  //       reference: {
  //         key: "backgroundColor",
  //         value: "black",
  //         type: "color",
  //       },
  //     },
  //     {
  //       property: "color",
  //       value: "pink",
  //       isSelector: false,
  //       reference: {
  //         key: "color",
  //         value: "pink",
  //         type: "color",
  //       },
  //     },
  //     {
  //       property: "borderColor",
  //       value: "theme.border",
  //       isSelector: false,
  //       reference: {
  //         key: "borderColor",
  //         value: "rgba(0,0,0,0.95)",
  //         type: "color",
  //       },
  //     },
  //   ]);
  // });
  // test("toCamelCase", () => {
  //   const str = Theme.toCamelCase("background-color");
  //   expect(str).toEqual("backgroundColor");
  // });
});

test("objectifyStylesWithBaseColors", () => {
  // const style = JSON.stringify({
  //   backgroundColor: setAlpha(onBackground.primary, 0.1),
  //   border: 0,
  //   borderRadius: tokens.radius.default,
  //   color: colors.onPrimary,
  //   fontFamily: PrimaryFontFamily,
  //   fontSize: tokens.fontSize.header,
  //   fontWeight: 700,
  //   height: 80,
  //   marginBlockStart: "0.67em",
  //   marginInlineEnd: "0px",
  //   marginInlineStart: "0px",
  // });
});