parser.spec.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760
  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 <transtion-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. // #6887
  465. it('special case static attribute that must be props', () => {
  466. const ast = parse('<video muted></video>', baseOptions)
  467. expect(ast.attrs[0].name).toBe('muted')
  468. expect(ast.attrs[0].value).toBe('""')
  469. expect(ast.props[0].name).toBe('muted')
  470. expect(ast.props[0].value).toBe('true')
  471. })
  472. it('attribute with v-on', () => {
  473. const ast = parse('<input type="text" name="field1" :value="msg" @input="onInput">', baseOptions)
  474. expect(ast.events.input.value).toBe('onInput')
  475. })
  476. it('attribute with directive', () => {
  477. const ast = parse('<input type="text" name="field1" :value="msg" v-validate:field1="required">', baseOptions)
  478. expect(ast.directives[0].name).toBe('validate')
  479. expect(ast.directives[0].value).toBe('required')
  480. expect(ast.directives[0].arg).toBe('field1')
  481. })
  482. it('attribute with modifiered directive', () => {
  483. const ast = parse('<input type="text" name="field1" :value="msg" v-validate.on.off>', baseOptions)
  484. expect(ast.directives[0].modifiers.on).toBe(true)
  485. expect(ast.directives[0].modifiers.off).toBe(true)
  486. })
  487. it('literal attribute', () => {
  488. // basic
  489. const ast1 = parse('<input type="text" name="field1" value="hello world">', baseOptions)
  490. expect(ast1.attrsList[0].name).toBe('type')
  491. expect(ast1.attrsList[0].value).toBe('text')
  492. expect(ast1.attrsList[1].name).toBe('name')
  493. expect(ast1.attrsList[1].value).toBe('field1')
  494. expect(ast1.attrsList[2].name).toBe('value')
  495. expect(ast1.attrsList[2].value).toBe('hello world')
  496. expect(ast1.attrsMap['type']).toBe('text')
  497. expect(ast1.attrsMap['name']).toBe('field1')
  498. expect(ast1.attrsMap['value']).toBe('hello world')
  499. expect(ast1.attrs[0].name).toBe('type')
  500. expect(ast1.attrs[0].value).toBe('"text"')
  501. expect(ast1.attrs[1].name).toBe('name')
  502. expect(ast1.attrs[1].value).toBe('"field1"')
  503. expect(ast1.attrs[2].name).toBe('value')
  504. expect(ast1.attrs[2].value).toBe('"hello world"')
  505. // interpolation warning
  506. parse('<input type="text" name="field1" value="{{msg}}">', baseOptions)
  507. expect('Interpolation inside attributes has been removed').toHaveBeenWarned()
  508. })
  509. if (!isIE && !isEdge) {
  510. it('duplicate attribute', () => {
  511. parse('<p class="class1" class="class1">hello world</p>', baseOptions)
  512. expect('duplicate attribute').toHaveBeenWarned()
  513. })
  514. }
  515. it('custom delimiter', () => {
  516. const ast = parse('<p>{msg}</p>', extend({ delimiters: ['{', '}'] }, baseOptions))
  517. expect(ast.children[0].expression).toBe('_s(msg)')
  518. })
  519. it('not specified getTagNamespace option', () => {
  520. const options = extend({}, baseOptions)
  521. delete options.getTagNamespace
  522. const ast = parse('<svg><text>hello world</text></svg>', options)
  523. expect(ast.tag).toBe('svg')
  524. expect(ast.ns).toBeUndefined()
  525. })
  526. it('not specified mustUseProp', () => {
  527. const options = extend({}, baseOptions)
  528. delete options.mustUseProp
  529. const ast = parse('<input type="text" name="field1" :value="msg">', options)
  530. expect(ast.props).toBeUndefined()
  531. })
  532. it('use prop when prop modifier was explicitly declared', () => {
  533. const ast = parse('<component is="textarea" :value.prop="val" />', baseOptions)
  534. expect(ast.attrs).toBeUndefined()
  535. expect(ast.props.length).toBe(1)
  536. expect(ast.props[0].name).toBe('value')
  537. expect(ast.props[0].value).toBe('val')
  538. })
  539. it('pre/post transforms', () => {
  540. const options = extend({}, baseOptions)
  541. const spy1 = jasmine.createSpy('preTransform')
  542. const spy2 = jasmine.createSpy('postTransform')
  543. options.modules = options.modules.concat([{
  544. preTransformNode (el) {
  545. spy1(el.tag)
  546. },
  547. postTransformNode (el) {
  548. expect(el.attrs.length).toBe(1)
  549. spy2(el.tag)
  550. }
  551. }])
  552. parse('<img v-pre src="hi">', options)
  553. expect(spy1).toHaveBeenCalledWith('img')
  554. expect(spy2).toHaveBeenCalledWith('img')
  555. })
  556. it('preserve whitespace in <pre> tag', function () {
  557. const options = extend({}, baseOptions)
  558. const ast = parse('<pre><code> \n<span>hi</span>\n </code><span> </span></pre>', options)
  559. const code = ast.children[0]
  560. expect(code.children[0].type).toBe(3)
  561. expect(code.children[0].text).toBe(' \n')
  562. expect(code.children[2].type).toBe(3)
  563. expect(code.children[2].text).toBe('\n ')
  564. const span = ast.children[1]
  565. expect(span.children[0].type).toBe(3)
  566. expect(span.children[0].text).toBe(' ')
  567. })
  568. // #5992
  569. it('ignore the first newline in <pre> tag', function () {
  570. const options = extend({}, baseOptions)
  571. const ast = parse('<div><pre>\nabc</pre>\ndef<pre>\n\nabc</pre></div>', options)
  572. const pre = ast.children[0]
  573. expect(pre.children[0].type).toBe(3)
  574. expect(pre.children[0].text).toBe('abc')
  575. const text = ast.children[1]
  576. expect(text.type).toBe(3)
  577. expect(text.text).toBe('\ndef')
  578. const pre2 = ast.children[2]
  579. expect(pre2.children[0].type).toBe(3)
  580. expect(pre2.children[0].text).toBe('\nabc')
  581. })
  582. it('keep first newline after unary tag in <pre>', () => {
  583. const options = extend({}, baseOptions)
  584. const ast = parse('<pre>abc<input>\ndef</pre>', options)
  585. expect(ast.children[1].type).toBe(1)
  586. expect(ast.children[1].tag).toBe('input')
  587. expect(ast.children[2].type).toBe(3)
  588. expect(ast.children[2].text).toBe('\ndef')
  589. })
  590. it('forgivingly handle < in plain text', () => {
  591. const options = extend({}, baseOptions)
  592. const ast = parse('<p>1 < 2 < 3</p>', options)
  593. expect(ast.tag).toBe('p')
  594. expect(ast.children.length).toBe(1)
  595. expect(ast.children[0].type).toBe(3)
  596. expect(ast.children[0].text).toBe('1 < 2 < 3')
  597. })
  598. it('IE conditional comments', () => {
  599. const options = extend({}, baseOptions)
  600. const ast = parse(`
  601. <div>
  602. <!--[if lte IE 8]>
  603. <p>Test 1</p>
  604. <![endif]-->
  605. </div>
  606. `, options)
  607. expect(ast.tag).toBe('div')
  608. expect(ast.children.length).toBe(0)
  609. })
  610. it('parse content in textarea as text', () => {
  611. const options = extend({}, baseOptions)
  612. const whitespace = parse(`
  613. <textarea>
  614. <p>Test 1</p>
  615. test2
  616. </textarea>
  617. `, options)
  618. expect(whitespace.tag).toBe('textarea')
  619. expect(whitespace.children.length).toBe(1)
  620. expect(whitespace.children[0].type).toBe(3)
  621. // textarea is whitespace sensitive
  622. expect(whitespace.children[0].text).toBe(` <p>Test 1</p>
  623. test2
  624. `)
  625. const comment = parse('<textarea><!--comment--></textarea>', options)
  626. expect(comment.tag).toBe('textarea')
  627. expect(comment.children.length).toBe(1)
  628. expect(comment.children[0].type).toBe(3)
  629. expect(comment.children[0].text).toBe('<!--comment-->')
  630. })
  631. // #5526
  632. it('should not decode text in script tags', () => {
  633. const options = extend({}, baseOptions)
  634. const ast = parse(`<script type="x/template">&gt;<foo>&lt;</script>`, options)
  635. expect(ast.children[0].text).toBe(`&gt;<foo>&lt;`)
  636. })
  637. it('should ignore comments', () => {
  638. const options = extend({}, baseOptions)
  639. const ast = parse(`<div>123<!--comment here--></div>`, options)
  640. expect(ast.tag).toBe('div')
  641. expect(ast.children.length).toBe(1)
  642. expect(ast.children[0].type).toBe(3)
  643. expect(ast.children[0].text).toBe('123')
  644. })
  645. it('should kept comments', () => {
  646. const options = extend({
  647. comments: true
  648. }, baseOptions)
  649. const ast = parse(`<div>123<!--comment here--></div>`, options)
  650. expect(ast.tag).toBe('div')
  651. expect(ast.children.length).toBe(2)
  652. expect(ast.children[0].type).toBe(3)
  653. expect(ast.children[0].text).toBe('123')
  654. expect(ast.children[1].type).toBe(3) // parse comment with ASTText
  655. expect(ast.children[1].isComment).toBe(true) // parse comment with ASTText
  656. expect(ast.children[1].text).toBe('comment here')
  657. })
  658. // #8103
  659. it('should allow CRLFs in string interpolations', () => {
  660. const ast = parse(`<p>{{\r\nmsg\r\n}}</p>`, baseOptions)
  661. expect(ast.children[0].expression).toBe('_s(msg)')
  662. })
  663. })