From b898f5258471119c2c4d0d04676b38fcc22b0852 Mon Sep 17 00:00:00 2001 From: Ernesto Garcia Date: Fri, 6 Apr 2018 10:58:52 -0300 Subject: [PATCH 1/3] Remove unneeded if/else logic in custom matchers --- src/jest-extensions.js | 62 ++++++++++++------------------------------ 1 file changed, 18 insertions(+), 44 deletions(-) diff --git a/src/jest-extensions.js b/src/jest-extensions.js index 5dd7cb26..78d0df2b 100644 --- a/src/jest-extensions.js +++ b/src/jest-extensions.js @@ -43,28 +43,15 @@ function getAttributeComment(name, value) { const extensions = { toBeInTheDOM(received) { getDisplayName(received) - if (received) { - return { - message: () => - `${matcherHint( - '.not.toBeInTheDOM', - 'received', - '', - )} Expected the element not to be present` + - `\nReceived : ${printReceived(received)}`, - pass: true, - } - } else { - return { - message: () => - `${matcherHint( - '.toBeInTheDOM', - 'received', - '', - )} Expected the element to be present` + - `\nReceived : ${printReceived(received)}`, - pass: false, - } + return { + message: () => + `${matcherHint( + `${this.isNot ? '.not' : ''}.toBeInTheDOM`, + 'received', + '', + )} Expected the element not to be present` + + `\nReceived : ${printReceived(received)}`, + pass: !!received, } }, @@ -72,28 +59,15 @@ const extensions = { checkHtmlElement(htmlElement) const textContent = htmlElement.textContent const pass = matches(textContent, htmlElement, checkWith) - if (pass) { - return { - message: () => - assertMessage( - '.not.toHaveTextContent', - 'Expected value not equals to', - htmlElement, - checkWith, - ), - pass: true, - } - } else { - return { - message: () => - assertMessage( - '.toHaveTextContent', - 'Expected value equals to', - htmlElement, - checkWith, - ), - pass: false, - } + return { + message: () => + assertMessage( + `${this.isNot ? '.not' : ''}.toHaveTextContent`, + `Expected value ${this.isNot ? 'not ' : ''}equals to`, + htmlElement, + checkWith, + ), + pass, } }, From 0ad65891e24122b5d1dc7d56cc65070fda31a33c Mon Sep 17 00:00:00 2001 From: Ernesto Garcia Date: Fri, 6 Apr 2018 11:04:06 -0300 Subject: [PATCH 2/3] Use common message format for all custom matchers --- src/jest-extensions.js | 80 +++++++++++++++++++++++++++--------------- 1 file changed, 51 insertions(+), 29 deletions(-) diff --git a/src/jest-extensions.js b/src/jest-extensions.js index 78d0df2b..6d63ec99 100644 --- a/src/jest-extensions.js +++ b/src/jest-extensions.js @@ -1,6 +1,5 @@ import { matcherHint, - printReceived, printExpected, stringify, RECEIVED_COLOR as receivedColor, @@ -26,9 +25,19 @@ function checkHtmlElement(htmlElement) { } } -const assertMessage = (assertionName, message, received, expected) => - `${matcherHint(`${assertionName}`, 'received', '')} \n${message}: ` + - `${printExpected(expected)} \nReceived: ${printReceived(received)}` +function getMessage( + matcher, + expectedLabel, + expectedValue, + receivedLabel, + receivedValue, +) { + return [ + `${matcher}\n`, + `${expectedLabel}:\n ${expectedColor(expectedValue)}`, + `${receivedLabel}:\n ${receivedColor(receivedValue)}`, + ].join('\n') +} function printAttribute(name, value) { return value === undefined ? name : `${name}=${stringify(value)}` @@ -42,32 +51,44 @@ function getAttributeComment(name, value) { const extensions = { toBeInTheDOM(received) { - getDisplayName(received) return { - message: () => - `${matcherHint( - `${this.isNot ? '.not' : ''}.toBeInTheDOM`, - 'received', - '', - )} Expected the element not to be present` + - `\nReceived : ${printReceived(received)}`, pass: !!received, + message: () => { + const to = this.isNot ? 'not to' : 'to' + return getMessage( + matcherHint( + `${this.isNot ? '.not' : ''}.toBeInTheDOM`, + 'element', + '', + ), + 'Expected', + `element ${to} be present`, + 'Received', + received, + ) + }, } }, toHaveTextContent(htmlElement, checkWith) { checkHtmlElement(htmlElement) const textContent = htmlElement.textContent - const pass = matches(textContent, htmlElement, checkWith) return { - message: () => - assertMessage( - `${this.isNot ? '.not' : ''}.toHaveTextContent`, - `Expected value ${this.isNot ? 'not ' : ''}equals to`, - htmlElement, + pass: matches(textContent, htmlElement, checkWith), + message: () => { + const to = this.isNot ? 'not to' : 'to' + return getMessage( + matcherHint( + `${this.isNot ? '.not' : ''}.toHaveTextContent`, + 'element', + '', + ), + `Expected element ${to} have text content`, checkWith, - ), - pass, + 'Received', + textContent, + ) + }, } }, @@ -82,14 +103,9 @@ const extensions = { : hasAttribute, message: () => { const to = this.isNot ? 'not to' : 'to' - const receivedAttribute = receivedColor( - hasAttribute - ? printAttribute(name, receivedValue) - : 'attribute was not found', - ) - const expectedMsg = `Expected the element ${to} have attribute:\n ${expectedColor( - printAttribute(name, expectedValue), - )}` + const receivedAttribute = hasAttribute + ? printAttribute(name, receivedValue) + : null const matcher = matcherHint( `${this.isNot ? '.not' : ''}.toHaveAttribute`, 'element', @@ -101,7 +117,13 @@ const extensions = { comment: getAttributeComment(name, expectedValue), }, ) - return `${matcher}\n\n${expectedMsg}\nReceived:\n ${receivedAttribute}` + return getMessage( + matcher, + `Expected the element ${to} have attribute`, + printAttribute(name, expectedValue), + 'Received', + receivedAttribute, + ) }, } }, From e141566a7062e7f6b371cf84d79aad9c67000ff4 Mon Sep 17 00:00:00 2001 From: Ernesto Garcia Date: Fri, 6 Apr 2018 11:06:37 -0300 Subject: [PATCH 3/3] Check html element in toBeInTheDOM --- src/__tests__/element-queries.js | 4 ++++ src/jest-extensions.js | 3 +++ 2 files changed, 7 insertions(+) diff --git a/src/__tests__/element-queries.js b/src/__tests__/element-queries.js index 6bf03ed6..39a0eecc 100644 --- a/src/__tests__/element-queries.js +++ b/src/__tests__/element-queries.js @@ -114,6 +114,10 @@ test('using jest helpers to assert element states', () => { expect(() => expect(queryByTestId('count-value')).not.toHaveTextContent('2'), ).toThrowError() + + expect(() => + expect({thisIsNot: 'an html element'}).toBeInTheDOM(), + ).toThrowError() }) test('using jest helpers to check element attributes', () => { diff --git a/src/jest-extensions.js b/src/jest-extensions.js index 6d63ec99..228a40e2 100644 --- a/src/jest-extensions.js +++ b/src/jest-extensions.js @@ -51,6 +51,9 @@ function getAttributeComment(name, value) { const extensions = { toBeInTheDOM(received) { + if (received) { + checkHtmlElement(received) + } return { pass: !!received, message: () => {