parent
8b33a8f7c9
commit
b82fb93695
@ -0,0 +1,6 @@
|
|||||||
|
const config = require('kcd-scripts/jest')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
...config,
|
||||||
|
testEnvironment: 'jsdom',
|
||||||
|
}
|
@ -1,89 +1,31 @@
|
|||||||
import React from 'react'
|
import angular from 'angular'
|
||||||
import ReactDOM from 'react-dom'
|
import 'angular-mocks'
|
||||||
import {render} from '../'
|
import {render} from '../'
|
||||||
|
|
||||||
test('renders div into document', () => {
|
beforeEach(() => {
|
||||||
const ref = React.createRef()
|
angular.module('atl', [])
|
||||||
const {container} = render(<div ref={ref} />)
|
angular.mock.module('atl')
|
||||||
expect(container.firstChild).toBe(ref.current)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
test('works great with react portals', () => {
|
test('renders div into document', () => {
|
||||||
class MyPortal extends React.Component {
|
const {container} = render(`<div id="child"></div>`)
|
||||||
constructor(...args) {
|
expect(container.firstChild.id).toBe('child')
|
||||||
super(...args)
|
|
||||||
this.portalNode = document.createElement('div')
|
|
||||||
this.portalNode.dataset.testid = 'my-portal'
|
|
||||||
}
|
|
||||||
componentDidMount() {
|
|
||||||
document.body.appendChild(this.portalNode)
|
|
||||||
}
|
|
||||||
componentWillUnmount() {
|
|
||||||
this.portalNode.parentNode.removeChild(this.portalNode)
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
return ReactDOM.createPortal(
|
|
||||||
<Greet greeting="Hello" subject="World" />,
|
|
||||||
this.portalNode,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function Greet({greeting, subject}) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<strong>
|
|
||||||
{greeting} {subject}
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const {unmount, getByTestId, getByText} = render(<MyPortal />)
|
|
||||||
expect(getByText('Hello World')).toBeInTheDocument()
|
|
||||||
const portalNode = getByTestId('my-portal')
|
|
||||||
expect(portalNode).toBeInTheDocument()
|
|
||||||
unmount()
|
|
||||||
expect(portalNode).not.toBeInTheDocument()
|
|
||||||
})
|
})
|
||||||
|
|
||||||
test('returns baseElement which defaults to document.body', () => {
|
test('returns baseElement which defaults to document.body', () => {
|
||||||
const {baseElement} = render(<div />)
|
const {baseElement} = render(`<div></div>`)
|
||||||
expect(baseElement).toBe(document.body)
|
expect(baseElement).toBe(document.body)
|
||||||
})
|
})
|
||||||
|
|
||||||
test('supports fragments', () => {
|
test('supports fragments', () => {
|
||||||
class Test extends React.Component {
|
angular.module('atl').component('atlFragment', {
|
||||||
render() {
|
template: `
|
||||||
return (
|
<div>
|
||||||
<div>
|
<code>DocumentFragment</code> is pretty cool!
|
||||||
<code>DocumentFragment</code> is pretty cool!
|
</div>
|
||||||
</div>
|
`,
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const {asFragment} = render(<Test />)
|
|
||||||
expect(asFragment()).toMatchSnapshot()
|
|
||||||
})
|
|
||||||
|
|
||||||
test('renders options.wrapper around node', () => {
|
|
||||||
const WrapperComponent = ({children}) => (
|
|
||||||
<div data-testid="wrapper">{children}</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
const {container, getByTestId} = render(<div data-testid="inner" />, {
|
|
||||||
wrapper: WrapperComponent,
|
|
||||||
})
|
})
|
||||||
|
|
||||||
expect(getByTestId('wrapper')).toBeInTheDocument()
|
const {asFragment} = render(`<atl-fragment></atl-fragment>`)
|
||||||
expect(container.firstChild).toMatchInlineSnapshot(`
|
expect(asFragment()).toMatchSnapshot()
|
||||||
<div
|
|
||||||
data-testid="wrapper"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
data-testid="inner"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
`)
|
|
||||||
})
|
})
|
||||||
|
Loading…
Reference in new issue