From 41184b5ce2062d2ed2f54fbc29b8d5b086e10ee3 Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Thu, 22 Sep 2022 18:10:53 -0300 Subject: [PATCH 1/7] refactor: add toBeEmptyElement --- .../{to-be-empty.js => to-be-empty-element.js} | 14 +++++++------- src/index.js | 4 ++-- src/to-be-empty-element.js | 18 ++++++++++++++++++ src/to-be-empty.js | 4 ++++ 4 files changed, 31 insertions(+), 9 deletions(-) rename src/__tests__/{to-be-empty.js => to-be-empty-element.js} (60%) create mode 100644 src/to-be-empty-element.js diff --git a/src/__tests__/to-be-empty.js b/src/__tests__/to-be-empty-element.js similarity index 60% rename from src/__tests__/to-be-empty.js rename to src/__tests__/to-be-empty-element.js index 188acf8..036534d 100644 --- a/src/__tests__/to-be-empty.js +++ b/src/__tests__/to-be-empty-element.js @@ -2,7 +2,7 @@ import React from 'react'; import { View } from 'react-native'; import { render } from '@testing-library/react-native'; -test('.toBeEmpty', () => { +test('.toBeEmptyElement', () => { const { queryByTestId } = render( @@ -14,17 +14,17 @@ test('.toBeEmpty', () => { const nonExistantElement = queryByTestId('not-exists'); const fakeElement = { thisIsNot: 'an html element' }; - expect(empty).toBeEmpty(); - expect(notEmpty).not.toBeEmpty(); + expect(empty).toBeEmptyElement(); + expect(notEmpty).not.toBeEmptyElement(); // negative test cases wrapped in throwError assertions for coverage. - expect(() => expect(empty).not.toBeEmpty()).toThrow(); + expect(() => expect(empty).not.toBeEmptyElement()).toThrow(); - expect(() => expect(notEmpty).toBeEmpty()).toThrow(); + expect(() => expect(notEmpty).toBeEmptyElement()).toThrow(); - expect(() => expect(fakeElement).toBeEmpty()).toThrow(); + expect(() => expect(fakeElement).toBeEmptyElement()).toThrow(); expect(() => { - expect(nonExistantElement).toBeEmpty(); + expect(nonExistantElement).toBeEmptyElement(); }).toThrow(); }); diff --git a/src/index.js b/src/index.js index e66f7d9..22de143 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,5 @@ import { toBeDisabled, toBeEnabled } from './to-be-disabled'; -import { toBeEmpty } from './to-be-empty'; +import { toBeEmptyElement } from './to-be-empty-element'; import { toHaveProp } from './to-have-prop'; import { toHaveTextContent } from './to-have-text-content'; import { toContainElement } from './to-contain-element'; @@ -8,7 +8,7 @@ import { toHaveStyle } from './to-have-style'; export { toBeDisabled, toContainElement, - toBeEmpty, + toBeEmptyElement, toHaveProp, toHaveTextContent, toBeEnabled, diff --git a/src/to-be-empty-element.js b/src/to-be-empty-element.js new file mode 100644 index 0000000..3909722 --- /dev/null +++ b/src/to-be-empty-element.js @@ -0,0 +1,18 @@ +import { matcherHint } from 'jest-matcher-utils'; +import { checkReactElement, isEmpty, printElement } from './utils'; + +export function toBeEmptyElement(element) { + checkReactElement(element, toBeEmptyElement, this); + + return { + pass: isEmpty(element?.props?.children), + message: () => { + return [ + matcherHint(`${this.isNot ? '.not' : ''}.toBeEmpty`, 'element', ''), + '', + 'Received:', + printElement(element), + ].join('\n'); + }, + }; +} diff --git a/src/to-be-empty.js b/src/to-be-empty.js index 773edf9..41b4360 100644 --- a/src/to-be-empty.js +++ b/src/to-be-empty.js @@ -1,6 +1,10 @@ import { matcherHint } from 'jest-matcher-utils'; import { checkReactElement, isEmpty, printElement } from './utils'; +/** + * @deprecated This function is deprecated. You should use `toBeEmptyElement` + * + * */ export function toBeEmpty(element) { checkReactElement(element, toBeEmpty, this); From d5a376bcfd119d10252bba6209251e42e4ec01b9 Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Thu, 22 Sep 2022 18:17:25 -0300 Subject: [PATCH 2/7] docs: update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 9c1098c..32b675f 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ - [Matchers](#matchers) - [`toBeDisabled`](#tobedisabled) - [`toBeEnabled`](#tobeenabled) - - [`toBeEmpty`](#tobeempty) + - [`toBeEmptyElement`](#tobeemptyelement) - [`toContainElement`](#tocontainelement) - [`toHaveProp`](#tohaveprop) - [`toHaveTextContent`](#tohavetextcontent) @@ -98,9 +98,9 @@ Alternatively, you can selectively import only the matchers you intend to use, a `expect` yourself: ```javascript -import { toBeEmpty, toHaveTextContent } from '@testing-library/jest-native'; +import { toBeEmptyElement, toHaveTextContent } from '@testing-library/jest-native'; -expect.extend({ toBeEmpty, toHaveTextContent }); +expect.extend({ toBeEmptyElement, toHaveTextContent }); ``` ## Matchers @@ -160,10 +160,10 @@ expect(getByTestId('button')).toBeEnabled(); expect(getByTestId('input')).toBeEnabled(); ``` -### `toBeEmpty` +### `toBeEmptyElement` ```javascript -toBeEmpty(); +toBeEmptyElement(); ``` Check that the given element has no content. @@ -173,7 +173,7 @@ Check that the given element has no content. ```javascript const { getByTestId } = render(); -expect(getByTestId('empty')).toBeEmpty(); +expect(getByTestId('empty')).toBeEmptyElement(); ``` ### `toContainElement` From 167b513035558d10ee896177e983d583a7d96aa7 Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Thu, 22 Sep 2022 19:04:24 -0300 Subject: [PATCH 3/7] fix: restore toBeEmpty assertion test --- src/__tests__/to-be-empty.js | 30 ++++++++++++++++++++++++++++++ src/index.js | 2 ++ 2 files changed, 32 insertions(+) create mode 100644 src/__tests__/to-be-empty.js diff --git a/src/__tests__/to-be-empty.js b/src/__tests__/to-be-empty.js new file mode 100644 index 0000000..188acf8 --- /dev/null +++ b/src/__tests__/to-be-empty.js @@ -0,0 +1,30 @@ +import React from 'react'; +import { View } from 'react-native'; +import { render } from '@testing-library/react-native'; + +test('.toBeEmpty', () => { + const { queryByTestId } = render( + + + , + ); + + const empty = queryByTestId('empty'); + const notEmpty = queryByTestId('not-empty'); + const nonExistantElement = queryByTestId('not-exists'); + const fakeElement = { thisIsNot: 'an html element' }; + + expect(empty).toBeEmpty(); + expect(notEmpty).not.toBeEmpty(); + + // negative test cases wrapped in throwError assertions for coverage. + expect(() => expect(empty).not.toBeEmpty()).toThrow(); + + expect(() => expect(notEmpty).toBeEmpty()).toThrow(); + + expect(() => expect(fakeElement).toBeEmpty()).toThrow(); + + expect(() => { + expect(nonExistantElement).toBeEmpty(); + }).toThrow(); +}); diff --git a/src/index.js b/src/index.js index 22de143..1ce3ca1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import { toBeDisabled, toBeEnabled } from './to-be-disabled'; import { toBeEmptyElement } from './to-be-empty-element'; +import { toBeEmpty } from './to-be-empty'; import { toHaveProp } from './to-have-prop'; import { toHaveTextContent } from './to-have-text-content'; import { toContainElement } from './to-contain-element'; @@ -9,6 +10,7 @@ export { toBeDisabled, toContainElement, toBeEmptyElement, + toBeEmpty, toHaveProp, toHaveTextContent, toBeEnabled, From c7915cdd54ccb79f7b1f190010eb26019552e22c Mon Sep 17 00:00:00 2001 From: joaoGabriel55 Date: Fri, 23 Sep 2022 08:07:25 -0300 Subject: [PATCH 4/7] chore: code review --- README.md | 10 ++++++++++ extend-expect.d.ts | 1 + src/index.js | 5 ++--- src/to-be-empty-element.js | 14 +++++++++++++- src/to-be-empty.js | 22 ---------------------- src/utils.js | 12 ++++++++++++ 6 files changed, 38 insertions(+), 26 deletions(-) delete mode 100644 src/to-be-empty.js diff --git a/README.md b/README.md index 32b675f..348a105 100644 --- a/README.md +++ b/README.md @@ -176,6 +176,16 @@ const { getByTestId } = render(); expect(getByTestId('empty')).toBeEmptyElement(); ``` +--- + +**NOTE** + +`toBeEmptyElement()` matcher has been renamed from `toBeEmpty()` because of the naming conflict with +Jest Extended export with the +[same name](https://github.com/jest-community/jest-extended#tobeempty). + +--- + ### `toContainElement` ```typescript diff --git a/extend-expect.d.ts b/extend-expect.d.ts index 0ae99d2..2ccf3dc 100644 --- a/extend-expect.d.ts +++ b/extend-expect.d.ts @@ -7,6 +7,7 @@ declare global { toBeDisabled(): R; toContainElement(element: ReactTestInstance | null): R; toBeEmpty(): R; + toBeEmptyElement(): R; toHaveProp(attr: string, value?: any): R; toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R; toBeEnabled(): R; diff --git a/src/index.js b/src/index.js index 1ce3ca1..a9b96f1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,5 @@ import { toBeDisabled, toBeEnabled } from './to-be-disabled'; -import { toBeEmptyElement } from './to-be-empty-element'; -import { toBeEmpty } from './to-be-empty'; +import { toBeEmptyElement, toBeEmpty } from './to-be-empty-element'; import { toHaveProp } from './to-have-prop'; import { toHaveTextContent } from './to-have-text-content'; import { toContainElement } from './to-contain-element'; @@ -10,7 +9,7 @@ export { toBeDisabled, toContainElement, toBeEmptyElement, - toBeEmpty, + toBeEmpty, // Deprecated toHaveProp, toHaveTextContent, toBeEnabled, diff --git a/src/to-be-empty-element.js b/src/to-be-empty-element.js index 3909722..9e5a069 100644 --- a/src/to-be-empty-element.js +++ b/src/to-be-empty-element.js @@ -1,5 +1,5 @@ import { matcherHint } from 'jest-matcher-utils'; -import { checkReactElement, isEmpty, printElement } from './utils'; +import { checkReactElement, isEmpty, printDeprecationWarning, printElement } from './utils'; export function toBeEmptyElement(element) { checkReactElement(element, toBeEmptyElement, this); @@ -16,3 +16,15 @@ export function toBeEmptyElement(element) { }, }; } + +/** + * @deprecated This function is deprecated. You should use `toBeEmptyElement` + * + * */ +export function toBeEmpty(element) { + printDeprecationWarning( + 'toBeEmpty', + `"toBeEmpty()" matcher has been renamed to "toBeEmptyElement()". Old name will be deleted in future versions of @testing-library/jest-native.`, + ); + return toBeEmptyElement(element); +} diff --git a/src/to-be-empty.js b/src/to-be-empty.js deleted file mode 100644 index 41b4360..0000000 --- a/src/to-be-empty.js +++ /dev/null @@ -1,22 +0,0 @@ -import { matcherHint } from 'jest-matcher-utils'; -import { checkReactElement, isEmpty, printElement } from './utils'; - -/** - * @deprecated This function is deprecated. You should use `toBeEmptyElement` - * - * */ -export function toBeEmpty(element) { - checkReactElement(element, toBeEmpty, this); - - return { - pass: isEmpty(element?.props?.children), - message: () => { - return [ - matcherHint(`${this.isNot ? '.not' : ''}.toBeEmpty`, 'element', ''), - '', - 'Received:', - printElement(element), - ].join('\n'); - }, - }; -} diff --git a/src/utils.js b/src/utils.js index d2c9b8e..b8eb459 100644 --- a/src/utils.js +++ b/src/utils.js @@ -109,6 +109,18 @@ function isEmpty(value) { return false; } +const warned = {}; + +export function printDeprecationWarning(functionName, message) { + if (warned[functionName]) { + return; + } + + // eslint-disable-next-line no-console + console.warn(`Deprecation Warning:\n${message}`); + warned[functionName] = true; +} + export { ReactElementTypeError, checkReactElement, From 0b246524afb5360b5c6eaa30edb9519d98e47097 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Mon, 26 Sep 2022 14:01:39 +0200 Subject: [PATCH 5/7] Update src/to-be-empty-element.js --- src/to-be-empty-element.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/to-be-empty-element.js b/src/to-be-empty-element.js index 9e5a069..024e14d 100644 --- a/src/to-be-empty-element.js +++ b/src/to-be-empty-element.js @@ -18,7 +18,7 @@ export function toBeEmptyElement(element) { } /** - * @deprecated This function is deprecated. You should use `toBeEmptyElement` + * @deprecated This function has been renamed to `toBeEmptyElement`. * * */ export function toBeEmpty(element) { From 6cc15149e9337df186530b733440bfd5600e1ce3 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Mon, 26 Sep 2022 14:05:10 +0200 Subject: [PATCH 6/7] Update extend-expect.d.ts --- extend-expect.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/extend-expect.d.ts b/extend-expect.d.ts index 2ccf3dc..ae48452 100644 --- a/extend-expect.d.ts +++ b/extend-expect.d.ts @@ -6,6 +6,7 @@ declare global { interface Matchers { toBeDisabled(): R; toContainElement(element: ReactTestInstance | null): R; + /** @deprecated This function has been renamed to `toBeEmptyElement`. */ toBeEmpty(): R; toBeEmptyElement(): R; toHaveProp(attr: string, value?: any): R; From c95df07737aea1b98ba6e136b539f00102671fcd Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Mon, 26 Sep 2022 14:10:30 +0200 Subject: [PATCH 7/7] refactor: tweaks --- extend-expect.d.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/extend-expect.d.ts b/extend-expect.d.ts index ae48452..48731b0 100644 --- a/extend-expect.d.ts +++ b/extend-expect.d.ts @@ -6,13 +6,14 @@ declare global { interface Matchers { toBeDisabled(): R; toContainElement(element: ReactTestInstance | null): R; - /** @deprecated This function has been renamed to `toBeEmptyElement`. */ - toBeEmpty(): R; toBeEmptyElement(): R; toHaveProp(attr: string, value?: any): R; toHaveTextContent(text: string | RegExp, options?: { normalizeWhitespace: boolean }): R; toBeEnabled(): R; toHaveStyle(style: object[] | object): R; + + /** @deprecated This function has been renamed to `toBeEmptyElement`. */ + toBeEmpty(): R; } } }