@colimuca123/nativewind 4.2.2-rc.1

package/src/__tests__/transforms.tsx

@@ -0,0 +1,509 @@
+import { renderCurrentTest } from "../test";
+
+describe("Transforms - Scale", () => {
+  test("scale-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 0 },
+            { scaleY: 0 },
+          ],
+        },
+      },
+    });
+  });
+  test("scale-x-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 0 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("scale-y-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 0 },
+          ],
+        },
+      },
+    });
+  });
+  test("scale-50", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 0.5 },
+            { scaleY: 0.5 },
+          ],
+        },
+      },
+    });
+  });
+  test("scale-x-50", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 0.5 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+
+  test("scale-y-50", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 0.5 },
+          ],
+        },
+      },
+    });
+  });
+});
+
+describe("Transforms - Rotate", () => {
+  test("rotate-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("rotate-180", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "180deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("rotate-[30deg]", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "30deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+});
+
+describe("Transforms - Translate", () => {
+  test("translate-x-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("translate-y-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("translate-x-px", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 1 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("translate-y-px", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 1 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("translate-x-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 3.5 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("translate-y-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 3.5 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+});
+
+describe("Transforms - Translate (%)", () => {
+  test("translate-x-1/2", async () => {
+    expect(
+      await renderCurrentTest({
+        className: "w-2 translate-x-1/2",
+      }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          width: 7,
+          transform: [
+            { translateX: 3.5 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("translate-y-1/2", async () => {
+    expect(
+      await renderCurrentTest({
+        className: "h-2 translate-y-1/2",
+      }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          height: 7,
+          transform: [
+            { translateX: 0 },
+            { translateY: 3.5 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("translate-x-full", async () => {
+    expect(
+      await renderCurrentTest({
+        className: "w-2 translate-x-full",
+      }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          width: 7,
+          transform: [
+            { translateX: 7 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("translate-y-full", async () => {
+    expect(
+      await renderCurrentTest({
+        className: "h-2 translate-y-full",
+      }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          height: 7,
+          transform: [
+            { translateX: 0 },
+            { translateY: 7 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+});
+
+describe("Transforms - Skew", () => {
+  test("skew-x-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("skew-y-0", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("skew-x-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "1deg" },
+            { skewY: "0deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+  test("skew-y-1", async () => {
+    expect(await renderCurrentTest()).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 0 },
+            { translateY: 0 },
+            { rotate: "0deg" },
+            { skewX: "0deg" },
+            { skewY: "1deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+});
+
+describe("Transforms - Mixed", () => {
+  test("rotate-90 skew-y-1 translate-x-1", async () => {
+    expect(
+      await renderCurrentTest({
+        className: "rotate-90 skew-y-1 translate-x-1",
+      }),
+    ).toStrictEqual({
+      props: {
+        style: {
+          transform: [
+            { translateX: 3.5 },
+            { translateY: 0 },
+            { rotate: "90deg" },
+            { skewX: "0deg" },
+            { skewY: "1deg" },
+            { scaleX: 1 },
+            { scaleY: 1 },
+          ],
+        },
+      },
+    });
+  });
+
+  describe("Transforms - Transform Origin", () => {
+    test("origin-center", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+    test("origin-top", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+    test("origin-top-right", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+    test("origin-right", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+    test("origin-bottom-right", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+    test("origin-bottom", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+    test("origin-bottom-left", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+    test("origin-left", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+    test("origin-top-left", async () => {
+      expect(await renderCurrentTest()).toStrictEqual({
+        props: {},
+        invalid: { properties: ["transform-origin"] },
+      });
+    });
+  });
+});