chore: refactor tests for classnames to use mount() (#4341)

Author: layershifter

test/specs/addons/Confirm/Confirm-test.js

@@ -32,12 +32,14 @@ describe('Confirm', () => {
     autoGenerateKey: false,
     propKey: 'header',
     ShorthandComponent: Modal.Header,
+    rendersPortal: true,
     mapValueToProps: (content) => ({ content }),
   })
   common.implementsShorthandProp(Confirm, {
     autoGenerateKey: false,
     propKey: 'content',
     ShorthandComponent: Modal.Content,
+    rendersPortal: true,
     mapValueToProps: (content) => ({ content }),
   })
 

test/specs/commonTests/classNameHelpers.js

@@ -1,5 +1,5 @@
 import _ from 'lodash'
-import React, { createElement } from 'react'
+import React from 'react'
 
 import { consoleUtil } from 'test/utils'
 
@@ -8,24 +8,24 @@ export const classNamePropValueBeforePropName = (Component, propKey, propValues,
 
   propValues.forEach((propVal) => {
     it(`adds "${propVal} ${className}" to className`, () => {
-      shallow(createElement(Component, { ...requiredProps, [propKey]: propVal }), {
-        autoNesting: true,
-      }).should.have.className(`${propVal} ${className}`)
+      const wrapper = mount(
+        React.createElement(Component, { ...requiredProps, [propKey]: propVal }),
+      )
+      const elementClassName = wrapper.childAt(0).getDOMNode().className
+
+      expect(elementClassName).include(`${propVal} ${className}`)
     })
   })
 }
 
 export const noClassNameFromBoolProps = (Component, propKey, propValues, options = {}) => {
-  const { className = propKey, nestingLevel = 0, requiredProps = {} } = options
+  const { className = propKey, requiredProps = {} } = options
 
   _.each([true, false], (bool) =>
     it(`does not add any className when ${bool}`, () => {
       consoleUtil.disableOnce()
 
-      const wrapper = shallow(createElement(Component, { ...requiredProps, [propKey]: bool }), {
-        autoNesting: true,
-        nestingLevel,
-      })
+      const wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: bool }))
 
       wrapper.should.not.have.className(className)
       wrapper.should.not.have.className('true')
@@ -38,15 +38,18 @@ export const noClassNameFromBoolProps = (Component, propKey, propValues, options
 
 export const noDefaultClassNameFromProp = (Component, propKey, propValues, options = {}) => {
   const { defaultProps = {} } = Component
-  const { className = propKey, nestingLevel = 0, requiredProps = {} } = options
+  const { className = propKey, requiredProps = {} } = options
+
   // required props may include a prop that creates a className
   // if so, we cannot assert that it doesn't exist by default because it is required to exist
   // skip assertions for required props
   if (propKey in defaultProps) return
   if (propKey in requiredProps) return
 
   it('is not included in className when not defined', () => {
-    const wrapper = shallow(<Component {...requiredProps} />, { autoNesting: true, nestingLevel })
+    consoleUtil.disableOnce()
+    const wrapper = mount(<Component {...requiredProps} />)
+
     wrapper.should.not.have.className(className)
 
     // ensure that none of the prop option values are in className

test/specs/commonTests/implementsClassNameProps.js

@@ -55,12 +55,11 @@ export const propKeyOnlyToClassName = (Component, propKey, options = {}) => {
 
       const element = React.createElement(Component, { ...requiredProps, [propKey]: true })
       const wrapper = mount(element)
+      const elementClassName = wrapper.childAt(0).getDOMNode().className
 
       // ".should.have.className" with "mount" renderer does not handle properly cases when "className" contains
-      // multiple classes. That's why ".split()" is required.
-      className.split(' ').forEach((classNamePart) => {
-        wrapper.childAt(0).should.have.className(classNamePart)
-      })
+      // multiple classes.
+      expect(elementClassName).include(className)
     })
 
     it('does not add prop value to className', () => {
@@ -100,15 +99,13 @@ export const propKeyOrValueAndKeyToClassName = (Component, propKey, propValues,
     })
 
     it('adds only the name to className when true', () => {
-      shallow(React.createElement(Component, { ...requiredProps, [propKey]: true }), {
-        autoNesting: true,
-      }).should.have.className(className)
+      const wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: true }))
+
+      wrapper.should.have.className(className)
     })
 
     it('adds no className when false', () => {
-      const wrapper = shallow(
-        React.createElement(Component, { ...requiredProps, [propKey]: false }),
-      )
+      const wrapper = mount(React.createElement(Component, { ...requiredProps, [propKey]: false }))
 
       wrapper.should.not.have.className(className)
       wrapper.should.not.have.className('true')

test/specs/commonTests/implementsShorthandProp.js

@@ -28,6 +28,7 @@ const shorthandComponentName = (ShorthandComponent) => {
  * @param {function} options.mapValueToProps A function that maps a primitive value to the Component props.
  * @param {Boolean} [options.parentIsFragment=false] A flag that shows the type of the Component to test.
  * @param {Object} [options.requiredProps={}] Props required to render the component.
+ * @param {boolean} [options.rendersPortal=false] Does this component render a Portal powered component?
  * @param {Object} [options.shorthandDefaultProps] Default props for the shorthand component.
  * @param {Object} [options.shorthandOverrideProps] Override props for the shorthand component.
  */
@@ -38,6 +39,7 @@ export default (Component, options = {}) => {
     autoGenerateKey = true,
     mapValueToProps,
     parentIsFragment = false,
+    rendersPortal = false,
     propKey,
     ShorthandComponent,
     shorthandDefaultProps = {},
@@ -79,7 +81,7 @@ export default (Component, options = {}) => {
         shallow(<Component {...requiredProps} />).should.have.descendants(ShorthandComponent)
       })
     } else {
-      if (!parentIsFragment) {
+      if (!parentIsFragment && !rendersPortal) {
         noDefaultClassNameFromProp(Component, propKey, [], options)
       }