test: add tests

Author: Mihai Plamadeala

package.json

@@ -54,6 +54,7 @@
     "bumpp": "^9.2.0",
     "eslint": "^8.51.0",
     "esno": "^0.17.0",
+    "happy-dom": "^12.9.1",
     "lint-staged": "^14.0.1",
     "pnpm": "^8.8.0",
     "rimraf": "^5.0.5",
@@ -64,8 +65,11 @@
     "vitest": "^0.34.6"
   },
   "peerDependencies": {
-    "vue": "3.x",
-    "@vue/compiler-core": "3.x"
+    "@vue/compiler-core": "3.x",
+    "vue": "3.x"
+  },
+  "optionalDependencies": {
+    "@vue/compiler-sfc": "^3.3.6"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

pnpm-lock.yaml

@@ -10,44 +10,21 @@ const NODE_TYPES = {
   SIMPLE_EXPRESSION: 4,
 } as const
 
-export type AttributeToBeRemoved =
-  | string
-  | { type: 'static' | 'dynamic'; value: string }
-
-export default function createAttributesRemover(attributes: AttributeToBeRemoved[]): NodeTransform {
+export default function createAttributesRemover(attributes: string[]): NodeTransform {
   if (!attributes.length)
     return () => undefined
 
-  const [staticAttributes, dynamicAttributes]: [string[], string[]] = [[], []]
-
-  attributes
-    .forEach((attribute) => {
-      if (typeof attribute === 'string') {
-        staticAttributes.push(attribute)
-        dynamicAttributes.push(attribute)
-
-        return
-      }
-
-      if (attribute.type === 'static') {
-        staticAttributes.push(attribute.value)
-        return
-      }
-
-      dynamicAttributes.push(attribute.value)
-    })
-
   return (node): void => {
     if (node.type !== NODE_TYPES.ELEMENT)
       return
 
     node.props = node.props
       .filter((prop) => {
         if (prop.type === NODE_TYPES.ATTRIBUTE)
-          return !staticAttributes.includes(prop.name)
+          return !attributes.includes(prop.name)
 
         if (prop.type === NODE_TYPES.DIRECTIVE && prop.arg?.type === NODE_TYPES.SIMPLE_EXPRESSION)
-          return !dynamicAttributes.includes(prop.arg.content)
+          return !attributes.includes(prop.arg.content)
 
         return true
       })

src/index.ts

@@ -0,0 +1,48 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`createAttributesRemover > empty attributes > should not change anything 1`] = `
+"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
+  /*#__PURE__*/_createElementVNode(\\"header\\", { \\"data-test\\": \\"header-test\\" }, \\" Header \\"),
+  /*#__PURE__*/_createElementVNode(\\"section\\", { \\"data-test\\": 'section-content' }, [
+    /*#__PURE__*/_createElementVNode(\\"ul\\", null, [
+      /*#__PURE__*/_createElementVNode(\\"li\\", {
+        \\"data-test\\": 'item-text',
+        textContent: 'text'
+      })
+    ]),
+    /*#__PURE__*/_createElementVNode(\\"div\\", { \\"data-meta\\": \\"not-secure-meta\\" }, \\" Meta \\")
+  ]),
+  /*#__PURE__*/_createElementVNode(\\"footer\\", { dataTest: \\"footer-test\\" }, \\" Footer \\")
+], -1 /* HOISTED */)
+const _hoisted_2 = [
+  _hoisted_1
+]
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"template\\", null, _hoisted_2))
+}"
+`;
+
+exports[`createAttributesRemover > with attributes > should remove all data-test and data-meta 1`] = `
+"import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \\"vue\\"
+
+const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
+  /*#__PURE__*/_createElementVNode(\\"header\\", null, \\" Header \\"),
+  /*#__PURE__*/_createElementVNode(\\"section\\", null, [
+    /*#__PURE__*/_createElementVNode(\\"ul\\", null, [
+      /*#__PURE__*/_createElementVNode(\\"li\\", { textContent: 'text' })
+    ]),
+    /*#__PURE__*/_createElementVNode(\\"div\\", null, \\" Meta \\")
+  ]),
+  /*#__PURE__*/_createElementVNode(\\"footer\\", { dataTest: \\"footer-test\\" }, \\" Footer \\")
+], -1 /* HOISTED */)
+const _hoisted_2 = [
+  _hoisted_1
+]
+
+export function render(_ctx, _cache) {
+  return (_openBlock(), _createElementBlock(\\"template\\", null, _hoisted_2))
+}"
+`;

test/__snapshots__/index.test.ts.snap

@@ -1,3 +1,55 @@
-import { describe } from 'vitest'
+import { describe, expect, it } from 'vitest'
+import { compileTemplate } from '@vue/compiler-sfc'
+import type { NodeTransform } from '@vue/compiler-core'
+import createAttributesRemover from '../src'
 
-describe.skip('vue-plugin-remove-attributes')
+describe('createAttributesRemover', () => {
+  const template
+    = `<template>
+      <div>
+        <header data-test="header-test">
+          Header
+        </header>
+        <section :data-test="'section-content'">
+          <ul>
+            <li
+              :data-test="'item-text'"
+              v-text="'text'"
+            />
+          </ul>
+          <div data-meta="not-secure-meta">
+            Meta 
+          </div>
+        </section>
+        <footer dataTest="footer-test">
+          Footer
+        </footer>
+      </div>
+    </template>`
+
+  const parse = (removeParameters: NodeTransform) => {
+    return compileTemplate({
+      id: 'TestComponent.vue',
+      filename: 'TestComponent.vue',
+      source: template,
+      compilerOptions: {
+        nodeTransforms: [removeParameters],
+      },
+    }).code
+  }
+
+  describe('empty attributes', () => {
+    it('should not change anything', () => {
+      const code = parse(createAttributesRemover([]))
+
+      expect(code).toMatchSnapshot()
+    })
+  })
+  describe('with attributes', () => {
+    it('should remove all data-test and data-meta', () => {
+      const code = parse(createAttributesRemover(['data-test', 'data-meta']))
+
+      expect(code).toMatchSnapshot()
+    })
+  })
+})