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 {
nestedShallow(<Component {...requiredProps} className={className} />, {
nestingLevel,
}).should.have.className(className)
}
})
tags.forEach((tag) => {
const wrapper = nestedShallow(<Component {...requiredProps} as={tag} />, {
nestingLevel,
})
wrapper.type().should.not.equal(Component)
wrapper.should.have.prop('as', tag)
})
it('passes extra props to the component it is renders as', () => {
const MyComponent = () => null
nestedShallow(<Component {...requiredProps} as={MyComponent} data-extra-prop='foo' />, {
nestingLevel,
}).should.have.descendants('[data-extra-prop="foo"]')
})
it('does not add prop value to className', () => {
consoleUtil.disableOnce()
const value = 'foo-bar-baz'
nestedShallow(createElement(Component, { ...requiredProps, [propKey]: value }), {
nestingLevel,
}).should.not.have.className(value)
})
it('renders as a functional component or passes "as" to the next component', () => {
const MyComponent = () => null
try {
nestedShallow(<Component {...requiredProps} as={MyComponent} />, { nestingLevel })
.type()
.should.equal(MyComponent)
} catch (err) {
const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
wrapper.type().should.not.equal(Component)
wrapper.should.have.prop('as', MyComponent)
}
})
it("user's className does not override the default classes", () => {
const defaultClasses = nestedShallow(<Component {...requiredProps} />, {
nestingLevel,
}).prop('className')
if (!defaultClasses) return
const userClasses = faker.hacker.verb()
const mixedClasses = nestedShallow(
<Component {...requiredProps} className={userClasses} />,
{ nestingLevel },
).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(' '),
)
})
})
it('renders as a ReactClass or passes "as" to the next component', () => {
// eslint-disable-next-line react/prefer-stateless-function
class MyComponent extends React.Component {
render() {
return <div data-my-react-class />
}
}
try {
nestedShallow(<Component {...requiredProps} as={MyComponent} />, { nestingLevel })
.type()
.should.equal(MyComponent)
} catch (err) {
const wrapper = shallow(<Component {...requiredProps} as={MyComponent} />)
wrapper.type().should.not.equal(Component)
wrapper.should.have.prop('as', MyComponent)
}
})
tags.forEach((tag) => {
nestedShallow(<Component {...requiredProps} as={tag} />, {
nestingLevel,
}).should.have.tagName(tag)
})
it('adds prop name to className', () => {
consoleUtil.disableOnce()
nestedShallow(createElement(Component, { ...requiredProps, [propKey]: true }), {
nestingLevel,
}).should.have.className(className)
})
propValues.forEach((propValue) => {
nestedShallow(createElement(Component, { ...requiredProps, [propKey]: propValue }), {
nestingLevel,
}).should.not.have.className(propKey)
})
it('renders child number with 0 value', () => {
nestedShallow(createElement(Component, { ...requiredProps, content: 0 }), {
nestingLevel,
}).should.contain.text('0')
})
it('renders child components', () => {
const child = <div data-child={faker.hacker.noun()} />
nestedShallow(createElement(Component, { ...requiredProps, content: child }), {
nestingLevel,
}).should.contain(child)
})
it('renders child text', () => {
const text = faker.hacker.phrase()
nestedShallow(createElement(Component, { ...requiredProps, content: text }), {
nestingLevel,
}).should.contain.text(text)
})