@codeandmoney/soelma 0.0.0-dev.1 → 0.0.0-dev.10

package/src/tests/createBreakpointsMatcher.test.ts

@@ -0,0 +1,188 @@
+import { createBreakpointsMatcher, maxWidth, minWidth } from "../media-query";
+import { getWindowDimensions } from "../dimensions";
+
+jest.mock("../dimensions", () => ({
+  getWindowDimensions: jest.fn(),
+}));
+
+const mockWindowWidth = (width: number) => {
+  const mockGetWindowDimensions = getWindowDimensions as jest.Mock;
+  mockGetWindowDimensions.mockReturnValue({ width });
+};
+
+/*
+ * To debug use analog on CSS: https://codepen.io/retyui/pen/dyOzKzV
+ */
+describe("createBreakpointsMatcher", () => {
+  const config = {
+    xxs: 100,
+    xs: 200,
+    s: 300,
+    m: 400,
+    l: 500,
+  };
+  const breakpointsMaxWidth = createBreakpointsMatcher(config, maxWidth);
+  const breakpointsMinWidth = createBreakpointsMatcher(config);
+
+  const values = {
+    xxs: "xxs: 100",
+    xs: "xs: 200",
+    s: "s: 300",
+    m: "m: 400",
+    l: "l: 500",
+    default: "default",
+  };
+
+  it("should return boundary values", () => {
+    mockWindowWidth(600);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "default",
+      minWidth: "l: 500",
+    });
+
+    mockWindowWidth(50);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "xxs: 100",
+      minWidth: "default",
+    });
+  });
+
+  it("should work properly", () => {
+    mockWindowWidth(450);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "l: 500",
+      minWidth: "m: 400",
+    });
+
+    mockWindowWidth(401);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "l: 500",
+      minWidth: "m: 400",
+    });
+
+    mockWindowWidth(400);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "m: 400",
+      minWidth: "m: 400",
+    });
+
+    mockWindowWidth(399);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(values),
+      minWidth: breakpointsMinWidth(values),
+    }).toEqual({
+      maxWidth: "m: 400",
+      minWidth: "s: 300",
+    });
+  });
+
+  it("should return null when no default and it pass boundary values", () => {
+    const { default: _, ...valuesWithoutDefault } = values;
+    mockWindowWidth(600);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(valuesWithoutDefault),
+      minWidth: breakpointsMinWidth(valuesWithoutDefault),
+    }).toEqual({
+      maxWidth: null,
+      minWidth: "l: 500",
+    });
+
+    mockWindowWidth(50);
+
+    expect({
+      maxWidth: breakpointsMaxWidth(valuesWithoutDefault),
+      minWidth: breakpointsMinWidth(valuesWithoutDefault),
+    }).toEqual({
+      maxWidth: "xxs: 100",
+      minWidth: null,
+    });
+  });
+});
+
+describe("docs examples", () => {
+  const config = {
+    xxs: 320,
+    xs: 480,
+    s: 640,
+    m: 768,
+    l: 1024,
+    xl: 1200,
+    xxl: 1920,
+  };
+  describe("maxWidth", () => {
+    const applyBreakpoints = createBreakpointsMatcher(config, maxWidth);
+
+    it("should work properly", () => {
+      const values = { xxs: 20, xs: 18, default: 16 };
+
+      mockWindowWidth(0);
+      expect(applyBreakpoints(values)).toBe(20);
+
+      mockWindowWidth(320);
+      expect(applyBreakpoints(values)).toBe(20);
+
+      mockWindowWidth(321);
+      expect(applyBreakpoints(values)).toBe(18);
+
+      mockWindowWidth(480);
+      expect(applyBreakpoints(values)).toBe(18);
+
+      mockWindowWidth(481);
+      expect(applyBreakpoints(values)).toBe(16);
+
+      mockWindowWidth(999);
+      expect(applyBreakpoints(values)).toBe(16);
+    });
+  });
+
+  describe("minWidth", () => {
+    const applyBreakpoints = createBreakpointsMatcher(config, minWidth);
+
+    it("should work properly", () => {
+      const values = { xxs: 18, xs: 16, default: 20 };
+
+      mockWindowWidth(0);
+      expect(applyBreakpoints(values)).toBe(20);
+
+      mockWindowWidth(319);
+      expect(applyBreakpoints(values)).toBe(20);
+
+      mockWindowWidth(320);
+      expect(applyBreakpoints(values)).toBe(18);
+
+      mockWindowWidth(479);
+      expect(applyBreakpoints(values)).toBe(18);
+
+      mockWindowWidth(480);
+      expect(applyBreakpoints(values)).toBe(16);
+
+      mockWindowWidth(481);
+      expect(applyBreakpoints(values)).toBe(16);
+
+      mockWindowWidth(999);
+      expect(applyBreakpoints(values)).toBe(16);
+    });
+  });
+});

package/src/tests/createBreakpointsMatcher.types-test.ts

@@ -0,0 +1,81 @@
+import { makeUseStyles } from "../index";
+import { createBreakpointsMatcher } from "../media-query";
+
+{
+  const breakpoints = createBreakpointsMatcher({
+    s: 100,
+    m: 200,
+    l: 300,
+  });
+
+  makeUseStyles(() => ({
+    root: {
+      position: breakpoints({
+        l: "absolute",
+        default: "relative",
+      }),
+
+      // @ts-expect-error - 'invalid value' is wrong value
+      alignItems: breakpoints({
+        l: "invalid value",
+      }),
+    },
+  }));
+}
+
+{
+  const breakpoints = createBreakpointsMatcher({
+    s: 100,
+    m: 200,
+    l: 300,
+  });
+
+  const a1: string | undefined = breakpoints({ s: "1" });
+  const a2: string | undefined = breakpoints({ s: "1", m: "2" });
+  const a3: string | undefined = breakpoints({ s: "1", m: "2", l: "3" });
+  const a4: string = breakpoints({
+    s: "1",
+    m: "2",
+    l: "3",
+    default: "0",
+  });
+}
+
+{
+  const breakpoints = createBreakpointsMatcher({
+    s: 100,
+    m: 200,
+    l: 300,
+  });
+
+  // @ts-expect-error - 'number' is not 'string'
+  const a1: string | undefined = breakpoints({ s: 1 });
+  const a2 = breakpoints({
+    s: 1,
+    // @ts-expect-error - 'string' is not 'number'
+    m: "2",
+  });
+}
+
+{
+  const breakpoints = createBreakpointsMatcher({
+    s: 100,
+    m: 200,
+    l: 300,
+  });
+
+  // @ts-expect-error - can be 'undefined'
+  const a1: string = breakpoints({ s: "1" });
+  // @ts-expect-error - can be 'undefined'
+  const a2: string = breakpoints({ s: "1", m: "2" });
+  // @ts-expect-error - can be 'undefined'
+  const a3: string = breakpoints({ s: "1", m: "2", l: "3" });
+
+  // @ts-expect-error - 'undefined' is not 'string'
+  const a4: undefined = breakpoints({
+    s: "1",
+    m: "2",
+    l: "3",
+    default: "0",
+  });
+}

package/src/tests/createEventEmitter.test.ts

@@ -0,0 +1,37 @@
+import { createEventEmitter } from "../create-event-emitter";
+
+it("should call handler when invoke emit", () => {
+  const a = createEventEmitter("event");
+  const handler = jest.fn();
+
+  const unsub = a.on(handler);
+
+  expect(handler).toHaveBeenCalledTimes(0);
+
+  a.emit();
+
+  expect(handler).toHaveBeenCalledTimes(1);
+});
+
+it("should not call handler when unsubscribe", () => {
+  const a = createEventEmitter("event");
+  const handler = jest.fn();
+
+  const unsub = a.on(handler);
+
+  a.emit();
+
+  expect(handler).toHaveBeenCalledTimes(1);
+
+  unsub();
+
+  a.emit();
+
+  expect(handler).toHaveBeenCalledTimes(1);
+});
+
+it("should throw error when no subscribed functions", () => {
+  const a = createEventEmitter("test");
+
+  a.emit();
+});

package/src/tests/dark-mode.test.ts

@@ -0,0 +1,56 @@
+import type { Mode } from "react-native-dark-mode";
+
+import { darkUiMode, lightUiMode } from "../dark-mode";
+import { state } from "../dark-mode/state";
+
+jest.mock("react-native-dark-mode", () => ({
+  initialMode: "light",
+  eventEmitter: { on: jest.fn() },
+}));
+
+const mockStyles = { color: "red" };
+
+const mutateUiMode = (mode: Mode | null) => {
+  // @ts-expect-error: for test only add null
+  state.mode = mode;
+};
+
+describe("darkUiMode", () => {
+  it("should return style when dark mode", () => {
+    mutateUiMode("dark");
+
+    expect(darkUiMode(mockStyles)).toEqual(mockStyles);
+  });
+
+  it("should return 'undefined' when light mode", () => {
+    mutateUiMode("light");
+
+    expect(darkUiMode(mockStyles)).toBeUndefined();
+  });
+
+  it("should return 'undefined' when unknown mode", () => {
+    mutateUiMode(null);
+
+    expect(darkUiMode(mockStyles)).toBeUndefined();
+  });
+});
+
+describe("lightUiMode", () => {
+  it("should return style when light mode", () => {
+    mutateUiMode("light");
+
+    expect(lightUiMode(mockStyles)).toEqual(mockStyles);
+  });
+
+  it("should return 'undefined' when dark mode", () => {
+    mutateUiMode("dark");
+
+    expect(lightUiMode(mockStyles)).toBeUndefined();
+  });
+
+  it("should return 'undefined' when unknown mode", () => {
+    mutateUiMode(null);
+
+    expect(lightUiMode(mockStyles)).toBeUndefined();
+  });
+});

package/src/tests/dependencyRegistry.test.ts

@@ -0,0 +1,16 @@
+import { addDependency, getDependency } from "../dependency-registry";
+
+it("should overwrite handler", () => {
+  const name = "dark-mode";
+  const handler = () => () => {};
+
+  addDependency(name, handler);
+
+  expect(getDependency(name)).toBe(handler);
+
+  const newHandler = () => () => {};
+
+  addDependency(name, newHandler);
+
+  expect(getDependency(name)).not.toBe(newHandler);
+});

package/src/tests/dependencyUsage.test.ts

@@ -0,0 +1,13 @@
+import { onUse, resetUsing, getUsing } from "../dependency-usage";
+
+it("should clear usage map", () => {
+  onUse("a");
+  onUse("a");
+  onUse("b");
+
+  expect(getUsing()).toEqual({ a: true, b: true });
+
+  resetUsing();
+
+  expect(getUsing()).toEqual({});
+});

package/src/tests/dimensions.test.ts

@@ -0,0 +1,33 @@
+import { WINDOW_DEPENDENCY_KEY, SCREEN_DEPENDENCY_KEY } from "../dimensions/consts";
+import { optimizeDependencies } from "../dimensions/utils";
+
+describe("optimizeDependencies", () => {
+  it("should remove screen dependency when window dependency exist", () => {
+    expect(
+      optimizeDependencies({
+        [WINDOW_DEPENDENCY_KEY]: true,
+        [SCREEN_DEPENDENCY_KEY]: true,
+      }),
+    ).toEqual({
+      [WINDOW_DEPENDENCY_KEY]: true,
+    });
+  });
+
+  it("should skip removing", () => {
+    expect(
+      optimizeDependencies({
+        [WINDOW_DEPENDENCY_KEY]: true,
+      }),
+    ).toEqual({
+      [WINDOW_DEPENDENCY_KEY]: true,
+    });
+
+    expect(
+      optimizeDependencies({
+        [SCREEN_DEPENDENCY_KEY]: true,
+      }),
+    ).toEqual({
+      [SCREEN_DEPENDENCY_KEY]: true,
+    });
+  });
+});

package/src/tests/makeUseStyles.types-test.ts

@@ -0,0 +1,69 @@
+import { makeUseStyles } from "../make-use-styles";
+
+{
+  const useStyles = makeUseStyles(() => ({
+    root: {
+      textAlign: "center",
+    },
+  }));
+
+  const a: "center" = useStyles().root.textAlign;
+
+  // @ts-expect-error: expect literal type
+  const b: "not center" = useStyles().root.textAlign;
+}
+
+{
+  interface Theme {
+    color: string;
+  }
+
+  const useStyles = makeUseStyles(({ color }: Theme) => ({
+    root: {
+      color,
+      textAlign: "center",
+    },
+  }));
+
+  const a: "center" = useStyles().root.textAlign;
+
+  // @ts-expect-error: expect literal type
+  const b: "not center" = useStyles().root.textAlign;
+}
+
+{
+  const useStyles = makeUseStyles(() => ({
+    root: {
+      // @ts-expect-error: invalid color value
+      color: [],
+    },
+  }));
+
+  const {
+    root,
+    // @ts-expect-error: 'otherProps' not exist
+    otherProp,
+  } = useStyles();
+}
+
+{
+  interface MyTheme {
+    color: {
+      red: string;
+    };
+  }
+
+  const useStyles = makeUseStyles((theme: MyTheme) => ({
+    root: {
+      color: theme.color.red,
+      // @ts-expect-error: 'blue' not exist in passed theme
+      borderColor: theme.color.blue,
+    },
+  }));
+
+  const {
+    root,
+    // @ts-expect-error: 'otherProps' not exist
+    otherProp,
+  } = useStyles();
+}

package/src/tests/media-query.test.ts

@@ -0,0 +1,196 @@
+import { Dimensions } from "react-native";
+import { maxHeight, maxWidth, minHeight, minWidth, aspectRatio, minAspectRatio, maxAspectRatio } from "../media-query";
+
+const mockStyle = { color: "black" };
+
+const mockGetDimensions = (dimensions: any) => {
+  Dimensions.get = () => dimensions;
+};
+
+describe("max*", () => {
+  describe("maxHeight", () => {
+    it("should return style when device height less than passed", () => {
+      const dimensions = { height: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxHeight(320, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device height more than passed value", () => {
+      const dimensions = { height: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxHeight(320, mockStyle)).toEqual(null);
+    });
+
+    it("should return null when device height equal a passed value", () => {
+      const dimensions = { height: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxHeight(320, mockStyle)).toEqual(null);
+    });
+  });
+
+  describe("maxWidth", () => {
+    it("should return style when device width less than passed", () => {
+      const dimensions = { width: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxWidth(320, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device width more than passed value", () => {
+      const dimensions = { width: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxWidth(320, mockStyle)).toEqual(null);
+    });
+
+    it("should return null when device width equal a passed value", () => {
+      const dimensions = { width: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxWidth(320, mockStyle)).toEqual(null);
+    });
+  });
+});
+
+describe("min*", () => {
+  describe("minHeight", () => {
+    it("should return null when device height less than passed", () => {
+      const dimensions = { height: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minHeight(320, mockStyle)).toEqual(null);
+    });
+
+    it("should return style when device height more than passed value", () => {
+      const dimensions = { height: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minHeight(320, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device height equal a passed value", () => {
+      const dimensions = { height: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minHeight(320, mockStyle)).toEqual(null);
+    });
+  });
+
+  describe("minWidth", () => {
+    it("should return null when device width less than passed", () => {
+      const dimensions = { width: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minWidth(320, mockStyle)).toEqual(null);
+    });
+
+    it("should return style when device width more than passed value", () => {
+      const dimensions = { width: 321 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minWidth(320, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device width equal a passed value", () => {
+      const dimensions = { width: 319 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minWidth(320, mockStyle)).toEqual(null);
+    });
+  });
+});
+
+describe("aspectRatio", () => {
+  describe("equal", () => {
+    it("should return null when device ratio less then passed", () => {
+      const dimensions = { width: 100, height: 201 };
+
+      mockGetDimensions(dimensions);
+
+      expect(aspectRatio(1 / 2, mockStyle)).toEqual(null);
+    });
+
+    it("should return style when ratio equal", () => {
+      const dimensions = { width: 100, height: 200 };
+
+      mockGetDimensions(dimensions);
+
+      expect(aspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when device ratio greater than passed", () => {
+      const dimensions = { width: 100, height: 199 };
+
+      mockGetDimensions(dimensions);
+
+      expect(aspectRatio(1 / 2, mockStyle)).toEqual(null);
+    });
+  });
+
+  describe("min", () => {
+    it("should return null when device ratio less then passed", () => {
+      const dimensions = { width: 100, height: 201 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minAspectRatio(1 / 2, mockStyle)).toEqual(null);
+    });
+
+    it("should return style when ratio equal passed", () => {
+      const dimensions = { width: 100, height: 200 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minAspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return style when ratio greater than passed", () => {
+      const dimensions = { width: 100, height: 199 };
+
+      mockGetDimensions(dimensions);
+
+      expect(minAspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+  });
+
+  describe("max", () => {
+    it("should return style when device ratio less then passed", () => {
+      const dimensions = { width: 100, height: 201 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxAspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return style when ratio equal passed", () => {
+      const dimensions = { width: 100, height: 200 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxAspectRatio(1 / 2, mockStyle)).toEqual(mockStyle);
+    });
+
+    it("should return null when ratio greater than passed", () => {
+      const dimensions = { width: 100, height: 199 };
+
+      mockGetDimensions(dimensions);
+
+      expect(maxAspectRatio(1 / 2, mockStyle)).toEqual(null);
+    });
+  });
+});