diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index f6c09bb6..70677e35 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -1,4 +1,3 @@ -import 'jest-dom/extend-expect' import {configure} from '../config' import {render, renderIntoDocument} from './helpers/test-utils' diff --git a/src/__tests__/example.js b/src/__tests__/example.js index da0bb8ba..2a8d889a 100644 --- a/src/__tests__/example.js +++ b/src/__tests__/example.js @@ -1,7 +1,5 @@ // query utilities: import {getByLabelText, getByText, getByTestId, queryByTestId, wait} from '../' -// adds special assertions like toHaveTextContent -import 'jest-dom/extend-expect' function getExampleDOM() { // This is just a raw example of setting up some DOM diff --git a/src/__tests__/helpers/test-utils.js b/src/__tests__/helpers/test-utils.js index 71461eba..8dcff101 100644 --- a/src/__tests__/helpers/test-utils.js +++ b/src/__tests__/helpers/test-utils.js @@ -1,10 +1,12 @@ import {getQueriesForElement} from '../../get-queries-for-element' -function render(html) { - const container = document.createElement('div') +function render(html, {container = document.createElement('div')} = {}) { container.innerHTML = html const containerQueries = getQueriesForElement(container) - return {container, ...containerQueries} + function rerender(newHtml) { + return render(newHtml, {container}) + } + return {container, rerender, ...containerQueries} } function renderIntoDocument(html) { diff --git a/src/__tests__/queries.find.js b/src/__tests__/queries.find.js new file mode 100644 index 00000000..facceba2 --- /dev/null +++ b/src/__tests__/queries.find.js @@ -0,0 +1,125 @@ +import {render} from './helpers/test-utils' + +test('find asynchronously finds elements', async () => { + const { + findByLabelText, + findAllByLabelText, + + findByPlaceholderText, + findAllByPlaceholderText, + + findByText, + findAllByText, + + findByAltText, + findAllByAltText, + + findByTitle, + findAllByTitle, + + findByDisplayValue, + findAllByDisplayValue, + + findByRole, + findAllByRole, + + findByTestId, + findAllByTestId, + } = render(` +
+
test text content
+ + + test alt text + +
+
+ `) + await expect(findByLabelText('test-label')).resolves.toBeTruthy() + await expect(findAllByLabelText('test-label')).resolves.toHaveLength(1) + + await expect(findByPlaceholderText('placeholder')).resolves.toBeTruthy() + await expect(findAllByPlaceholderText('placeholder')).resolves.toHaveLength(1) + + await expect(findByText('test text content')).resolves.toBeTruthy() + await expect(findAllByText('test text content')).resolves.toHaveLength(1) + + await expect(findByAltText('test alt text')).resolves.toBeTruthy() + await expect(findAllByAltText('test alt text')).resolves.toHaveLength(1) + + await expect(findByTitle('test title')).resolves.toBeTruthy() + await expect(findAllByTitle('test title')).resolves.toHaveLength(1) + + await expect(findByDisplayValue('display value')).resolves.toBeTruthy() + await expect(findAllByDisplayValue('display value')).resolves.toHaveLength(1) + + await expect(findByRole('dialog')).resolves.toBeTruthy() + await expect(findAllByRole('dialog')).resolves.toHaveLength(1) + + await expect(findByTestId('test-id')).resolves.toBeTruthy() + await expect(findAllByTestId('test-id')).resolves.toHaveLength(1) +}) + +test('find rejects when something cannot be found', async () => { + const { + findByLabelText, + findAllByLabelText, + + findByPlaceholderText, + findAllByPlaceholderText, + + findByText, + findAllByText, + + findByAltText, + findAllByAltText, + + findByTitle, + findAllByTitle, + + findByDisplayValue, + findAllByDisplayValue, + + findByRole, + findAllByRole, + + findByTestId, + findAllByTestId, + } = render(`
`) + + // I just don't want multiple lines for these. + // qo = queryOptions + // wo = waitForElementOptions + const qo = {} // query options + const wo = {timeout: 10} // wait options + + await expect(findByLabelText('x', qo, wo)).rejects.toThrow('x') + await expect(findAllByLabelText('x', qo, wo)).rejects.toThrow('x') + + await expect(findByPlaceholderText('x', qo, wo)).rejects.toThrow('x') + await expect(findAllByPlaceholderText('x', qo, wo)).rejects.toThrow('x') + + await expect(findByText('x', qo, wo)).rejects.toThrow('x') + await expect(findAllByText('x', qo, wo)).rejects.toThrow('x') + + await expect(findByAltText('x', qo, wo)).rejects.toThrow('x') + await expect(findAllByAltText('x', qo, wo)).rejects.toThrow('x') + + await expect(findByTitle('x', qo, wo)).rejects.toThrow('x') + await expect(findAllByTitle('x', qo, wo)).rejects.toThrow('x') + + await expect(findByDisplayValue('x', qo, wo)).rejects.toThrow('x') + await expect(findAllByDisplayValue('x', qo, wo)).rejects.toThrow('x') + + await expect(findByRole('x', qo, wo)).rejects.toThrow('x') + await expect(findAllByRole('x', qo, wo)).rejects.toThrow('x') + + await expect(findByTestId('x', qo, wo)).rejects.toThrow('x') + await expect(findAllByTestId('x', qo, wo)).rejects.toThrow('x') +}) + +test('actually works with async code', async () => { + const {findByTestId, container, rerender} = render(`
`) + setTimeout(() => rerender(`
correct dom
`), 20) + await expect(findByTestId('div', {}, {container})).resolves.toBeTruthy() +}) diff --git a/src/__tests__/text-matchers.js b/src/__tests__/text-matchers.js index 7cbd6924..fa0cd44d 100644 --- a/src/__tests__/text-matchers.js +++ b/src/__tests__/text-matchers.js @@ -1,4 +1,3 @@ -import 'jest-dom/extend-expect' import cases from 'jest-in-case' import {getDefaultNormalizer} from '../' diff --git a/src/__tests__/wait-for-dom-change.js b/src/__tests__/wait-for-dom-change.js index 0034f9bb..438a63ec 100644 --- a/src/__tests__/wait-for-dom-change.js +++ b/src/__tests__/wait-for-dom-change.js @@ -1,6 +1,4 @@ import {waitForDomChange} from '../' -// adds special assertions like toBeTruthy -import 'jest-dom/extend-expect' import {render} from './helpers/test-utils' const skipSomeTime = delayMs => diff --git a/src/__tests__/wait-for-element-to-be-removed.fake-timers.js b/src/__tests__/wait-for-element-to-be-removed.fake-timers.js index a1d854cb..a6744d17 100644 --- a/src/__tests__/wait-for-element-to-be-removed.fake-timers.js +++ b/src/__tests__/wait-for-element-to-be-removed.fake-timers.js @@ -1,4 +1,3 @@ -import 'jest-dom/extend-expect' import {waitForElementToBeRemoved} from '../' import {render} from './helpers/test-utils' diff --git a/src/__tests__/wait-for-element-to-be-removed.js b/src/__tests__/wait-for-element-to-be-removed.js index f6425b41..3eeaff0a 100644 --- a/src/__tests__/wait-for-element-to-be-removed.js +++ b/src/__tests__/wait-for-element-to-be-removed.js @@ -1,4 +1,3 @@ -import 'jest-dom/extend-expect' import {waitForElementToBeRemoved} from '../' import {renderIntoDocument} from './helpers/test-utils' diff --git a/src/__tests__/wait-for-element.js b/src/__tests__/wait-for-element.js index 178142b8..106dc3a8 100644 --- a/src/__tests__/wait-for-element.js +++ b/src/__tests__/wait-for-element.js @@ -1,6 +1,4 @@ import {waitForElement, wait} from '../' -// adds special assertions like toBeTruthy -import 'jest-dom/extend-expect' import {render} from './helpers/test-utils' const skipSomeTime = delayMs => diff --git a/src/queries.js b/src/queries.js index a406f8cd..5a7ceb71 100644 --- a/src/queries.js +++ b/src/queries.js @@ -6,6 +6,7 @@ import { queryAllByAttribute, queryByAttribute, } from './query-helpers' +import {waitForElement} from './wait-for-element' import {getConfig} from './config' // Here are the queries for the library. @@ -375,6 +376,38 @@ function getByDisplayValue(...args) { return firstResultOrNull(getAllByDisplayValue, ...args) } +function makeFinder(getter) { + return (container, text, options, waitForElementOptions) => + waitForElement( + () => getter(container, text, options), + waitForElementOptions, + ) +} + +export const findByLabelText = makeFinder(getByLabelText) +export const findAllByLabelText = makeFinder(getAllByLabelText) + +export const findByPlaceholderText = makeFinder(getByPlaceholderText) +export const findAllByPlaceholderText = makeFinder(getAllByPlaceholderText) + +export const findByText = makeFinder(getByText) +export const findAllByText = makeFinder(getAllByText) + +export const findByAltText = makeFinder(getByAltText) +export const findAllByAltText = makeFinder(getAllByAltText) + +export const findByTitle = makeFinder(getByTitle) +export const findAllByTitle = makeFinder(getAllByTitle) + +export const findByDisplayValue = makeFinder(getByDisplayValue) +export const findAllByDisplayValue = makeFinder(getAllByDisplayValue) + +export const findByRole = makeFinder(getByRole) +export const findAllByRole = makeFinder(getAllByRole) + +export const findByTestId = makeFinder(getByTestId) +export const findAllByTestId = makeFinder(getAllByTestId) + export { queryByPlaceholderText, queryAllByPlaceholderText, diff --git a/tests/setup-env.js b/tests/setup-env.js new file mode 100644 index 00000000..4435317a --- /dev/null +++ b/tests/setup-env.js @@ -0,0 +1 @@ +import 'jest-dom/extend-expect'