Skip to content
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

fix: toHaveStyle assertion with invalid style (#564) #582

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

EduardoSimon
Copy link

What:

Given an invalid declaration such as fontSize: 8, due to the missing unit, the toHaveStyle matcher should not pass the following test:

render(<div data-testid="element" style={{ fontSize: 8 }} />)
expect(screen.getByTestId('element')).toHaveStyle({ fontSize: 1 })

Why:

Refer to the original issue for more info: #564

How:

This PR fixes #564 by adding a more restrictive guard in the matcher's logic.

Checklist:

  • Documentation N/A
  • Tests
  • Updated Type Definitions N/A
  • Ready to be merged

Given an invalid declaration such as `fontSize: 8`, due to the missing
unit, the `toHaveStyle` matcher should not pass the following test:

```
render(<div data-testid="element" style={{ fontSize: 8 }} />)
expect(screen.getByTestId('element')).toHaveStyle({ fontSize: 1 })
```

This PR fixes testing-library#564 by adding a more restrictive guard in the matcher's
logic.
Copy link
Member

@gnapse gnapse left a comment

Choose a reason for hiding this comment

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

Looks good, thanks!

Although it may benefit from a comment on the new helper function as mentioned/requested below.

!computedStyle[name] &&
!computedStyle.getPropertyValue(name)
)
}
Copy link
Member

Choose a reason for hiding this comment

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

nit: keep blank line between function declarations:

Suggested change
}
}

Comment on lines +17 to +24
function isInvalidStyleDeclaration(name, value, computedStyle) {
return (
name &&
!value &&
!computedStyle[name] &&
!computedStyle.getPropertyValue(name)
)
}
Copy link
Member

Choose a reason for hiding this comment

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

It is not fully evident (to me at least) why this works. I'm not saying I doubt that it works, I'm saying that perhaps this function could use a jsdoc to explain what it does. Or at the very least can you share here the logic? Perhaps no comment is needed, and I'm just having trouble to understand it myself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

toHaveStyle for property font-size behaves incorrectly for number values
2 participants