|
1 | | -test('advanced', () => { |
| 1 | +const path = require('path') |
| 2 | +const { SourceMapConsumer } = require('source-map') |
| 3 | +const normalizeNewline = require('normalize-newline') |
| 4 | +const MiniCssExtractPlugin = require('mini-css-extract-plugin') |
2 | 5 |
|
| 6 | +const { |
| 7 | + mfs, |
| 8 | + genId, |
| 9 | + bundle, |
| 10 | + mockBundleAndRun |
| 11 | +} = require('./utils') |
| 12 | + |
| 13 | +test('support chaining with other loaders', done => { |
| 14 | + mockBundleAndRun({ |
| 15 | + entry: 'basic.vue', |
| 16 | + modify: config => { |
| 17 | + config.module.rules[0] = { |
| 18 | + test: /\.vue$/, |
| 19 | + use: [ |
| 20 | + 'vue-loader', |
| 21 | + require.resolve('./mock-loaders/js') |
| 22 | + ] |
| 23 | + } |
| 24 | + } |
| 25 | + }, ({ module }) => { |
| 26 | + expect(module.data().msg).toBe('Changed!') |
| 27 | + done() |
| 28 | + }) |
| 29 | +}) |
| 30 | + |
| 31 | +test('expose filename', done => { |
| 32 | + mockBundleAndRun({ |
| 33 | + entry: 'basic.vue' |
| 34 | + }, ({ module }) => { |
| 35 | + expect(module.__file).toBe(path.normalize('test/fixtures/basic.vue')) |
| 36 | + done() |
| 37 | + }) |
| 38 | +}) |
| 39 | + |
| 40 | +test('source map', done => { |
| 41 | + bundle({ |
| 42 | + entry: 'basic.vue', |
| 43 | + devtool: '#source-map' |
| 44 | + }, code => { |
| 45 | + const map = mfs.readFileSync('/test.build.js.map', 'utf-8') |
| 46 | + const smc = new SourceMapConsumer(JSON.parse(map)) |
| 47 | + let line |
| 48 | + let col |
| 49 | + const targetRE = /^\s+msg: 'Hello from Component A!'/ |
| 50 | + code.split(/\r?\n/g).some((l, i) => { |
| 51 | + if (targetRE.test(l)) { |
| 52 | + line = i + 1 |
| 53 | + col = 0 |
| 54 | + return true |
| 55 | + } |
| 56 | + }) |
| 57 | + const pos = smc.originalPositionFor({ |
| 58 | + line: line, |
| 59 | + column: col |
| 60 | + }) |
| 61 | + expect(pos.source.indexOf('basic.vue') > -1) |
| 62 | + expect(pos.line).toBe(9) |
| 63 | + done() |
| 64 | + }) |
| 65 | +}) |
| 66 | + |
| 67 | +test('extract CSS', done => { |
| 68 | + bundle({ |
| 69 | + entry: 'extract-css.vue', |
| 70 | + modify: config => { |
| 71 | + config.module.rules = [ |
| 72 | + { |
| 73 | + test: /\.vue$/, |
| 74 | + use: 'vue-loader' |
| 75 | + }, |
| 76 | + { |
| 77 | + test: /\.css$/, |
| 78 | + use: [ |
| 79 | + MiniCssExtractPlugin.loader, |
| 80 | + 'css-loader' |
| 81 | + ] |
| 82 | + }, |
| 83 | + { |
| 84 | + test: /\.stylus$/, |
| 85 | + use: [ |
| 86 | + MiniCssExtractPlugin.loader, |
| 87 | + 'css-loader', |
| 88 | + 'stylus-loader' |
| 89 | + ] |
| 90 | + } |
| 91 | + ] |
| 92 | + }, |
| 93 | + plugins: [ |
| 94 | + new MiniCssExtractPlugin({ |
| 95 | + filename: 'test.output.css' |
| 96 | + }) |
| 97 | + ] |
| 98 | + }, code => { |
| 99 | + const css = normalizeNewline(mfs.readFileSync('/test.output.css').toString()) |
| 100 | + const id = `data-v-${genId('extract-css.vue')}` |
| 101 | + expect(css).toContain(`h1 {\n color: #f00;\n}`) |
| 102 | + // extract + scoped |
| 103 | + expect(css).toContain(`h2[${id}] {\n color: green;\n}`) |
| 104 | + done() |
| 105 | + }) |
3 | 106 | }) |
| 107 | + |
| 108 | +// TODO |
| 109 | +// test('multiple rule definitions', done => { |
| 110 | +// mockBundleAndRun({ |
| 111 | +// modify: config => { |
| 112 | +// // remove default rule |
| 113 | +// config.module.rules.shift() |
| 114 | +// }, |
| 115 | +// entry: './test/fixtures/multiple-rules.js', |
| 116 | +// module: { |
| 117 | +// rules: [ |
| 118 | +// { |
| 119 | +// test: /\.vue$/, |
| 120 | +// oneOf: [ |
| 121 | +// { |
| 122 | +// include: /-1\.vue$/, |
| 123 | +// loader: loaderPath, |
| 124 | +// options: { |
| 125 | +// postcss: [ |
| 126 | +// css => { |
| 127 | +// css.walkDecls('font-size', decl => { |
| 128 | +// decl.value = `${parseInt(decl.value, 10) * 2}px` |
| 129 | +// }) |
| 130 | +// } |
| 131 | +// ], |
| 132 | +// compilerModules: [{ |
| 133 | +// postTransformNode: el => { |
| 134 | +// el.staticClass = '"multiple-rule-1"' |
| 135 | +// } |
| 136 | +// }] |
| 137 | +// } |
| 138 | +// }, |
| 139 | +// { |
| 140 | +// include: /-2\.vue$/, |
| 141 | +// loader: loaderPath, |
| 142 | +// options: { |
| 143 | +// postcss: [ |
| 144 | +// css => { |
| 145 | +// css.walkDecls('font-size', decl => { |
| 146 | +// decl.value = `${parseInt(decl.value, 10) / 2}px` |
| 147 | +// }) |
| 148 | +// } |
| 149 | +// ], |
| 150 | +// compilerModules: [{ |
| 151 | +// postTransformNode: el => { |
| 152 | +// el.staticClass = '"multiple-rule-2"' |
| 153 | +// } |
| 154 | +// }] |
| 155 | +// } |
| 156 | +// } |
| 157 | +// ] |
| 158 | +// } |
| 159 | +// ] |
| 160 | +// } |
| 161 | +// }, (window, module) => { |
| 162 | +// const vnode1 = mockRender(window.rules[0]) |
| 163 | +// const vnode2 = mockRender(window.rules[1]) |
| 164 | +// expect(vnode1.data.staticClass).toBe('multiple-rule-1') |
| 165 | +// expect(vnode2.data.staticClass).toBe('multiple-rule-2') |
| 166 | +// const styles = window.document.querySelectorAll('style') |
| 167 | +// const expr = /\.multiple-rule-\d\s*\{\s*font-size:\s*([.0-9]+)px;/ |
| 168 | +// for (let i = 0, l = styles.length; i < l; i++) { |
| 169 | +// const content = styles[i].textContent |
| 170 | +// if (expr.test(content)) { |
| 171 | +// expect(parseFloat(RegExp.$1)).toBe(14) |
| 172 | +// } |
| 173 | +// } |
| 174 | +// done() |
| 175 | +// }) |
| 176 | +// }) |
0 commit comments