test: more advanced & edge case tests

Author: haoqunjiang

package.json

@@ -57,13 +57,16 @@
     "memfs": "^3.1.2",
     "mini-css-extract-plugin": "^0.11.2",
     "normalize-newline": "^3.0.0",
+    "null-loader": "^4.0.1",
     "prettier": "^2.1.1",
     "pug": "^2.0.0",
     "pug-plain-loader": "^1.0.0",
+    "source-map": "^0.6.1",
     "style-loader": "^1.2.1",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "ts-jest": "^26.2.0",
+    "ts-loader": "^8.0.6",
     "typescript": "^4.0.2",
     "url-loader": "^4.1.0",
     "vue": "^3.0.0-rc.10",
@@ -75,6 +78,7 @@
   },
   "jest": {
     "preset": "ts-jest",
+    "testTimeout": 10000,
     "testEnvironment": "node",
     "testPathIgnorePatterns": [
       "<rootDir>/dist/",

test/advanced.spec.ts

@@ -1,16 +1,87 @@
-test.todo('support chaining with other loaders')
+import { SourceMapConsumer } from 'source-map'
+import { fs as mfs } from 'memfs'
+import { bundle, mockBundleAndRun } from './utils'
 
-test.todo('inherit queries on files')
+test('support chaining with other loaders', async () => {
+  const { componentModule } = await mockBundleAndRun({
+    entry: 'basic.vue',
+    modify: (config) => {
+      config!.module!.rules[0] = {
+        test: /\.vue$/,
+        use: ['vue-loader', require.resolve('./mock-loaders/js')],
+      }
+    },
+  })
 
-test.todo('expose file path as __file outside production')
+  expect(componentModule.data().msg).toBe('Changed!')
+})
 
-test.todo('no __file in production when exposeFilename disabled')
+test.skip('inherit queries on files', async () => {
+  const { componentModule } = await mockBundleAndRun({
+    entry: 'basic.vue?change',
+    modify: (config) => {
+      config!.module!.rules[0] = {
+        test: /\.vue$/,
+        use: ['vue-loader', require.resolve('./mock-loaders/query')],
+      }
+    },
+  })
 
-test.todo(
-  'expose file basename as __file in production when exposeFilename enabled'
-)
+  expect(componentModule.data().msg).toBe('Changed!')
+})
 
-test.todo('source map')
+test('expose file path as __file outside production', async () => {
+  const { componentModule } = await mockBundleAndRun({
+    entry: 'basic.vue',
+  })
+
+  expect(componentModule.__file).toBe('test/fixtures/basic.vue')
+})
+
+test('no __file in production when exposeFilename disabled', async () => {
+  const { componentModule } = await mockBundleAndRun({
+    mode: 'production',
+    entry: 'basic.vue',
+  })
+
+  expect(componentModule.__file).toBe(undefined)
+})
+
+test('expose file basename as __file in production when exposeFilename enabled', async () => {
+  const { componentModule } = await mockBundleAndRun({
+    mode: 'production',
+    entry: 'basic.vue',
+    vue: {
+      exposeFilename: true,
+    },
+  })
+  expect(componentModule.__file).toBe('basic.vue')
+})
+
+test.skip('source map', async () => {
+  const { code } = await bundle({
+    entry: 'basic.vue',
+    devtool: 'source-map',
+  })
+  const map = mfs.readFileSync('/test.build.js.map', 'utf-8')
+  const smc = new SourceMapConsumer(JSON.parse(map as string))
+  let line = 0
+  let col = 0
+  const targetRE = /^\s+msg: 'Hello from Component A!'/
+  code.split(/\r?\n/g).some((l, i) => {
+    if (targetRE.test(l)) {
+      line = i + 1
+      col = 0
+      return true
+    }
+  })
+  const pos = smc.originalPositionFor({
+    line: line,
+    column: col,
+  })
+  expect(pos.source.indexOf('basic.vue') > -1)
+  expect(pos.line).toBe(9)
+})
 
 test.todo('extract CSS')
 

test/edgeCases.spec.ts

@@ -1,24 +1,116 @@
+import { bundle, mockBundleAndRun, normalizeNewline } from './utils'
+
+// @ts-ignore
+function assertComponent({
+  instance,
+  componentModule,
+  window,
+  expectedMsg = 'Hello from Component A!',
+}) {
+  // <h2 class="red">{{msg}}</h2>
+  expect(instance.$el.tagName).toBe('H2')
+  expect(instance.$el.className).toBe('red')
+  expect(instance.$el.textContent).toBe(expectedMsg)
+
+  // @ts-ignore
+  expect(componentModule.data().msg).toContain(expectedMsg)
+
+  const style = normalizeNewline(
+    window.document.querySelector('style')!.textContent!
+  )
+  expect(style).toContain('comp-a h2 {\n  color: #f00;\n}')
+}
+
 // #1201
-test.todo('vue rule with include')
+test('vue rule with include', async () => {
+  const result = await mockBundleAndRun({
+    entry: 'basic.vue',
+    modify: (config) => {
+      config!.module!.rules[0] = {
+        test: /\.vue$/,
+        include: /fixtures/,
+        loader: 'vue-loader',
+      }
+    },
+  })
 
-test.todo('test-less oneOf rules')
+  assertComponent(result)
+})
 
-// #1209
-test.todo('babel-loader inline options')
+test.todo('test-less oneOf rules')
 
 // #1210
-test.todo('normalize multiple use + options')
+test('normalize multiple use + options', async () => {
+  await bundle({
+    entry: 'basic.vue',
+    modify: (config) => {
+      config!.module!.rules[0] = {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: 'vue-loader',
+            options: {},
+          },
+        ],
+      }
+    },
+  })
+})
 
 test.todo('should not duplicate css modules value imports')
 
 // #1213
 test.todo('html-webpack-plugin')
 
 // #1239
-test.todo('usage with null-loader')
+test('usage with null-loader', async () => {
+  await mockBundleAndRun({
+    entry: 'basic.vue',
+    modify: (config) => {
+      config!.module!.rules[1] = {
+        test: /\.css$/,
+        use: ['null-loader'],
+      }
+    },
+  })
+})
 
 // #1278
-test.todo('proper dedupe on src-imports with options')
+test('proper dedupe on src-imports with options', async () => {
+  const result = await mockBundleAndRun({
+    entry: 'ts.vue',
+    resolve: {
+      extensions: ['.ts', '.js'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          loader: 'ts-loader',
+          options: { appendTsSuffixTo: [/\.vue$/] },
+        },
+      ],
+    },
+  })
+
+  assertComponent(result)
+})
 
 // #1351
-test.todo('use with postLoader')
+test('use with postLoader', async () => {
+  const result = await mockBundleAndRun({
+    entry: 'basic.vue',
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          use: {
+            loader: require.resolve('./mock-loaders/js'),
+          },
+          enforce: 'post',
+        },
+      ],
+    },
+  })
+  assertComponent(Object.assign({ expectedMsg: 'Changed!' }, result))
+})

test/fixtures/App.ts

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  data() {
+    return {
+      msg: 'Hello from Component A!',
+    }
+  },
+  methods: {
+    someMethod(arg: string): string {
+      return 'hello'
+    },
+  },
+})

test/fixtures/ts.vue

@@ -0,0 +1,11 @@
+<template>
+  <h2 class="red">{{ msg }}</h2>
+</template>
+
+ <script src="./App.ts" lang="ts"></script>
+
+<style>
+comp-a h2 {
+  color: #f00;
+}
+</style>

test/mock-loaders/js.js

@@ -0,0 +1,3 @@
+module.exports = function (content) {
+  return content.replace(/Hello from Component A!/, 'Changed!')
+}

test/mock-loaders/query.js

@@ -0,0 +1,22 @@
+module.exports = function (content) {
+  const query = this.resourceQuery.slice(1)
+
+  if (/change/.test(query)) {
+    return `
+      <template>
+        <div>Changed!</div>
+      </template>
+      <script>
+      export default {
+        data () {
+          return {
+            msg: 'Changed!'
+          }
+        }
+      }
+      </script>
+    `
+  }
+
+  return content
+}

test/utils.ts

@@ -26,7 +26,7 @@ const baseConfig: webpack.Configuration = {
     rules: [
       {
         test: /\.vue$/,
-        use: 'vue-loader',
+        loader: 'vue-loader',
       },
       {
         test: /\.css$/,