refactor(xml-formatter): improved unit tests

src/tools/xml-formatter/xml-formatter.service.test.ts

@@ -1,18 +1,27 @@
 import { describe, expect, it } from 'vitest';
 import { formatXml } from './xml-formatter.service';
 
-const options = {
-  indentation: '  ',
-  collapseContent: true,
-  lineSeparator: '\n',
-};
-const initString = '<hello><world>foo</world><world>bar</world></hello>';
-const endString = `<hello>
-  <world>foo</world>
-  <world>bar</world>
-</hello>`;
-describe('xml-formatter', () => {
-  it('Should generate same string', () => {
-    expect(formatXml(initString, options)).toEqual(endString);
+describe('xml-formatter service', () => {
+  describe('formatXml', () => {
+    it('converts XML into a human readable format', () => {
+      const initString = '<hello><world>foo</world><world>bar</world></hello>';
+
+      expect(formatXml(initString)).toMatchInlineSnapshot(`
+        "<hello>
+            <world>
+                foo
+            </world>
+            <world>
+                bar
+            </world>
+        </hello>"
+      `);
+    });
+
+    it('returns an empty string if the input is not valid XML', () => {
+      const initString = 'hello world';
+
+      expect(formatXml(initString)).toEqual('');
+    });
   });
 });

src/tools/xml-formatter/xml-formatter.service.ts

@@ -1,5 +1,28 @@
 import xmlFormat, { type XMLFormatterOptions } from 'xml-formatter';
+import { withDefaultOnError } from '@/utils/defaults';
 
-export function formatXml(value: string, options?: XMLFormatterOptions): string {
-  return xmlFormat(value, options) || '';
+export { formatXml, isValidXML };
+
+function cleanRawXml(rawXml: string): string {
+  return rawXml.trim();
+}
+
+function formatXml(rawXml: string, options?: XMLFormatterOptions): string {
+  return withDefaultOnError(() => xmlFormat(cleanRawXml(rawXml), options) ?? '', '');
+}
+
+function isValidXML(rawXml: string): boolean {
+  const cleanedRawXml = cleanRawXml(rawXml);
+
+  if (cleanedRawXml === '') {
+    return true;
+  }
+
+  try {
+    xmlFormat(cleanedRawXml);
+    return true;
+  }
+  catch (e) {
+    return false;
+  }
 }

src/tools/xml-formatter/xml-formatter.vue

@@ -1,41 +1,37 @@
 <script setup lang="ts">
-import { formatXml } from './xml-formatter.service';
+import { formatXml, isValidXML } from './xml-formatter.service';
 import type { UseValidationRule } from '@/composable/validation';
-import { isNotThrowing } from '@/utils/boolean';
-import { withDefaultOnError } from '@/utils/defaults';
 
 const defaultValue = '<hello><world>foo</world><world>bar</world></hello>';
 const indentSize = useStorage('xml-formatter:indent-size', 2);
 const collapseContent = useStorage('xml-formatter:collapse-content', true);
+
 function transformer(value: string) {
-  return withDefaultOnError(() => {
-    const def = {
-      indentation: ' '.repeat(indentSize.value),
-      collapseContent: collapseContent.value,
-      lineSeparator: '\n\r',
-    };
-    return formatXml(value, def);
-  }, '');
+  return formatXml(value, {
+    indentation: ' '.repeat(indentSize.value),
+    collapseContent: collapseContent.value,
+    lineSeparator: '\n',
+  });
 }
 
 const rules: UseValidationRule<string>[] = [
   {
-    validator: (value: string) => isNotThrowing(() => formatXml(value)),
+    validator: isValidXML,
     message: 'Provided XML is not valid.',
   },
 ];
 </script>
 
 <template>
-  <div style="flex: 0 0 100%">
-    <n-space style="margin: 0 auto; max-width: 600px" justify="center">
-      <n-form-item label="Collapse Content :" label-placement="left" label-width="100">
+  <div important:flex-full important:flex-shrink-0 important:flex-grow-0>
+    <div flex justify-center>
+      <n-form-item label="Collapse content:" label-placement="left">
         <n-switch v-model:value="collapseContent" />
       </n-form-item>
-      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
-        <n-input-number v-model:value="indentSize" min="0" max="10" style="width: 100px" />
+      <n-form-item label="Indent size:" label-placement="left" label-width="100" :show-feedback="false">
+        <n-input-number v-model:value="indentSize" min="0" max="10" w-100px />
       </n-form-item>
-    </n-space>
+    </div>
   </div>
 
   <format-transformer