fix: more tests

nativewind · Jul 22, 2023 · c3a1859 · c3a1859
1 parent 3089d8a
commit c3a1859
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 66 deletions.
diff --git a/packages/nativewind/src/__tests__/borders.tsx b/packages/nativewind/src/__tests__/borders.tsx
@@ -51,42 +51,31 @@ describe("Border - Border Width", () => {
         borderLeftWidth: 0,
       }),
     ],
-    ["border-x-1", style({ borderRightWidth: 0, borderLeftWidth: 0 })],
-    ["border-y-1", style({ borderTopWidth: 0, borderBottomWidth: 0 })],
-    ["border-t-1", style({ borderTopWidth: 0 })],
-    ["border-r-1", style({ borderRightWidth: 0 })],
-    ["border-b-1", style({ borderBottomWidth: 0 })],
-    ["border-l-1", style({ borderLeftWidth: 0 })],
+    ["border-x-0", style({ borderRightWidth: 0, borderLeftWidth: 0 })],
+    ["border-y-0", style({ borderTopWidth: 0, borderBottomWidth: 0 })],
+    ["border-s-0", style({ borderLeftWidth: 0 })],
+    ["border-e-0", style({ borderRightWidth: 0 })],
+    ["border-t-0", style({ borderTopWidth: 0 })],
+    ["border-r-0", style({ borderRightWidth: 0 })],
+    ["border-b-0", style({ borderBottomWidth: 0 })],
+    ["border-l-0", style({ borderLeftWidth: 0 })],
     [
-      "border-1",
+      "border-2",
       style({
-        borderTopWidth: 3.5,
-        borderRightWidth: 3.5,
-        borderBottomWidth: 3.5,
-        borderLeftWidth: 3.5,
+        borderTopWidth: 2,
+        borderRightWidth: 2,
+        borderBottomWidth: 2,
+        borderLeftWidth: 2,
       }),
     ],
-    ["border-x-1", style({ borderRightWidth: 3.5, borderLeftWidth: 3.5 })],
-    ["border-y-1", style({ borderTopWidth: 3.5, borderBottomWidth: 3.5 })],
-    ["border-t-1", style({ borderTopWidth: 3.5 })],
-    ["border-r-1", style({ borderRightWidth: 3.5 })],
-    ["border-b-1", style({ borderBottomWidth: 3.5 })],
-    ["border-l-1", style({ borderLeftWidth: 3.5 })],
-    [
-      "border-px",
-      style({
-        borderTopWidth: 1,
-        borderRightWidth: 1,
-        borderBottomWidth: 1,
-        borderLeftWidth: 1,
-      }),
-    ],
-    ["border-x-1", style({ borderRightWidth: 1, borderLeftWidth: 1 })],
-    ["border-y-1", style({ borderTopWidth: 1, borderBottomWidth: 1 })],
-    ["border-t-1", style({ borderTopWidth: 1 })],
-    ["border-r-1", style({ borderRightWidth: 1 })],
-    ["border-b-1", style({ borderBottomWidth: 1 })],
-    ["border-l-1", style({ borderLeftWidth: 1 })],
+    ["border-x-2", style({ borderRightWidth: 2, borderLeftWidth: 2 })],
+    ["border-y-2", style({ borderTopWidth: 2, borderBottomWidth: 2 })],
+    ["border-s-2", style({ borderLeftWidth: 2 })],
+    ["border-e-2", style({ borderRightWidth: 2 })],
+    ["border-t-2", style({ borderTopWidth: 2 })],
+    ["border-r-2", style({ borderRightWidth: 2 })],
+    ["border-b-2", style({ borderBottomWidth: 2 })],
+    ["border-l-2", style({ borderLeftWidth: 2 })],
   );
 });
 

diff --git a/packages/nativewind/src/__tests__/filters.tsx b/packages/nativewind/src/__tests__/filters.tsx
@@ -1,5 +1,7 @@
 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());
 
 describe("Filters - Blur", () => {
   testCases(["blur", invalidProperty("filter")]);

diff --git a/packages/nativewind/src/__tests__/layout.tsx b/packages/nativewind/src/__tests__/layout.tsx
@@ -80,7 +80,7 @@ describe("Layout - Box Sizing", () => {
   );
 });
 
-describe("Layout - Display", () => {
+describe.only("Layout - Display", () => {
   testCases(
     ["flex", style({ display: "flex" })],
     ["hidden", style({ display: "none" })],
@@ -96,7 +96,7 @@ describe("Layout - Display", () => {
     ["table-column-group", invalidValue("display", "table-column-group")],
     ["table-footer-group", invalidValue("display", "table-footer-group")],
     ["table-header-group", invalidValue("display", "table-header-group")],
-    ["table-row-group	", invalidValue("display", "table-row-group	")],
+    ["table-row-group", invalidValue("display", "table-row-group")],
     ["table-row", invalidValue("display", "table-row")],
     ["flow-root", invalidValue("display", "flow-root")],
     ["grid", invalidValue("display", "grid")],

diff --git a/packages/nativewind/src/__tests__/tables.tsx b/packages/nativewind/src/__tests__/tables.tsx
@@ -12,15 +12,96 @@ describe("Tables - Border Collapse", () => {
 
 describe("Tables - Border Spacing", () => {
   testCases(
-    ["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")],
+    [
+      "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 },
+        },
+      },
+    ],
   );
 });
 

diff --git a/packages/nativewind/src/__tests__/typography.tsx b/packages/nativewind/src/__tests__/typography.tsx
@@ -26,13 +26,11 @@ describe("Typography - Font Smoothing", () => {
               [
                 {
                   property: "-webkit-font-smoothing",
-                  type: "IncompatibleNativeValue",
-                  value: "antialiased",
+                  type: "IncompatibleNativeProperty",
                 },
                 {
                   property: "-moz-osx-font-smoothing",
-                  type: "IncompatibleNativeValue",
-                  value: "grayscale",
+                  type: "IncompatibleNativeProperty",
                 },
               ],
             ],
@@ -49,13 +47,11 @@ describe("Typography - Font Smoothing", () => {
               [
                 {
                   property: "-webkit-font-smoothing",
-                  type: "IncompatibleNativeValue",
-                  value: "auto",
+                  type: "IncompatibleNativeProperty",
                 },
                 {
                   property: "-moz-osx-font-smoothing",
-                  type: "IncompatibleNativeValue",
-                  value: "auto",
+                  type: "IncompatibleNativeProperty",
                 },
               ],
             ],

diff --git a/packages/nativewind/src/test-utils.tsx b/packages/nativewind/src/test-utils.tsx
@@ -39,13 +39,15 @@ export async function renderTailwind<T>(
     css = css.substring(index);
   }
 
+  // console.log(css);
+
   registerCSS(css, cssToReactNativeRuntimeOptions);
 
   return render(component, options);
 }
 
 type Style = ViewStyle & TextStyle & ImageStyle;
-type Case = [
+type TestCase = [
   string,
   {
     style?: ReturnType<typeof style>["style"];
@@ -74,7 +76,7 @@ export const invalidValue = (property: string, value: any) => ({
     ]),
 });
 
-export function testCases(...cases: Case[]) {
+export function testCases(...cases: TestCase[]) {
   const A = createMockComponent();
 
   test.each(cases)("%s", async (className, expected) => {

diff --git a/packages/react-native-css-interop/src/css-to-rn/parseDeclaration.ts b/packages/react-native-css-interop/src/css-to-rn/parseDeclaration.ts
@@ -8,6 +8,7 @@ import type {
   CssColor,
   Declaration,
   DimensionPercentageFor_LengthValue,
+  Display,
   FontFamily,
   FontSize,
   FontStyle,
@@ -203,18 +204,10 @@ export function parseDeclaration(
         parseColor(declaration.value, parseOptions),
       );
     case "display":
-      if (
-        declaration.value.type === "keyword" &&
-        declaration.value.value === "none"
-      ) {
-        addStyleProp(declaration.property, declaration.value.value);
-      } else if (
-        declaration.value.type === "pair" &&
-        declaration.value.inside.type === "flex"
-      ) {
-        addStyleProp(declaration.property, declaration.value.inside.type);
-      }
-      return;
+      return addStyleProp(
+        declaration.property,
+        parseDisplay(declaration.value, parseOptions),
+      );
     case "width":
       return addStyleProp(
         declaration.property,
@@ -1442,6 +1435,7 @@ const validProperties = [
   "transition-delay",
   "transition-timing-function",
   "transition",
+  "aspect-ratio",
   "animation-duration",
   "animation-timing-function",
   "animation-iteration-count",
@@ -2329,6 +2323,57 @@ function parseTextAlign(
   return undefined;
 }
 
+function parseDisplay(
+  display: Display,
+  options: ParseDeclarationOptionsWithValueWarning,
+) {
+  console.log(display);
+  if (display.type === "keyword") {
+    if (display.value === "none") {
+      return display.value;
+    } else {
+      return options.addValueWarning(display.value);
+    }
+  } else if (display.type === "pair") {
+    if (display.outside === "block") {
+      switch (display.inside.type) {
+        case "flow":
+          if (display.isListItem) {
+            return options.addValueWarning("list-item");
+          } else {
+            return options.addValueWarning("block");
+          }
+        case "flow-root":
+          return options.addValueWarning("flow-root");
+        case "table":
+          return options.addValueWarning(display.inside.type);
+        case "flex":
+          return display.inside.type;
+        case "box":
+        case "grid":
+        case "ruby":
+          return options.addValueWarning(display.inside.type);
+      }
+    } else {
+      switch (display.inside.type) {
+        case "flow":
+          return options.addValueWarning("inline");
+        case "flow-root":
+          return options.addValueWarning("inline-block");
+        case "table":
+          return options.addValueWarning("inline-table");
+        case "flex":
+          return options.addValueWarning("inline-flex");
+        case "box":
+        case "grid":
+          return options.addValueWarning("inline-grid");
+        case "ruby":
+          return options.addValueWarning(display.inside.type);
+      }
+    }
+  }
+}
+
 function parseAspectRatio(
   // This is missing types
   aspectRatio: any,