Fix snapshots breaking inside tables

Breaking changes to API

• none

Breaking changes to snapshots

• Because we have switched from JSDOM to Cheerio with this release:
  • Empty HTML attributes will now be trimmed. <div class=""></div> becomes <div class></div>.
  • Optionally self-closing HTML tags, will now be closed in snapshots. <svg><path></path></svg> becomes <svg><path /></svg>

New Features

• Switching from JSDOM to Cheerio should speed up snapshot tests between 1.3-8x depending on machine, amount of snapshots, and types of tests.

Bug fixes

• When switching over from regex to JSDOM, for more accurate attribute removal, we inadvertantly broke tests targeting <tr>'s and <td>'s. To fix this, we switched from JSDOM to Cheerio + HTMLParser2 under the hood.

-
-
-     First
-
-
-     Second
-
-
+ <tr>
+   <td>
+     First
+   </td>
+   <td>
+     Second
+   </td>
+ </tr>

Maintenance

• Updated tests. Created new tests for new scenarios around tables and SVGs
• Updated documentation
• Added two new dependencies (cheerio, htmlparser2)
• Test coverage went from 99.582% to 100% 🎉

Code Changes:

• v3.9.0...v3.10.0
• v3.8.0...v3.10.0
• v3.7.0...v3.10.0
• v3.6.0...v3.10.0
• v3.5.0...v3.10.0
• v3.4.0...v3.10.0
• v3.3.0...v3.10.0
• v3.2.0...v3.10.0
• v3.1.0...v3.10.0
• v3.0.0...v3.10.0

Improve data-v-id removal

Breaking changes to API

• none

Breaking changes to snapshots

• If you had any data-v-id's in the content of your snapshot (not as an attribute on an element), they should now re-appear.

New Features

• none

Bug fixes

• Previously we were using regex to remove all instances of data-v-TOKEN="". Now we are only removing them from the attributes of elements. So if they are in a text node in your snapshot, they will no longer be removed.

Maintenance

• Update tests
• Test coverage went from 99.563% to 99.582%

Code Changes:

• v3.8.0...v3.9.0
• v3.7.0...v3.9.0
• v3.6.0...v3.9.0
• v3.5.0...v3.9.0
• v3.4.0...v3.9.0
• v3.3.0...v3.9.0
• v3.2.0...v3.9.0
• v3.1.0...v3.9.0
• v3.0.0...v3.9.0

Rename "pretty" to "formatting"

Breaking changes to API

• pretty has been renamed to formatting. This is because we are no longer using the pretty dependency, and also to make the API naming more accurate (and less pretentious)
• pretty previously accepted true as a bypass to use the jest-serializer-vue v2.0.2 formatting settings. This has been removed with the rename. You must now pass in the settings by hand. They have been documented in the migration guide.

Breaking changes to snapshots

• If you were passing in pretty: true, then you will need to change it to the settings in the migration guide to avoid snapshots breaking.

New Features

• none

Bug fixes

• none

Maintenance

• Removed 1 dependency (pretty)
• Added 1 dependency (js-beautify, which was a dependency of pretty)
• Added warning for yarn users, so they know to use npm
• Update documentation
• Added a test to verify that future changes will not disturb replicating v2.0.2 settings
• Test coverage went from 99.554% to 99.563%

Code Changes:

• v3.7.0...v3.8.0
• v3.6.0...v3.8.0
• v3.5.0...v3.8.0
• v3.4.0...v3.8.0
• v3.3.0...v3.8.0
• v3.2.0...v3.8.0
• v3.1.0...v3.8.0
• v3.0.0...v3.8.0

Remove class="test-token"

Breaking changes to API

• none

Breaking changes to snapshots

• none

New Features

• You can now optionally remove CSS classes that begin with test. Though you should not be using classes for test tokens as data-test is much better suited, since its meaning cannot be conflated with styling.

-<h1 class="test-page-title header">Kittens</h1>
+<h1 class="header">Kittens</h1>

-<h2 class="test-subheader">Meow</h2>
+<h2>Meow</h2>

Bug fixes

• none

Maintenance

• Updated the npm ignore list to only include required files (excludes tests/coverage)
• Test coverage went from 99.505% to 99.554%
• Split out test token removal code to its own file and refactored/DRY'd it
• Added a "FAQs/Tips" section to docs
• Update documentation
• Changed Travis-CI to use npm ci instead of npm install

Code Changes:

• v3.6.0...v3.7.0
• v3.5.0...v3.7.0
• v3.4.0...v3.7.0
• v3.3.0...v3.7.0
• v3.2.0...v3.7.0
• v3.1.0...v3.7.0
• v3.0.0...v3.7.0

Remove id="testToken", improve all token removals

Breaking changes to API

• none

Breaking changes to snapshots

• We have improved how we're detecting data-server-rendered="true", data-test, data-testid, data-test-id, and data-qa. They are now only removed from DOM element attributes. So if you made reference to these in your text nodes, they will now re-appear in your snapshot.

New Features

• You can now optionally remove any HTML id attributes that begin with test. Though you should not be using ID's for test tokens as data-testid or data-test-id are much better suited, since their meaning is not mixed with JS or CSS like id is.

-<h1 id="testPageTitle">Kittens</h1>
+<h1>Kittens</h1>

Bug fixes

• If you were referencing any test tokens in your content, they will now be displayed in the snapshot.

Maintenance

• Changed all tests to allow setting values in the API first instead of relying on a global config shared by all tests
• Set up Coveralls for test coverage
• Reach 99.505% test coverage
• Lots of improvements to tests and testing
• Updated dependencies
• Update documentation
• Fixed typo in Demo test
• Renamed "test" folder to "tests" since it contains more than one test, obviously

Code Changes:

• v3.5.0...v3.6.0
• v3.4.0...v3.6.0
• v3.3.0...v3.6.0
• v3.2.0...v3.6.0
• v3.1.0...v3.6.0
• v3.0.0...v3.6.0

Empty string snapshot bug fix

Breaking changes to API

• none

Breaking changes to snapshots

• none

New Features

• none

Bug fixes

• Fixed a bug where if removeComments: false the snapshots would be empty strings

Maintenance

• Update documentation
• Pulled in latest from Edd's repo to maintain accurate fork

Code Changes:

• v3.4.0...v3.5.0
• v3.3.0...v3.5.0
• v3.2.0...v3.5.0
• v3.1.0...v3.5.0
• v3.0.0...v3.5.0

Migration steps & Remove all HTML Comments

Breaking changes to API

• none

Breaking changes to snapshots

• none

New Features

• You can now opt in to removing all HTML comments from your snapshots. This is disabled by default, as there is some minor value in seeing placeholder comment blocks that represent hidden v-if elements. However, showing/removing HTML comment blocks is mostly personal preference.

If you prefer to remove them:

vue.config.js

module.exports = {
  pluginOptions: {
    jestSerializer: {
      // Set this to true for to remove all HTML comments like <!-- asfd -->
      removeComments: false
  }
};

You will need to update your snapshots. Run your test command with -- -u at the end. Such as npm run unit -- -u. This should auto-update your snapshots.

Bug fixes

• none

Maintenance

• Updated the documentation
• Created new test for the new feature
• Updated Vue-Test-Utils to beta 31 (released a few hours ago)
• Added "v2 to v3" migration steps to README.md

Code Changes:

• v3.3.0...v3.4.0
• v3.2.0...v3.4.0
• v3.1.0...v3.4.0
• v3.0.0...v3.4.0

Bug fixes and marking stringifyObjects as experimental

Breaking changes to API

• stringifyObjects has been switched to false by default. See below.

Breaking Changes to snapshots

• If you were using stringifyObjects this has been disabled. I ran into a lot of bugs with it. So I'm marking it as experimental for now. Fixed some of the bugs, but it's not quite ready to be turned on by default yet.

Recommended: Update to this version in your codebase in its own branch/PR. Run your test command with -- -u at the end. Such as npm run unit -- -u. This should auto-update your snapshots.

Alternative: If you prefer the previous formatting you can use these settings to keep everything as is:

vue.config.js

module.exports = {
  pluginOptions: {
    jestSerializer: {
      // Set this to true for the experimental feature to convert href="[object Object]" to href="{a:'asdf'}"
      stringifyObjects: false
  }
};

New Features

• None

Bug fixes

• Found some more bugs with stringifyObjects: true. Non-JSON attributes were converted to strings. So when something should have been title="cow" it became title="'cow'". That should be fixed. Other bugginess is making itself known with stringifyObjects so it is now disabled by default and marked as experimental.
• Previously we were deep cloning the vnode every time, even if you had stringifyObjects: false. Now this only happens if it is true. This means you should not exceed the call stack if stringifyObjects: false.
• No longer deep cloning the wrapper too when stringifyObjects: true. This should help reduce the likelihood of maxing out the call stack, but only slightly. (This is why it's still experimental).

Maintenance

• Tests now run in band, which is 75% faster than previous times.
• Updated the documentation
• Created new tests to help evaluate possible improvements for stringifyObjects
• Created a vue.config.js to override library defaults for tests.

Code Changes:

• v3.2.0...v3.3.0
• v3.1.0...v3.3.0
• v3.0.0...v3.3.0

data-qa, data-test-id, and bug fix

Breaking changes to API

• None

Breaking Changes to snapshots

• If you are using data-test-id or data-testid in your snapshots, they will now be removed by default.

Recommended: Update to this version in your codebase in its own branch/PR. Run your test command with -- -u at the end. Such as npm run unit -- -u. This should auto-update your snapshots.

Alternative: If you prefer the previous formatting you can use these settings to keep everything as is:

vue.config.js

module.exports = {
  pluginOptions: {
    jestSerializer: {
      // Set this to false if you want your snapshots to retain the data-testid="token" attributes
      removeDataTestid: true,
      // Set this to false if you want your snapshots to retain the data-test-id="token" attributes
      removeDataTestId: true,
      // Set this to true if you want to remove data-qa="token" from your snapshots
      removeDataQa: false
  }
};

New Features

• You can now enable/disable removing data-test-id attributes
• You can now enable/disable removing data-testid attributes
• You can now enable/disable removing data-qa attributes

Bug fixes

• There was a bug around stringifyObjects: true. This came from modifying a reference to a wrapper's vnode when a test would continue using the wrapper after the snapshot. To fix this, we now deep clone the wrapper and vnode and do not modify the original reference.

Maintenance

• Pull request template updated to remind to update deps in each PR
• Updated the documentation
• Created new tests for the new features
• Increased dependencies by 1 to support deep cloning vnodes
• Refactored several parts of the code, DRYing it up and splitting out to separate functions and files.

Code Changes:

• v3.1.0...v3.2.0

Replace [object Object] with data and Remove data-v-id's

Breaking changes to API

• None

Breaking Changes to snapshots

• If you are using any 3rd-party components with scoped styles, and your mount based snapshots include them, then those tests will break. Specifically it will remove their scoping attributes (data-v-1234abcd=""). This was done so that your future snapshots won't break when updating that dependency and it's ID's all change.

• If your HTML attributes contained any JSON data, previously they would display as href="[object Object]". Now they will display the actual data, like href="{ key: 'value' }".

These changes mean your tests will now fail, until you update the snapshots to this new formatting.

Recommended: Update to this version in your codebase in its own branch/PR. Run your test command with -- -u at the end. Such as npm run unit -- -u. This should auto-update your snapshots.

Alternative: If you prefer the previous formatting you can use these settings to keep everything as is:

vue.config.js

module.exports = {
  pluginOptions: {
    jestSerializer: {
      // Set this to false if you want your snapshots to retain the data-v-token="" attributes
      removeDataVId: true,
      // Set this to false if you don't want to see JSON attribute data in snapshots
      stringifyObjects: true
  }
};

New Features

• You can now enable/disable removing data-v-1234abcd attributes
• You can now enable/disable displaying JSON data in HTML attributes

Bug fixes

• None

Maintenance

• Created a .gitignore so now this dependency will include the bare minimum number of files during install
• All dependencies have been updated
• Updated the documentation
• Added some shields/badges to the README
• Created new tests for the new features
• Increased devDeps by 1 to test 3rd party libraries with scoped styles
• Pull request template created
• Added a test debugger npm script

Code Changes:

• v3.0.0...v3.1.0