"aligned" prop util and common test (#285)

* feat(propUtil): add aligned prop cx util

* feat(commonTests): add aligned prop test

src/utils/propUtils.js

@@ -74,7 +74,7 @@ export const iconPropRenderer = (val) => _.isString(val) ? <Icon className={val}
 export const imagePropRenderer = (val) => _.isString(val) ? <Image src={val} /> : val
 
 // ----------------------------------------
-// Prop To Class Name
+// Prop to className
 //
 // There are 4 prop patterns used to build up the className for a component.
 // Each utility here is meant for use in a classnames() argument.
@@ -121,3 +121,22 @@ export const useValueAndKey = (val, key) => val && val !== true && `${val} ${key
  * <div class="ui left pointing label"></div>
  */
 export const useKeyOrValueAndKey = (val, key) => val && (val === true ? key : `${val} ${key}`)
+
+//
+// Prop to className exceptions
+//
+
+/**
+ * The "aligned" prop follows the useValueAndKey except when the value is "justified'.
+ * In this case, only the class "justified" is used, ignoring the "aligned" class.
+ * @param {*} val The value of the "aligned" prop
+ *
+ * @example
+ * <Container aligned='justified' />
+ * <div class="ui justified container"></div>
+ *
+ * @example
+ * <Container aligned='left' />
+ * <div class="ui left aligned container"></div>
+ */
+export const useAlignedProp = val => val === 'justified' ? 'justified' : useValueAndKey(val, 'aligned')

test/specs/commonTests.js

@@ -361,10 +361,38 @@ const _noClassNameFromBoolProps = (Component, propKey, requiredProps) => {
 }
 
 const _classNamePropValueBeforePropName = (Component, propKey, requiredProps) => {
-  it('adds "${value} ${name}" to className', () => {
-    const sample = _.sample(Component._meta.props[propKey])
-    shallow(createElement(Component, { ...requiredProps, [propKey]: sample }))
-      .should.have.className(`${sample} ${propKey}`)
+  _.each(Component._meta.props[propKey], (propVal) => {
+    it(`adds "${propVal} ${propKey}" to className`, () => {
+      shallow(createElement(Component, { ...requiredProps, [propKey]: propVal }))
+        .should.have.className(`${propVal} ${propKey}`)
+    })
+  })
+}
+
+/**
+ * Assert that a Component correctly implements the "aligned" prop.
+ * @param {React.Component|Function} Component The component to test.
+ * @param {Object} [requiredProps={}] Props required to render the component.
+ */
+export const implementsAlignedProp = (Component, requiredProps = {}) => {
+  describe('aligned (common)', () => {
+    _definesPropOptions(Component, 'aligned')
+    _noDefaultClassNameFromProp(Component, 'aligned')
+    _noClassNameFromBoolProps(Component, 'aligned', requiredProps)
+
+    _.each(Component._meta.props.aligned, (propVal) => {
+      if (propVal === 'justified') {
+        it('adds "justified" without "aligned" to className', () => {
+          shallow(<Component { ...requiredProps } aligned='justified' />)
+            .should.have.className('justified')
+        })
+      } else {
+        it(`adds "${propVal} aligned" to className`, () => {
+          shallow(<Component { ...requiredProps } aligned={propVal} />)
+            .should.have.className(`${propVal} ${'aligned'}`)
+        })
+      }
+    })
   })
 }