feat: configuring Pug compiler from vue-jest configuration (#81)

Author: sandst1

README.md

@@ -57,6 +57,22 @@ vue-jest compiles the script and template of SFCs into a JavaScript file that Je
 ### Supported template languages
 
 - **pug** (`lang="pug"`)
+  - To give options for the Pug compiler, enter them into the Jest configuration.
+  The options will be passed to pug.compile().
+  ```js
+    // package.json
+    {
+      "jest": {
+        "globals": {
+          "vue-jest": {
+            "pug": {
+              "basedir": "mybasedir"
+            }
+          }
+        }
+      }
+    }
+  ``` 
 - **jade** (`lang="jade"`)
 - **haml** (`lang="haml"`)
 

lib/compilers/pug-compiler.js

@@ -1,12 +1,13 @@
 var ensureRequire = require('../ensure-require.js')
 const throwError = require('../throw-error')
 
-module.exports = function (raw) {
+module.exports = function (raw, config) {
+  const options = (config && config['pug']) || {}
   var html
   ensureRequire('pug', 'pug')
   var jade = require('pug')
   try {
-    html = jade.compile(raw)()
+    html = jade.compile(raw, options)()
   } catch (err) {
     throwError(err)
   }

lib/process.js

@@ -72,7 +72,7 @@ module.exports = function (src, filePath, jestConfig) {
       parts.template.content = fs.readFileSync(join(filePath, '..', parts.template.src), 'utf8')
     }
 
-    const renderFunctions = compileTemplate(parts.template)
+    const renderFunctions = compileTemplate(parts.template, config)
 
     output += '__vue__options__.render = ' + renderFunctions.render + '\n' +
       '__vue__options__.staticRenderFns = ' + renderFunctions.staticRenderFns + '\n'

lib/template-compiler.js

@@ -6,9 +6,9 @@ var compileJade = require('./compilers/jade-compiler')
 var compileHaml = require('./compilers/haml-compiler')
 const throwError = require('./throw-error')
 
-function getTemplateContent (templatePart) {
+function getTemplateContent (templatePart, config) {
   if (templatePart.lang === 'pug') {
-    return compilePug(templatePart.content)
+    return compilePug(templatePart.content, config)
   }
   if (templatePart.lang === 'jade') {
     return compileJade(templatePart.content)
@@ -19,8 +19,8 @@ function getTemplateContent (templatePart) {
   return templatePart.content
 }
 
-module.exports = function compileTemplate (templatePart) {
-  var templateContent = getTemplateContent(templatePart)
+module.exports = function compileTemplate (templatePart, config) {
+  var templateContent = getTemplateContent(templatePart, config)
 
   var compiled = vueCompiler.compile(templateContent)
   if (compiled.errors.length) {

test/pug.spec.js

@@ -1,8 +1,28 @@
 import { shallow } from 'vue-test-utils'
+import { resolve } from 'path'
 import Pug from './resources/Pug.vue'
+import jestVue from '../vue-jest'
+import { readFileSync } from 'fs'
 
 test('processes .vue file with pug template', () => {
   const wrapper = shallow(Pug)
   expect(wrapper.is('div')).toBe(true)
   expect(wrapper.hasClass('pug')).toBe(true)
 })
+
+test('supports global pug options and extends templates correctly from .pug files', () => {
+  const filePath = resolve(__dirname, './resources/PugExtends.vue')
+  const fileString = readFileSync(filePath, { encoding: 'utf8' })
+  const compiled = jestVue.process(fileString, filePath, {
+    globals: {
+      'vue-jest': {
+        pug: {
+          basedir: 'test'
+        }
+      }
+    }
+  })
+
+  expect(compiled.code).toContain('pug-base')
+  expect(compiled.code).toContain('pug-extended')
+})

test/resources/PugBase.pug

@@ -0,0 +1,2 @@
+div(class='pug-base')
+  block component

test/resources/PugExtends.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+  extends /resources/PugBase.pug
+  block component
+    div(class="pug-extended")
+</template>
+
+<script>
+    export default {
+        name: 'pug'
+    }
+</script>