Skip to content

Commit 6f5e002

Browse files
TheJaredWilcurtTheJaredWilcurt
authored
Attributes not to stringify defaults (#137)
1 parent ecb1a2e commit 6f5e002

File tree

7 files changed

+128
-56
lines changed

7 files changed

+128
-56
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue3-snapshot-serializer",
33
"type": "module",
4-
"version": "2.12.0",
4+
"version": "2.13.0",
55
"description": "Vitest snapshot serializer for Vue 3 components",
66
"main": "index.js",
77
"scripts": {
@@ -58,7 +58,7 @@
5858
},
5959
"homepage": "https://github.com/tjw-lint/vue3-snapshot-serializer#readme",
6060
"volta": {
61-
"node": "24.2.0",
62-
"npm": "11.4.2"
61+
"node": "24.7.0",
62+
"npm": "11.5.2"
6363
}
6464
}

‎src/cheerioManipulation.js

Lines changed: 58 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,20 @@ const KEY_NAME = 'data-vue-snapshot-serializer-key';
1616
let key = 0;
1717
let alreadyRemovedKey = true;
1818

19+
/**
20+
* In most cases, debug will be falsy, so we can skip
21+
* the expensive cost of serializing the Cheerio object.
22+
*
23+
* @param {object} $ The markup as a cheerio object
24+
* @return {string} The cheerio object serialized to markup
25+
*/
26+
function logSpeedup ($) {
27+
if (globalThis.vueSnapshots?.debug) {
28+
return $.html();
29+
}
30+
return undefined;
31+
}
32+
1933
/**
2034
* Safety check to ensure the vueWrapper contains the needed
2135
* methods for attribute stringification.
@@ -98,7 +112,10 @@ const addSerializerKeys = function (vueWrapper) {
98112
*/
99113
const removeSerializerKeys = function ($, vueWrapper) {
100114
if (!alreadyRemovedKey) {
101-
debugLogger({ function: 'cheerioManipulation.js:removeSerializerKeys' });
115+
debugLogger({
116+
function: 'cheerioManipulation.js:removeSerializerKeys',
117+
data: { $: logSpeedup($) }
118+
});
102119

103120
$('[' + KEY_NAME + ']').each((index, element) => {
104121
const currentKey = $(element).attr(KEY_NAME);
@@ -139,7 +156,10 @@ const addInputValues = function ($, vueWrapper) {
139156
globalThis.vueSnapshots?.addInputValues &&
140157
attributesCanBeStringified(vueWrapper)
141158
) {
142-
debugLogger({ function: 'cheerioManipulation.js:addInputValues' });
159+
debugLogger({
160+
function: 'cheerioManipulation.js:addInputValues',
161+
data: { $: logSpeedup($) }
162+
});
143163
$('input, textarea, select').each(function (index, element) {
144164
const currentKey = $(element).attr(KEY_NAME);
145165
const keySelector = '[' + KEY_NAME + '="' + currentKey + '"]';
@@ -199,7 +219,10 @@ const stringifyAttributes = function ($, vueWrapper) {
199219
globalThis.vueSnapshots?.stringifyAttributes &&
200220
attributesCanBeStringified(vueWrapper)
201221
) {
202-
debugLogger({ function: 'cheerioManipulation.js:stringifyAttributes' });
222+
debugLogger({
223+
function: 'cheerioManipulation.js:stringifyAttributes',
224+
data: { $: logSpeedup($) }
225+
});
203226
$('[' + KEY_NAME + ']').each((index, element) => {
204227
const currentKey = $(element).attr(KEY_NAME);
205228
const keySelector = '[' + KEY_NAME + '="' + currentKey + '"]';
@@ -271,7 +294,10 @@ const stringifyAttributes = function ($, vueWrapper) {
271294
*/
272295
const removeAttributesViaRegex = function ($) {
273296
if (globalThis.vueSnapshots?.regexToRemoveAttributes) {
274-
debugLogger({ function: 'cheerioManipulation.js:removeAttributesViaRegex' });
297+
debugLogger({
298+
function: 'cheerioManipulation.js:removeAttributesViaRegex',
299+
data: { $: logSpeedup($) }
300+
});
275301
$('*').each(function (index, element) {
276302
Object.keys(element.attribs).forEach(function (attributeName) {
277303
if (globalThis.vueSnapshots?.regexToRemoveAttributes.test(attributeName)) {
@@ -289,7 +315,10 @@ const removeAttributesViaRegex = function ($) {
289315
*/
290316
const removeScopedStylesDataVIDAttributes = function ($) {
291317
if (globalThis.vueSnapshots?.removeDataVId) {
292-
debugLogger({ function: 'cheerioManipulation.js:removeScopedStylesDataVIDAttributes' });
318+
debugLogger({
319+
function: 'cheerioManipulation.js:removeScopedStylesDataVIDAttributes',
320+
data: { $: logSpeedup($) }
321+
});
293322

294323
// [-\w]+ will catch 1 or more instaces of a-z, A-Z, 0-9, hyphen (-), or underscore (_)
295324
const regex = / data-v-[-\w]+/g;
@@ -318,7 +347,10 @@ const removeScopedStylesDataVIDAttributes = function ($) {
318347
*/
319348
const renameScopedVBindCustomProperties = function ($) {
320349
if (globalThis.vueSnapshots?.renameScopedVBindCSS) {
321-
debugLogger({ function: 'cheerioManipulation.js:renameScopedVBindCustomProperties' });
350+
debugLogger({
351+
function: 'cheerioManipulation.js:renameScopedVBindCustomProperties',
352+
data: { $: logSpeedup($) }
353+
});
322354
// String starts, there are exactly 8 characters using lowercase
323355
// hexidecimal, no other characters allowed, then the string ends.
324356
const scopeIdTester = /^[0-9a-f]{8}$/;
@@ -362,7 +394,10 @@ const renameScopedVBindCustomProperties = function ($) {
362394
*/
363395
const removeServerRenderedText = function ($) {
364396
if (globalThis.vueSnapshots?.removeServerRendered) {
365-
debugLogger({ function: 'cheerioManipulation.js:removeServerRenderedText' });
397+
debugLogger({
398+
function: 'cheerioManipulation.js:removeServerRenderedText',
399+
data: { $: logSpeedup($) }
400+
});
366401
$('[data-server-rendered]').removeAttr('data-server-rendered');
367402
}
368403
};
@@ -375,7 +410,10 @@ const removeServerRenderedText = function ($) {
375410
*/
376411
const clearAttributes = function ($) {
377412
if (globalThis.vueSnapshots?.attributesToClear?.length) {
378-
debugLogger({ function: 'cheerioManipulation.js:clearAttributes' });
413+
debugLogger({
414+
function: 'cheerioManipulation.js:clearAttributes',
415+
data: { $: logSpeedup($) }
416+
});
379417
globalThis.vueSnapshots.attributesToClear.forEach(function (attribute) {
380418
$('[' + attribute + ']').attr(attribute, '');
381419
});
@@ -389,7 +427,10 @@ const clearAttributes = function ($) {
389427
*/
390428
const clearInlineFunctions = function ($) {
391429
if (globalThis.vueSnapshots?.clearInlineFunctions) {
392-
debugLogger({ function: 'cheerioManipulation.js:clearInlineFunctions' });
430+
debugLogger({
431+
function: 'cheerioManipulation.js:clearInlineFunctions',
432+
data: { $: logSpeedup($) }
433+
});
393434

394435
/**
395436
* Takes a string and tells you if it is a function.
@@ -492,7 +533,10 @@ const stubOutDom = function ($) {
492533
*/
493534
const sortAttributes = function ($) {
494535
if (globalThis.vueSnapshots?.sortAttributes) {
495-
debugLogger({ function: 'cheerioManipulation.js:sortAttributes' });
536+
debugLogger({
537+
function: 'cheerioManipulation.js:sortAttributes',
538+
data: { $: logSpeedup($) }
539+
});
496540
$('*').each(function (index, element) {
497541
Object.keys(element.attribs).sort().forEach(function (key) {
498542
let value = element.attribs[key];
@@ -514,7 +558,10 @@ const sortAttributes = function ($) {
514558
*/
515559
const sortClasses = function ($) {
516560
if (globalThis.vueSnapshots?.sortClasses) {
517-
debugLogger({ function: 'cheerioManipulation.js:sortClasses' });
561+
debugLogger({
562+
function: 'cheerioManipulation.js:sortClasses',
563+
data: { $: logSpeedup($) }
564+
});
518565
$('*').each(function (index, element) {
519566
const classes = element?.attribs?.class?.trim();
520567
if (classes) {

‎src/loadOptions.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const ALLOWED_FORMATTERS = [
4141
'diffable',
4242
'none'
4343
];
44-
const ATTRIBUTES_NOT_TO_STRINGIFY_DEFAULTS = ['style'];
44+
const ATTRIBUTES_NOT_TO_STRINGIFY_DEFAULTS = ['class', 'style'];
4545
const TAGS_WITH_WHITESPACE_PRESERVED_DEFAULTS = ['a', 'pre'];
4646
const VOID_ELEMENTS_DEFAULT = 'xhtml';
4747
const ALLOWED_VOID_ELEMENTS = Object.freeze([

‎tests/unit/src/cheerioManipulation.test.js

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ describe('Cheerio Manipulation', () => {
5858

5959
expect(console.info)
6060
.toHaveBeenCalledWith('V3SS Debug:', {
61-
function: 'cheerioManipulation.js:clearAttributes'
61+
function: 'cheerioManipulation.js:clearAttributes',
62+
data: { $: markup }
6263
});
6364
});
6465
});
@@ -75,7 +76,8 @@ describe('Cheerio Manipulation', () => {
7576

7677
expect(console.info)
7778
.toHaveBeenCalledWith('V3SS Debug:', {
78-
function: 'cheerioManipulation.js:removeServerRenderedText'
79+
function: 'cheerioManipulation.js:removeServerRenderedText',
80+
data: { $: markup }
7981
});
8082
});
8183

@@ -149,7 +151,8 @@ describe('Cheerio Manipulation', () => {
149151

150152
expect(console.info)
151153
.toHaveBeenCalledWith('V3SS Debug:', {
152-
function: 'cheerioManipulation.js:removeScopedStylesDataVIDAttributes'
154+
function: 'cheerioManipulation.js:removeScopedStylesDataVIDAttributes',
155+
data: { $: markup }
153156
});
154157
});
155158

@@ -199,7 +202,8 @@ describe('Cheerio Manipulation', () => {
199202

200203
expect(console.info)
201204
.toHaveBeenCalledWith('V3SS Debug:', {
202-
function: 'cheerioManipulation.js:clearInlineFunctions'
205+
function: 'cheerioManipulation.js:clearInlineFunctions',
206+
data: { $: expect.any(String) }
203207
});
204208
});
205209

@@ -231,7 +235,8 @@ describe('Cheerio Manipulation', () => {
231235

232236
expect(console.info)
233237
.toHaveBeenCalledWith('V3SS Debug:', {
234-
function: 'cheerioManipulation.js:sortAttributes'
238+
function: 'cheerioManipulation.js:sortAttributes',
239+
data: { $: expect.any(String) }
235240
});
236241
});
237242

@@ -258,7 +263,8 @@ describe('Cheerio Manipulation', () => {
258263

259264
expect(console.info)
260265
.toHaveBeenCalledWith('V3SS Debug:', {
261-
function: 'cheerioManipulation.js:sortClasses'
266+
function: 'cheerioManipulation.js:sortClasses',
267+
data: { $: expect.any(String) }
262268
});
263269
});
264270

@@ -363,12 +369,14 @@ describe('Cheerio Manipulation', () => {
363369

364370
expect(console.info)
365371
.toHaveBeenCalledWith('V3SS Debug:', {
366-
function: 'cheerioManipulation.js:addInputValues'
372+
function: 'cheerioManipulation.js:addInputValues',
373+
data: { $: expect.any(String) }
367374
});
368375

369376
expect(console.info)
370377
.toHaveBeenCalledWith('V3SS Debug:', {
371-
function: 'cheerioManipulation.js:removeSerializerKeys'
378+
function: 'cheerioManipulation.js:removeSerializerKeys',
379+
data: { $: expect.any(String) }
372380
});
373381
});
374382

@@ -459,7 +467,8 @@ describe('Cheerio Manipulation', () => {
459467

460468
expect(console.info)
461469
.toHaveBeenCalledWith('V3SS Debug:', {
462-
function: 'cheerioManipulation.js:stringifyAttributes'
470+
function: 'cheerioManipulation.js:stringifyAttributes',
471+
data: { $: expect.any(String) }
463472
});
464473
});
465474

@@ -501,7 +510,7 @@ describe('Cheerio Manipulation', () => {
501510
});
502511

503512
describe('Attributes not to stringify', () => {
504-
test('Skips style by default', async () => {
513+
test('Skips class and style by default', async () => {
505514
globalThis.vueSnapshots.stringifyAttributes = true;
506515
globalThis.vueSnapshots.attributesNotToStringify = undefined;
507516

@@ -524,7 +533,7 @@ describe('Cheerio Manipulation', () => {
524533

525534
test('Has no effect if stringifyAttributes is disabled', async () => {
526535
globalThis.vueSnapshots.stringifyAttributes = false;
527-
globalThis.vueSnapshots.attributesNotToStringify = ['style'];
536+
globalThis.vueSnapshots.attributesNotToStringify = ['class', 'style'];
528537

529538
const wrapper = await mount(AttributesNotToStringify);
530539

‎tests/unit/src/loadOptions.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ describe('Load options', () => {
1515
const defaultSettings = Object.freeze({
1616
...booleanDefaults,
1717
attributesToClear: [],
18-
attributesNotToStringify: ['style'],
18+
attributesNotToStringify: ['class', 'style'],
1919
stubs: {},
2020
formatter: 'diffable',
2121
formatting: {

0 commit comments

Comments
 (0)