parser.spec.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811
  1. import { parse } from 'compiler/parser/index'
  2. import { extend } from 'shared/util'
  3. import { baseOptions } from 'web/compiler/options'
  4. import { isIE, isEdge } from 'core/util/env'
  5. describe('parser', () => {
  6. it('simple element', () => {
  7. const ast = parse('<h1>hello world</h1>', baseOptions)
  8. expect(ast.tag).toBe('h1')
  9. expect(ast.plain).toBe(true)
  10. expect(ast.children[0].text).toBe('hello world')
  11. })
  12. it('interpolation in element', () => {
  13. const ast = parse('<h1>{{msg}}</h1>', baseOptions)
  14. expect(ast.tag).toBe('h1')
  15. expect(ast.plain).toBe(true)
  16. expect(ast.children[0].expression).toBe('_s(msg)')
  17. })
  18. it('child elements', () => {
  19. const ast = parse('<ul><li>hello world</li></ul>', baseOptions)
  20. expect(ast.tag).toBe('ul')
  21. expect(ast.plain).toBe(true)
  22. expect(ast.children[0].tag).toBe('li')
  23. expect(ast.children[0].plain).toBe(true)
  24. expect(ast.children[0].children[0].text).toBe('hello world')
  25. expect(ast.children[0].parent).toBe(ast)
  26. })
  27. it('unary element', () => {
  28. const ast = parse('<hr>', baseOptions)
  29. expect(ast.tag).toBe('hr')
  30. expect(ast.plain).toBe(true)
  31. expect(ast.children.length).toBe(0)
  32. })
  33. it('svg element', () => {
  34. const ast = parse('<svg><text>hello world</text></svg>', baseOptions)
  35. expect(ast.tag).toBe('svg')
  36. expect(ast.ns).toBe('svg')
  37. expect(ast.plain).toBe(true)
  38. expect(ast.children[0].tag).toBe('text')
  39. expect(ast.children[0].children[0].text).toBe('hello world')
  40. expect(ast.children[0].parent).toBe(ast)
  41. })
  42. it('camelCase element', () => {
  43. const ast = parse('<MyComponent><p>hello world</p></MyComponent>', baseOptions)
  44. expect(ast.tag).toBe('MyComponent')
  45. expect(ast.plain).toBe(true)
  46. expect(ast.children[0].tag).toBe('p')
  47. expect(ast.children[0].plain).toBe(true)
  48. expect(ast.children[0].children[0].text).toBe('hello world')
  49. expect(ast.children[0].parent).toBe(ast)
  50. })
  51. it('forbidden element', () => {
  52. // style
  53. const styleAst = parse('<style>error { color: red; }</style>', baseOptions)
  54. expect(styleAst.tag).toBe('style')
  55. expect(styleAst.plain).toBe(true)
  56. expect(styleAst.forbidden).toBe(true)
  57. expect(styleAst.children[0].text).toBe('error { color: red; }')
  58. expect('Templates should only be responsible for mapping the state').toHaveBeenWarned()
  59. // script
  60. const scriptAst = parse('<script type="text/javascript">alert("hello world!")</script>', baseOptions)
  61. expect(scriptAst.tag).toBe('script')
  62. expect(scriptAst.plain).toBe(false)
  63. expect(scriptAst.forbidden).toBe(true)
  64. expect(scriptAst.children[0].text).toBe('alert("hello world!")')
  65. expect('Templates should only be responsible for mapping the state').toHaveBeenWarned()
  66. })
  67. it('not contain root element', () => {
  68. parse('hello world', baseOptions)
  69. expect('Component template requires a root element, rather than just text').toHaveBeenWarned()
  70. })
  71. it('warn text before root element', () => {
  72. parse('before root {{ interpolation }}<div></div>', baseOptions)
  73. expect('text "before root {{ interpolation }}" outside root element will be ignored.').toHaveBeenWarned()
  74. })
  75. it('warn text after root element', () => {
  76. parse('<div></div>after root {{ interpolation }}', baseOptions)
  77. expect('text "after root {{ interpolation }}" outside root element will be ignored.').toHaveBeenWarned()
  78. })
  79. it('warn multiple root elements', () => {
  80. parse('<div></div><div></div>', baseOptions)
  81. expect('Component template should contain exactly one root element').toHaveBeenWarned()
  82. })
  83. it('remove duplicate whitespace text nodes caused by comments', () => {
  84. const ast = parse(`<div><a></a> <!----> <a></a></div>`, baseOptions)
  85. expect(ast.children.length).toBe(3)
  86. expect(ast.children[0].tag).toBe('a')
  87. expect(ast.children[1].text).toBe(' ')
  88. expect(ast.children[2].tag).toBe('a')
  89. })
  90. it('remove text nodes between v-if conditions', () => {
  91. const ast = parse(`<div><div v-if="1"></div> <div v-else-if="2"></div> <div v-else></div> <span></span></div>`, baseOptions)
  92. expect(ast.children.length).toBe(3)
  93. expect(ast.children[0].tag).toBe('div')
  94. expect(ast.children[0].ifConditions.length).toBe(3)
  95. expect(ast.children[1].text).toBe(' ') // text
  96. expect(ast.children[2].tag).toBe('span')
  97. })
  98. it('warn non whitespace text between v-if conditions', () => {
  99. parse(`<div><div v-if="1"></div> foo <div v-else></div></div>`, baseOptions)
  100. expect(`text "foo" between v-if and v-else(-if) will be ignored`).toHaveBeenWarned()
  101. })
  102. it('not warn 2 root elements with v-if and v-else', () => {
  103. parse('<div v-if="1"></div><div v-else></div>', baseOptions)
  104. expect('Component template should contain exactly one root element')
  105. .not.toHaveBeenWarned()
  106. })
  107. it('not warn 3 root elements with v-if, v-else-if and v-else', () => {
  108. parse('<div v-if="1"></div><div v-else-if="2"></div><div v-else></div>', baseOptions)
  109. expect('Component template should contain exactly one root element')
  110. .not.toHaveBeenWarned()
  111. })
  112. it('not warn 2 root elements with v-if and v-else on separate lines', () => {
  113. parse(`
  114. <div v-if="1"></div>
  115. <div v-else></div>
  116. `, baseOptions)
  117. expect('Component template should contain exactly one root element')
  118. .not.toHaveBeenWarned()
  119. })
  120. it('not warn 3 or more root elements with v-if, v-else-if and v-else on separate lines', () => {
  121. parse(`
  122. <div v-if="1"></div>
  123. <div v-else-if="2"></div>
  124. <div v-else></div>
  125. `, baseOptions)
  126. expect('Component template should contain exactly one root element')
  127. .not.toHaveBeenWarned()
  128. parse(`
  129. <div v-if="1"></div>
  130. <div v-else-if="2"></div>
  131. <div v-else-if="3"></div>
  132. <div v-else-if="4"></div>
  133. <div v-else></div>
  134. `, baseOptions)
  135. expect('Component template should contain exactly one root element')
  136. .not.toHaveBeenWarned()
  137. })
  138. it('generate correct ast for 2 root elements with v-if and v-else on separate lines', () => {
  139. const ast = parse(`
  140. <div v-if="1"></div>
  141. <p v-else></p>
  142. `, baseOptions)
  143. expect(ast.tag).toBe('div')
  144. expect(ast.ifConditions[1].block.tag).toBe('p')
  145. })
  146. it('generate correct ast for 3 or more root elements with v-if and v-else on separate lines', () => {
  147. const ast = parse(`
  148. <div v-if="1"></div>
  149. <span v-else-if="2"></span>
  150. <p v-else></p>
  151. `, baseOptions)
  152. expect(ast.tag).toBe('div')
  153. expect(ast.ifConditions[0].block.tag).toBe('div')
  154. expect(ast.ifConditions[1].block.tag).toBe('span')
  155. expect(ast.ifConditions[2].block.tag).toBe('p')
  156. const astMore = parse(`
  157. <div v-if="1"></div>
  158. <span v-else-if="2"></span>
  159. <div v-else-if="3"></div>
  160. <span v-else-if="4"></span>
  161. <p v-else></p>
  162. `, baseOptions)
  163. expect(astMore.tag).toBe('div')
  164. expect(astMore.ifConditions[0].block.tag).toBe('div')
  165. expect(astMore.ifConditions[1].block.tag).toBe('span')
  166. expect(astMore.ifConditions[2].block.tag).toBe('div')
  167. expect(astMore.ifConditions[3].block.tag).toBe('span')
  168. expect(astMore.ifConditions[4].block.tag).toBe('p')
  169. })
  170. it('warn 2 root elements with v-if', () => {
  171. parse('<div v-if="1"></div><div v-if="2"></div>', baseOptions)
  172. expect('Component template should contain exactly one root element').toHaveBeenWarned()
  173. })
  174. it('warn 3 root elements with v-if and v-else on first 2', () => {
  175. parse('<div v-if="1"></div><div v-else></div><div></div>', baseOptions)
  176. expect('Component template should contain exactly one root element').toHaveBeenWarned()
  177. })
  178. it('warn 3 root elements with v-if and v-else-if on first 2', () => {
  179. parse('<div v-if="1"></div><div v-else-if></div><div></div>', baseOptions)
  180. expect('Component template should contain exactly one root element').toHaveBeenWarned()
  181. })
  182. it('warn 4 root elements with v-if, v-else-if and v-else on first 2', () => {
  183. parse('<div v-if="1"></div><div v-else-if></div><div v-else></div><div></div>', baseOptions)
  184. expect('Component template should contain exactly one root element').toHaveBeenWarned()
  185. })
  186. it('warn 2 root elements with v-if and v-else with v-for on 2nd', () => {
  187. parse('<div v-if="1"></div><div v-else v-for="i in [1]"></div>', baseOptions)
  188. expect('Cannot use v-for on stateful component root element because it renders multiple elements')
  189. .toHaveBeenWarned()
  190. })
  191. it('warn 2 root elements with v-if and v-else-if with v-for on 2nd', () => {
  192. parse('<div v-if="1"></div><div v-else-if="2" v-for="i in [1]"></div>', baseOptions)
  193. expect('Cannot use v-for on stateful component root element because it renders multiple elements')
  194. .toHaveBeenWarned()
  195. })
  196. it('warn <template> as root element', () => {
  197. parse('<template></template>', baseOptions)
  198. expect('Cannot use <template> as component root element').toHaveBeenWarned()
  199. })
  200. it('warn <slot> as root element', () => {
  201. parse('<slot></slot>', baseOptions)
  202. expect('Cannot use <slot> as component root element').toHaveBeenWarned()
  203. })
  204. it('warn v-for on root element', () => {
  205. parse('<div v-for="item in items"></div>', baseOptions)
  206. expect('Cannot use v-for on stateful component root element').toHaveBeenWarned()
  207. })
  208. it('warn <template> key', () => {
  209. parse('<div><template v-for="i in 10" :key="i"></template></div>', baseOptions)
  210. expect('<template> cannot be keyed').toHaveBeenWarned()
  211. })
  212. it('warn the child of the <transition-group> component has sequential index', () => {
  213. parse(`
  214. <div>
  215. <transition-group>
  216. <i v-for="(o, i) of arr" :key="i"></i>
  217. </transition-group>
  218. </div>
  219. `, baseOptions)
  220. expect('Do not use v-for index as key on <transition-group> children').toHaveBeenWarned()
  221. })
  222. it('v-pre directive', () => {
  223. const ast = parse('<div v-pre id="message1"><p>{{msg}}</p></div>', baseOptions)
  224. expect(ast.pre).toBe(true)
  225. expect(ast.attrs[0].name).toBe('id')
  226. expect(ast.attrs[0].value).toBe('"message1"')
  227. expect(ast.children[0].children[0].text).toBe('{{msg}}')
  228. })
  229. it('v-pre directive should leave template in DOM', () => {
  230. const ast = parse('<div v-pre id="message1"><template id="template1"><p>{{msg}}</p></template></div>', baseOptions)
  231. expect(ast.pre).toBe(true)
  232. expect(ast.attrs[0].name).toBe('id')
  233. expect(ast.attrs[0].value).toBe('"message1"')
  234. expect(ast.children[0].attrs[0].name).toBe('id')
  235. expect(ast.children[0].attrs[0].value).toBe('"template1"')
  236. })
  237. it('v-for directive basic syntax', () => {
  238. const ast = parse('<ul><li v-for="item in items"></li></ul>', baseOptions)
  239. const liAst = ast.children[0]
  240. expect(liAst.for).toBe('items')
  241. expect(liAst.alias).toBe('item')
  242. })
  243. it('v-for directive iteration syntax', () => {
  244. const ast = parse('<ul><li v-for="(item, index) in items"></li></ul>', baseOptions)
  245. const liAst = ast.children[0]
  246. expect(liAst.for).toBe('items')
  247. expect(liAst.alias).toBe('item')
  248. expect(liAst.iterator1).toBe('index')
  249. expect(liAst.iterator2).toBeUndefined()
  250. })
  251. it('v-for directive iteration syntax (multiple)', () => {
  252. const ast = parse('<ul><li v-for="(item, key, index) in items"></li></ul>', baseOptions)
  253. const liAst = ast.children[0]
  254. expect(liAst.for).toBe('items')
  255. expect(liAst.alias).toBe('item')
  256. expect(liAst.iterator1).toBe('key')
  257. expect(liAst.iterator2).toBe('index')
  258. })
  259. it('v-for directive key', () => {
  260. const ast = parse('<ul><li v-for="item in items" :key="item.uid"></li></ul>', baseOptions)
  261. const liAst = ast.children[0]
  262. expect(liAst.for).toBe('items')
  263. expect(liAst.alias).toBe('item')
  264. expect(liAst.key).toBe('item.uid')
  265. })
  266. it('v-for directive destructuring', () => {
  267. let ast = parse('<ul><li v-for="{ foo } in items"></li></ul>', baseOptions)
  268. let liAst = ast.children[0]
  269. expect(liAst.for).toBe('items')
  270. expect(liAst.alias).toBe('{ foo }')
  271. // with paren
  272. ast = parse('<ul><li v-for="({ foo }) in items"></li></ul>', baseOptions)
  273. liAst = ast.children[0]
  274. expect(liAst.for).toBe('items')
  275. expect(liAst.alias).toBe('{ foo }')
  276. // multi-var destructuring
  277. ast = parse('<ul><li v-for="{ foo, bar, baz } in items"></li></ul>', baseOptions)
  278. liAst = ast.children[0]
  279. expect(liAst.for).toBe('items')
  280. expect(liAst.alias).toBe('{ foo, bar, baz }')
  281. // multi-var destructuring with paren
  282. ast = parse('<ul><li v-for="({ foo, bar, baz }) in items"></li></ul>', baseOptions)
  283. liAst = ast.children[0]
  284. expect(liAst.for).toBe('items')
  285. expect(liAst.alias).toBe('{ foo, bar, baz }')
  286. // with index
  287. ast = parse('<ul><li v-for="({ foo }, i) in items"></li></ul>', baseOptions)
  288. liAst = ast.children[0]
  289. expect(liAst.for).toBe('items')
  290. expect(liAst.alias).toBe('{ foo }')
  291. expect(liAst.iterator1).toBe('i')
  292. // with key + index
  293. ast = parse('<ul><li v-for="({ foo }, i, j) in items"></li></ul>', baseOptions)
  294. liAst = ast.children[0]
  295. expect(liAst.for).toBe('items')
  296. expect(liAst.alias).toBe('{ foo }')
  297. expect(liAst.iterator1).toBe('i')
  298. expect(liAst.iterator2).toBe('j')
  299. // multi-var destructuring with index
  300. ast = parse('<ul><li v-for="({ foo, bar, baz }, i) in items"></li></ul>', baseOptions)
  301. liAst = ast.children[0]
  302. expect(liAst.for).toBe('items')
  303. expect(liAst.alias).toBe('{ foo, bar, baz }')
  304. expect(liAst.iterator1).toBe('i')
  305. // array
  306. ast = parse('<ul><li v-for="[ foo ] in items"></li></ul>', baseOptions)
  307. liAst = ast.children[0]
  308. expect(liAst.for).toBe('items')
  309. expect(liAst.alias).toBe('[ foo ]')
  310. // multi-array
  311. ast = parse('<ul><li v-for="[ foo, bar, baz ] in items"></li></ul>', baseOptions)
  312. liAst = ast.children[0]
  313. expect(liAst.for).toBe('items')
  314. expect(liAst.alias).toBe('[ foo, bar, baz ]')
  315. // array with paren
  316. ast = parse('<ul><li v-for="([ foo ]) in items"></li></ul>', baseOptions)
  317. liAst = ast.children[0]
  318. expect(liAst.for).toBe('items')
  319. expect(liAst.alias).toBe('[ foo ]')
  320. // multi-array with paren
  321. ast = parse('<ul><li v-for="([ foo, bar, baz ]) in items"></li></ul>', baseOptions)
  322. liAst = ast.children[0]
  323. expect(liAst.for).toBe('items')
  324. expect(liAst.alias).toBe('[ foo, bar, baz ]')
  325. // array with index
  326. ast = parse('<ul><li v-for="([ foo ], i) in items"></li></ul>', baseOptions)
  327. liAst = ast.children[0]
  328. expect(liAst.for).toBe('items')
  329. expect(liAst.alias).toBe('[ foo ]')
  330. expect(liAst.iterator1).toBe('i')
  331. // array with key + index
  332. ast = parse('<ul><li v-for="([ foo ], i, j) in items"></li></ul>', baseOptions)
  333. liAst = ast.children[0]
  334. expect(liAst.for).toBe('items')
  335. expect(liAst.alias).toBe('[ foo ]')
  336. expect(liAst.iterator1).toBe('i')
  337. expect(liAst.iterator2).toBe('j')
  338. // multi-array with paren
  339. ast = parse('<ul><li v-for="([ foo, bar, baz ]) in items"></li></ul>', baseOptions)
  340. liAst = ast.children[0]
  341. expect(liAst.for).toBe('items')
  342. expect(liAst.alias).toBe('[ foo, bar, baz ]')
  343. // multi-array with index
  344. ast = parse('<ul><li v-for="([ foo, bar, baz ], i) in items"></li></ul>', baseOptions)
  345. liAst = ast.children[0]
  346. expect(liAst.for).toBe('items')
  347. expect(liAst.alias).toBe('[ foo, bar, baz ]')
  348. expect(liAst.iterator1).toBe('i')
  349. // nested
  350. ast = parse('<ul><li v-for="({ foo, bar: { baz }, qux: [ n ] }, i, j) in items"></li></ul>', baseOptions)
  351. liAst = ast.children[0]
  352. expect(liAst.for).toBe('items')
  353. expect(liAst.alias).toBe('{ foo, bar: { baz }, qux: [ n ] }')
  354. expect(liAst.iterator1).toBe('i')
  355. expect(liAst.iterator2).toBe('j')
  356. // array nested
  357. ast = parse('<ul><li v-for="([ foo, { bar }, baz ], i, j) in items"></li></ul>', baseOptions)
  358. liAst = ast.children[0]
  359. expect(liAst.for).toBe('items')
  360. expect(liAst.alias).toBe('[ foo, { bar }, baz ]')
  361. expect(liAst.iterator1).toBe('i')
  362. expect(liAst.iterator2).toBe('j')
  363. })
  364. it('v-for directive invalid syntax', () => {
  365. parse('<ul><li v-for="item into items"></li></ul>', baseOptions)
  366. expect('Invalid v-for expression').toHaveBeenWarned()
  367. })
  368. it('v-if directive syntax', () => {
  369. const ast = parse('<p v-if="show">hello world</p>', baseOptions)
  370. expect(ast.if).toBe('show')
  371. expect(ast.ifConditions[0].exp).toBe('show')
  372. })
  373. it('v-else-if directive syntax', () => {
  374. const ast = parse('<div><p v-if="show">hello</p><span v-else-if="2">elseif</span><p v-else>world</p></div>', baseOptions)
  375. const ifAst = ast.children[0]
  376. const conditionsAst = ifAst.ifConditions
  377. expect(conditionsAst.length).toBe(3)
  378. expect(conditionsAst[1].block.children[0].text).toBe('elseif')
  379. expect(conditionsAst[1].block.parent).toBe(ast)
  380. expect(conditionsAst[2].block.children[0].text).toBe('world')
  381. expect(conditionsAst[2].block.parent).toBe(ast)
  382. })
  383. it('v-else directive syntax', () => {
  384. const ast = parse('<div><p v-if="show">hello</p><p v-else>world</p></div>', baseOptions)
  385. const ifAst = ast.children[0]
  386. const conditionsAst = ifAst.ifConditions
  387. expect(conditionsAst.length).toBe(2)
  388. expect(conditionsAst[1].block.children[0].text).toBe('world')
  389. expect(conditionsAst[1].block.parent).toBe(ast)
  390. })
  391. it('v-else-if directive invalid syntax', () => {
  392. parse('<div><p v-else-if="1">world</p></div>', baseOptions)
  393. expect('v-else-if="1" used on element').toHaveBeenWarned()
  394. })
  395. it('v-else directive invalid syntax', () => {
  396. parse('<div><p v-else>world</p></div>', baseOptions)
  397. expect('v-else used on element').toHaveBeenWarned()
  398. })
  399. it('v-once directive syntax', () => {
  400. const ast = parse('<p v-once>world</p>', baseOptions)
  401. expect(ast.once).toBe(true)
  402. })
  403. it('slot tag single syntax', () => {
  404. const ast = parse('<div><slot></slot></div>', baseOptions)
  405. expect(ast.children[0].tag).toBe('slot')
  406. expect(ast.children[0].slotName).toBeUndefined()
  407. })
  408. it('slot tag named syntax', () => {
  409. const ast = parse('<div><slot name="one">hello world</slot></div>', baseOptions)
  410. expect(ast.children[0].tag).toBe('slot')
  411. expect(ast.children[0].slotName).toBe('"one"')
  412. })
  413. it('slot target', () => {
  414. const ast = parse('<p slot="one">hello world</p>', baseOptions)
  415. expect(ast.slotTarget).toBe('"one"')
  416. })
  417. it('component properties', () => {
  418. const ast = parse('<my-component :msg="hello"></my-component>', baseOptions)
  419. expect(ast.attrs[0].name).toBe('msg')
  420. expect(ast.attrs[0].value).toBe('hello')
  421. })
  422. it('component "is" attribute', () => {
  423. const ast = parse('<my-component is="component1"></my-component>', baseOptions)
  424. expect(ast.component).toBe('"component1"')
  425. })
  426. it('component "inline-template" attribute', () => {
  427. const ast = parse('<my-component inline-template>hello world</my-component>', baseOptions)
  428. expect(ast.inlineTemplate).toBe(true)
  429. })
  430. it('class binding', () => {
  431. // static
  432. const ast1 = parse('<p class="class1">hello world</p>', baseOptions)
  433. expect(ast1.staticClass).toBe('"class1"')
  434. // dynamic
  435. const ast2 = parse('<p :class="class1">hello world</p>', baseOptions)
  436. expect(ast2.classBinding).toBe('class1')
  437. // interpolation warning
  438. parse('<p class="{{error}}">hello world</p>', baseOptions)
  439. expect('Interpolation inside attributes has been removed').toHaveBeenWarned()
  440. })
  441. it('style binding', () => {
  442. const ast = parse('<p :style="error">hello world</p>', baseOptions)
  443. expect(ast.styleBinding).toBe('error')
  444. })
  445. it('attribute with v-bind', () => {
  446. const ast = parse('<input type="text" name="field1" :value="msg">', baseOptions)
  447. expect(ast.attrsList[0].name).toBe('type')
  448. expect(ast.attrsList[0].value).toBe('text')
  449. expect(ast.attrsList[1].name).toBe('name')
  450. expect(ast.attrsList[1].value).toBe('field1')
  451. expect(ast.attrsMap['type']).toBe('text')
  452. expect(ast.attrsMap['name']).toBe('field1')
  453. expect(ast.attrs[0].name).toBe('type')
  454. expect(ast.attrs[0].value).toBe('"text"')
  455. expect(ast.attrs[1].name).toBe('name')
  456. expect(ast.attrs[1].value).toBe('"field1"')
  457. expect(ast.props[0].name).toBe('value')
  458. expect(ast.props[0].value).toBe('msg')
  459. })
  460. it('empty v-bind expression', () => {
  461. parse('<div :empty-msg=""></div>', baseOptions)
  462. expect('The value for a v-bind expression cannot be empty. Found in "v-bind:empty-msg"').toHaveBeenWarned()
  463. })
  464. it('v-bind.prop shorthand syntax', () => {
  465. const ast = parse('<div .id="foo"></div>', baseOptions)
  466. expect(ast.props).toEqual([{ name: 'id', value: 'foo'}])
  467. })
  468. it('v-bind.prop shorthand syntax w/ modifiers', () => {
  469. const ast = parse('<div .id.mod="foo"></div>', baseOptions)
  470. expect(ast.props).toEqual([{ name: 'id', value: 'foo'}])
  471. })
  472. // #6887
  473. it('special case static attribute that must be props', () => {
  474. const ast = parse('<video muted></video>', baseOptions)
  475. expect(ast.attrs[0].name).toBe('muted')
  476. expect(ast.attrs[0].value).toBe('""')
  477. expect(ast.props[0].name).toBe('muted')
  478. expect(ast.props[0].value).toBe('true')
  479. })
  480. it('attribute with v-on', () => {
  481. const ast = parse('<input type="text" name="field1" :value="msg" @input="onInput">', baseOptions)
  482. expect(ast.events.input.value).toBe('onInput')
  483. })
  484. it('attribute with directive', () => {
  485. const ast = parse('<input type="text" name="field1" :value="msg" v-validate:field1="required">', baseOptions)
  486. expect(ast.directives[0].name).toBe('validate')
  487. expect(ast.directives[0].value).toBe('required')
  488. expect(ast.directives[0].arg).toBe('field1')
  489. })
  490. it('attribute with modifiered directive', () => {
  491. const ast = parse('<input type="text" name="field1" :value="msg" v-validate.on.off>', baseOptions)
  492. expect(ast.directives[0].modifiers.on).toBe(true)
  493. expect(ast.directives[0].modifiers.off).toBe(true)
  494. })
  495. it('literal attribute', () => {
  496. // basic
  497. const ast1 = parse('<input type="text" name="field1" value="hello world">', baseOptions)
  498. expect(ast1.attrsList[0].name).toBe('type')
  499. expect(ast1.attrsList[0].value).toBe('text')
  500. expect(ast1.attrsList[1].name).toBe('name')
  501. expect(ast1.attrsList[1].value).toBe('field1')
  502. expect(ast1.attrsList[2].name).toBe('value')
  503. expect(ast1.attrsList[2].value).toBe('hello world')
  504. expect(ast1.attrsMap['type']).toBe('text')
  505. expect(ast1.attrsMap['name']).toBe('field1')
  506. expect(ast1.attrsMap['value']).toBe('hello world')
  507. expect(ast1.attrs[0].name).toBe('type')
  508. expect(ast1.attrs[0].value).toBe('"text"')
  509. expect(ast1.attrs[1].name).toBe('name')
  510. expect(ast1.attrs[1].value).toBe('"field1"')
  511. expect(ast1.attrs[2].name).toBe('value')
  512. expect(ast1.attrs[2].value).toBe('"hello world"')
  513. // interpolation warning
  514. parse('<input type="text" name="field1" value="{{msg}}">', baseOptions)
  515. expect('Interpolation inside attributes has been removed').toHaveBeenWarned()
  516. })
  517. if (!isIE && !isEdge) {
  518. it('duplicate attribute', () => {
  519. parse('<p class="class1" class="class1">hello world</p>', baseOptions)
  520. expect('duplicate attribute').toHaveBeenWarned()
  521. })
  522. }
  523. it('custom delimiter', () => {
  524. const ast = parse('<p>{msg}</p>', extend({ delimiters: ['{', '}'] }, baseOptions))
  525. expect(ast.children[0].expression).toBe('_s(msg)')
  526. })
  527. it('not specified getTagNamespace option', () => {
  528. const options = extend({}, baseOptions)
  529. delete options.getTagNamespace
  530. const ast = parse('<svg><text>hello world</text></svg>', options)
  531. expect(ast.tag).toBe('svg')
  532. expect(ast.ns).toBeUndefined()
  533. })
  534. it('not specified mustUseProp', () => {
  535. const options = extend({}, baseOptions)
  536. delete options.mustUseProp
  537. const ast = parse('<input type="text" name="field1" :value="msg">', options)
  538. expect(ast.props).toBeUndefined()
  539. })
  540. it('use prop when prop modifier was explicitly declared', () => {
  541. const ast = parse('<component is="textarea" :value.prop="val" />', baseOptions)
  542. expect(ast.attrs).toBeUndefined()
  543. expect(ast.props.length).toBe(1)
  544. expect(ast.props[0].name).toBe('value')
  545. expect(ast.props[0].value).toBe('val')
  546. })
  547. it('pre/post transforms', () => {
  548. const options = extend({}, baseOptions)
  549. const spy1 = jasmine.createSpy('preTransform')
  550. const spy2 = jasmine.createSpy('postTransform')
  551. options.modules = options.modules.concat([{
  552. preTransformNode (el) {
  553. spy1(el.tag)
  554. },
  555. postTransformNode (el) {
  556. expect(el.attrs.length).toBe(1)
  557. spy2(el.tag)
  558. }
  559. }])
  560. parse('<img v-pre src="hi">', options)
  561. expect(spy1).toHaveBeenCalledWith('img')
  562. expect(spy2).toHaveBeenCalledWith('img')
  563. })
  564. it('preserve whitespace in <pre> tag', function () {
  565. const options = extend({}, baseOptions)
  566. const ast = parse('<pre><code> \n<span>hi</span>\n </code><span> </span></pre>', options)
  567. const code = ast.children[0]
  568. expect(code.children[0].type).toBe(3)
  569. expect(code.children[0].text).toBe(' \n')
  570. expect(code.children[2].type).toBe(3)
  571. expect(code.children[2].text).toBe('\n ')
  572. const span = ast.children[1]
  573. expect(span.children[0].type).toBe(3)
  574. expect(span.children[0].text).toBe(' ')
  575. })
  576. // #5992
  577. it('ignore the first newline in <pre> tag', function () {
  578. const options = extend({}, baseOptions)
  579. const ast = parse('<div><pre>\nabc</pre>\ndef<pre>\n\nabc</pre></div>', options)
  580. const pre = ast.children[0]
  581. expect(pre.children[0].type).toBe(3)
  582. expect(pre.children[0].text).toBe('abc')
  583. const text = ast.children[1]
  584. expect(text.type).toBe(3)
  585. expect(text.text).toBe('\ndef')
  586. const pre2 = ast.children[2]
  587. expect(pre2.children[0].type).toBe(3)
  588. expect(pre2.children[0].text).toBe('\nabc')
  589. })
  590. it('keep first newline after unary tag in <pre>', () => {
  591. const options = extend({}, baseOptions)
  592. const ast = parse('<pre>abc<input>\ndef</pre>', options)
  593. expect(ast.children[1].type).toBe(1)
  594. expect(ast.children[1].tag).toBe('input')
  595. expect(ast.children[2].type).toBe(3)
  596. expect(ast.children[2].text).toBe('\ndef')
  597. })
  598. it('forgivingly handle < in plain text', () => {
  599. const options = extend({}, baseOptions)
  600. const ast = parse('<p>1 < 2 < 3</p>', options)
  601. expect(ast.tag).toBe('p')
  602. expect(ast.children.length).toBe(1)
  603. expect(ast.children[0].type).toBe(3)
  604. expect(ast.children[0].text).toBe('1 < 2 < 3')
  605. })
  606. it('IE conditional comments', () => {
  607. const options = extend({}, baseOptions)
  608. const ast = parse(`
  609. <div>
  610. <!--[if lte IE 8]>
  611. <p>Test 1</p>
  612. <![endif]-->
  613. </div>
  614. `, options)
  615. expect(ast.tag).toBe('div')
  616. expect(ast.children.length).toBe(0)
  617. })
  618. it('parse content in textarea as text', () => {
  619. const options = extend({}, baseOptions)
  620. const whitespace = parse(`
  621. <textarea>
  622. <p>Test 1</p>
  623. test2
  624. </textarea>
  625. `, options)
  626. expect(whitespace.tag).toBe('textarea')
  627. expect(whitespace.children.length).toBe(1)
  628. expect(whitespace.children[0].type).toBe(3)
  629. // textarea is whitespace sensitive
  630. expect(whitespace.children[0].text).toBe(` <p>Test 1</p>
  631. test2
  632. `)
  633. const comment = parse('<textarea><!--comment--></textarea>', options)
  634. expect(comment.tag).toBe('textarea')
  635. expect(comment.children.length).toBe(1)
  636. expect(comment.children[0].type).toBe(3)
  637. expect(comment.children[0].text).toBe('<!--comment-->')
  638. })
  639. // #5526
  640. it('should not decode text in script tags', () => {
  641. const options = extend({}, baseOptions)
  642. const ast = parse(`<script type="x/template">&gt;<foo>&lt;</script>`, options)
  643. expect(ast.children[0].text).toBe(`&gt;<foo>&lt;`)
  644. })
  645. it('should ignore comments', () => {
  646. const options = extend({}, baseOptions)
  647. const ast = parse(`<div>123<!--comment here--></div>`, options)
  648. expect(ast.tag).toBe('div')
  649. expect(ast.children.length).toBe(1)
  650. expect(ast.children[0].type).toBe(3)
  651. expect(ast.children[0].text).toBe('123')
  652. })
  653. it('should kept comments', () => {
  654. const options = extend({
  655. comments: true
  656. }, baseOptions)
  657. const ast = parse(`<div>123<!--comment here--></div>`, options)
  658. expect(ast.tag).toBe('div')
  659. expect(ast.children.length).toBe(2)
  660. expect(ast.children[0].type).toBe(3)
  661. expect(ast.children[0].text).toBe('123')
  662. expect(ast.children[1].type).toBe(3) // parse comment with ASTText
  663. expect(ast.children[1].isComment).toBe(true) // parse comment with ASTText
  664. expect(ast.children[1].text).toBe('comment here')
  665. })
  666. // #8103
  667. it('should allow CRLFs in string interpolations', () => {
  668. const ast = parse(`<p>{{\r\nmsg\r\n}}</p>`, baseOptions)
  669. expect(ast.children[0].expression).toBe('_s(msg)')
  670. })
  671. it('preserveWhitespace: false', () => {
  672. const options = extend({
  673. preserveWhitespace: false
  674. }, baseOptions)
  675. const ast = parse('<p>\n Welcome to <b>Vue.js</b> <i>world</i> \n <span>.\n Have fun!\n</span></p>', options)
  676. expect(ast.tag).toBe('p')
  677. expect(ast.children.length).toBe(4)
  678. expect(ast.children[0].type).toBe(3)
  679. expect(ast.children[0].text).toBe('\n Welcome to ')
  680. expect(ast.children[1].tag).toBe('b')
  681. expect(ast.children[1].children[0].text).toBe('Vue.js')
  682. expect(ast.children[2].tag).toBe('i')
  683. expect(ast.children[2].children[0].text).toBe('world')
  684. expect(ast.children[3].tag).toBe('span')
  685. expect(ast.children[3].children[0].text).toBe('.\n Have fun!\n')
  686. })
  687. it(`whitespace: 'condense'`, () => {
  688. const options = extend({
  689. whitespace: 'condense',
  690. // should be ignored when whitespace is specified
  691. preserveWhitespace: false
  692. }, baseOptions)
  693. const ast = parse('<p>\n Welcome to <b>Vue.js</b> <i>world</i> \n <span>.\n Have fun!\n</span></p>', options)
  694. expect(ast.tag).toBe('p')
  695. expect(ast.children.length).toBe(5)
  696. expect(ast.children[0].type).toBe(3)
  697. expect(ast.children[0].text).toBe(' Welcome to ')
  698. expect(ast.children[1].tag).toBe('b')
  699. expect(ast.children[1].children[0].text).toBe('Vue.js')
  700. expect(ast.children[2].type).toBe(3)
  701. // should condense inline whitespace into single space
  702. expect(ast.children[2].text).toBe(' ')
  703. expect(ast.children[3].tag).toBe('i')
  704. expect(ast.children[3].children[0].text).toBe('world')
  705. // should have removed the whitespace node between tags that contains newlines
  706. expect(ast.children[4].tag).toBe('span')
  707. expect(ast.children[4].children[0].text).toBe('. Have fun! ')
  708. })
  709. })