test: refactor tests

nativewind · Jul 31, 2023 · c140588 · c140588
1 parent 3ec9a8d
commit c140588
Show file tree

Hide file tree

Showing 33 changed files with 699 additions and 1,403 deletions.
diff --git a/packages/nativewind/src/__tests__/accessibility.tsx b/packages/nativewind/src/__tests__/accessibility.tsx
@@ -1,5 +1,7 @@
 import { resetStyles } from "react-native-css-interop/testing-library";
-import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
+import { testCases } from "../test-utils";
+
+afterEach(() => resetStyles());
 
 describe.skip("Accessibility - Screen Readers", () => {
   // TODO

diff --git a/packages/nativewind/src/__tests__/backgrounds.tsx b/packages/nativewind/src/__tests__/backgrounds.tsx
@@ -28,7 +28,6 @@ describe("Backgrounds - Background Color", () => {
       "bg-white",
       {
         style: { backgroundColor: "rgba(255, 255, 255, 1)" },
-        meta: { variables: { "--tw-bg-opacity": 1 } },
       },
     ],
   );

diff --git a/packages/nativewind/src/__tests__/borders.tsx b/packages/nativewind/src/__tests__/borders.tsx
@@ -81,61 +81,25 @@ describe("Border - Border Width", () => {
 
 describe("Border - Border Color", () => {
   testCases(
-    [
-      "border-white",
-      {
-        ...style({ borderColor: "rgba(255, 255, 255, 1)" }),
-        meta: { variables: { "--tw-border-opacity": 1 } },
-      },
-    ],
+    ["border-white", style({ borderColor: "rgba(255, 255, 255, 1)" })],
     [
       "border-x-white",
-      {
-        ...style({
-          borderLeftColor: "rgba(255, 255, 255, 1)",
-          borderRightColor: "rgba(255, 255, 255, 1)",
-        }),
-        meta: { variables: { "--tw-border-opacity": 1 } },
-      },
+      style({
+        borderLeftColor: "rgba(255, 255, 255, 1)",
+        borderRightColor: "rgba(255, 255, 255, 1)",
+      }),
     ],
     [
       "border-y-white",
-      {
-        ...style({
-          borderTopColor: "rgba(255, 255, 255, 1)",
-          borderBottomColor: "rgba(255, 255, 255, 1)",
-        }),
-        meta: { variables: { "--tw-border-opacity": 1 } },
-      },
-    ],
-    [
-      "border-t-white",
-      {
-        ...style({ borderTopColor: "rgba(255, 255, 255, 1)" }),
-        meta: { variables: { "--tw-border-opacity": 1 } },
-      },
-    ],
-    [
-      "border-b-white",
-      {
-        ...style({ borderBottomColor: "rgba(255, 255, 255, 1)" }),
-        meta: { variables: { "--tw-border-opacity": 1 } },
-      },
-    ],
-    [
-      "border-l-white",
-      {
-        ...style({ borderLeftColor: "rgba(255, 255, 255, 1)" }),
-        meta: { variables: { "--tw-border-opacity": 1 } },
-      },
-    ],
-    [
-      "border-r-white",
-      {
-        ...style({ borderRightColor: "rgba(255, 255, 255, 1)" }),
-        meta: { variables: { "--tw-border-opacity": 1 } },
-      },
+      style({
+        borderTopColor: "rgba(255, 255, 255, 1)",
+        borderBottomColor: "rgba(255, 255, 255, 1)",
+      }),
     ],
+    ["border-t-white", style({ borderTopColor: "rgba(255, 255, 255, 1)" })],
+    ["border-b-white", style({ borderBottomColor: "rgba(255, 255, 255, 1)" })],
+    ["border-l-white", style({ borderLeftColor: "rgba(255, 255, 255, 1)" })],
+    ["border-r-white", style({ borderRightColor: "rgba(255, 255, 255, 1)" })],
     [
       "border-current",
       {

diff --git a/packages/nativewind/src/__tests__/container-queries.tsx b/packages/nativewind/src/__tests__/container-queries.tsx
@@ -1,5 +1,4 @@
-import { resetStyles } from "react-native-css-interop/testing-library";
-import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
+import { testCases } from "../test-utils";
 
 describe.skip("Container Queries", () => {
   // TODO

diff --git a/packages/nativewind/src/__tests__/custom.tsx b/packages/nativewind/src/__tests__/custom.tsx
@@ -1,5 +1,4 @@
-import { resetStyles } from "react-native-css-interop/testing-library";
-import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
+import { testCases } from "../test-utils";
 
 describe.skip("Custom - Elevation", () => {
   // TODO

diff --git a/packages/nativewind/src/__tests__/dark-mode.tsx b/packages/nativewind/src/__tests__/dark-mode.tsx
@@ -1,5 +1,4 @@
-import { resetStyles } from "react-native-css-interop/testing-library";
-import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
+import { testCases } from "../test-utils";
 
 describe.skip("Dark Mode", () => {
   // TODO

diff --git a/packages/nativewind/src/__tests__/interactivity.tsx b/packages/nativewind/src/__tests__/interactivity.tsx
@@ -1,5 +1,5 @@
 import { resetStyles } from "react-native-css-interop/testing-library";
-import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
+import { invalidProperty, testCases } from "../test-utils";
 
 afterEach(() => resetStyles());
 
@@ -146,69 +146,22 @@ describe("Interactivity - Scroll Snap Type", () => {
     ["snap-x", invalidProperty("scroll-snap-type")],
     ["snap-y", invalidProperty("scroll-snap-type")],
     ["snap-both", invalidProperty("scroll-snap-type")],
-    [
-      "snap-mandatory",
-      { meta: { variables: { "--tw-scroll-snap-strictness": "mandatory" } } },
-    ],
-    [
-      "snap-proximity",
-      { meta: { variables: { "--tw-scroll-snap-strictness": "proximity" } } },
-    ],
+    // These properties just generate variables
+    ["snap-mandatory", {}],
+    ["snap-proximity", {}],
   );
 });
 
 describe("Interactivity - Touch Action", () => {
   testCases(["touch-auto", invalidProperty("touch-action")]);
   testCases(["touch-none", invalidProperty("touch-action")]);
-  testCases([
-    "touch-pan-x",
-    {
-      ...invalidProperty("touch-action"),
-      meta: { variables: { "--tw-pan-x": "pan-x" } },
-    },
-  ]);
-  testCases([
-    "touch-pan-left",
-    {
-      ...invalidProperty("touch-action"),
-      meta: { variables: { "--tw-pan-x": "pan-left" } },
-    },
-  ]);
-  testCases([
-    "touch-pan-right",
-    {
-      ...invalidProperty("touch-action"),
-      meta: { variables: { "--tw-pan-x": "pan-right" } },
-    },
-  ]);
-  testCases([
-    "touch-pan-y",
-    {
-      ...invalidProperty("touch-action"),
-      meta: { variables: { "--tw-pan-y": "pan-y" } },
-    },
-  ]);
-  testCases([
-    "touch-pan-up",
-    {
-      ...invalidProperty("touch-action"),
-      meta: { variables: { "--tw-pan-y": "pan-up" } },
-    },
-  ]);
-  testCases([
-    "touch-pan-down",
-    {
-      ...invalidProperty("touch-action"),
-      meta: { variables: { "--tw-pan-y": "pan-down" } },
-    },
-  ]);
-  testCases([
-    "touch-pinch-zoom",
-    {
-      ...invalidProperty("touch-action"),
-      meta: { variables: { "--tw-pinch-zoom": "pinch-zoom" } },
-    },
-  ]);
+  testCases(["touch-pan-x", invalidProperty("touch-action")]);
+  testCases(["touch-pan-left", invalidProperty("touch-action")]);
+  testCases(["touch-pan-right", invalidProperty("touch-action")]);
+  testCases(["touch-pan-y", invalidProperty("touch-action")]);
+  testCases(["touch-pan-up", invalidProperty("touch-action")]);
+  testCases(["touch-pan-down", invalidProperty("touch-action")]);
+  testCases(["touch-pinch-zoom", invalidProperty("touch-action")]);
   testCases(["touch-manipulation", invalidProperty("touch-action")]);
 });
 

diff --git a/packages/nativewind/src/__tests__/layout.tsx b/packages/nativewind/src/__tests__/layout.tsx
@@ -3,7 +3,7 @@ import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
 
 afterEach(() => resetStyles());
 
-describe("Layout - Aspect Ratio", () => {
+describe.only("Layout - Aspect Ratio", () => {
   testCases(
     ["aspect-square", style({ aspectRatio: 1 })],
     // ["aspect-video", style({ aspectRatio: "16 / 9" })],
@@ -14,13 +14,10 @@ describe("Layout - Aspect Ratio", () => {
 describe("Layout - Container", () => {
   testCases([
     "container",
-    {
-      style: {
-        maxWidth: 640,
-        width: "100%",
-      },
-      meta: {},
-    },
+    style({
+      maxWidth: 640,
+      width: "100%",
+    }),
   ]);
 });
 

diff --git a/packages/nativewind/src/__tests__/sizing.tsx b/packages/nativewind/src/__tests__/sizing.tsx
@@ -1,6 +1,6 @@
 import { Dimensions } from "react-native";
 import { resetStyles } from "react-native-css-interop/testing-library";
-import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
+import { invalidValue, style, testCases } from "../test-utils";
 
 afterEach(() => resetStyles());
 
@@ -15,10 +15,7 @@ describe("Sizing - Width", () => {
     ["w-min", invalidValue("width", "min-content")],
     ["w-max", invalidValue("width", "max-content")],
     ["w-fit", invalidValue("width", "fit-content")],
-    [
-      "w-screen",
-      { ...style({ width: Dimensions.get("window").width }), meta: {} },
-    ],
+    ["w-screen", style({ width: Dimensions.get("window").width })],
   );
 });
 
@@ -53,10 +50,7 @@ describe("Sizing - Height", () => {
     ["h-min", invalidValue("height", "min-content")],
     ["h-max", invalidValue("height", "max-content")],
     ["h-fit", invalidValue("height", "fit-content")],
-    [
-      "h-screen",
-      { ...style({ height: Dimensions.get("window").height }), meta: {} },
-    ],
+    ["h-screen", style({ height: Dimensions.get("window").height })],
   );
 });
 

diff --git a/packages/nativewind/src/__tests__/tables.tsx b/packages/nativewind/src/__tests__/tables.tsx
@@ -1,5 +1,5 @@
 import { resetStyles } from "react-native-css-interop/testing-library";
-import { invalidProperty, invalidValue, style, testCases } from "../test-utils";
+import { invalidProperty, testCases } from "../test-utils";
 
 afterEach(() => resetStyles());
 
@@ -12,96 +12,15 @@ describe("Tables - Border Collapse", () => {
 
 describe("Tables - Border Spacing", () => {
   testCases(
-    [
-      "border-spacing-0",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: {
-            "--tw-border-spacing-x": 0,
-            "--tw-border-spacing-y": 0,
-          },
-        },
-      },
-    ],
-    [
-      "border-spacing-x-0",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: { "--tw-border-spacing-x": 0 },
-        },
-      },
-    ],
-    [
-      "border-spacing-y-0",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: { "--tw-border-spacing-y": 0 },
-        },
-      },
-    ],
-    [
-      "border-spacing-px",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: {
-            "--tw-border-spacing-x": 1,
-            "--tw-border-spacing-y": 1,
-          },
-        },
-      },
-    ],
-    [
-      "border-spacing-x-px",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: { "--tw-border-spacing-x": 1 },
-        },
-      },
-    ],
-    [
-      "border-spacing-y-px",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: { "--tw-border-spacing-y": 1 },
-        },
-      },
-    ],
-    [
-      "border-spacing-1",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: {
-            "--tw-border-spacing-x": 3.5,
-            "--tw-border-spacing-y": 3.5,
-          },
-        },
-      },
-    ],
-    [
-      "border-spacing-x-1",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: { "--tw-border-spacing-x": 3.5 },
-        },
-      },
-    ],
-    [
-      "border-spacing-y-1",
-      {
-        ...invalidProperty("border-spacing"),
-        meta: {
-          variables: { "--tw-border-spacing-y": 3.5 },
-        },
-      },
-    ],
+    ["border-spacing-0", invalidProperty("border-spacing")],
+    ["border-spacing-x-0", invalidProperty("border-spacing")],
+    ["border-spacing-y-0", invalidProperty("border-spacing")],
+    ["border-spacing-px", invalidProperty("border-spacing")],
+    ["border-spacing-x-px", invalidProperty("border-spacing")],
+    ["border-spacing-y-px", invalidProperty("border-spacing")],
+    ["border-spacing-1", invalidProperty("border-spacing")],
+    ["border-spacing-x-1", invalidProperty("border-spacing")],
+    ["border-spacing-y-1", invalidProperty("border-spacing")],
   );
 });