fix: api should be consistent with react-testing-library

fixes: #24

Author: mihar-22

pure.d.ts

@@ -0,0 +1 @@
+export * from './types/pure'

src/__tests__/act.js

@@ -1,8 +1,6 @@
 import '@testing-library/jest-dom/extend-expect'
-
 import { createRef, h } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
-
 import { fireEvent, render } from '..'
 
 test('render calls useEffect immediately', () => {

src/__tests__/auto-cleanup.js

@@ -1,5 +1,4 @@
 import { h } from 'preact'
-
 import { render } from '..'
 
 // This just verifies that by importing PTL in an

src/__tests__/cleanup.js

@@ -1,7 +1,5 @@
 import '@testing-library/jest-dom/extend-expect'
-
 import { Component, h } from 'preact'
-
 import { cleanup, render } from '..'
 
 test('cleans up the document', () => {

src/__tests__/debug.js

@@ -1,10 +1,8 @@
 /* eslint-disable no-console */
 
 import '@testing-library/jest-dom/extend-expect'
-
-import { h } from 'preact'
-
-import { render } from '..'
+import { h, Fragment } from 'preact'
+import { screen, render } from '..'
 
 beforeEach(() => {
   jest.spyOn(console, 'log').mockImplementation(() => {})
@@ -24,3 +22,33 @@ test('debug pretty prints the container', () => {
   expect(console.log).toHaveBeenCalledTimes(1)
   expect(console.log).toHaveBeenCalledWith(expect.stringContaining('Hello World'))
 })
+
+test('debug pretty prints multiple containers', () => {
+  const HelloWorld = () => (
+    <Fragment>
+      <h1 data-testid="testId">Hello World</h1>
+      <h1 data-testid="testId">Hello World</h1>
+    </Fragment>
+  )
+
+  const { debug } = render(<HelloWorld />)
+  const multipleElements = screen.getAllByTestId('testId')
+  debug(multipleElements)
+  expect(console.log).toHaveBeenCalledTimes(2)
+  expect(console.log).toHaveBeenCalledWith(
+    expect.stringContaining('Hello World')
+  )
+})
+
+test('allows same arguments as prettyDOM', () => {
+  const HelloWorld = () => <h1>Hello World</h1>
+  const { debug, container } = render(<HelloWorld />)
+  debug(container, 6, { highlight: false })
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      "<div>
+    ...",
+    ]
+  `)
+})

src/__tests__/end-to-end.js

@@ -1,6 +1,6 @@
+import '@testing-library/jest-dom/extend-expect'
 import { Component, h } from 'preact'
-
-import { render, waitFor } from '..' // eslint-disable-line import/named
+import { screen, render, waitForElementToBeRemoved } from '..'
 
 const fetchAMessage = () => new Promise((resolve) => {
   // we are using random timeout here to simulate a real-time example
@@ -15,15 +15,15 @@ const fetchAMessage = () => new Promise((resolve) => {
 class ComponentWithLoader extends Component {
   state = { loading: true }
 
-  async componentDidMount () {
-    const data = await fetchAMessage()
-
-    this.setState({data, loading: false}) // eslint-disable-line
+  componentDidMount () {
+    fetchAMessage().then(data => {
+      this.setState({ data, loading: false })
+    })
   }
 
   render () {
     if (this.state.loading) {
-      return <div>Loading...</div>
+      return (<div>Loading...</div>)
     }
 
     return (
@@ -35,11 +35,8 @@ class ComponentWithLoader extends Component {
 }
 
 test('it waits for the data to be loaded', async () => {
-  const { queryByText, queryByTestId } = render(<ComponentWithLoader />)
-
-  expect(queryByText('Loading...')).toBeTruthy()
-
-  await waitFor(() => expect(queryByText('Loading...')).toBeNull())
-
-  expect(queryByTestId('message').textContent).toMatch(/Hello World/)
+  render(<ComponentWithLoader />)
+  const loading = () => screen.getByText('Loading...')
+  await waitForElementToBeRemoved(loading)
+  expect(screen.getByTestId('message')).toHaveTextContent(/Hello World/)
 })

src/__tests__/events.js

@@ -1,5 +1,4 @@
 import { createRef, h } from 'preact'
-
 import { fireEvent, render } from '..'
 
 const eventTypes = [

src/__tests__/multi-base.js

@@ -1,5 +1,4 @@
 import { h } from 'preact'
-
 import { render } from '..'
 
 // These are created once per test suite and reused for each case

src/__tests__/render.js

@@ -1,8 +1,6 @@
 import '@testing-library/jest-dom/extend-expect'
-
 import { Component, createRef, h } from 'preact'
 import Portal from 'preact-portal'
-
 import { render } from '..'
 
 test('renders div into document', () => {

src/__tests__/rerender.js

@@ -1,7 +1,5 @@
 import '@testing-library/jest-dom/extend-expect'
-
 import { h } from 'preact'
-
 import { render } from '..'
 
 test('rerender will re-render the element', () => {