test(common): restore tests

test/specs/commonTests/classNameHelpers.js

@@ -9,7 +9,6 @@ export const classNamePropValueBeforePropName = (Component, propKey, propValues,
   propValues.forEach((propVal) => {
     it(`adds "${propVal} ${className}" to className`, () => {
       shallow(createElement(Component, { ...requiredProps, [propKey]: propVal }))
-        .dive()
         .should.have.className(`${propVal} ${className}`)
     })
   })
@@ -21,7 +20,7 @@ export const noClassNameFromBoolProps = (Component, propKey, propValues, options
   _.each([true, false], bool => it(`does not add any className when ${bool}`, () => {
     consoleUtil.disableOnce()
 
-    const wrapper = shallow(createElement(Component, { ...requiredProps, [propKey]: bool })).dive()
+    const wrapper = shallow(createElement(Component, { ...requiredProps, [propKey]: bool }))
 
     wrapper.should.not.have.className(className)
     wrapper.should.not.have.className('true')
@@ -41,7 +40,7 @@ export const noDefaultClassNameFromProp = (Component, propKey, propValues, optio
   if (propKey in requiredProps) return
 
   it('is not included in className when not defined', () => {
-    const wrapper = shallow(<Component {...requiredProps} />).dive()
+    const wrapper = shallow(<Component {...requiredProps} />)
     wrapper.should.not.have.className(className)
 
     // ensure that none of the prop option values are in className

test/specs/commonTests/componentInfo.js

@@ -4,7 +4,6 @@ import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 
 import { META } from 'src/lib'
-import { getOriginalComponent } from 'test/utils'
 import helpers from './commonHelpers'
 
 const componentCtx = require.context(
@@ -14,9 +13,7 @@ const componentCtx = require.context(
 )
 
 const componentInfo = componentCtx.keys().map((key) => {
-  const RawComponent = componentCtx(key).default
-  const Component = getOriginalComponent(RawComponent)
-
+  const Component = componentCtx(key).default
   const componentType = typeof Component
   const { throwError } = helpers('componentInfo', Component)
 

test/specs/commonTests/hasSubComponents.js

@@ -1,19 +1,16 @@
 import _ from 'lodash'
-import { getOriginalComponent } from 'test/utils'
 
 /**
  * Assert a component exposes other components as (static properties).
- * @param {React.Component|Function} RawComponent The Component.
+ * @param {React.Component|Function} Component The Component.
  * @param {React.Component[]} subComponents Array of components that should exist on Component.
  */
-export default (RawComponent, subComponents) => {
-  // const staticValues = _.values(getOriginalComponent(RawComponent))
+export default (Component, subComponents) => {
+  const staticValues = _.values(Component)
 
-  // _.each(subComponents, (rawSubComponent) => {
-    // const subComponent = getOriginalComponent(rawSubComponent)
-    //
-    // it(`has sub component ${subComponent._meta.name}`, () => {
-    //   staticValues.should.contain(rawSubComponent)
-    // })
-  // })
+  _.each(subComponents, (subComponent) => {
+    it(`has sub component ${subComponent._meta.name}`, () => {
+      staticValues.should.contain(subComponent)
+    })
+  })
 }

test/specs/commonTests/hasUIClassName.js

@@ -15,7 +15,6 @@ export default (Component, options = {}) => {
     assertRequired(Component, 'a `Component`')
 
     shallow(<Component {...requiredProps} />)
-      .dive()
       .should.have.className('ui')
   })
 }

test/specs/commonTests/implementsClassNameProps.js

@@ -51,7 +51,6 @@ export const propKeyOnlyToClassName = (Component, propKey, options = {}) => {
 
     it('adds prop name to className', () => {
       shallow(createElement(Component, { ...requiredProps, [propKey]: true }))
-        .dive()
         .should.have.className(className)
     })
 
@@ -60,7 +59,6 @@ export const propKeyOnlyToClassName = (Component, propKey, options = {}) => {
 
       const value = 'foo-bar-baz'
       shallow(createElement(Component, { ...requiredProps, [propKey]: value }))
-        .dive()
         .should.not.have.className(value)
     })
   })
@@ -97,7 +95,7 @@ export const propKeyOrValueAndKeyToClassName = (Component, propKey, propValues,
     })
 
     it('adds no className when false', () => {
-      const wrapper = shallow(createElement(Component, { ...requiredProps, [propKey]: false })).dive()
+      const wrapper = shallow(createElement(Component, { ...requiredProps, [propKey]: false }))
 
       wrapper.should.not.have.className(className)
       wrapper.should.not.have.className('true')
@@ -133,7 +131,6 @@ export const propValueOnlyToClassName = (Component, propKey, propValues, options
     it('adds prop value to className', () => {
       propValues.forEach((propValue) => {
         shallow(createElement(Component, { ...requiredProps, [propKey]: propValue }))
-          .dive()
           .should.have.className(propValue)
       })
     })
@@ -143,7 +140,6 @@ export const propValueOnlyToClassName = (Component, propKey, propValues, options
 
       propValues.forEach((propValue) => {
         shallow(createElement(Component, { ...requiredProps, [propKey]: propValue }))
-          .dive()
           .should.not.have.className(propKey)
       })
     })

test/specs/commonTests/implementsCommonProps.js

@@ -1,6 +1,6 @@
 import React, { createElement } from 'react'
 
-// import Button from 'src/elements/Button'
+import Button from 'src/elements/Button'
 import Icon from 'src/elements/Icon'
 import Image from 'src/elements/Image'
 import Label from 'src/elements/Label'
@@ -21,14 +21,14 @@ import helpers from './commonHelpers'
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
-// export const implementsButtonProp = (Component, options = {}) => {
-//   implementsShorthandProp(Component, {
-//     propKey: 'button',
-//     ShorthandComponent: Button,
-//     mapValueToProps: val => ({ content: val }),
-//     ...options,
-//   })
-// }
+export const implementsButtonProp = (Component, options = {}) => {
+  implementsShorthandProp(Component, {
+    propKey: 'button',
+    ShorthandComponent: Button,
+    mapValueToProps: val => ({ content: val }),
+    ...options,
+  })
+}
 
 /**
  * Assert that a Component correctly implements an HTML iframe shorthand prop.

test/specs/commonTests/implementsCreateMethod.js

@@ -1,12 +1,11 @@
 import React, { isValidElement } from 'react'
-import { consoleUtil, getOriginalComponent } from 'test/utils'
+import { consoleUtil } from 'test/utils'
 
 /**
  * Assert a Component correctly implements a shorthand create method.
- * @param {React.Component|Function} RawComponent The component to test.
+ * @param {React.Component|Function} Component The component to test.
  */
-export default (RawComponent) => {
-  const Component = getOriginalComponent(RawComponent)
+export default (Component) => {
   const { name } = Component._meta
 
   describe('create shorthand method (common)', () => {

test/specs/commonTests/isConformant.js

@@ -4,21 +4,20 @@ import ReactDOMServer from 'react-dom/server'
 import * as semanticUIReact from 'semantic-ui-react'
 
 import { META } from 'src/lib'
-import { consoleUtil, getOriginalComponent, sandbox, syntheticEvent } from 'test/utils'
+import { assertBodyContains, consoleUtil, sandbox, syntheticEvent } from 'test/utils'
 import helpers from './commonHelpers'
 import componentInfo from './componentInfo'
 import hasValidTypings from './hasValidTypings'
 
 /**
  * Assert Component conforms to guidelines that are applicable to all components.
- * @param {React.Component|Function} RawComponent A component that should conform.
+ * @param {React.Component|Function} Component A component that should conform.
  * @param {Object} [options={}]
  * @param {Object} [options.eventTargets={}] Map of events and the child component to target.
  * @param {array} [options.rendersPortal=false] Does this component render a Portal powered component?
  * @param {Object} [options.requiredProps={}] Props required to render Component without errors or warnings.
  */
-export default (RawComponent, options = {}) => {
-  const Component = getOriginalComponent(RawComponent)
+export default (Component, options = {}) => {
   const { eventTargets = {}, requiredProps = {}, rendersPortal = false } = options
   const { throwError } = helpers('isConformant', Component)
 
@@ -33,7 +32,12 @@ export default (RawComponent, options = {}) => {
 
   // extract componentInfo for this component
   const extractedInfo = _.find(componentInfo, i => i.constructorName === Component.prototype.constructor.name)
-  const { _meta, constructorName, filenameWithoutExt } = extractedInfo
+  const {
+    _meta,
+    constructorName,
+    componentClassName,
+    filenameWithoutExt,
+  } = extractedInfo
 
   // ----------------------------------------
   // Class and file name
@@ -100,23 +104,14 @@ export default (RawComponent, options = {}) => {
     })
   }
 
-  // ----------------------------------------
-  // HOCs
-  // ----------------------------------------
-  it('is wrapped with hoc', () => {
-    const originalType = typeof RawComponent.originalComponent
-
-    originalType.should.be.equal('function', `${constructorName} should be wrapped with a HOC component`)
-  })
-
   // ----------------------------------------
   // Props
   // ----------------------------------------
   it('spreads user props', () => {
     const propName = 'data-is-conformant-spread-props'
     const props = { [propName]: true }
 
-    shallow(<RawComponent {...requiredProps} {...props} />)
+    shallow(<Component {...requiredProps} {...props} />)
       .should.have.descendants(props)
   })
 
@@ -129,12 +124,12 @@ export default (RawComponent, options = {}) => {
         const tags = ['a', 'em', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'i', 'p', 'span', 'strong']
         try {
           tags.forEach((tag) => {
-            shallow(<RawComponent {...requiredProps} as={tag} />)
+            shallow(<Component {...requiredProps} as={tag} />)
               .should.have.tagName(tag)
           })
         } catch (err) {
           tags.forEach((tag) => {
-            const wrapper = shallow(<RawComponent {...requiredProps} as={tag} />)
+            const wrapper = shallow(<Component {...requiredProps} as={tag} />)
             wrapper.type().should.not.equal(Component)
             wrapper.should.have.prop('as', tag)
           })
@@ -145,12 +140,11 @@ export default (RawComponent, options = {}) => {
         const MyComponent = () => null
 
         try {
-          shallow(<RawComponent {...requiredProps} as={MyComponent} />)
-            .dive()
+          shallow(<Component {...requiredProps} as={MyComponent} />)
             .type()
             .should.equal(MyComponent)
         } catch (err) {
-          const wrapper = shallow(<RawComponent {...requiredProps} as={MyComponent} />)
+          const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
           wrapper.type().should.not.equal(Component)
           wrapper.should.have.prop('as', MyComponent)
         }
@@ -164,12 +158,11 @@ export default (RawComponent, options = {}) => {
         }
 
         try {
-          shallow(<RawComponent {...requiredProps} as={MyComponent} />)
-            .dive()
+          shallow(<Component {...requiredProps} as={MyComponent} />)
             .type()
             .should.equal(MyComponent)
         } catch (err) {
-          const wrapper = shallow(<RawComponent {...requiredProps} as={MyComponent} />)
+          const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
           wrapper.type().should.not.equal(Component)
           wrapper.should.have.prop('as', MyComponent)
         }
@@ -178,7 +171,7 @@ export default (RawComponent, options = {}) => {
       it('passes extra props to the component it is renders as', () => {
         const MyComponent = () => null
 
-        shallow(<RawComponent {...requiredProps} as={MyComponent} data-extra-prop='foo' />)
+        shallow(<Component {...requiredProps} as={MyComponent} data-extra-prop='foo' />)
           .should.have.descendants('[data-extra-prop="foo"]')
       })
     })
@@ -232,7 +225,7 @@ export default (RawComponent, options = {}) => {
           'data-simulate-event-here': true,
         }
 
-        const wrapper = shallow(<RawComponent {...props} />)
+        const wrapper = shallow(<Component {...props} />)
 
         const eventTarget = eventTargets[listenerName]
           ? wrapper.find(eventTargets[listenerName])
@@ -291,11 +284,11 @@ export default (RawComponent, options = {}) => {
       })
     })
     if (_.has(_meta, 'parent')) {
-      // describe('parent', () => {
-      //   it('matches some component name', () => {
-      //     expect(_.map(semanticUIReact, c => c.prototype.constructor.name)).to.contain(_meta.parent)
-      //   })
-      // })
+      describe('parent', () => {
+        it('matches some component name', () => {
+          expect(_.map(semanticUIReact, c => c.prototype.constructor.name)).to.contain(_meta.parent)
+        })
+      })
     }
     describe('type', () => {
       it('is defined', () => {
@@ -307,7 +300,61 @@ export default (RawComponent, options = {}) => {
     })
   })
 
+  // ----------------------------------------
+  // Handles className
+  // ----------------------------------------
+  describe('className (common)', () => {
+    it(`has the Semantic UI className "${componentClassName}"`, () => {
+      const wrapper = render(<Component {...requiredProps} />)
+      // don't test components with no className at all (i.e. MessageItem)
+      if (wrapper.prop('className')) {
+        wrapper.should.have.className(componentClassName)
+      }
+    })
 
+    it("applies user's className to root component", () => {
+      const className = 'is-conformant-class-string'
+
+      // Portal powered components can render to two elements, a trigger and the actual component
+      // The actual component is shown when the portal is open
+      // If a trigger is rendered, open the portal and make assertions on the portal element
+      if (rendersPortal) {
+        const mountNode = document.createElement('div')
+        document.body.appendChild(mountNode)
+
+        const wrapper = mount(<Component {...requiredProps} className={className} />, { attachTo: mountNode })
+        wrapper.setProps({ open: true })
+
+        // portals/popups/etc may render the component to somewhere besides descendants
+        // we look for the component anywhere in the DOM
+        assertBodyContains(`.${className}`)
+
+        wrapper.detach()
+        document.body.removeChild(mountNode)
+      } else {
+        shallow(<Component {...requiredProps} className={className} />)
+          .should.have.className(className)
+      }
+    })
+
+    it("user's className does not override the default classes", () => {
+      const defaultClasses = shallow(<Component {...requiredProps} />)
+        .prop('className')
+
+      if (!defaultClasses) return
+
+      const userClasses = faker.hacker.verb()
+      const mixedClasses = shallow(<Component {...requiredProps} className={userClasses} />)
+        .prop('className')
+
+      defaultClasses.split(' ').forEach((defaultClass) => {
+        mixedClasses.should.include(defaultClass, [
+          'Make sure you are using the `getUnhandledProps` util to spread the `rest` props.',
+          'This may also be of help: https://facebook.github.io/react/docs/transferring-props.html.',
+        ].join(' '))
+      })
+    })
+  })
 
   // ----------------------------------------
   // Test typings