test: add class tests

twcomponents · Mar 27, 2022 · 3f7947e · 3f7947e
1 parent ab8e982
commit 3f7947e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/test/twcss-to-sass.test.ts b/test/twcss-to-sass.test.ts
@@ -11,7 +11,7 @@ test('convert to sass', () => {
 }`
 
   const converterConfigs = <ITwToSassOptions>{
-    orderByTailwindClasses: false
+    orderByTailwindClasses: false,
   }
 
   const converterResult = convertToSass(htmlCotnent, converterConfigs)
@@ -33,7 +33,7 @@ test('convert to sass with inline css', () => {
 }`
 
   const converterConfigs = <ITwToSassOptions>{
-    orderByTailwindClasses: false
+    orderByTailwindClasses: false,
   }
 
   const converterResult = convertToSass(htmlCotnent, converterConfigs)
@@ -65,7 +65,7 @@ test('convert to sass with comments', () => {
   const converterConfigs = <ITwToSassOptions>{
     useCommentBlocksAsClassName: true,
     printSassComments: true,
-    orderByTailwindClasses: false
+    orderByTailwindClasses: false,
   }
 
   const converterResult = convertToSass(htmlCotnent, converterConfigs)
@@ -139,7 +139,7 @@ test('convert to sass with group-modifier', () => {
 }`
 
   const converterConfigs = <ITwToSassOptions>{
-    orderByTailwindClasses: false
+    orderByTailwindClasses: false,
   }
 
   const converterResult = convertToSass(htmlCotnent, converterConfigs)
@@ -191,7 +191,7 @@ test('convert to sass with non-duplicated classes', () => {
 }`
 
   const converterConfigs = <ITwToSassOptions>{
-    orderByTailwindClasses: false
+    orderByTailwindClasses: false,
   }
 
   const converterResult = convertToSass(htmlCotnent, converterConfigs)
@@ -213,7 +213,7 @@ test('convert to sass with class ordering', () => {
   const converterConfigs = <ITwToSassOptions>{
     useCommentBlocksAsClassName: true,
     printSassComments: true,
-    orderByTailwindClasses: true
+    orderByTailwindClasses: true,
   }
 
   const converterResult = convertToSass(htmlCotnent, converterConfigs)

diff --git a/test/utils/class.test.ts b/test/utils/class.test.ts
@@ -0,0 +1,38 @@
+import ClassUtils from '../../src/utils/class'
+
+import { IHtmlNode } from '../../src/interfaces/html-node'
+import { ITwToSassOptions } from '../../src/interfaces/tw-to-sass-options'
+
+test('class utility get class name', () => {
+  const node = <IHtmlNode>{
+      tagName: 'div',
+      comment: 'Some Div',
+      hasElementChildren: false,
+    },
+    expected = '.pre_some_div_suf'
+
+  const converterConfigs = <ITwToSassOptions>{
+    useCommentBlocksAsClassName: true,
+    printSassComments: true,
+    orderByTailwindClasses: false,
+    classNameOptions: {
+      lowercase: true,
+      replacement: '_',
+      prefix: 'pre_',
+      suffix: '_suf',
+    },
+  }
+
+  const result = ClassUtils.getClassName(node, 1, converterConfigs)
+
+  expect(expected).toBe(result)
+})
+
+test('class utility order utility classes', () => {
+  const content =
+      'flex items-center justify-center w-full px-4 py-2 space-x-1 font-medium tracking-wider uppercase bg-gray-100 border rounded-md focus:outline-none focus:ring',
+    result =
+      'bg-gray-100 border flex focus:outline-none focus:ring font-medium items-center justify-center px-4 py-2 rounded-md space-x-1 tracking-wider uppercase w-full'
+
+  expect(ClassUtils.orderClasses(content)).toBe(result)
+})