-
Notifications
You must be signed in to change notification settings - Fork 406
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.
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
feat: Depreciate toBeInTheDOM with replacement #40
Changes from 6 commits
ea87915
ff4875e
ab1a19f
a9e3eb6
c151c49
9eaaaff
d4d230d
c4961a5
a30bfaa
6047eb3
0018069
f304c07
9af1d22
a7e78e5
45740d5
2e7e70a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
test('.toBeInTheDocument', () => { | ||
document.body.innerHTML = ` | ||
<span data-testid="html-element"><span>Html Element</span></span> | ||
<svg data-testid="svg-element"></svg>` | ||
|
||
const htmlElement = document.querySelector('[data-testid="html-element"]') | ||
const svgElement = document.querySelector('[data-testid="html-element"]') | ||
const detachedElement = document.createElement('div') | ||
const fakeElement = {thisIsNot: 'an html element'} | ||
|
||
expect(htmlElement).toBeInTheDocument() | ||
expect(svgElement).toBeInTheDocument() | ||
expect(detachedElement).not.toBeInTheDocument() | ||
|
||
// negative test cases wrapped in throwError assertions for coverage. | ||
expect(() => expect(htmlElement).not.toBeInTheDocument()).toThrowError() | ||
expect(() => expect(svgElement).not.toBeInTheDocument()).toThrowError() | ||
expect(() => expect(detachedElement).toBeInTheDocument()).toThrowError() | ||
expect(() => expect(fakeElement).toBeInTheDocument()).toThrowError() | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import {deprecate, getDepreciationMessage} from '../utils' | ||
|
||
test('deprecate', () => { | ||
const spy = jest.spyOn(console, 'warn').mockImplementation(() => {}) | ||
|
||
const messageWithReplacement = getDepreciationMessage('test', 'test') | ||
deprecate('test', 'test') | ||
expect(spy).toHaveBeenCalledWith(messageWithReplacement) | ||
|
||
const messageWithoutReplacement = getDepreciationMessage('test') | ||
deprecate('test') | ||
expect(spy).toHaveBeenCalledWith(messageWithoutReplacement) | ||
|
||
spy.mockRestore() | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import {matcherHint, printReceived} from 'jest-matcher-utils' | ||
import {checkHtmlElement} from './utils' | ||
|
||
export function toBeInTheDocument(element) { | ||
checkHtmlElement(element, toBeInTheDocument, this) | ||
|
||
return { | ||
pass: document.documentElement.contains(element), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we check whether There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hrm, sounds good, agreed on developer experience. It would be nice to get a clear error. Does the following sound good @jgoz?
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 the first message should be good enough for both cases. |
||
message: () => { | ||
return [ | ||
matcherHint( | ||
`${this.isNot ? '.not' : ''}.toBeInTheDocument`, | ||
'element', | ||
'', | ||
), | ||
'', | ||
'Received:', | ||
` ${printReceived( | ||
element.hasChildNodes() ? element.cloneNode(false) : element, | ||
)}`, | ||
].join('\n') | ||
}, | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -66,4 +66,29 @@ function matches(textToMatch, node, matcher) { | |
} | ||
} | ||
|
||
export {checkHtmlElement, getMessage, matches} | ||
function deprecate(name, replacementText) { | ||
const message = getDepreciationMessage(name, replacementText) | ||
|
||
// Notify user that they are using deprecated functionality. | ||
// eslint-disable-next-line no-console | ||
console.warn(message) | ||
} | ||
|
||
function getDepreciationMessage(name, replacementText) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this need to be exposed as a separate function at all? I know it's used in the tests, but I would rather see the full message typed out in the tests than use this function in both spots. Otherwise we never really test the output of this function. My preference would be to remove this function and inline the message creation in function deprecate(name, replacementText) {
// Notify user that they are using deprecated functionality.
// eslint-disable-next-line no-console
console.warn(
`Warning: ${name} has been deprecated and will be removed in future updates.`,
replacementText
)
} There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sounds good, I will aim to remove this and update the check to use the text. |
||
return [ | ||
'Warning:', | ||
name, | ||
'has been deprecated and will be removed in future updates.', | ||
replacementText, | ||
] | ||
.join(' ') | ||
.trim() | ||
} | ||
|
||
export { | ||
checkHtmlElement, | ||
getMessage, | ||
matches, | ||
deprecate, | ||
getDepreciationMessage, | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As I commented below, I think we should type out the full expected message here, rather than rebuilding it again with the function.