chore(readme): add testing instructions

README.md

@@ -100,3 +100,5 @@ See [#1](https://github.com/morrislaptop/tailwind-zeplin-extension/issues/1) for
 Tailwind Zeplin Extension is developed using [zem](https://github.com/zeplin/zem), Zeplin Extension Manager. zem is a command line tool that lets you quickly create and test extensions.
 
 To learn more about zem, [see documentation](https://github.com/zeplin/zem).
+
+To run tests and show skipped - `yarn test --verbose --expand` 

src/lib.js

@@ -31,7 +31,7 @@ function borderRadiusToClass(tailwind, radius) {
 
     if (size === 'none') return null
 
-    return 'rounded-' + size
+    return size === 'default' ? 'rounded' : 'rounded-' + size
 }
 
 function opacityToClass(tailwind, opacity) {
@@ -99,9 +99,9 @@ function borderClass(tailwind, borders) {
     let sizes = dropTheRem(tailwind.borderWidths)
     let key = closestKey(sizes, border.thickness)
 
-    if (key === 'default') return null
+    if (key === '0') return null
 
-    return 'border-' + key
+    return key === 'default' ? 'border' : 'border-' + key
 }
 
 function borderColor(context, tailwind, borders) {
@@ -291,7 +291,7 @@ function lineHeightToClass(tailwind, size, height) {
 function textAlignToClass(align) {
     if (! align || align === 'left') return null
 
-    return 'font-' + align
+    return 'text-' + align
 }
 
 function letterSpacingToClass(tailwind, size, spacing) {

test/layer.test.js

@@ -20,8 +20,8 @@ let tests = {
     let css = ext.layer(context, layer)
 
     expect(css.code).toBe(`<p class="text-xl font-medium">Type</p>
-<p class="text-xl text-green">something</p>
-<p class="sample-text-style-with-color uppercase">RED</p>`)
+<p class="text-xl text-center text-green">something</p>
+<p class="text-xl text-right text-red uppercase">RED</p>`)
   },
 
   TextLayerWithMultipleStylesThatAreTheSame(context, layer) {
@@ -48,12 +48,18 @@ let tests = {
     expect(css.code).toBe(`<div class="bg-yellow max-w-xs"></div>`)
   },
 
-  LayerWithBorderRadius(context, layer) {
+  LayerWithLargeBorderRadius(context, layer) {
     let css = ext.layer(context, layer)
 
     expect(css.code).toBe(`<div class="rounded-lg bg-red max-w-xs"></div>`)
   },
 
+  LayerWithDefaultBorderRadius(context, layer) {
+    let css = ext.layer(context, layer)
+
+    expect(css.code).toBe(`<div class="rounded bg-red max-w-xs"></div>`)
+  },
+
   RotatedLayer(context, layer) {
     let css = ext.layer(context, layer)
 

test/sample-data/layers.json

@@ -71,7 +71,7 @@
                     "fontStyle": "normal",
                     "fontFamily": "SFProText",
                     "fontStretch": "normal",
-                    "textAlign": "left",
+                    "textAlign": "center",
                     "weightText": "regular",
                     "color": {
                         "r": 0,
@@ -93,7 +93,7 @@
                     "fontStyle": "normal",
                     "fontFamily": "SFProText",
                     "fontStretch": "normal",
-                    "textAlign": "left",
+                    "textAlign": "right",
                     "weightText": "regular",
                     "color": {
                         "r": 255,
@@ -320,7 +320,7 @@
     },
     {
         "type": "shape",
-        "name": "Layer with border radius",
+        "name": "Layer with large border radius",
         "exportable": false,
         "rotation": 0,
         "opacity": 1,
@@ -356,6 +356,44 @@
         "textStyles": [],
         "assets": []
     },
+    {
+        "type": "shape",
+        "name": "Layer with default border radius",
+        "exportable": false,
+        "rotation": 0,
+        "opacity": 1,
+        "blendMode": "normal",
+        "borderRadius": 4,
+        "rect": {
+            "y": 410,
+            "x": 50,
+            "width": 100,
+            "height": 100
+        },
+        "content": "",
+        "borders": [],
+        "fills": [
+            {
+                "type": "color",
+                "blendMode": "normal",
+                "fill": {
+                    "r": 255,
+                    "g": 0,
+                    "b": 0,
+                    "a": 1
+                },
+                "color": {
+                    "r": 255,
+                    "g": 0,
+                    "b": 0,
+                    "a": 1
+                }
+            }
+        ],
+        "shadows": [],
+        "textStyles": [],
+        "assets": []
+    },
     {
         "type": "shape",
         "name": "Rotated layer",