Post processing (#74)

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,3 +12,4 @@ Related to issue #0
 
 * [ ] Update dependencies
 * [ ] Bump
+* [ ] If API changed, update `types.js`

package.json

@@ -1,13 +1,14 @@
 {
   "name": "vue3-snapshot-serializer",
   "type": "module",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Vitest snapshot serializer for Vue 3 components",
   "main": "index.js",
   "scripts": {
     "lint": "eslint *.js src tests",
     "fix": "npm run lint -- --fix",
     "test": "vitest --coverage",
+    "unit": "vitest --run",
     "debug": "vitest --inspect-brk --no-file-parallelism -t \"Stringify attributes\" \"cheerio\""
   },
   "dependencies": {
@@ -16,12 +17,12 @@
     "parse5": "^7.2.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.17.0",
     "@stylistic/eslint-plugin-js": "^2.12.1",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-config-tjw-base": "^3.1.0",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-jsdoc": "^50.6.1",

src/formatMarkup.js

@@ -289,16 +289,16 @@ export const diffableFormatter = function (markup) {
  * @return {string}         The same string, formatted based on user settings.
  */
 export const formatMarkup = function (markup) {
-  if (globalThis.vueSnapshots?.formatter) {
-    if (typeof(globalThis.vueSnapshots.formatter) === 'function') {
-      const result = globalThis.vueSnapshots.formatter(markup);
-      if (typeof(result) === 'string') {
-        return result;
-      } else {
-        logger('Your custom markup formatter must return a string.');
+  if (globalThis.vueSnapshots) {
+    if (globalThis.vueSnapshots.formatter === 'diffable') {
+      markup = diffableFormatter(markup);
+    }
+    if (typeof(globalThis.vueSnapshots.postProcessor) === 'function') {
+      markup = globalThis.vueSnapshots.postProcessor(markup);
+      if (typeof(markup) !== 'string') {
+        logger('Your custom markup post processor must return a string.');
+        return '';
       }
-    } else if (globalThis.vueSnapshots.formatter === 'diffable') {
-      return diffableFormatter(markup, globalThis.vueSnapshots.formatting);
     }
   }
   return markup;

src/loadOptions.js

@@ -85,12 +85,9 @@ export const loadOptions = function () {
   globalThis.vueSnapshots.attributesToClear = attributesToClear;
 
   // Formatter
-  if (
-    typeof(globalThis.vueSnapshots.formatter) !== 'function' &&
-    !['none', 'diffable'].includes(globalThis.vueSnapshots.formatter)
-  ) {
+  if (!['none', 'diffable'].includes(globalThis.vueSnapshots.formatter)) {
     if (globalThis.vueSnapshots.formatter) {
-      logger('Allowed values for global.vueSnapshots.formatter are \'none\', \'diffable\', or a custom function');
+      logger('Allowed values for global.vueSnapshots.formatter are \'none\' and \'diffable\'.');
     }
     globalThis.vueSnapshots.formatter = undefined;
   }
@@ -103,7 +100,7 @@ export const loadOptions = function () {
     typeof(globalThis.vueSnapshots.formatting) === 'object' &&
     Object.keys(globalThis.vueSnapshots.formatting).length
   ) {
-    logger('When setting the formatter to "none" or a custom function, all formatting options will be removed.');
+    logger('When setting the formatter to anything other than \'diffable\', all formatting options are ignored.');
   }
 
   // Formatting
@@ -177,6 +174,13 @@ export const loadOptions = function () {
     delete globalThis.vueSnapshots.formatting;
   }
 
+  if (typeof(globalThis.vueSnapshots.postProcessor) !== 'function') {
+    if (globalThis.vueSnapshots.postProcessor) {
+      logger('The postProcessor option must be a function that returns a string, or undefined.');
+    }
+    delete globalThis.vueSnapshots.postProcessor;
+  }
+
   /**
    * Clean up settings
    */
@@ -185,7 +189,8 @@ export const loadOptions = function () {
     ...Object.keys(booleanDefaults),
     'attributesToClear',
     'formatter',
-    'formatting'
+    'formatting',
+    'postProcessor'
   ];
   const permittedFormattingKeys = [
     ...Object.keys(formattingBooleanDefaults),

tests/unit/src/formatMarkup.test.js

@@ -64,32 +64,44 @@ describe('Format markup', () => {
   });
 
   test('Applies custom formatting', () => {
-    globalThis.vueSnapshots.formatter = function () {
-      return 'test';
+    globalThis.vueSnapshots.postProcessor = function (input) {
+      return input.toUpperCase();
     };
 
-    expect(formatMarkup(unformattedMarkup))
-      .toEqual('test');
+    expect(unformattedMarkup)
+      .toMatchInlineSnapshot(`
+        <DIV ID="HEADER">
+          <H1>
+            HELLO WORLD!
+          </H1>
+          <UL
+            CLASS="LIST"
+            ID="MAIN-LIST"
+          >
+            <LI>
+              <A
+                CLASS="LINK"
+                HREF="#"
+              >MY HTML</A>
+            </LI>
+          </UL>
+        </DIV>
+      `);
 
     expect(console.info)
       .not.toHaveBeenCalled();
   });
 
   test('Logs warning if custom function does not return a string', () => {
-    globalThis.vueSnapshots.formatter = function () {
+    globalThis.vueSnapshots.postProcessor = function () {
       return 5;
     };
 
     expect(unformattedMarkup)
-      .toMatchInlineSnapshot(`
-        <div id="header">
-          <h1>Hello World!</h1>
-          <ul class="list" id="main-list"><li><a class="link" href="#">My HTML</a></li></ul>
-        </div>
-      `);
+      .toMatchInlineSnapshot('');
 
     expect(console.info)
-      .toHaveBeenCalledWith('Vue 3 Snapshot Serializer: Your custom markup formatter must return a string.');
+      .toHaveBeenCalledWith('Vue 3 Snapshot Serializer: Your custom markup post processor must return a string.');
   });
 
   describe('diffableFormatter', () => {

tests/unit/src/loadOptions.test.js

@@ -140,7 +140,7 @@ describe('Load options', () => {
         .toEqual('diffable');
 
       expect(console.info)
-        .toHaveBeenCalledWith('Vue 3 Snapshot Serializer: Allowed values for global.vueSnapshots.formatter are \'none\', \'diffable\', or a custom function');
+        .toHaveBeenCalledWith('Vue 3 Snapshot Serializer: Allowed values for global.vueSnapshots.formatter are \'none\' and \'diffable\'.');
     });
 
     test('None', () => {
@@ -169,32 +169,48 @@ describe('Load options', () => {
         .not.toHaveBeenCalled();
     });
 
-    test('Custom function', () => {
-      function formatter (markup) {
-        return markup.toUpperCase();
-      }
-      global.vueSnapshots = { formatter };
+    test('Warns and deletes formatting options if not using diffable formatter', () => {
+      global.vueSnapshots.formatter = 'none';
+      global.vueSnapshots.formatting = { emptyAttributes: true };
 
       loadOptions();
 
-      expect(globalThis.vueSnapshots.formatter)
-        .toEqual(formatter);
+      expect(globalThis.vueSnapshots.formatting)
+        .toEqual(undefined);
 
       expect(console.info)
-        .not.toHaveBeenCalled();
+        .toHaveBeenCalledWith('Vue 3 Snapshot Serializer: When setting the formatter to anything other than \'diffable\', all formatting options are ignored.');
     });
+  });
 
-    test('Warns and deletes formatting options if not using diffable formatter', () => {
-      global.vueSnapshots.formatter = 'none';
-      global.vueSnapshots.formatting = { emptyAttributes: true };
+  describe('Post processing markup', () => {
+    test('Warns if postProcessor is not a function', () => {
+      global.vueSnapshots = {
+        postProcessor: 'invalid'
+      };
 
       loadOptions();
 
-      expect(globalThis.vueSnapshots.formatting)
+      expect(globalThis.vueSnapshots.postProcessor)
         .toEqual(undefined);
 
       expect(console.info)
-        .toHaveBeenCalledWith('Vue 3 Snapshot Serializer: When setting the formatter to "none" or a custom function, all formatting options will be removed.');
+        .toHaveBeenCalledWith('Vue 3 Snapshot Serializer: The postProcessor option must be a function that returns a string, or undefined.');
+    });
+
+    test('Applies custom formatting after Diffable', () => {
+      function postProcessor (markup) {
+        return markup.toUpperCase();
+      }
+      global.vueSnapshots = { postProcessor };
+
+      loadOptions();
+
+      expect(globalThis.vueSnapshots.postProcessor)
+        .toEqual(postProcessor);
+
+      expect(console.info)
+        .not.toHaveBeenCalled();
     });
   });