From 76afc50bc4560e36b4ed35c96f999a9cb4ab2ce9 Mon Sep 17 00:00:00 2001 From: addisonssense Date: Thu, 9 May 2019 14:14:07 -0400 Subject: [PATCH 1/5] issue-1147: Add option to pretty print html components --- packages/test-utils/package.json | 3 ++- packages/test-utils/src/wrapper.js | 6 +++++- packages/test-utils/types/index.d.ts | 7 +++++++ 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json index 495fb51b1..3d3300779 100644 --- a/packages/test-utils/package.json +++ b/packages/test-utils/package.json @@ -39,6 +39,7 @@ }, "dependencies": { "dom-event-types": "^1.0.0", - "lodash": "^4.17.4" + "lodash": "^4.17.4", + "pretty": "^2.0.0" } } diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 561674b48..90e106cb7 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -1,6 +1,7 @@ // @flow import Vue from 'vue' +import pretty from 'pretty'; import getSelector from './get-selector' import { REF_SELECTOR, FUNCTIONAL_OPTIONS, VUE_VERSION } from 'shared/consts' import config from './config' @@ -221,7 +222,10 @@ export default class Wrapper implements BaseWrapper { /** * Returns HTML of element as a string */ - html(): string { + html(options?: HtmlOptions): string { + if (options && options.prettyPrint) { + return pretty(this.element.outerHTML); + } return this.element.outerHTML } diff --git a/packages/test-utils/types/index.d.ts b/packages/test-utils/types/index.d.ts index 89e29f028..769e338df 100644 --- a/packages/test-utils/types/index.d.ts +++ b/packages/test-utils/types/index.d.ts @@ -39,6 +39,13 @@ type NameSelector = { name: string } +/** + * Options when printing html components as strings + */ +export class HtmlOptions { + prettyPrint: boolean +} + /** * Base class of Wrapper and WrapperArray * It has common methods on both Wrapper and WrapperArray From e1ff1e4255405965285767eb70322d8f40ed2811 Mon Sep 17 00:00:00 2001 From: addisonssense Date: Thu, 9 May 2019 14:14:33 -0400 Subject: [PATCH 2/5] issue-1147: Add test for pretty print html --- packages/test-utils/src/wrapper.js | 4 +- test/specs/wrapper/html.spec.js | 17 ++++++ yarn.lock | 94 ++++++++++++++++++++++++++++-- 3 files changed, 107 insertions(+), 8 deletions(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 90e106cb7..237abce2c 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -1,7 +1,7 @@ // @flow import Vue from 'vue' -import pretty from 'pretty'; +import pretty from 'pretty' import getSelector from './get-selector' import { REF_SELECTOR, FUNCTIONAL_OPTIONS, VUE_VERSION } from 'shared/consts' import config from './config' @@ -224,7 +224,7 @@ export default class Wrapper implements BaseWrapper { */ html(options?: HtmlOptions): string { if (options && options.prettyPrint) { - return pretty(this.element.outerHTML); + return pretty(this.element.outerHTML) } return this.element.outerHTML } diff --git a/test/specs/wrapper/html.spec.js b/test/specs/wrapper/html.spec.js index 538891032..ab3c4a005 100644 --- a/test/specs/wrapper/html.spec.js +++ b/test/specs/wrapper/html.spec.js @@ -39,4 +39,21 @@ describeWithShallowAndMount('html', mountingMethod => { const wrapper = mountingMethod(compiled) expect(wrapper.html()).to.equal(expectedHtml) }) + + it('returns a Wrappers HTML as a pretty printed string', () => { + const expectedHtml = + '\n' + + '
\n' + + '
    \n' + + '
  • \n' + + '
  • \n' + + '
\n' + + '
\n' + + '' + + const compiled = compileToFunctions(expectedHtml) + const wrapper = mountingMethod(compiled) + const options = { prettyPrint: true } + expect(wrapper.html(options)).to.equal(expectedHtml) + }) }) diff --git a/yarn.lock b/yarn.lock index 6bf77824e..840e7d194 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2744,6 +2744,11 @@ commander@2.15.1, commander@2.15.x, commander@^2.15.1, commander@~2.15.0: version "2.15.1" resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f" +commander@^2.19.0: + version "2.20.0" + resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422" + integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ== + commander@~2.13.0: version "2.13.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c" @@ -2793,10 +2798,27 @@ concat-stream@1.6.0, concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@ readable-stream "^2.2.2" typedarray "^0.0.6" +condense-newlines@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/condense-newlines/-/condense-newlines-0.2.1.tgz#3de985553139475d32502c83b02f60684d24c55f" + integrity sha1-PemFVTE5R10yUCyDsC9gaE0kxV8= + dependencies: + extend-shallow "^2.0.1" + is-whitespace "^0.3.0" + kind-of "^3.0.2" + conditional-specs@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/conditional-specs/-/conditional-specs-1.0.1.tgz#1137ca6f83e5de848853cf0cfac78fe858b40a9a" +config-chain@^1.1.12: + version "1.1.12" + resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa" + integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA== + dependencies: + ini "^1.3.4" + proto-list "~1.2.1" + configstore@^3.0.0: version "3.1.1" resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.1.tgz#094ee662ab83fad9917678de114faaea8fcdca90" @@ -3801,6 +3823,16 @@ ecc-jsbn@~0.1.1: dependencies: jsbn "~0.1.0" +editorconfig@^0.15.3: + version "0.15.3" + resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5" + integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g== + dependencies: + commander "^2.19.0" + lru-cache "^4.1.5" + semver "^5.6.0" + sigmund "^1.0.1" + ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" @@ -4728,6 +4760,18 @@ glob@7.1.2, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2: once "^1.3.0" path-is-absolute "^1.0.0" +glob@^7.1.3: + version "7.1.4" + resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255" + integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A== + dependencies: + fs.realpath "^1.0.0" + inflight "^1.0.4" + inherits "2" + minimatch "^3.0.4" + once "^1.3.0" + path-is-absolute "^1.0.0" + global-dirs@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-0.1.1.tgz#b319c0dd4607f353f3be9cca4c72fc148c49f445" @@ -5571,6 +5615,11 @@ is-whitespace-character@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.1.tgz#9ae0176f3282b65457a1992cdb084f8a5f833e3b" +is-whitespace@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f" + integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38= + is-windows@^1.0.0, is-windows@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d" @@ -5639,6 +5688,17 @@ js-base64@^2.1.9: version "2.4.3" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582" +js-beautify@^1.6.12: + version "1.10.0" + resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.0.tgz#9753a13c858d96828658cd18ae3ca0e5783ea672" + integrity sha512-OMwf/tPDpE/BLlYKqZOhqWsd3/z2N3KOlyn1wsCRGFwViE8LOQTcDtathQvHvZc+q+zWmcNAbwKSC+iJoMaH2Q== + dependencies: + config-chain "^1.1.12" + editorconfig "^0.15.3" + glob "^7.1.3" + mkdirp "~0.5.1" + nopt "~4.0.1" + js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" @@ -6284,6 +6344,14 @@ lru-cache@^4.1.2: pseudomap "^1.0.2" yallist "^2.1.2" +lru-cache@^4.1.5: + version "4.1.5" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd" + integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g== + dependencies: + pseudomap "^1.0.2" + yallist "^2.1.2" + macaddress@^0.2.8: version "0.2.8" resolved "https://registry.yarnpkg.com/macaddress/-/macaddress-0.2.8.tgz#5904dc537c39ec6dbefeae902327135fa8511f12" @@ -6870,7 +6938,7 @@ nopt@1.0.10: dependencies: abbrev "1" -nopt@^4.0.1: +nopt@^4.0.1, nopt@~4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d" dependencies: @@ -7738,6 +7806,15 @@ pretty-time@^1.0.0: is-number "^5.0.0" nanoseconds "^1.0.0" +pretty@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5" + integrity sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU= + dependencies: + condense-newlines "^0.2.1" + extend-shallow "^2.0.1" + js-beautify "^1.6.12" + prismjs@^1.13.0: version "1.14.0" resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0" @@ -7776,6 +7853,11 @@ promise-inflight@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" +proto-list@~1.2.1: + version "1.2.4" + resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" + integrity sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk= + prr@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476" @@ -8064,11 +8146,6 @@ regenerator-runtime@^0.11.0, regenerator-runtime@^0.11.1: version "0.11.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" -regenerator-runtime@^0.13.1: - version "0.13.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.1.tgz#522ea2aafd9200a00eee143dc14219a35a0f3991" - integrity sha512-5KzMIyPLvfdPmvsdlYsHqITrDfK9k7bmvf97HvHSN4810i254ponbxCQ1NukpRWlu6en2MBWzAlhDExEKISwAA== - regenerator-transform@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd" @@ -8645,6 +8722,11 @@ shebang-regex@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3" +sigmund@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590" + integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA= + signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" From 423690d1bad3b6b0650e40c0de134fbd5c2c65fa Mon Sep 17 00:00:00 2001 From: addisonssense Date: Thu, 9 May 2019 14:51:54 -0400 Subject: [PATCH 3/5] issue-1146: Add flow types --- flow/modules.flow.js | 4 ++++ flow/wrapper.flow.js | 1 + packages/test-utils/types/index.d.ts | 7 ------- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/flow/modules.flow.js b/flow/modules.flow.js index 9df7006e6..305268300 100644 --- a/flow/modules.flow.js +++ b/flow/modules.flow.js @@ -27,3 +27,7 @@ declare module 'cheerio' { declare module 'semver' { declare module.exports: any } + +declare module 'pretty' { + declare module.exports: any +} diff --git a/flow/wrapper.flow.js b/flow/wrapper.flow.js index 176a9c05c..47f2b5de9 100644 --- a/flow/wrapper.flow.js +++ b/flow/wrapper.flow.js @@ -5,6 +5,7 @@ import type WrapperArray from '~src/WrapperArray' declare type Selector = any declare type Components = { [name: string]: Component } +declare type HtmlOptions = { prettyPrint: boolean } declare interface BaseWrapper { // eslint-disable-line no-undef diff --git a/packages/test-utils/types/index.d.ts b/packages/test-utils/types/index.d.ts index 769e338df..89e29f028 100644 --- a/packages/test-utils/types/index.d.ts +++ b/packages/test-utils/types/index.d.ts @@ -39,13 +39,6 @@ type NameSelector = { name: string } -/** - * Options when printing html components as strings - */ -export class HtmlOptions { - prettyPrint: boolean -} - /** * Base class of Wrapper and WrapperArray * It has common methods on both Wrapper and WrapperArray From a9eda95b3aad3c96799c400b6bc59911e866f970 Mon Sep 17 00:00:00 2001 From: addisonssense Date: Mon, 13 May 2019 15:34:25 -0400 Subject: [PATCH 4/5] issue-1146: Make prettyPrint default; update existing tests --- packages/test-utils/src/wrapper.js | 6 +-- test/specs/mount.spec.js | 3 +- .../mounting-options/scopedSlots.spec.js | 37 ++++++++++--------- test/specs/mounting-options/slots.spec.js | 10 +++-- test/specs/shallow-mount.spec.js | 36 +++++++++++------- test/specs/wrapper/html.spec.js | 20 +++++----- 6 files changed, 62 insertions(+), 50 deletions(-) diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 237abce2c..5b8ba5b63 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -223,10 +223,10 @@ export default class Wrapper implements BaseWrapper { * Returns HTML of element as a string */ html(options?: HtmlOptions): string { - if (options && options.prettyPrint) { - return pretty(this.element.outerHTML) + if (options && !options.prettyPrint) { + return this.element.outerHTML } - return this.element.outerHTML + return pretty(this.element.outerHTML) } /** diff --git a/test/specs/mount.spec.js b/test/specs/mount.spec.js index 792b23118..f59176c0e 100644 --- a/test/specs/mount.spec.js +++ b/test/specs/mount.spec.js @@ -340,7 +340,8 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { if (vueVersion > 2.3) { expect(wrapper.vm.$attrs).to.eql({ height: '50px', extra: 'attr' }) } - expect(wrapper.html()).to.equal( + const htmlOptions = { prettyPrint: false } + expect(wrapper.html(htmlOptions)).to.equal( `

prop1

` ) }) diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js index 6423aa46f..8be4820c4 100644 --- a/test/specs/mounting-options/scopedSlots.spec.js +++ b/test/specs/mounting-options/scopedSlots.spec.js @@ -7,6 +7,7 @@ import Vue from 'vue' describeWithShallowAndMount('scopedSlots', mountingMethod => { const sandbox = sinon.createSandbox() const windowSave = window + const htmlOptions = { prettyPrint: false } afterEach(() => { window = windowSave // eslint-disable-line no-native-reassign @@ -28,7 +29,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html()).to.equal('

bar,123

') + expect(wrapper.html(htmlOptions)).to.equal('

bar,123

') }) itDoNotRunIf(vueVersion < 2.1, 'handles render functions', () => { @@ -47,7 +48,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html()).to.equal('

bar

') + expect(wrapper.html(htmlOptions)).to.equal('

bar

') }) itDoNotRunIf( @@ -87,7 +88,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(notDestructuringWrapper.html()).to.equal('

1,foo

') + expect(notDestructuringWrapper.html(htmlOptions)).to.equal('

1,foo

') } ) @@ -112,7 +113,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(destructuringWrapper.html()).to.equal('

1,foo

') + expect(destructuringWrapper.html(htmlOptions)).to.equal('

1,foo

') const notDestructuringWrapper = mountingMethod( { @@ -130,7 +131,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(notDestructuringWrapper.html()).to.equal('

1,foo

') + expect(notDestructuringWrapper.html(htmlOptions)).to.equal('

1,foo

') } ) @@ -145,38 +146,38 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { noProps: '

baz

' } }) - expect(wrapper.find('#destructuring').html()).to.equal( + expect(wrapper.find('#destructuring').html(htmlOptions)).to.equal( '

0,1

1,2

2,3

' ) - expect(wrapper.find('#slots').html()).to.equal( + expect(wrapper.find('#slots').html(htmlOptions)).to.equal( '
123
' ) - expect(wrapper.find('#list').html()).to.equal( + expect(wrapper.find('#list').html(htmlOptions)).to.equal( '

0,a1

1,a2

2,a3

' ) - expect(wrapper.find('#single').html()).to.equal( + expect(wrapper.find('#single').html(htmlOptions)).to.equal( '

abc

' ) - expect(wrapper.find('#noProps').html()).to.equal( + expect(wrapper.find('#noProps').html(htmlOptions)).to.equal( '

baz

' ) wrapper.vm.items = [4, 5, 6] wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }] wrapper.vm.bar = 'ABC' await Vue.nextTick() - expect(wrapper.find('#destructuring').html()).to.equal( + expect(wrapper.find('#destructuring').html(htmlOptions)).to.equal( '

0,4

1,5

2,6

' ) - expect(wrapper.find('#slots').html()).to.equal( + expect(wrapper.find('#slots').html(htmlOptions)).to.equal( '
123
' ) - expect(wrapper.find('#list').html()).to.equal( + expect(wrapper.find('#list').html(htmlOptions)).to.equal( '

0,b1

1,b2

2,b3

' ) - expect(wrapper.find('#single').html()).to.equal( + expect(wrapper.find('#single').html(htmlOptions)).to.equal( '

ABC

' ) - expect(wrapper.find('#noProps').html()).to.equal( + expect(wrapper.find('#noProps').html(htmlOptions)).to.equal( '

baz

' ) }) @@ -197,7 +198,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html()).to.equal('

bar

') + expect(wrapper.html(htmlOptions)).to.equal('

bar

') }) itDoNotRunIf(vueVersion < 2.5, 'handles no slot-scope', () => { @@ -214,7 +215,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html()).to.equal('

bar,123

') + expect(wrapper.html(htmlOptions)).to.equal('

bar,123

') }) itDoNotRunIf( @@ -286,7 +287,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { localVue }) - expect(wrapper.html()).to.contain('span') + expect(wrapper.html(htmlOptions)).to.contain('span') } ) }) diff --git a/test/specs/mounting-options/slots.spec.js b/test/specs/mounting-options/slots.spec.js index ee399c333..c9b88d00e 100644 --- a/test/specs/mounting-options/slots.spec.js +++ b/test/specs/mounting-options/slots.spec.js @@ -8,6 +8,8 @@ import { itDoNotRunIf } from 'conditional-specs' import { mount, createLocalVue } from '~vue/test-utils' describeWithShallowAndMount('options.slots', mountingMethod => { + const htmlOptions = { prettyPrint: false } + it('mounts component with default slot if passed component in slot object', () => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: Component } @@ -180,8 +182,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => { footer: '

world

' } }) - expect(wrapper.html()).to.contain('hello') - expect(wrapper.html()).to.contain('

world

') + expect(wrapper.html(htmlOptions)).to.contain('hello') + expect(wrapper.html(htmlOptions)).to.contain('

world

') }) it('mounts component with default and named text slot', () => { @@ -496,7 +498,7 @@ describeWithShallowAndMount('options.slots', mountingMethod => { c => c.$options.name === childComponentName ) ).to.equal(true) - expect(ParentComponent.html()).to.equal( + expect(ParentComponent.html(htmlOptions)).to.equal( '
FOO,quux
FOO,quux
' ) @@ -529,6 +531,6 @@ describeWithShallowAndMount('options.slots', mountingMethod => { c => c.$options.name === childComponentName ) ).to.equal(true) - expect(ParentComponent.html()).to.equal('

1234

') + expect(ParentComponent.html(htmlOptions)).to.equal('

1234

') }) }) diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js index 807c3f4e2..39c9ef981 100644 --- a/test/specs/shallow-mount.spec.js +++ b/test/specs/shallow-mount.spec.js @@ -13,6 +13,8 @@ import { describeRunIf, itDoNotRunIf } from 'conditional-specs' describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { const sandbox = sinon.createSandbox() + const htmlOptions = { prettyPrint: false } + beforeEach(() => { sandbox.stub(console, 'info').callThrough() sandbox.stub(console, 'error').callThrough() @@ -69,7 +71,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { const wrapper = shallowMount(TestComponent, { localVue }) - expect(wrapper.html()).to.equal('Hello') + expect(wrapper.html(htmlOptions)).to.equal('Hello') }) it('renders named slots', () => { @@ -88,7 +90,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { const wrapper = shallowMount(TestComponent, { localVue }) - expect(wrapper.html()).to.equal( + expect(wrapper.html(htmlOptions)).to.equal( '

Hello

World

' ) }) @@ -99,7 +101,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { components: { Child: {} } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html()).to.equal('') + expect(wrapper.html(htmlOptions)).to.equal('') }) it('renders children for functional components', () => { @@ -114,7 +116,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { const wrapper = shallowMount(TestComponent, { localVue }) - expect(wrapper.html()).to.equal('Hello') + expect(wrapper.html(htmlOptions)).to.equal('Hello') }) it('stubs globally registered components', () => { @@ -170,7 +172,9 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html()).to.contain(' { } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html()).to.contain(' { } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html()).to.contain(' { @@ -223,7 +229,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { components } const wrapper = shallowMount(TestComponent) - expect(wrapper.html()).to.contain('`, data: () => ({ @@ -232,7 +238,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { components } const wrapper2 = shallowMount(TestComponent2) - expect(wrapper2.html()).to.contain('`, data: () => ({ @@ -241,7 +247,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { components } const wrapper3 = shallowMount(TestComponent3) - expect(wrapper3.html()).to.contain(' { @@ -254,7 +260,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { name: 'test-component' } const wrapper = shallowMount(TestComponent) - expect(wrapper.html()).to.contain('') + expect(wrapper.html(htmlOptions)).to.contain('') expect(console.error).not.calledWith('[Vue warn]') }) @@ -421,7 +427,9 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { } const wrapper = shallowMount(TestComponent) - expect(wrapper.html()).to.equal('') + expect(wrapper.html(htmlOptions)).to.equal( + '' + ) }) it('stubs lazily registered components', () => { @@ -468,7 +476,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { localVue.use(myPlugin) const wrapper = shallowMount(TestComponent, { localVue }) - expect(wrapper.html()).to.contain('registered-component-stub') + expect(wrapper.html(htmlOptions)).to.contain('registered-component-stub') }) it('throws an error when the component fails to mount', () => { @@ -516,7 +524,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html()).to.equal( + expect(wrapper.html(htmlOptions)).to.equal( '
' + ' ' + ' ' + diff --git a/test/specs/wrapper/html.spec.js b/test/specs/wrapper/html.spec.js index ab3c4a005..1ccd3412c 100644 --- a/test/specs/wrapper/html.spec.js +++ b/test/specs/wrapper/html.spec.js @@ -20,7 +20,7 @@ describeWithShallowAndMount('html', mountingMethod => { } } }) - const expectedHtml = '
1
test
' + const expectedHtml = '
1
test
\n' + '
' expect(wrapper.html()).to.equal(expectedHtml) }) @@ -33,14 +33,6 @@ describeWithShallowAndMount('html', mountingMethod => { }) it('returns a Wrappers HTML as a string', () => { - const expectedHtml = - '' - const compiled = compileToFunctions(expectedHtml) - const wrapper = mountingMethod(compiled) - expect(wrapper.html()).to.equal(expectedHtml) - }) - - it('returns a Wrappers HTML as a pretty printed string', () => { const expectedHtml = '\n' + '
\n' + @@ -53,7 +45,15 @@ describeWithShallowAndMount('html', mountingMethod => { const compiled = compileToFunctions(expectedHtml) const wrapper = mountingMethod(compiled) - const options = { prettyPrint: true } + expect(wrapper.html()).to.equal(expectedHtml) + }) + + it('returns a Wrappers HTML not as a pretty printed string', () => { + const expectedHtml = '
' + + const compiled = compileToFunctions(expectedHtml) + const wrapper = mountingMethod(compiled) + const options = { prettyPrint: false } expect(wrapper.html(options)).to.equal(expectedHtml) }) }) From 72f10fb1f43acbbcf6749b6eb23828c97716edb2 Mon Sep 17 00:00:00 2001 From: addisonssense Date: Thu, 16 May 2019 10:37:33 -0400 Subject: [PATCH 5/5] issue-1146: updated so that pretty printing html is default --- flow/wrapper.flow.js | 1 - packages/test-utils/src/wrapper.js | 5 +- test/specs/mount.spec.js | 9 ++- .../mounting-options/scopedSlots.spec.js | 69 +++++++++++-------- test/specs/mounting-options/slots.spec.js | 17 +++-- test/specs/shallow-mount.spec.js | 51 +++++++------- test/specs/wrapper/html.spec.js | 11 +-- 7 files changed, 83 insertions(+), 80 deletions(-) diff --git a/flow/wrapper.flow.js b/flow/wrapper.flow.js index 47f2b5de9..176a9c05c 100644 --- a/flow/wrapper.flow.js +++ b/flow/wrapper.flow.js @@ -5,7 +5,6 @@ import type WrapperArray from '~src/WrapperArray' declare type Selector = any declare type Components = { [name: string]: Component } -declare type HtmlOptions = { prettyPrint: boolean } declare interface BaseWrapper { // eslint-disable-line no-undef diff --git a/packages/test-utils/src/wrapper.js b/packages/test-utils/src/wrapper.js index 5b8ba5b63..60346ce9a 100644 --- a/packages/test-utils/src/wrapper.js +++ b/packages/test-utils/src/wrapper.js @@ -222,10 +222,7 @@ export default class Wrapper implements BaseWrapper { /** * Returns HTML of element as a string */ - html(options?: HtmlOptions): string { - if (options && !options.prettyPrint) { - return this.element.outerHTML - } + html(): string { return pretty(this.element.outerHTML) } diff --git a/test/specs/mount.spec.js b/test/specs/mount.spec.js index f59176c0e..9bf2493d7 100644 --- a/test/specs/mount.spec.js +++ b/test/specs/mount.spec.js @@ -340,9 +340,12 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'mount', () => { if (vueVersion > 2.3) { expect(wrapper.vm.$attrs).to.eql({ height: '50px', extra: 'attr' }) } - const htmlOptions = { prettyPrint: false } - expect(wrapper.html(htmlOptions)).to.equal( - `

prop1

` + + expect(wrapper.html()).to.equal( + '
\n' + + '

prop1

\n' + + '

\n' + + '
' ) }) diff --git a/test/specs/mounting-options/scopedSlots.spec.js b/test/specs/mounting-options/scopedSlots.spec.js index 8be4820c4..511c4423a 100644 --- a/test/specs/mounting-options/scopedSlots.spec.js +++ b/test/specs/mounting-options/scopedSlots.spec.js @@ -7,7 +7,6 @@ import Vue from 'vue' describeWithShallowAndMount('scopedSlots', mountingMethod => { const sandbox = sinon.createSandbox() const windowSave = window - const htmlOptions = { prettyPrint: false } afterEach(() => { window = windowSave // eslint-disable-line no-native-reassign @@ -29,7 +28,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html(htmlOptions)).to.equal('

bar,123

') + expect(wrapper.html()).to.equal('
\n' + '

bar,123

\n' + '
') }) itDoNotRunIf(vueVersion < 2.1, 'handles render functions', () => { @@ -48,7 +47,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html(htmlOptions)).to.equal('

bar

') + expect(wrapper.html()).to.equal('
\n' + '

bar

\n' + '
') }) itDoNotRunIf( @@ -88,7 +87,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(notDestructuringWrapper.html(htmlOptions)).to.equal('

1,foo

') + expect(notDestructuringWrapper.html()).to.equal('

1,foo

') } ) @@ -113,7 +112,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(destructuringWrapper.html(htmlOptions)).to.equal('

1,foo

') + expect(destructuringWrapper.html()).to.equal('

1,foo

') const notDestructuringWrapper = mountingMethod( { @@ -131,7 +130,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(notDestructuringWrapper.html(htmlOptions)).to.equal('

1,foo

') + expect(notDestructuringWrapper.html()).to.equal('

1,foo

') } ) @@ -146,39 +145,55 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { noProps: '

baz

' } }) - expect(wrapper.find('#destructuring').html(htmlOptions)).to.equal( - '

0,1

1,2

2,3

' + expect(wrapper.find('#destructuring').html()).to.equal( + '
\n' + + '

0,1

\n' + + '

1,2

\n' + + '

2,3

\n' + + '
' ) - expect(wrapper.find('#slots').html(htmlOptions)).to.equal( + expect(wrapper.find('#slots').html()).to.equal( '
123
' ) - expect(wrapper.find('#list').html(htmlOptions)).to.equal( - '

0,a1

1,a2

2,a3

' + expect(wrapper.find('#list').html()).to.equal( + '
\n' + + '

0,a1

\n' + + '

1,a2

\n' + + '

2,a3

\n' + + '
' ) - expect(wrapper.find('#single').html(htmlOptions)).to.equal( - '

abc

' + expect(wrapper.find('#single').html()).to.equal( + '
\n' + '

abc

\n' + '
' ) - expect(wrapper.find('#noProps').html(htmlOptions)).to.equal( - '

baz

' + expect(wrapper.find('#noProps').html()).to.equal( + '
\n' + '

baz

\n' + '
' ) wrapper.vm.items = [4, 5, 6] wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }] wrapper.vm.bar = 'ABC' await Vue.nextTick() - expect(wrapper.find('#destructuring').html(htmlOptions)).to.equal( - '

0,4

1,5

2,6

' + expect(wrapper.find('#destructuring').html()).to.equal( + '
\n' + + '

0,4

\n' + + '

1,5

\n' + + '

2,6

\n' + + '
' ) - expect(wrapper.find('#slots').html(htmlOptions)).to.equal( + expect(wrapper.find('#slots').html()).to.equal( '
123
' ) - expect(wrapper.find('#list').html(htmlOptions)).to.equal( - '

0,b1

1,b2

2,b3

' + expect(wrapper.find('#list').html()).to.equal( + '
\n' + + '

0,b1

\n' + + '

1,b2

\n' + + '

2,b3

\n' + + '
' ) - expect(wrapper.find('#single').html(htmlOptions)).to.equal( - '

ABC

' + expect(wrapper.find('#single').html()).to.equal( + '
\n' + '

ABC

\n' + '
' ) - expect(wrapper.find('#noProps').html(htmlOptions)).to.equal( - '

baz

' + expect(wrapper.find('#noProps').html()).to.equal( + '
\n' + '

baz

\n' + '
' ) }) @@ -198,7 +213,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html(htmlOptions)).to.equal('

bar

') + expect(wrapper.html()).to.equal('
\n' + '

bar

\n' + '
') }) itDoNotRunIf(vueVersion < 2.5, 'handles no slot-scope', () => { @@ -215,7 +230,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { } } ) - expect(wrapper.html(htmlOptions)).to.equal('

bar,123

') + expect(wrapper.html()).to.equal('
\n' + '

bar,123

\n' + '
') }) itDoNotRunIf( @@ -287,7 +302,7 @@ describeWithShallowAndMount('scopedSlots', mountingMethod => { localVue }) - expect(wrapper.html(htmlOptions)).to.contain('span') + expect(wrapper.html()).to.contain('span') } ) }) diff --git a/test/specs/mounting-options/slots.spec.js b/test/specs/mounting-options/slots.spec.js index c9b88d00e..063b809c9 100644 --- a/test/specs/mounting-options/slots.spec.js +++ b/test/specs/mounting-options/slots.spec.js @@ -8,8 +8,6 @@ import { itDoNotRunIf } from 'conditional-specs' import { mount, createLocalVue } from '~vue/test-utils' describeWithShallowAndMount('options.slots', mountingMethod => { - const htmlOptions = { prettyPrint: false } - it('mounts component with default slot if passed component in slot object', () => { const wrapper = mountingMethod(ComponentWithSlots, { slots: { default: Component } @@ -182,8 +180,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => { footer: '

world

' } }) - expect(wrapper.html(htmlOptions)).to.contain('hello') - expect(wrapper.html(htmlOptions)).to.contain('

world

') + expect(wrapper.html()).to.contain('hello') + expect(wrapper.html()).to.contain('

world

') }) it('mounts component with default and named text slot', () => { @@ -498,8 +496,11 @@ describeWithShallowAndMount('options.slots', mountingMethod => { c => c.$options.name === childComponentName ) ).to.equal(true) - expect(ParentComponent.html(htmlOptions)).to.equal( - '
FOO,quux
FOO,quux
' + expect(ParentComponent.html()).to.equal( + '
\n' + + '
FOO,quux
\n' + + '
FOO,quux
\n' + + '
' ) ParentComponent = mount( @@ -531,6 +532,8 @@ describeWithShallowAndMount('options.slots', mountingMethod => { c => c.$options.name === childComponentName ) ).to.equal(true) - expect(ParentComponent.html(htmlOptions)).to.equal('

1234

') + expect(ParentComponent.html()).to.equal( + '
\n' + '

1234

\n' + '
' + ) }) }) diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js index 39c9ef981..da422f3a3 100644 --- a/test/specs/shallow-mount.spec.js +++ b/test/specs/shallow-mount.spec.js @@ -13,8 +13,6 @@ import { describeRunIf, itDoNotRunIf } from 'conditional-specs' describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { const sandbox = sinon.createSandbox() - const htmlOptions = { prettyPrint: false } - beforeEach(() => { sandbox.stub(console, 'info').callThrough() sandbox.stub(console, 'error').callThrough() @@ -71,7 +69,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { const wrapper = shallowMount(TestComponent, { localVue }) - expect(wrapper.html(htmlOptions)).to.equal('Hello') + expect(wrapper.html()).to.equal('Hello') }) it('renders named slots', () => { @@ -90,8 +88,11 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { const wrapper = shallowMount(TestComponent, { localVue }) - expect(wrapper.html(htmlOptions)).to.equal( - '

Hello

World

' + expect(wrapper.html()).to.equal( + '\n' + + '

Hello

\n' + + '

World

\n' + + '' ) }) @@ -101,7 +102,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { components: { Child: {} } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html(htmlOptions)).to.equal('') + expect(wrapper.html()).to.equal('') }) it('renders children for functional components', () => { @@ -116,7 +117,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { const wrapper = shallowMount(TestComponent, { localVue }) - expect(wrapper.html(htmlOptions)).to.equal('Hello') + expect(wrapper.html()).to.equal('Hello') }) it('stubs globally registered components', () => { @@ -172,9 +173,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html(htmlOptions)).to.contain( - ' { } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html(htmlOptions)).to.contain(' { } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html(htmlOptions)).to.contain( - ' { @@ -229,7 +226,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { components } const wrapper = shallowMount(TestComponent) - expect(wrapper.html(htmlOptions)).to.contain('`, data: () => ({ @@ -238,7 +235,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { components } const wrapper2 = shallowMount(TestComponent2) - expect(wrapper2.html(htmlOptions)).to.contain('`, data: () => ({ @@ -247,7 +244,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { components } const wrapper3 = shallowMount(TestComponent3) - expect(wrapper3.html(htmlOptions)).to.contain(' { @@ -260,7 +257,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { name: 'test-component' } const wrapper = shallowMount(TestComponent) - expect(wrapper.html(htmlOptions)).to.contain('') + expect(wrapper.html()).to.contain('') expect(console.error).not.calledWith('[Vue warn]') }) @@ -427,9 +424,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { } const wrapper = shallowMount(TestComponent) - expect(wrapper.html(htmlOptions)).to.equal( - '' - ) + expect(wrapper.html()).to.equal('') }) it('stubs lazily registered components', () => { @@ -476,7 +471,7 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { localVue.use(myPlugin) const wrapper = shallowMount(TestComponent, { localVue }) - expect(wrapper.html(htmlOptions)).to.contain('registered-component-stub') + expect(wrapper.html()).to.contain('registered-component-stub') }) it('throws an error when the component fails to mount', () => { @@ -524,12 +519,12 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => { } } const wrapper = shallowMount(TestComponent) - expect(wrapper.html(htmlOptions)).to.equal( - '
' + - ' ' + - ' ' + - ' ' + - '' + + expect(wrapper.html()).to.equal( + '
\n' + + ' \n' + + ' \n' + + ' \n' + + ' \n' + '
' ) }) diff --git a/test/specs/wrapper/html.spec.js b/test/specs/wrapper/html.spec.js index 1ccd3412c..50f8d809a 100644 --- a/test/specs/wrapper/html.spec.js +++ b/test/specs/wrapper/html.spec.js @@ -32,7 +32,7 @@ describeWithShallowAndMount('html', mountingMethod => { expect(wrapper.html()).to.equal('
') }) - it('returns a Wrappers HTML as a string', () => { + it('returns a Wrappers HTML as a pretty printed string', () => { const expectedHtml = '\n' + '
\n' + @@ -47,13 +47,4 @@ describeWithShallowAndMount('html', mountingMethod => { const wrapper = mountingMethod(compiled) expect(wrapper.html()).to.equal(expectedHtml) }) - - it('returns a Wrappers HTML not as a pretty printed string', () => { - const expectedHtml = '
' - - const compiled = compileToFunctions(expectedHtml) - const wrapper = mountingMethod(compiled) - const options = { prettyPrint: false } - expect(wrapper.html(options)).to.equal(expectedHtml) - }) })