fix: Revert vueOptionsNamespace changes from <script setup> commit (#501

)

* chore: Remove this. in <template> in test

Signed-off-by: Wolfgang Walther <walther@technowledgy.de>

* test: Add custom-block test for 2.x package

Signed-off-by: Wolfgang Walther <walther@technowledgy.de>

* fix: Revert vueOptionsNamespace changes from <script setup> commit

Signed-off-by: Wolfgang Walther <walther@technowledgy.de>

e2e/2.x/custom-block/__snapshots__/test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic 1`] = `
+[
+  {
+    "en": {
+      "hello": "Hello!",
+    },
+    "ja": {
+      "hello": "こんにちは！",
+    },
+  },
+]
+`;
+
+exports[`Multiple blocks 1`] = `
+[
+  {
+    "en": {
+      "hello": "Hello!",
+    },
+    "ja": {
+      "hello": "こんにちは！",
+    },
+  },
+  {
+    "foo": "foo",
+  },
+]
+`;

e2e/2.x/custom-block/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env']
+}

e2e/2.x/custom-block/components/Basic.vue

@@ -0,0 +1,20 @@
+<template>
+  <p>basic custom block</p>
+</template>
+
+<script>
+export default {
+  name: 'Basic'
+}
+</script>
+
+<custom>
+{
+  "en": {
+    "hello": "Hello!"
+  },
+  "ja": {
+    "hello": "こんにちは！"
+  }
+}
+</custom>

e2e/2.x/custom-block/components/Multiple.vue

@@ -0,0 +1,26 @@
+<template>
+  <p>multiple custom block</p>
+</template>
+
+<script>
+export default {
+  name: 'Multiple'
+}
+</script>
+
+<custom>
+{
+  "en": {
+    "hello": "Hello!"
+  },
+  "ja": {
+    "hello": "こんにちは！"
+  }
+}
+</custom>
+
+<custom>
+{
+  "foo": "foo"
+}
+</custom>

e2e/2.x/custom-block/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "vue2-custom-block",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "test": "jest --no-cache --coverage test.js"
+  },
+  "dependencies": {
+    "vue": "^2.7.7",
+    "vue-template-compiler": "^2.7.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@vue/vue2-jest": "^29.0.0",
+    "jest": "29.x",
+    "jest-environment-jsdom": "29.x"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.vue$": "@vue/vue2-jest"
+    },
+    "moduleNameMapper": {
+      "^~?__styles/(.*)$": "<rootDir>/components/styles/$1"
+    },
+    "globals": {
+      "vue-jest": {
+        "transform": {
+          "custom": "./transformer.js"
+        }
+      }
+    }
+  }
+}

e2e/2.x/custom-block/test.js

@@ -0,0 +1,33 @@
+import Basic from './components/Basic.vue'
+import Multiple from './components/Multiple.vue'
+
+test('Basic', () => {
+  expect(Basic.__custom).toMatchObject([
+    {
+      en: {
+        hello: 'Hello!'
+      },
+      ja: {
+        hello: 'こんにちは！'
+      }
+    }
+  ])
+  expect(Basic.__custom).toMatchSnapshot()
+})
+
+test('Multiple blocks', () => {
+  expect(Multiple.__custom).toMatchObject([
+    {
+      en: {
+        hello: 'Hello!'
+      },
+      ja: {
+        hello: 'こんにちは！'
+      }
+    },
+    {
+      foo: 'foo'
+    }
+  ])
+  expect(Multiple.__custom).toMatchSnapshot()
+})

e2e/2.x/custom-block/transformer.js

@@ -0,0 +1,21 @@
+function convert(content) {
+  return JSON.stringify(JSON.parse(content))
+    .replace(/\u2028/g, '\\u2028') // LINE SEPARATOR
+    .replace(/\u2029/g, '\\u2029') // PARAGRAPH SEPARATOR
+    .replace(/\\/g, '\\\\')
+    .replace(/'/g, "\\'")
+}
+
+module.exports = {
+  process({ blocks, vueOptionsNamespace, filename, config }) {
+    const ret = blocks.reduce((codes, block) => {
+      codes.push(
+        `${vueOptionsNamespace}.__custom = ${vueOptionsNamespace}.__custom || [];${vueOptionsNamespace}.__custom.push(${convert(
+          block.content
+        )});`
+      )
+      return codes
+    }, [])
+    return ret.join('')
+  }
+}

e2e/2.x/custom-transformers/components/Scss.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <span :class="this.$style.g"></span>
-    <span :class="this.$style.dark.f"></span>
+    <span :class="$style.g"></span>
+    <span :class="$style.dark.f"></span>
   </div>
 </template>
 

packages/vue2-jest/lib/process-custom-blocks.js

@@ -1,4 +1,5 @@
 const { getVueJestConfig, getCustomTransformer } = require('./utils')
+const vueOptionsNamespace = require('./constants').vueOptionsNamespace
 
 function applyTransformer(
   transformer,
@@ -16,7 +17,7 @@ function groupByType(acc, block) {
   return acc
 }
 
-module.exports = function(allBlocks, filename, componentNamespace, config) {
+module.exports = function(allBlocks, filename, config) {
   const blocksByType = allBlocks.reduce(groupByType, {})
   const code = []
   for (const [type, blocks] of Object.entries(blocksByType)) {
@@ -28,7 +29,7 @@ module.exports = function(allBlocks, filename, componentNamespace, config) {
       const codeStr = applyTransformer(
         transformer,
         blocks,
-        componentNamespace,
+        vueOptionsNamespace,
         filename,
         config
       )

packages/vue2-jest/lib/process.js

@@ -10,7 +10,6 @@ const loadSrc = require('./utils').loadSrc
 const babelTransformer = require('babel-jest').default
 const generateCode = require('./generate-code')
 const mapLines = require('./map-lines')
-const vueComponentNamespace = require('./constants').vueComponentNamespace
 
 let isVue27 = false
 let compilerUtils
@@ -143,17 +142,13 @@ module.exports = function(src, filename, config) {
     filename
   })
 
-  const componentNamespace =
-    getVueJestConfig(config)['componentNamespace'] || vueComponentNamespace
-
   const templateResult = processTemplate(descriptor, filename, config)
   const scriptResult = processScript(descriptor.script, filename, config)
   const scriptSetupResult = processScriptSetup(descriptor, filename, config)
   const stylesResult = processStyle(descriptor.styles, filename, config)
   const customBlocksResult = processCustomBlocks(
     descriptor.customBlocks,
     filename,
-    componentNamespace,
     config
   )