parser.spec.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
  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('v-pre directive', () => {
  213. const ast = parse('<div v-pre id="message1"><p>{{msg}}</p></div>', baseOptions)
  214. expect(ast.pre).toBe(true)
  215. expect(ast.attrs[0].name).toBe('id')
  216. expect(ast.attrs[0].value).toBe('"message1"')
  217. expect(ast.children[0].children[0].text).toBe('{{msg}}')
  218. })
  219. it('v-for directive basic syntax', () => {
  220. const ast = parse('<ul><li v-for="item in items"></li></ul>', baseOptions)
  221. const liAst = ast.children[0]
  222. expect(liAst.for).toBe('items')
  223. expect(liAst.alias).toBe('item')
  224. })
  225. it('v-for directive iteration syntax', () => {
  226. const ast = parse('<ul><li v-for="(item, index) in items"></li></ul>', baseOptions)
  227. const liAst = ast.children[0]
  228. expect(liAst.for).toBe('items')
  229. expect(liAst.alias).toBe('item')
  230. expect(liAst.iterator1).toBe('index')
  231. expect(liAst.iterator2).toBeUndefined()
  232. })
  233. it('v-for directive iteration syntax (multiple)', () => {
  234. const ast = parse('<ul><li v-for="(item, key, index) in items"></li></ul>', baseOptions)
  235. const liAst = ast.children[0]
  236. expect(liAst.for).toBe('items')
  237. expect(liAst.alias).toBe('item')
  238. expect(liAst.iterator1).toBe('key')
  239. expect(liAst.iterator2).toBe('index')
  240. })
  241. it('v-for directive key', () => {
  242. const ast = parse('<ul><li v-for="item in items" :key="item.uid"></li></ul>', baseOptions)
  243. const liAst = ast.children[0]
  244. expect(liAst.for).toBe('items')
  245. expect(liAst.alias).toBe('item')
  246. expect(liAst.key).toBe('item.uid')
  247. })
  248. it('v-for directive destructuring', () => {
  249. let ast = parse('<ul><li v-for="{ foo } in items"></li></ul>', baseOptions)
  250. let liAst = ast.children[0]
  251. expect(liAst.for).toBe('items')
  252. expect(liAst.alias).toBe('{ foo }')
  253. // with paren
  254. ast = parse('<ul><li v-for="({ foo }) in items"></li></ul>', baseOptions)
  255. liAst = ast.children[0]
  256. expect(liAst.for).toBe('items')
  257. expect(liAst.alias).toBe('{ foo }')
  258. // multi-var destructuring
  259. ast = parse('<ul><li v-for="{ foo, bar, baz } in items"></li></ul>', baseOptions)
  260. liAst = ast.children[0]
  261. expect(liAst.for).toBe('items')
  262. expect(liAst.alias).toBe('{ foo, bar, baz }')
  263. // multi-var destructuring with paren
  264. ast = parse('<ul><li v-for="({ foo, bar, baz }) in items"></li></ul>', baseOptions)
  265. liAst = ast.children[0]
  266. expect(liAst.for).toBe('items')
  267. expect(liAst.alias).toBe('{ foo, bar, baz }')
  268. // with index
  269. ast = parse('<ul><li v-for="({ foo }, i) in items"></li></ul>', baseOptions)
  270. liAst = ast.children[0]
  271. expect(liAst.for).toBe('items')
  272. expect(liAst.alias).toBe('{ foo }')
  273. expect(liAst.iterator1).toBe('i')
  274. // multi-var destructuring with index
  275. ast = parse('<ul><li v-for="({ foo, bar, baz }, i) in items"></li></ul>', baseOptions)
  276. liAst = ast.children[0]
  277. expect(liAst.for).toBe('items')
  278. expect(liAst.alias).toBe('{ foo, bar, baz }')
  279. expect(liAst.iterator1).toBe('i')
  280. })
  281. it('v-for directive invalid syntax', () => {
  282. parse('<ul><li v-for="item into items"></li></ul>', baseOptions)
  283. expect('Invalid v-for expression').toHaveBeenWarned()
  284. })
  285. it('v-if directive syntax', () => {
  286. const ast = parse('<p v-if="show">hello world</p>', baseOptions)
  287. expect(ast.if).toBe('show')
  288. expect(ast.ifConditions[0].exp).toBe('show')
  289. })
  290. it('v-else-if directive syntax', () => {
  291. const ast = parse('<div><p v-if="show">hello</p><span v-else-if="2">elseif</span><p v-else>world</p></div>', baseOptions)
  292. const ifAst = ast.children[0]
  293. const conditionsAst = ifAst.ifConditions
  294. expect(conditionsAst.length).toBe(3)
  295. expect(conditionsAst[1].block.children[0].text).toBe('elseif')
  296. expect(conditionsAst[1].block.parent).toBe(ast)
  297. expect(conditionsAst[2].block.children[0].text).toBe('world')
  298. expect(conditionsAst[2].block.parent).toBe(ast)
  299. })
  300. it('v-else directive syntax', () => {
  301. const ast = parse('<div><p v-if="show">hello</p><p v-else>world</p></div>', baseOptions)
  302. const ifAst = ast.children[0]
  303. const conditionsAst = ifAst.ifConditions
  304. expect(conditionsAst.length).toBe(2)
  305. expect(conditionsAst[1].block.children[0].text).toBe('world')
  306. expect(conditionsAst[1].block.parent).toBe(ast)
  307. })
  308. it('v-else-if directive invalid syntax', () => {
  309. parse('<div><p v-else-if="1">world</p></div>', baseOptions)
  310. expect('v-else-if="1" used on element').toHaveBeenWarned()
  311. })
  312. it('v-else directive invalid syntax', () => {
  313. parse('<div><p v-else>world</p></div>', baseOptions)
  314. expect('v-else used on element').toHaveBeenWarned()
  315. })
  316. it('v-once directive syntax', () => {
  317. const ast = parse('<p v-once>world</p>', baseOptions)
  318. expect(ast.once).toBe(true)
  319. })
  320. it('slot tag single syntax', () => {
  321. const ast = parse('<div><slot></slot></div>', baseOptions)
  322. expect(ast.children[0].tag).toBe('slot')
  323. expect(ast.children[0].slotName).toBeUndefined()
  324. })
  325. it('slot tag named syntax', () => {
  326. const ast = parse('<div><slot name="one">hello world</slot></div>', baseOptions)
  327. expect(ast.children[0].tag).toBe('slot')
  328. expect(ast.children[0].slotName).toBe('"one"')
  329. })
  330. it('slot target', () => {
  331. const ast = parse('<p slot="one">hello world</p>', baseOptions)
  332. expect(ast.slotTarget).toBe('"one"')
  333. })
  334. it('component properties', () => {
  335. const ast = parse('<my-component :msg="hello"></my-component>', baseOptions)
  336. expect(ast.attrs[0].name).toBe('msg')
  337. expect(ast.attrs[0].value).toBe('hello')
  338. })
  339. it('component "is" attribute', () => {
  340. const ast = parse('<my-component is="component1"></my-component>', baseOptions)
  341. expect(ast.component).toBe('"component1"')
  342. })
  343. it('component "inline-template" attribute', () => {
  344. const ast = parse('<my-component inline-template>hello world</my-component>', baseOptions)
  345. expect(ast.inlineTemplate).toBe(true)
  346. })
  347. it('class binding', () => {
  348. // static
  349. const ast1 = parse('<p class="class1">hello world</p>', baseOptions)
  350. expect(ast1.staticClass).toBe('"class1"')
  351. // dynamic
  352. const ast2 = parse('<p :class="class1">hello world</p>', baseOptions)
  353. expect(ast2.classBinding).toBe('class1')
  354. // interpolation warning
  355. parse('<p class="{{error}}">hello world</p>', baseOptions)
  356. expect('Interpolation inside attributes has been removed').toHaveBeenWarned()
  357. })
  358. it('style binding', () => {
  359. const ast = parse('<p :style="error">hello world</p>', baseOptions)
  360. expect(ast.styleBinding).toBe('error')
  361. })
  362. it('attribute with v-bind', () => {
  363. const ast = parse('<input type="text" name="field1" :value="msg">', baseOptions)
  364. expect(ast.attrsList[0].name).toBe('type')
  365. expect(ast.attrsList[0].value).toBe('text')
  366. expect(ast.attrsList[1].name).toBe('name')
  367. expect(ast.attrsList[1].value).toBe('field1')
  368. expect(ast.attrsMap['type']).toBe('text')
  369. expect(ast.attrsMap['name']).toBe('field1')
  370. expect(ast.attrs[0].name).toBe('type')
  371. expect(ast.attrs[0].value).toBe('"text"')
  372. expect(ast.attrs[1].name).toBe('name')
  373. expect(ast.attrs[1].value).toBe('"field1"')
  374. expect(ast.props[0].name).toBe('value')
  375. expect(ast.props[0].value).toBe('msg')
  376. })
  377. // #6887
  378. it('special case static attribute that must be props', () => {
  379. const ast = parse('<video muted></video>', baseOptions)
  380. expect(ast.attrs[0].name).toBe('muted')
  381. expect(ast.attrs[0].value).toBe('""')
  382. expect(ast.props[0].name).toBe('muted')
  383. expect(ast.props[0].value).toBe('true')
  384. })
  385. it('attribute with v-on', () => {
  386. const ast = parse('<input type="text" name="field1" :value="msg" @input="onInput">', baseOptions)
  387. expect(ast.events.input.value).toBe('onInput')
  388. })
  389. it('attribute with directive', () => {
  390. const ast = parse('<input type="text" name="field1" :value="msg" v-validate:field1="required">', baseOptions)
  391. expect(ast.directives[0].name).toBe('validate')
  392. expect(ast.directives[0].value).toBe('required')
  393. expect(ast.directives[0].arg).toBe('field1')
  394. })
  395. it('attribute with modifiered directive', () => {
  396. const ast = parse('<input type="text" name="field1" :value="msg" v-validate.on.off>', baseOptions)
  397. expect(ast.directives[0].modifiers.on).toBe(true)
  398. expect(ast.directives[0].modifiers.off).toBe(true)
  399. })
  400. it('literal attribute', () => {
  401. // basic
  402. const ast1 = parse('<input type="text" name="field1" value="hello world">', baseOptions)
  403. expect(ast1.attrsList[0].name).toBe('type')
  404. expect(ast1.attrsList[0].value).toBe('text')
  405. expect(ast1.attrsList[1].name).toBe('name')
  406. expect(ast1.attrsList[1].value).toBe('field1')
  407. expect(ast1.attrsList[2].name).toBe('value')
  408. expect(ast1.attrsList[2].value).toBe('hello world')
  409. expect(ast1.attrsMap['type']).toBe('text')
  410. expect(ast1.attrsMap['name']).toBe('field1')
  411. expect(ast1.attrsMap['value']).toBe('hello world')
  412. expect(ast1.attrs[0].name).toBe('type')
  413. expect(ast1.attrs[0].value).toBe('"text"')
  414. expect(ast1.attrs[1].name).toBe('name')
  415. expect(ast1.attrs[1].value).toBe('"field1"')
  416. expect(ast1.attrs[2].name).toBe('value')
  417. expect(ast1.attrs[2].value).toBe('"hello world"')
  418. // interpolation warning
  419. parse('<input type="text" name="field1" value="{{msg}}">', baseOptions)
  420. expect('Interpolation inside attributes has been removed').toHaveBeenWarned()
  421. })
  422. if (!isIE && !isEdge) {
  423. it('duplicate attribute', () => {
  424. parse('<p class="class1" class="class1">hello world</p>', baseOptions)
  425. expect('duplicate attribute').toHaveBeenWarned()
  426. })
  427. }
  428. it('custom delimiter', () => {
  429. const ast = parse('<p>{msg}</p>', extend({ delimiters: ['{', '}'] }, baseOptions))
  430. expect(ast.children[0].expression).toBe('_s(msg)')
  431. })
  432. it('not specified getTagNamespace option', () => {
  433. const options = extend({}, baseOptions)
  434. delete options.getTagNamespace
  435. const ast = parse('<svg><text>hello world</text></svg>', options)
  436. expect(ast.tag).toBe('svg')
  437. expect(ast.ns).toBeUndefined()
  438. })
  439. it('not specified mustUseProp', () => {
  440. const options = extend({}, baseOptions)
  441. delete options.mustUseProp
  442. const ast = parse('<input type="text" name="field1" :value="msg">', options)
  443. expect(ast.props).toBeUndefined()
  444. })
  445. it('use prop when prop modifier was explicitly declared', () => {
  446. const ast = parse('<component is="textarea" :value.prop="val" />', baseOptions)
  447. expect(ast.attrs).toBeUndefined()
  448. expect(ast.props.length).toBe(1)
  449. expect(ast.props[0].name).toBe('value')
  450. expect(ast.props[0].value).toBe('val')
  451. })
  452. it('pre/post transforms', () => {
  453. const options = extend({}, baseOptions)
  454. const spy1 = jasmine.createSpy('preTransform')
  455. const spy2 = jasmine.createSpy('postTransform')
  456. options.modules = options.modules.concat([{
  457. preTransformNode (el) {
  458. spy1(el.tag)
  459. },
  460. postTransformNode (el) {
  461. expect(el.attrs.length).toBe(1)
  462. spy2(el.tag)
  463. }
  464. }])
  465. parse('<img v-pre src="hi">', options)
  466. expect(spy1).toHaveBeenCalledWith('img')
  467. expect(spy2).toHaveBeenCalledWith('img')
  468. })
  469. it('preserve whitespace in <pre> tag', function () {
  470. const options = extend({}, baseOptions)
  471. const ast = parse('<pre><code> \n<span>hi</span>\n </code><span> </span></pre>', options)
  472. const code = ast.children[0]
  473. expect(code.children[0].type).toBe(3)
  474. expect(code.children[0].text).toBe(' \n')
  475. expect(code.children[2].type).toBe(3)
  476. expect(code.children[2].text).toBe('\n ')
  477. const span = ast.children[1]
  478. expect(span.children[0].type).toBe(3)
  479. expect(span.children[0].text).toBe(' ')
  480. })
  481. // #5992
  482. it('ignore the first newline in <pre> tag', function () {
  483. const options = extend({}, baseOptions)
  484. const ast = parse('<div><pre>\nabc</pre>\ndef<pre>\n\nabc</pre></div>', options)
  485. const pre = ast.children[0]
  486. expect(pre.children[0].type).toBe(3)
  487. expect(pre.children[0].text).toBe('abc')
  488. const text = ast.children[1]
  489. expect(text.type).toBe(3)
  490. expect(text.text).toBe('\ndef')
  491. const pre2 = ast.children[2]
  492. expect(pre2.children[0].type).toBe(3)
  493. expect(pre2.children[0].text).toBe('\nabc')
  494. })
  495. it('forgivingly handle < in plain text', () => {
  496. const options = extend({}, baseOptions)
  497. const ast = parse('<p>1 < 2 < 3</p>', options)
  498. expect(ast.tag).toBe('p')
  499. expect(ast.children.length).toBe(1)
  500. expect(ast.children[0].type).toBe(3)
  501. expect(ast.children[0].text).toBe('1 < 2 < 3')
  502. })
  503. it('IE conditional comments', () => {
  504. const options = extend({}, baseOptions)
  505. const ast = parse(`
  506. <div>
  507. <!--[if lte IE 8]>
  508. <p>Test 1</p>
  509. <![endif]-->
  510. </div>
  511. `, options)
  512. expect(ast.tag).toBe('div')
  513. expect(ast.children.length).toBe(0)
  514. })
  515. it('parse content in textarea as text', () => {
  516. const options = extend({}, baseOptions)
  517. const whitespace = parse(`
  518. <textarea>
  519. <p>Test 1</p>
  520. test2
  521. </textarea>
  522. `, options)
  523. expect(whitespace.tag).toBe('textarea')
  524. expect(whitespace.children.length).toBe(1)
  525. expect(whitespace.children[0].type).toBe(3)
  526. // textarea is whitespace sensitive
  527. expect(whitespace.children[0].text).toBe(` <p>Test 1</p>
  528. test2
  529. `)
  530. const comment = parse('<textarea><!--comment--></textarea>', options)
  531. expect(comment.tag).toBe('textarea')
  532. expect(comment.children.length).toBe(1)
  533. expect(comment.children[0].type).toBe(3)
  534. expect(comment.children[0].text).toBe('<!--comment-->')
  535. })
  536. // #5526
  537. it('should not decode text in script tags', () => {
  538. const options = extend({}, baseOptions)
  539. const ast = parse(`<script type="x/template">&gt;<foo>&lt;</script>`, options)
  540. expect(ast.children[0].text).toBe(`&gt;<foo>&lt;`)
  541. })
  542. it('should ignore comments', () => {
  543. const options = extend({}, baseOptions)
  544. const ast = parse(`<div>123<!--comment here--></div>`, options)
  545. expect(ast.tag).toBe('div')
  546. expect(ast.children.length).toBe(1)
  547. expect(ast.children[0].type).toBe(3)
  548. expect(ast.children[0].text).toBe('123')
  549. })
  550. it('should kept comments', () => {
  551. const options = extend({
  552. comments: true
  553. }, baseOptions)
  554. const ast = parse(`<div>123<!--comment here--></div>`, options)
  555. expect(ast.tag).toBe('div')
  556. expect(ast.children.length).toBe(2)
  557. expect(ast.children[0].type).toBe(3)
  558. expect(ast.children[0].text).toBe('123')
  559. expect(ast.children[1].type).toBe(3) // parse comment with ASTText
  560. expect(ast.children[1].isComment).toBe(true) // parse comment with ASTText
  561. expect(ast.children[1].text).toBe('comment here')
  562. })
  563. })