docs: add findByText example #616

shermanhui · 2020-09-15T02:18:55Z

I'm opening a PR for issue #381 to add a simple JS login
form as an example of how to use the findByText query
to find DOM elements that may not be visible immediately.

I'm open to any feedback as I haven't written tests for
vanilla JS in a long time (too spoiled with React). Specifically, I
think I need some clarification on an issue I ran into with my example tests
not passing on Codesandbox. Here is the link to the sandbox,
it's interesting that the first set of tests pass when
I change the display value from display: none to display: inline,
but the same doesn't happen with the mock error message span
elements 🤔.

Here's a screenshot of a type error I ran into with regards to using
userEvent.type with the input element..perhaps that's why I'm not
seeing a value in the input element when I debug and therefore
the element style is not being updated.

EDIT: Turns out it was failing because I was using document.getElementById and document
is actually empty as we're using the renderContent function to render the form.

The live tests can be seen here

To fix it, I just used el.querySelector instead and this got the tests to pass! 🎉

Thanks in advance!

Also let me know if I should add React specific examples for findByText
or any other findBy queries!

Closes #381

docs/eample-findBy*.md

alexkrolick · 2020-10-01T17:23:54Z

Any other maintainers have thoughts on if we would want a recipe like this? We have docs under the Appearance/Disappearance section that are similar. https://testing-library.com/docs/guide-disappearance

Edit: I see this is related to #381 actually - so more in the area of showing await findBy... in general, than just about appearance. I think it would be good to go forward with something like this.

alexkrolick · 2020-10-01T17:24:58Z

docs/eample-findBy*.md

@@ -0,0 +1,142 @@
+---
+id: example-findBy*


Can we avoid using non-url safe characters like *, and fix the filename? It also needs to be added to the table of contents somewhere in order to show up in site navigation.

Done @alexkrolick! I used * as I was trying to follow the convention in the docs but since this example file only contains a findByText example, I've renamed it to example-findByText.

I've also added this new example to the site navigation.

alexkrolick · 2020-10-01T22:44:22Z

docs/eample-findBy*.md

+    //   expect(getByText(container, "Invalid Password")).toBeVisible()
+    // })
+    // screen.debug(await findByText(container, "Invalid Password"));
+    expect(await findByText(container, 'Invalid User Name')).toBeVisible()


I don't think findByText excludes hidden elements by default, does it? That's why this assertion fails.

Ah it turns out it was my own mistake. The test wasn't finding the input element at all, I should have been using el.querySelector instead of document.getElementById 😅 . The tests pass as expected now!

shermanhui · 2020-10-03T03:16:19Z

docs/example-findByText.md

+      // https://stackoverflow.com/questions/55509875/how-to-query-by-text-string-which-contains-html-tags-using-react-testing-library
+      await findByText(container, (_, element) => {
+        const hasText = (element) =>
+          element.textContent.replace(/(\r\n|\n|\r)/gm, "").trim() ===


I formatted the html in renderContent and apparently textContent will preserve line breaks and new lines, I've used this regex to remove it. Let me know if there's a better way to handle this!

I also used the custom text matcher function from the above StackOverflow answer.

I would try to keep the incidental complexity in the example to a minimum; focus on showing the key info about the findBy queries. Is there a way you can trim it down?

Thanks, @alexkrolick, that's a good point - I've changed the example so the warning shows the same way that the "invalid user name/password" text does to avoid inline HTML elements to keep the complexity down! Let me know if there's anything else that needs fixing up.

shermanhui · 2020-10-03T03:20:11Z

@alexkrolick I've fixed the tests on Codesandbox and pushed the requested changes, let me know if there's anything else I can add to help out with closing #381! :)

I committed some unrelated formatted files as well since I ran format-docs just to make sure my changeset was compliant with the current documentation format.

shermanhui · 2020-10-03T04:46:44Z

website/README.md

@@ -110,6 +110,9 @@ title: This Doc Needs To Be Edited
 My new content here..
 ```

+Note: Ensure the file name and the id value do not include non-url safe
+characters i.e. '\*'.


Updated the website README to make sure future contributors don't use non-url safe characters.

shermanhui · 2020-10-03T04:47:10Z

website/sidebars.json

@@ -138,7 +139,7 @@
      "example-reach-router",
      "example-react-transition-group",
      "example-react-modal",
-      "example-external"
+      "example-update-props"


Reorganized these examples to be in alphabetical order

Add a simple JS login form to show examples of how to use the `findBy*` query, in particular `findByText` for DOM elements that may not be visible immediately. Add two tests that assert for warnings that appear when the user tries to submit the form with no username and password and when the user enters invalid field values.

Reorganize Examples to be alphabetically sorted by example file name

Commit the results of `format-docs` to ensure files follow documentation format

add note to ensure any new docs pages do not include non-url safe characters in the file name or markdown id

shermanhui · 2020-10-06T20:24:31Z

@alexkrolick just a friendly ping to re-review the changes made - hope we can merge this in! :)

shermanhui · 2020-10-07T20:18:01Z

Thanks @alexkrolick :) Would it be cool if I got added to the Contributors list as well? Thanks again for the approval + merge 🎉

alexkrolick · 2020-10-07T20:30:20Z

@all-contributors please add @shermanhui for docs

allcontributors · 2020-10-07T20:30:32Z

@alexkrolick

I've put up a pull request to add @shermanhui! 🎉

shermanhui commented Sep 15, 2020

View reviewed changes

docs/eample-findBy*.md Outdated Show resolved Hide resolved

shermanhui marked this pull request as draft September 15, 2020 02:30

shermanhui commented Sep 15, 2020

View reviewed changes

docs/eample-findBy*.md Outdated Show resolved Hide resolved

alexkrolick reviewed Oct 1, 2020

View reviewed changes

alexkrolick added the 🚧 work in progress Not ready, being worked on label Oct 1, 2020

alexkrolick reviewed Oct 1, 2020

View reviewed changes

shermanhui force-pushed the add-vanilla-js-findByText-example branch 4 times, most recently from 6aae842 to 35043b4 Compare October 3, 2020 03:05

shermanhui commented Oct 3, 2020

View reviewed changes

shermanhui marked this pull request as ready for review October 3, 2020 03:17

shermanhui requested a review from alexkrolick October 3, 2020 03:17

shermanhui force-pushed the add-vanilla-js-findByText-example branch from 35043b4 to d331cbc Compare October 3, 2020 04:45

shermanhui commented Oct 3, 2020

View reviewed changes

shermanhui force-pushed the add-vanilla-js-findByText-example branch 2 times, most recently from b947131 to 51d4d5a Compare October 3, 2020 20:27

shermanhui added 4 commits October 3, 2020 13:33

chore: add findByText example to navigation

2ba97de

Reorganize Examples to be alphabetically sorted by example file name

chore: format docs

62ce8b5

Commit the results of `format-docs` to ensure files follow documentation format

chore: update README

91ae836

add note to ensure any new docs pages do not include non-url safe characters in the file name or markdown id

shermanhui force-pushed the add-vanilla-js-findByText-example branch from 51d4d5a to 91ae836 Compare October 3, 2020 20:33

alexkrolick merged commit 238792f into testing-library:master Oct 7, 2020

alexkrolick removed the 🚧 work in progress Not ready, being worked on label Oct 7, 2020

allcontributors bot mentioned this pull request Oct 7, 2020

docs: add shermanhui as a contributor #638

Merged

docs: add findByText example #616

docs: add findByText example #616

Uh oh!

Conversation

shermanhui commented Sep 15, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

alexkrolick commented Oct 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexkrolick Oct 1, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shermanhui commented Oct 3, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shermanhui commented Oct 6, 2020

Uh oh!

shermanhui commented Oct 7, 2020

Uh oh!

alexkrolick commented Oct 7, 2020

Uh oh!

allcontributors bot commented Oct 7, 2020

Uh oh!

Uh oh!

shermanhui commented Sep 15, 2020 •

edited

Loading

alexkrolick commented Oct 1, 2020 •

edited

Loading

alexkrolick Oct 1, 2020 •

edited

Loading