From 7bfa00a8eaed4a8e31d85d13ea5ed5963c4c1711 Mon Sep 17 00:00:00 2001 From: Stefano Magni Date: Tue, 13 Nov 2018 18:47:04 +0100 Subject: [PATCH 1/3] Update README.md Some functions missed the `options` argument, I got confused at the beginning and I moved back and forth from `dom-testing-library` and `react-testing-library` to understand the differences... --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 28d25fa6..07b94f14 100644 --- a/README.md +++ b/README.md @@ -529,7 +529,7 @@ const inputNode = getByLabelText('username', {selector: 'input'}) > want this behavior (for example you wish to assert that it doesn't exist), > then use `queryByLabelText` instead. -#### `getByPlaceholderText(text: TextMatch): HTMLElement` +#### `getByPlaceholderText(text: TextMatch, options: {selector: string = '*'}): HTMLElement` This will search for all elements with a placeholder attribute and find one that matches the given [`TextMatch`](#textmatch). @@ -544,7 +544,7 @@ const inputNode = getByPlaceholderText('Username') > NOTE: a placeholder is not a good substitute for a label so you should > generally use `getByLabelText` instead. -#### `getByText(text: TextMatch): HTMLElement` +#### `getByText(text: TextMatch, options: {selector: string = '*'}): HTMLElement` This will search for all elements that have a text node with `textContent` matching the given [`TextMatch`](#textmatch). @@ -556,7 +556,7 @@ const {getByText} = render(About ℹ️) const aboutAnchorNode = getByText('about') ``` -#### `getByAltText(text: TextMatch): HTMLElement` +#### `getByAltText(text: TextMatch, options: {selector: string = '*'}): HTMLElement` This will return the element (normally an ``) that has the given `alt` text. Note that it only supports elements which accept an `alt` attribute: @@ -576,7 +576,7 @@ const {getByAltText} = render( const incrediblesPosterImg = getByAltText(/incredibles.*poster$/i) ``` -#### `getByTestId(text: TextMatch): HTMLElement` +#### `getByTestId(text: TextMatch, options: {selector: string = '*'}): HTMLElement` A shortcut to `` container.querySelector(`[data-testid="${yourId}"]`) `` (and it also accepts a [`TextMatch`](#textmatch)). From 32849335dafac9d30a5520c2d85e69ae6bc48a47 Mon Sep 17 00:00:00 2001 From: Stefano Magni Date: Wed, 14 Nov 2018 18:35:48 +0100 Subject: [PATCH 2/3] Update README.md Added the complete typings to the description except for `ignore = 'script, style',`. I skipped the `ignore` option to be aligned with the `dom-testing-library` --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 07b94f14..6c43cc73 100644 --- a/README.md +++ b/README.md @@ -491,7 +491,7 @@ unmount() // your component has been unmounted and now: container.innerHTML === '' ``` -#### `getByLabelText(text: TextMatch, options: {selector: string = '*'}): HTMLElement` +#### `getByLabelText(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` This will search for the label that matches the given [`TextMatch`](#textmatch), then find the element associated with that label. @@ -529,7 +529,7 @@ const inputNode = getByLabelText('username', {selector: 'input'}) > want this behavior (for example you wish to assert that it doesn't exist), > then use `queryByLabelText` instead. -#### `getByPlaceholderText(text: TextMatch, options: {selector: string = '*'}): HTMLElement` +#### `getByPlaceholderText(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` This will search for all elements with a placeholder attribute and find one that matches the given [`TextMatch`](#textmatch). @@ -544,7 +544,7 @@ const inputNode = getByPlaceholderText('Username') > NOTE: a placeholder is not a good substitute for a label so you should > generally use `getByLabelText` instead. -#### `getByText(text: TextMatch, options: {selector: string = '*'}): HTMLElement` +#### `getByText(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` This will search for all elements that have a text node with `textContent` matching the given [`TextMatch`](#textmatch). @@ -556,7 +556,7 @@ const {getByText} = render(About ℹ️) const aboutAnchorNode = getByText('about') ``` -#### `getByAltText(text: TextMatch, options: {selector: string = '*'}): HTMLElement` +#### `getByAltText(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` This will return the element (normally an ``) that has the given `alt` text. Note that it only supports elements which accept an `alt` attribute: @@ -576,7 +576,7 @@ const {getByAltText} = render( const incrediblesPosterImg = getByAltText(/incredibles.*poster$/i) ``` -#### `getByTestId(text: TextMatch, options: {selector: string = '*'}): HTMLElement` +#### `getByTestId(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` A shortcut to `` container.querySelector(`[data-testid="${yourId}"]`) `` (and it also accepts a [`TextMatch`](#textmatch)). From 390076a710c994bd097e77ad96af4609b09c91fb Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 14 Nov 2018 10:52:42 -0700 Subject: [PATCH 3/3] docs: fix options --- README.md | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 6c43cc73..3dd243d4 100644 --- a/README.md +++ b/README.md @@ -491,7 +491,9 @@ unmount() // your component has been unmounted and now: container.innerHTML === '' ``` -#### `getByLabelText(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` +#### `getByLabelText(text: TextMatch, options): HTMLElement` + +> Options: `{selector = '*', exact = true, collapseWhitespace = true, trim = true}` This will search for the label that matches the given [`TextMatch`](#textmatch), then find the element associated with that label. @@ -529,7 +531,9 @@ const inputNode = getByLabelText('username', {selector: 'input'}) > want this behavior (for example you wish to assert that it doesn't exist), > then use `queryByLabelText` instead. -#### `getByPlaceholderText(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` +#### `getByPlaceholderText(text: TextMatch, options): HTMLElement` + +> Options: `{exact = true, collapseWhitespace = true, trim = true}` This will search for all elements with a placeholder attribute and find one that matches the given [`TextMatch`](#textmatch). @@ -544,7 +548,9 @@ const inputNode = getByPlaceholderText('Username') > NOTE: a placeholder is not a good substitute for a label so you should > generally use `getByLabelText` instead. -#### `getByText(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` +#### `getByText(text: TextMatch, options): HTMLElement` + +> Options: `{selector = '*', exact = true, collapseWhitespace = true, trim = true, ignore = 'script, style'}` This will search for all elements that have a text node with `textContent` matching the given [`TextMatch`](#textmatch). @@ -556,7 +562,9 @@ const {getByText} = render(About ℹ️) const aboutAnchorNode = getByText('about') ``` -#### `getByAltText(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` +#### `getByAltText(text: TextMatch, options): HTMLElement` + +> Options: `{exact = true, collapseWhitespace = true, trim = true}` This will return the element (normally an ``) that has the given `alt` text. Note that it only supports elements which accept an `alt` attribute: @@ -576,7 +584,9 @@ const {getByAltText} = render( const incrediblesPosterImg = getByAltText(/incredibles.*poster$/i) ``` -#### `getByTestId(text: TextMatch, options: {selector = '*', exact = true, collapseWhitespace = true, trim = true}): HTMLElement` +#### `getByTestId(text: TextMatch, options): HTMLElement` + +> Options: `{exact = true, collapseWhitespace = true, trim = true}` A shortcut to `` container.querySelector(`[data-testid="${yourId}"]`) `` (and it also accepts a [`TextMatch`](#textmatch)).