|
1 | | -test('template', () => { |
| 1 | +const path = require('path') |
| 2 | +const { |
| 3 | + mockRender, |
| 4 | + mockBundleAndRun |
| 5 | +} = require('./utils') |
2 | 6 |
|
| 7 | +test('template with comments', done => { |
| 8 | + mockBundleAndRun({ |
| 9 | + entry: 'template-comment.vue' |
| 10 | + }, ({ window, module, rawModule }) => { |
| 11 | + expect(module.comments).toBe(true) |
| 12 | + const vnode = mockRender(module, { |
| 13 | + msg: 'hi' |
| 14 | + }) |
| 15 | + expect(vnode.tag).toBe('div') |
| 16 | + expect(vnode.children.length).toBe(2) |
| 17 | + expect(vnode.children[0].data.staticClass).toBe('red') |
| 18 | + expect(vnode.children[0].children[0].text).toBe('hi') |
| 19 | + expect(vnode.children[1].isComment).toBe(true) |
| 20 | + expect(vnode.children[1].text).toBe(' comment here ') |
| 21 | + done() |
| 22 | + }) |
| 23 | +}) |
| 24 | + |
| 25 | +test('transpile ES2015 features in template', done => { |
| 26 | + mockBundleAndRun({ |
| 27 | + entry: 'es2015.vue' |
| 28 | + }, ({ window, module }) => { |
| 29 | + const vnode = mockRender(module, { |
| 30 | + a: 'hello', |
| 31 | + b: true |
| 32 | + }) |
| 33 | + // <div :class="{[a]:true}"></div> |
| 34 | + expect(vnode.tag).toBe('div') |
| 35 | + expect(vnode.data.class['test-hello']).toBe(true) |
| 36 | + expect(vnode.data.class['b']).toBe(true) |
| 37 | + done() |
| 38 | + }) |
| 39 | +}) |
| 40 | + |
| 41 | +test('transform relative URLs and respects resolve alias', done => { |
| 42 | + mockBundleAndRun({ |
| 43 | + entry: 'resolve.vue', |
| 44 | + resolve: { |
| 45 | + alias: { |
| 46 | + fixtures: path.resolve(__dirname, './fixtures') |
| 47 | + } |
| 48 | + }, |
| 49 | + module: { |
| 50 | + rules: [ |
| 51 | + { test: /\.png$/, loader: 'file-loader?name=[name].[hash:6].[ext]' } |
| 52 | + ] |
| 53 | + } |
| 54 | + }, ({ window, module }) => { |
| 55 | + const vnode = mockRender(module) |
| 56 | + // <div> |
| 57 | + // <img src="logo.c9e00e.png"> |
| 58 | + // <img src="logo.c9e00e.png"> |
| 59 | + // </div> |
| 60 | + expect(vnode.children[0].tag).toBe('img') |
| 61 | + expect(vnode.children[0].data.attrs.src).toBe('logo.c9e00e.png') |
| 62 | + expect(vnode.children[2].tag).toBe('img') |
| 63 | + expect(vnode.children[2].data.attrs.src).toBe('logo.c9e00e.png') |
| 64 | + |
| 65 | + const style = window.document.querySelector('style').textContent |
| 66 | + expect(style).toContain('html { background-image: url(logo.c9e00e.png); }') |
| 67 | + expect(style).toContain('body { background-image: url(logo.c9e00e.png); }') |
| 68 | + done() |
| 69 | + }) |
| 70 | +}) |
| 71 | + |
| 72 | +test('transform srcset', done => { |
| 73 | + mockBundleAndRun({ |
| 74 | + entry: 'transform.vue', |
| 75 | + module: { |
| 76 | + rules: [ |
| 77 | + { |
| 78 | + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, |
| 79 | + loader: 'url-loader' |
| 80 | + } |
| 81 | + ] |
| 82 | + } |
| 83 | + }, ({ window, module }) => { |
| 84 | + function includeDataURL (s) { |
| 85 | + return !!s.match(/\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*/i) |
| 86 | + } |
| 87 | + const vnode = mockRender(module) |
| 88 | + // img tag |
| 89 | + expect(includeDataURL(vnode.children[0].data.attrs.src)).toBe(true) |
| 90 | + // image tag (SVG) |
| 91 | + expect(includeDataURL(vnode.children[2].children[0].data.attrs['xlink:href'])).toBe(true) |
| 92 | + const style = window.document.querySelector('style').textContent |
| 93 | + |
| 94 | + const dataURL = vnode.children[0].data.attrs.src |
| 95 | + |
| 96 | + // image tag with srcset |
| 97 | + expect(vnode.children[4].data.attrs.srcset).toBe(dataURL) |
| 98 | + expect(vnode.children[6].data.attrs.srcset).toBe(dataURL + ' 2x') |
| 99 | + // image tag with multiline srcset |
| 100 | + expect(vnode.children[8].data.attrs.srcset).toBe(dataURL + ', ' + dataURL + ' 2x') |
| 101 | + expect(vnode.children[10].data.attrs.srcset).toBe(dataURL + ' 2x, ' + dataURL) |
| 102 | + expect(vnode.children[12].data.attrs.srcset).toBe(dataURL + ' 2x, ' + dataURL + ' 3x') |
| 103 | + expect(vnode.children[14].data.attrs.srcset).toBe(dataURL + ', ' + dataURL + ' 2x, ' + dataURL + ' 3x') |
| 104 | + expect(vnode.children[16].data.attrs.srcset).toBe(dataURL + ' 2x, ' + dataURL + ' 3x') |
| 105 | + |
| 106 | + // style |
| 107 | + expect(includeDataURL(style)).toBe(true) |
| 108 | + done() |
| 109 | + }) |
| 110 | +}) |
| 111 | + |
| 112 | +// test('functional component with styles', done => { |
| 113 | +// mockBundleAndRun({ |
| 114 | +// entry: 'functional-style.vue' |
| 115 | +// }, ({ window, module, rawModule }) => { |
| 116 | +// expect(module.functional).toBe(true) |
| 117 | +// const vnode = mockRender(module) |
| 118 | +// // <div class="foo">hi</div> |
| 119 | +// expect(vnode.tag).toBe('div') |
| 120 | +// expect(vnode.data.class).toBe('foo') |
| 121 | +// expect(vnode.children[0].text).toBe('functional') |
| 122 | + |
| 123 | +// let style = window.document.querySelector('style').textContent |
| 124 | +// style = normalizeNewline(style) |
| 125 | +// expect(style).toContain('.foo { color: red;\n}') |
| 126 | +// done() |
| 127 | +// }) |
| 128 | +// }) |
| 129 | + |
| 130 | +test('functional template', done => { |
| 131 | + mockBundleAndRun({ |
| 132 | + entry: 'functional-root.vue', |
| 133 | + vue: { |
| 134 | + compilerOptions: { |
| 135 | + preserveWhitespace: false |
| 136 | + } |
| 137 | + } |
| 138 | + }, ({ window, module }) => { |
| 139 | + expect(module.components.Functional._compiled).toBe(true) |
| 140 | + expect(module.components.Functional.functional).toBe(true) |
| 141 | + expect(module.components.Functional.staticRenderFns).toBeDefined() |
| 142 | + expect(typeof module.components.Functional.render).toBe('function') |
| 143 | + |
| 144 | + const vnode = mockRender(module, { |
| 145 | + fn () { |
| 146 | + done() |
| 147 | + } |
| 148 | + }).children[0] |
| 149 | + |
| 150 | + // Basic vnode |
| 151 | + expect(vnode.children[0].data.staticClass).toBe('red') |
| 152 | + expect(vnode.children[0].children[0].text).toBe('hello') |
| 153 | + // Default slot vnode |
| 154 | + expect(vnode.children[1].tag).toBe('span') |
| 155 | + expect(vnode.children[1].children[0].text).toBe('hello') |
| 156 | + // Named slot vnode |
| 157 | + expect(vnode.children[2].tag).toBe('div') |
| 158 | + expect(vnode.children[2].children[0].text).toBe('Second slot') |
| 159 | + // // Scoped slot vnode |
| 160 | + expect(vnode.children[3].text).toBe('hello') |
| 161 | + // // Static content vnode |
| 162 | + expect(vnode.children[4].tag).toBe('div') |
| 163 | + expect(vnode.children[4].children[0].text).toBe('Some ') |
| 164 | + expect(vnode.children[4].children[1].tag).toBe('span') |
| 165 | + expect(vnode.children[4].children[1].children[0].text).toBe('text') |
| 166 | + // // v-if vnode |
| 167 | + expect(vnode.children[5].text).toBe('') |
| 168 | + |
| 169 | + vnode.children[6].data.on.click() |
| 170 | + }) |
| 171 | +}) |
| 172 | + |
| 173 | +// test('customizing template loaders', done => { |
| 174 | +// mockBundleAndRun({ |
| 175 | +// entry: 'markdown.vue' |
| 176 | +// }, ({ window, module }) => { |
| 177 | +// const vnode = mockRender(module, { |
| 178 | +// msg: 'hi' |
| 179 | +// }) |
| 180 | +// // <h2 id="-msg-">{{msg}}</h2> |
| 181 | +// expect(vnode.tag).toBe('h2') |
| 182 | +// expect(vnode.data.attrs.id).toBe('-msg-') |
| 183 | +// expect(vnode.children[0].text).toBe('hi') |
| 184 | +// done() |
| 185 | +// }) |
| 186 | +// }) |
| 187 | + |
| 188 | +test('custom compiler modules', done => { |
| 189 | + mockBundleAndRun({ |
| 190 | + entry: 'custom-module.vue', |
| 191 | + vue: { |
| 192 | + compilerOptions: { |
| 193 | + modules: [ |
| 194 | + { |
| 195 | + postTransformNode: el => { |
| 196 | + if (el.staticStyle) { |
| 197 | + el.staticStyle = `$processStyle(${el.staticStyle})` |
| 198 | + } |
| 199 | + if (el.styleBinding) { |
| 200 | + el.styleBinding = `$processStyle(${el.styleBinding})` |
| 201 | + } |
| 202 | + } |
| 203 | + } |
| 204 | + ] |
| 205 | + } |
| 206 | + } |
| 207 | + }, ({ window, module }) => { |
| 208 | + const results = [] |
| 209 | + // var vnode = |
| 210 | + mockRender( |
| 211 | + Object.assign(module, { methods: { $processStyle: style => results.push(style) }}), |
| 212 | + { transform: 'translateX(10px)' } |
| 213 | + ) |
| 214 | + expect(results).toEqual([ |
| 215 | + { 'flex-direction': 'row' }, |
| 216 | + { 'transform': 'translateX(10px)' } |
| 217 | + ]) |
| 218 | + done() |
| 219 | + }) |
| 220 | +}) |
| 221 | + |
| 222 | +test('custom compiler directives', done => { |
| 223 | + mockBundleAndRun({ |
| 224 | + entry: 'custom-directive.vue', |
| 225 | + vue: { |
| 226 | + compilerOptions: { |
| 227 | + directives: { |
| 228 | + i18n (el, dir) { |
| 229 | + if (dir.name === 'i18n' && dir.value) { |
| 230 | + el.i18n = dir.value |
| 231 | + if (!el.props) { |
| 232 | + el.props = [] |
| 233 | + } |
| 234 | + el.props.push({ name: 'textContent', value: `_s(${JSON.stringify(dir.value)})` }) |
| 235 | + } |
| 236 | + } |
| 237 | + } |
| 238 | + } |
| 239 | + } |
| 240 | + }, ({ window, module }) => { |
| 241 | + const vnode = mockRender(module) |
| 242 | + expect(vnode.data.domProps.textContent).toBe('keypath') |
| 243 | + done() |
| 244 | + }) |
3 | 245 | }) |
0 commit comments