diff --git a/.gitignore b/.gitignore index bd2868af..606f99ec 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,4 @@ pids package-lock.json /e2e/**/yarn.lock +.vscode diff --git a/e2e/2.x/basic/__snapshots__/test.js.snap b/e2e/2.x/basic/__snapshots__/test.js.snap index 646dd425..e3eb7458 100644 --- a/e2e/2.x/basic/__snapshots__/test.js.snap +++ b/e2e/2.x/basic/__snapshots__/test.js.snap @@ -2,35 +2,48 @@ exports[`generates source maps for .vue files 1`] = ` Object { - "mappings": ";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAHA;AAKA;AAPA;AASA;AACA;AACA;AACA;AAFA;AAIA;AACA;AACA;AACA;AACA;AAHA;AAjBA;;;;AAvBA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA", - "names": Array [], + "file": "/home/runner/work/vue-jest/vue-jest/e2e/2.x/basic/components/Basic.vue", + "mappings": ";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;eAEe;AACbA,MAAI,EAAE,OADO;AAEbC,UAAQ,EAAE;AACRC,kBAAc,EAAE,SAASA,cAAT,GAA0B;AACxC,aAAO;AACLC,WAAG,EAAE,KAAKC,OADL;AAELC,YAAI,EAAE,CAAC,KAAKD,OAFP;AAGLE,cAAM,EAAE,KAAKF;AAHR,OAAP;AAKD;AAPO,GAFG;AAWbG,MAAI,EAAE,SAASA,IAAT,GAAgB;AACpB,WAAO;AACLC,SAAG,EAAE,4BADA;AAELJ,aAAO,EAAE;AAFJ,KAAP;AAID,GAhBY;AAiBbK,SAAO,EAAE;AACPC,eAAW,EAAE,SAASA,WAAT,GAAuB;AAClC,WAAKN,OAAL,GAAe,CAAC,KAAKA,OAArB;AACD;AAHM;AAjBI,C", + "names": Array [ + "name", + "computed", + "headingClasses", + "red", + "isCrazy", + "blue", + "shadow", + "data", + "msg", + "methods", + "toggleClass", + ], "sources": Array [ "Basic.vue", ], "sourcesContent": Array [ - " - - - - + "// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// - ", ], "version": 3, @@ -63,8 +75,21 @@ export default { exports[`generates source maps using src attributes 1`] = ` Object { - "mappings": ";;;;;;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAHA;AAKA;AAPA;AASA;AACA;AACA;AACA;AAFA;AAIA;AACA;AACA;AACA;AACA;AAHA;AAjBA", - "names": Array [], + "file": "/home/runner/work/vue-jest/vue-jest/e2e/2.x/basic/components/SourceMapsSrc.vue", + "mappings": ";;;;;;eAAe;AACbA,MAAI,EAAE,OADO;AAEbC,UAAQ,EAAE;AACRC,kBAAc,EAAE,SAASA,cAAT,GAA0B;AACxC,aAAO;AACLC,WAAG,EAAE,KAAKC,OADL;AAELC,YAAI,EAAE,CAAC,KAAKD,OAFP;AAGLE,cAAM,EAAE,KAAKF;AAHR,OAAP;AAKD;AAPO,GAFG;AAWbG,MAAI,EAAE,SAASA,IAAT,GAAgB;AACpB,WAAO;AACLC,SAAG,EAAE,4BADA;AAELJ,aAAO,EAAE;AAFJ,KAAP;AAID,GAhBY;AAiBbK,SAAO,EAAE;AACPC,eAAW,EAAE,SAASA,WAAT,GAAuB;AAClC,WAAKN,OAAL,GAAe,CAAC,KAAKA,OAArB;AACD;AAHM;AAjBI,C", + "names": Array [ + "name", + "computed", + "headingClasses", + "red", + "isCrazy", + "blue", + "shadow", + "data", + "msg", + "methods", + "toggleClass", + ], "sources": Array [ "SourceMapsSrc.vue", ], diff --git a/e2e/2.x/basic/test.js b/e2e/2.x/basic/test.js index 03c124d0..6354139b 100644 --- a/e2e/2.x/basic/test.js +++ b/e2e/2.x/basic/test.js @@ -52,7 +52,7 @@ test('generates source maps for .vue files', () => { config }) - expect(map).toMatchSnapshot() + expect(JSON.parse(map)).toMatchSnapshot() }) test('generates source maps using src attributes', () => { @@ -67,7 +67,7 @@ test('generates source maps using src attributes', () => { config }) - expect(map).toMatchSnapshot() + expect(JSON.parse(map)).toMatchSnapshot() }) test('processes .vue file using jsx', () => { diff --git a/package.json b/package.json index 6522ba8f..bdcea211 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,10 @@ "pre-commit": "lint-staged" } }, + "prettier": { + "semi": false, + "singleQuote": true + }, "lint-staged": { "*.{js,json,css,md,vue}": [ "yarn format", diff --git a/packages/vue2-jest/lib/generate-code.js b/packages/vue2-jest/lib/generate-code.js index 97737f39..2ca9a488 100644 --- a/packages/vue2-jest/lib/generate-code.js +++ b/packages/vue2-jest/lib/generate-code.js @@ -1,50 +1,64 @@ const namespace = require('./constants').vueOptionsNamespace +const { SourceNode, SourceMapConsumer } = require('source-map') -const splitRE = /\r?\n/g +function addToSourceMap(node, result) { + if (result && result.code) { + if (result.map) { + node.add( + SourceNode.fromStringWithSourceMap( + result.code, + new SourceMapConsumer(result.map) + ) + ) + } else { + node.add(result.code) + } + } +} module.exports = function generateCode( scriptResult, templateResult, stylesResult, customBlocksResult, - isFunctional + isFunctional, + filename ) { - let output = '' - let renderFnStartLine - let renderFnEndLine + var node = new SourceNode(null, null) if (scriptResult) { - output += `${scriptResult.code};\n` + addToSourceMap(node, scriptResult) } else { - output += + node.add( `Object.defineProperty(exports, "__esModule", {\n` + - ` value: true\n` + - `});\n` + - 'module.exports.default = {};\n' + ` value: true\n` + + `});\n` + + 'module.exports.default = {};\n' + ) } - output += + node.add( `var ${namespace} = typeof exports.default === 'function' ` + - `? exports.default.options ` + - `: exports.default\n` + `? exports.default.options ` + + `: exports.default\n` + ) if (templateResult) { - renderFnStartLine = output.split(splitRE).length - templateResult.code = templateResult.code.replace( + addToSourceMap(node, templateResult) + + node.replaceRight( 'var _c = _vm._self._c || _h', '/* istanbul ignore next */\nvar _c = _vm._self._c || _h' ) - output += `${templateResult.code}\n` - renderFnEndLine = output.split(splitRE).length - - output += + node.add( `__options__.render = render\n` + - `${namespace}.staticRenderFns = staticRenderFns\n` + `${namespace}.staticRenderFns = staticRenderFns\n` + ) if (isFunctional) { - output += `${namespace}.functional = true\n` - output += `${namespace}._compiled = true\n` + node.add(`${namespace}.functional = true\n`) + node.add(`${namespace}._compiled = true\n`) } } @@ -59,32 +73,32 @@ module.exports = function generateCode( `this['${moduleName}'], ${code});\n` ) .join('') + if (isFunctional) { - output += + node.add( `;(function() {\n` + - ` var originalRender = ${namespace}.render\n` + - ` var styleFn = function () { ${styleStr} }\n` + - ` ${namespace}.render = function renderWithStyleInjection (h, context) {\n` + - ` styleFn.call(context)\n` + - ` return originalRender(h, context)\n` + - ` }\n` + - `})()\n` + ` var originalRender = ${namespace}.render\n` + + ` var styleFn = function () { ${styleStr} }\n` + + ` ${namespace}.render = function renderWithStyleInjection (h, context) {\n` + + ` styleFn.call(context)\n` + + ` return originalRender(h, context)\n` + + ` }\n` + + `})()\n` + ) } else { - output += + node.add( `;(function() {\n` + - ` var beforeCreate = ${namespace}.beforeCreate\n` + - ` var styleFn = function () { ${styleStr} }\n` + - ` ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` + - `})()\n` + ` var beforeCreate = ${namespace}.beforeCreate\n` + + ` var styleFn = function () { ${styleStr} }\n` + + ` ${namespace}.beforeCreate = beforeCreate ? [].concat(beforeCreate, styleFn) : [styleFn]\n` + + `})()\n` + ) } } if (customBlocksResult) { - output += `;\n ${customBlocksResult}` - } - return { - code: output, - renderFnStartLine, - renderFnEndLine + node.add(`;\n ${customBlocksResult}`) } + + return node.toStringWithSourceMap({ file: filename }) } diff --git a/packages/vue2-jest/lib/generate-source-map.js b/packages/vue2-jest/lib/generate-source-map.js deleted file mode 100644 index ec9ec089..00000000 --- a/packages/vue2-jest/lib/generate-source-map.js +++ /dev/null @@ -1,69 +0,0 @@ -const path = require('path') -const sourceMap = require('source-map') -const splitRE = /\r?\n/g - -module.exports = function generateSourceMap( - scriptResult, - src, - filename, - renderFnStartLine, - renderFnEndLine, - templateLine -) { - const file = path.basename(filename) - const map = new sourceMap.SourceMapGenerator() - - const scriptFromExternalSrc = scriptResult && scriptResult.externalSrc - - // If script uses external file for content (using the src attribute) then - // map result to this file, instead of original. - const srcContent = scriptFromExternalSrc ? scriptResult.externalSrc : src - - map.setSourceContent(file, srcContent) - if (scriptResult) { - let inputMapConsumer = - scriptResult.map && new sourceMap.SourceMapConsumer(scriptResult.map) - scriptResult.code.split(splitRE).forEach(function(line, index) { - let ln = index + 1 - let originalLine = inputMapConsumer - ? inputMapConsumer.originalPositionFor({ line: ln, column: 0 }).line - : ln - if (originalLine) { - map.addMapping({ - source: file, - generated: { - line: ln, - column: 0 - }, - original: { - line: originalLine, - column: 0 - } - }) - } - }) - } - - // If script is from external src then the source map will only show the - // script section. We won't map the generated render function to this file, - // because the coverage report would be confusing - if (scriptFromExternalSrc) { - return map - } - - for (; renderFnStartLine < renderFnEndLine; renderFnStartLine++) { - map.addMapping({ - source: file, - generated: { - line: renderFnStartLine, - column: 0 - }, - original: { - line: templateLine, - column: 0 - } - }) - } - - return map -} diff --git a/packages/vue2-jest/lib/process.js b/packages/vue2-jest/lib/process.js index b87cd295..4a0589c7 100644 --- a/packages/vue2-jest/lib/process.js +++ b/packages/vue2-jest/lib/process.js @@ -1,7 +1,4 @@ -const splitRE = /\r?\n/g - const VueTemplateCompiler = require('vue-template-compiler') -const generateSourceMap = require('./generate-source-map') const coffeescriptTransformer = require('./transformers/coffee') const _processStyle = require('./process-style') const processCustomBlocks = require('./process-custom-blocks') @@ -115,28 +112,17 @@ module.exports = function(src, filename, config) { descriptor.script.content && /functional:\s*true/.test(descriptor.script.content)) - const templateStart = descriptor.template && descriptor.template.start - const templateLine = src.slice(0, templateStart).split(splitRE).length - const output = generateCode( scriptResult, templateResult, stylesResult, customBlocksResult, - isFunctional + isFunctional, + filename ) - const map = generateSourceMap( - scriptResult, - src, - filename, - output.renderFnStartLine, - output.renderFnEndLine, - templateLine - ).toJSON() - return { code: output.code, - map + map: output.map.toString() } }