Test define-class and define-classes functions

package.json

@@ -8,9 +8,11 @@
     "Jonathan Reinink <jonathan@reinink.ca>"
   ],
   "scripts": {
-    "build": "node ./build.js"
+    "build": "node ./build.js",
+    "test": "jest"
   },
   "dependencies": {
+    "jest": "^20.0.4",
     "lodash": "^4.17.4",
     "normalize.css": "^6.0.0",
     "postcss": "^6.0.9",

src/util/define-class.js

@@ -2,15 +2,16 @@ const _ = require('lodash')
 const postcss = require('postcss')
 
 module.exports = function defineClass(className, properties) {
-  const kebabClass = _.kebabCase(className)
-  const decls = _(properties).toPairs().map(([property, value]) => {
+  const decls = _.map(properties, (value, property) => {
     return postcss.decl({
       prop: _.kebabCase(property),
-      value: value,
+      value: _.kebabCase(value),
     })
-  }).value()
+  })
 
-  return postcss.rule({
-    selector: `.${kebabClass}`
-  }).append(decls)
+  return postcss
+    .rule({
+      selector: `.${_.kebabCase(className)}`,
+    })
+    .append(decls)
 }

src/util/define-classes.js

@@ -1,8 +1,11 @@
+const postcss = require('postcss')
 const _ = require('lodash')
 const defineClass = require('./define-class')
 
 module.exports = function defineClasses(classes) {
-  return _(classes).toPairs().map(([className, properties]) => {
-    return defineClass(className, properties)
-  }).value()
+    let rules = _.map(classes, function(properties, className) {
+        return defineClass(className, properties)
+    })
+
+    return rules
 }

tests/defineClass.test.js

@@ -0,0 +1,43 @@
+var postcss = require('postcss')
+var fs = require('fs')
+var _ = require('lodash')
+var defineClass = require('../src/util/define-class')
+
+var flexHelper = `.flex {
+    display: flex
+}`
+
+var inlineBlock = `.inline-block {
+    display: inline-block
+}`
+
+var inlineFlexHelper = `.inline-flex {
+    display: inline-flex
+}`
+
+var backgroundColor = `.bg-1 {
+    background-color: black
+}`
+
+/**
+ * Tests
+ */
+it('creates a proper single-word class with rules', () => {
+    let output = defineClass('flex', {display: 'flex'})
+    expect(output.toString()).toEqual(flexHelper)
+})
+
+it('generates a rule with a kebab-case selector', () => {
+    let output = defineClass('inlineBlock', {display: 'inline-block'})
+    expect(output.toString()).toEqual(inlineBlock)
+})
+
+it('generates a rule with a kebab-case property name', () => {
+    let output = defineClass('bg-1', {backgroundColor: 'black'})
+    expect(output.toString()).toEqual(backgroundColor)
+})
+
+it('generates a rule with a kebab-case value', () => {
+    let output = defineClass('inline-flex', {display: 'inlineFlex'})
+    expect(output.toString()).toEqual(inlineFlexHelper)
+})

tests/defineClasses.test.js

@@ -0,0 +1,32 @@
+var postcss = require('postcss')
+var fs = require('fs')
+var _ = require('lodash')
+// var defineClass = require('../src/util/define-class')
+var defineClasses = require('../src/util/define-classes')
+
+var config = {
+    flex: {
+        display: 'flex',
+    },
+    inlineFlex: {
+        display: 'inlineFlex',
+    },
+}
+
+var flexHelper = `.flex {
+    display: flex
+}`
+
+var inlineFlexHelper = `.inline-flex {
+    display: inline-flex
+}`
+
+/**
+ * Tests
+ */
+it('it generates a set of helper classes from a config', () => {
+    output = defineClasses(config)
+    expect(output[0].toString()).toEqual(flexHelper)
+    expect(output[1].toString()).toEqual(inlineFlexHelper)
+    // return run('utilities.css', options)
+})