Skip to content

Expose pretty-dom utility #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 19, 2018
Merged

Expose pretty-dom utility #25

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4eea14f
Expose pretty-dom utility
gnapse Apr 19, 2018
9c98d6e
Allow users of prettyDOM to set max length
gnapse Apr 19, 2018
ff1e40e
Remove logDOM
gnapse Apr 19, 2018
cc96516
Add tests for prettyDOM
gnapse Apr 19, 2018
87e2614
Add yarn-error.log to .gitignore
gnapse Apr 19, 2018
4b150b3
Add documencation for prettyDOM
gnapse Apr 19, 2018
30615c0
Update pretty-dom.js
Apr 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@ export * from './matches'
export * from './get-node-text'
export * from './events'
export * from './bind-element-to-queries'
export * from './pretty-dom'
22 changes: 22 additions & 0 deletions src/pretty-dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import prettyFormat from 'pretty-format'

const {DOMElement, DOMCollection} = prettyFormat.plugins

function prettyDOM(htmlElement) {
const debugContent = prettyFormat(htmlElement, {
plugins: [DOMElement, DOMCollection],
printFunctionName: false,
highlight: true,
})
const maxLength = process.env.DEBUG_PRINT_LIMIT || 7000
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps we should accept this as an argument? I'm thinking that folks who are logging things themselves might want to control this more easily and in general probably want to see the whole thing. So perhaps we should only have this default for where it was already in use and the real default should be Infinity?

Copy link
Contributor

@antsmartian antsmartian Apr 19, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I agree with @kentcdodds. Currently when a test case is failing, its hiding the contents of the container and I need to increase the DEBUG_PRINT_LIMIT to see the whole dom, which is causing me to re-run the case again. Since we are going to expose this to outside world, the default value should be infinity. That should make life easier :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed it, and now the env var is only used internally when pretty printing out DOM inside thrown exceptions by the element getters. The exposed prettyDOM does not limit the output at all, and allows a second optional argument for the user to set a limit per call.

return htmlElement.outerHTML.length > maxLength
? `${debugContent.slice(0, maxLength)}...`
: debugContent
}

function logDOM(htmlElement) {
// eslint-disable-next-line no-console
console.log(prettyDOM(htmlElement))
}

export {prettyDOM, logDOM}
28 changes: 7 additions & 21 deletions src/queries.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import prettyFormat from 'pretty-format'
import {matches} from './matches'
import {getNodeText} from './get-node-text'

const {DOMElement, DOMCollection} = prettyFormat.plugins
import {prettyDOM} from './pretty-dom'

// Here are the queries for the library.
// The queries here should only be things that are accessible to both users who are using a screen reader
Expand Down Expand Up @@ -74,7 +72,7 @@ function getByTestId(container, id, ...rest) {
const el = queryByTestId(container, id, ...rest)
if (!el) {
throw new Error(
`Unable to find an element by: [data-testid="${id}"] \n\n${htmlElementToDisplay(
`Unable to find an element by: [data-testid="${id}"] \n\n${prettyDOM(
container,
)}`,
)
Expand All @@ -86,7 +84,7 @@ function getByPlaceholderText(container, text, ...rest) {
const el = queryByPlaceholderText(container, text, ...rest)
if (!el) {
throw new Error(
`Unable to find an element with the placeholder text of: ${text} \n\n${htmlElementToDisplay(
`Unable to find an element with the placeholder text of: ${text} \n\n${prettyDOM(
container,
)}`,
)
Expand All @@ -100,13 +98,13 @@ function getByLabelText(container, text, ...rest) {
const label = queryLabelByText(container, text)
if (label) {
throw new Error(
`Found a label with the text of: ${text}, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. \n\n${htmlElementToDisplay(
`Found a label with the text of: ${text}, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly. \n\n${prettyDOM(
container,
)}`,
)
} else {
throw new Error(
`Unable to find a label with the text of: ${text} \n\n${htmlElementToDisplay(
`Unable to find a label with the text of: ${text} \n\n${prettyDOM(
container,
)}`,
)
Expand All @@ -119,7 +117,7 @@ function getByText(container, text, ...rest) {
const el = queryByText(container, text, ...rest)
if (!el) {
throw new Error(
`Unable to find an element with the text: ${text}. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. \n\n${htmlElementToDisplay(
`Unable to find an element with the text: ${text}. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible. \n\n${prettyDOM(
container,
)}`,
)
Expand All @@ -139,26 +137,14 @@ function getByAltText(container, alt) {
const el = queryByAltText(container, alt)
if (!el) {
throw new Error(
`Unable to find an element with the alt text: ${alt} \n\n${htmlElementToDisplay(
`Unable to find an element with the alt text: ${alt} \n\n${prettyDOM(
container,
)}`,
)
}
return el
}

function htmlElementToDisplay(htmlElement) {
const debugContent = prettyFormat(htmlElement, {
plugins: [DOMElement, DOMCollection],
printFunctionName: false,
highlight: true,
})
const maxLength = process.env.DEBUG_PRINT_LIMIT || 7000
return htmlElement.outerHTML.length > maxLength
? `${debugContent.slice(0, maxLength)}...`
: debugContent
}

export {
queryByPlaceholderText,
getByPlaceholderText,
Expand Down