render-proxy.spec.ts 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import Vue from 'vue'
  2. if (typeof Proxy !== 'undefined') {
  3. describe('render proxy', () => {
  4. it('should warn missing property in render fns with `with`', () => {
  5. new Vue({
  6. template: `<div>{{ a }}</div>`
  7. }).$mount()
  8. expect(`Property or method "a" is not defined`).toHaveBeenWarned()
  9. })
  10. it('should warn missing property in render fns without `with`', () => {
  11. const render = function (h) {
  12. return h('div', [this.a])
  13. }
  14. render._withStripped = true
  15. new Vue({
  16. render
  17. }).$mount()
  18. expect(`Property or method "a" is not defined`).toHaveBeenWarned()
  19. })
  20. it('should not warn for hand-written render functions', () => {
  21. new Vue({
  22. render(h) {
  23. return h('div', [this.a])
  24. }
  25. }).$mount()
  26. expect(`Property or method "a" is not defined`).not.toHaveBeenWarned()
  27. })
  28. it('support symbols using the `in` operator in hand-written render functions', () => {
  29. const sym = Symbol()
  30. const vm = new Vue({
  31. created() {
  32. this[sym] = 'foo'
  33. },
  34. render(h) {
  35. if (sym in this) {
  36. return h('div', [this[sym]])
  37. }
  38. }
  39. }).$mount()
  40. expect(vm.$el.textContent).toBe('foo')
  41. })
  42. it('should warn properties starting with $ when found', () => {
  43. new Vue({
  44. data: { $a: 'foo' },
  45. template: `<div>{{ $a }}</div>`
  46. }).$mount()
  47. expect(
  48. `Property "$a" must be accessed with "$data.$a"`
  49. ).toHaveBeenWarned()
  50. })
  51. it('should warn properties starting with _ when found', () => {
  52. new Vue({
  53. data: { _foo: 'foo' },
  54. template: `<div>{{ _foo }}</div>`
  55. }).$mount()
  56. expect(
  57. `Property "_foo" must be accessed with "$data._foo"`
  58. ).toHaveBeenWarned()
  59. })
  60. it('should warn properties starting with $ when not found', () => {
  61. new Vue({
  62. template: `<div>{{ $a }}</div>`
  63. }).$mount()
  64. expect(`Property or method "$a" is not defined`).toHaveBeenWarned()
  65. expect(
  66. `Property "$a" must be accessed with "$data.$a"`
  67. ).not.toHaveBeenWarned()
  68. })
  69. it('should warn properties starting with $ when not found (with stripped)', () => {
  70. const render = function (h) {
  71. return h('p', this.$a)
  72. }
  73. render._withStripped = true
  74. new Vue({
  75. data: { $a: 'foo' },
  76. render
  77. }).$mount()
  78. expect(
  79. `Property "$a" must be accessed with "$data.$a"`
  80. ).toHaveBeenWarned()
  81. })
  82. it('should not warn properties starting with $ when using $data to access', () => {
  83. new Vue({
  84. data: { $a: 'foo' },
  85. template: `<div>{{ $data.$a }}</div>`
  86. }).$mount()
  87. expect(`Property or method "$a" is not defined`).not.toHaveBeenWarned()
  88. })
  89. })
  90. }