From 22e783a2681e6b78ea5bd62ad4d5e0d7a0538eaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnau=20Blanch=C3=A9?= Date: Wed, 16 Oct 2019 20:24:05 +0200 Subject: [PATCH 1/3] Allow debug multiple elements --- .../components/MultipleHelloWorld.vue | 14 ++++++++++++++ src/__tests__/debug.js | 19 +++++++++++++++++++ src/vue-testing-library.js | 5 ++++- 3 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 src/__tests__/components/MultipleHelloWorld.vue diff --git a/src/__tests__/components/MultipleHelloWorld.vue b/src/__tests__/components/MultipleHelloWorld.vue new file mode 100644 index 00000000..f26eb6aa --- /dev/null +++ b/src/__tests__/components/MultipleHelloWorld.vue @@ -0,0 +1,14 @@ + diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js index 89df1bb3..f8bed267 100644 --- a/src/__tests__/debug.js +++ b/src/__tests__/debug.js @@ -1,5 +1,7 @@ import {render} from '@testing-library/vue' import HelloWorld from './components/HelloWorld' +import MultipleHelloWorld from './components/MultipleHelloWorld' + beforeEach(() => { jest.spyOn(console, 'log').mockImplementation(() => {}) @@ -39,3 +41,20 @@ test('debug pretty prints the provided parameter', () => { expect.stringContaining('Hello World'), ) }) + +test('debug pretty prints multiple nodes with the given parameter', () => { + const {getAllByText, debug} = render(MultipleHelloWorld) + + // debug accepts a DOM node as a parameter. + debug(getAllByText('Hello World!')) + + expect(console.log).toHaveBeenCalledTimes(4) + expect(console.log).toHaveBeenCalledWith( + expect.stringContaining('Hello World!'), + ) + + // Notice the 'not' particle. + expect(console.log).not.toHaveBeenCalledWith( + expect.stringContaining('Lorem ipsum dolor sit amet'), + ) +}) diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index acfb1176..7c9a6a7d 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -68,7 +68,10 @@ function render( return { container, baseElement, - debug: (el = baseElement) => logDOM(el), + debug: (el = baseElement) => + Array.isArray(el) + ? el.forEach(e => logDOM(e)) + : logDOM(el), unmount: () => wrapper.destroy(), isUnmounted: () => wrapper.vm._isDestroyed, html: () => wrapper.html(), From 44ec365cf44d2b483454c6edb1412c83f9daab2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnau=20Blanch=C3=A9?= Date: Mon, 21 Oct 2019 10:41:54 +0200 Subject: [PATCH 2/3] Split tests using existing templates instead of creating a new one --- src/__tests__/components/MultipleHelloWorld.vue | 14 -------------- src/__tests__/debug.js | 15 +++++++-------- 2 files changed, 7 insertions(+), 22 deletions(-) delete mode 100644 src/__tests__/components/MultipleHelloWorld.vue diff --git a/src/__tests__/components/MultipleHelloWorld.vue b/src/__tests__/components/MultipleHelloWorld.vue deleted file mode 100644 index f26eb6aa..00000000 --- a/src/__tests__/components/MultipleHelloWorld.vue +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js index f8bed267..84b8e815 100644 --- a/src/__tests__/debug.js +++ b/src/__tests__/debug.js @@ -1,6 +1,5 @@ import {render} from '@testing-library/vue' import HelloWorld from './components/HelloWorld' -import MultipleHelloWorld from './components/MultipleHelloWorld' beforeEach(() => { @@ -43,18 +42,18 @@ test('debug pretty prints the provided parameter', () => { }) test('debug pretty prints multiple nodes with the given parameter', () => { - const {getAllByText, debug} = render(MultipleHelloWorld) + const {getAllByText, debug} = render(HelloWorld) + const multipleElements = getAllByText(/.+/) - // debug accepts a DOM node as a parameter. - debug(getAllByText('Hello World!')) + // debug also accepts an array of DOM nodes as a parameter. + debug(multipleElements) - expect(console.log).toHaveBeenCalledTimes(4) + expect(console.log).toHaveBeenCalledTimes(2) expect(console.log).toHaveBeenCalledWith( - expect.stringContaining('Hello World!'), + expect.stringContaining('Hello World'), ) - // Notice the 'not' particle. - expect(console.log).not.toHaveBeenCalledWith( + expect(console.log).toHaveBeenCalledWith( expect.stringContaining('Lorem ipsum dolor sit amet'), ) }) From 144f72ca79a211fb1a8d57a6431cb688ec776762 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arnau=20Blanch=C3=A9?= Date: Mon, 21 Oct 2019 10:49:55 +0200 Subject: [PATCH 3/3] Add formater --- src/__tests__/debug.js | 7 +++---- src/vue-testing-library.js | 4 +--- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/__tests__/debug.js b/src/__tests__/debug.js index 84b8e815..89c0d34f 100644 --- a/src/__tests__/debug.js +++ b/src/__tests__/debug.js @@ -1,7 +1,6 @@ import {render} from '@testing-library/vue' import HelloWorld from './components/HelloWorld' - beforeEach(() => { jest.spyOn(console, 'log').mockImplementation(() => {}) }) @@ -47,13 +46,13 @@ test('debug pretty prints multiple nodes with the given parameter', () => { // debug also accepts an array of DOM nodes as a parameter. debug(multipleElements) - + expect(console.log).toHaveBeenCalledTimes(2) expect(console.log).toHaveBeenCalledWith( - expect.stringContaining('Hello World'), + expect.stringContaining('Hello World'), ) expect(console.log).toHaveBeenCalledWith( - expect.stringContaining('Lorem ipsum dolor sit amet'), + expect.stringContaining('Lorem ipsum dolor sit amet'), ) }) diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js index 7c9a6a7d..028b8406 100644 --- a/src/vue-testing-library.js +++ b/src/vue-testing-library.js @@ -69,9 +69,7 @@ function render( container, baseElement, debug: (el = baseElement) => - Array.isArray(el) - ? el.forEach(e => logDOM(e)) - : logDOM(el), + Array.isArray(el) ? el.forEach(e => logDOM(e)) : logDOM(el), unmount: () => wrapper.destroy(), isUnmounted: () => wrapper.vm._isDestroyed, html: () => wrapper.html(),