feat: Add toHaveDisplayValue() matcher

[cloud-walker]

What:

Add .toHaveDisplayValue() custom matcher as discussed here: #221

Checklist:

• Documentation
• Tests
• Updated Type Definitions
• Ready to be merged

[cloud-walker]

I've little experience with typescript, not sure if I should do something about type definitions 🤔

[codecov]

Codecov Report

Merging #223 into master will not change coverage by %.
The diff coverage is 100.00%.

@@            Coverage Diff            @@
##            master      #223   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           19        20    +1     
  Lines          257       268   +11     
  Branches        62        65    +3     
=========================================
+ Hits           257       268   +11     

Impacted Files	Coverage Δ
src/to-have-display-value.js	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 779448f...5e37a9e. Read the comment docs.

[alexkrolick]

This looks like it only supports select tags so far. Would you be open to making it work the same way as the byDisplayValue query? It works with other form elements.

Returns the input, textarea, or select element that has the matching display value.

[cloud-walker]

Hi, @alexkrolick I think it's a good idea, it could be a twin matcher with toHaveValue but for the display values.

But I was wondering if do the extra work in another PR instead of adding more changes to this one 🤔

[gnapse]

But I was wondering if do the extra work in another PR instead of adding more changes to this one

@cloud-walker I'd rather have it all at once, even if it takes longer. The reason being that the PR merge triggers a new release, and I'd rather have this feature released in its entirety.

This does not imply any pressure. Take your time, the same time you would've take to make the other PR.

Good work here overall, and thanks! Also thanks to @eps1lon for stepping in and reviewing.

[cloud-walker]

Ok, input and textarea support added, I've excluded type=radio and type=checkbox, as they don't have a display value 🤔

[cloud-walker]

Hi all, any news from this PR? 👀

[gnapse]

Looks good, thanks!

I left some comments of things still needed to be addressed. Let me know what you think about these.

[gnapse]

Would be nice if the test also covered the case of changing the selected option programmatically to banana and then check that toHaveDisplayValue('Banana') pass.

And maybe do it for the other cases as well (textarea and input).

[cloud-walker]

Done, I'm wondering why the repository is not using fireEvent from the testing-library core (or even userEvent) 🤔

[gnapse]

@all-contributors add @cloud-walker for code, test, ideas

[allcontributors]

@gnapse

I've put up a pull request to add @cloud-walker! 🎉

[gnapse]

🎉 This PR is included in version 5.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀