html.spec.ts — vue Source File

Architecture documentation for html.spec.ts, a typescript file in the vue codebase. 1 imports, 0 dependents.

File typescript 1 imports

Entity Profile

Dependency Diagram

graph LR
  7c49381e_075c_d297_3e45_a47a2da3c323["html.spec.ts"]
  db9e7bef_009d_3918_6e7d_543a36a38d75["vue"]
  7c49381e_075c_d297_3e45_a47a2da3c323 --> db9e7bef_009d_3918_6e7d_543a36a38d75
  style 7c49381e_075c_d297_3e45_a47a2da3c323 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import Vue from 'vue'

describe('Directive v-html', () => {
  it('should render html', () => {
    const vm = new Vue({
      template: '<div v-html="a"></div>',
      data: { a: 'hello' }
    }).$mount()
    expect(vm.$el.innerHTML).toBe('hello')
  })

  it('should encode html entities', () => {
    const vm = new Vue({
      template: '<div v-html="a"></div>',
      data: { a: '<span>&lt;</span>' }
    }).$mount()
    expect(vm.$el.innerHTML).toBe('<span>&lt;</span>')
  })

  it('should work inline', () => {
    const vm = new Vue({
      template: `<div v-html="'<span>&lt;</span>'"></div>`
    }).$mount()
    expect(vm.$el.innerHTML).toBe('<span>&lt;</span>')
  })

  it('should work inline in DOM', () => {
    const el = document.createElement('div')
    el.innerHTML = `<div v-html="'<span>&lt;</span>'"></div>`
    const vm = new Vue({ el })
    expect(vm.$el.children[0].innerHTML).toBe('<span>&lt;</span>')
  })

  it('should support all value types', done => {
    const vm = new Vue({
      template: '<div v-html="a"></div>',
      data: { a: false }
    }).$mount()
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe('false')
      vm.a = []
    })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('[]')
        vm.a = {}
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('{}')
        vm.a = {
          toString() {
            return 'foo'
          }
        }
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('foo')
        vm.a = {
          toJSON() {
            return { foo: 'bar' }
          }
        }
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('{\n  "foo": "bar"\n}')
        vm.a = 123
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('123')
        vm.a = 0
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('0')
        vm.a = ' '
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe(' ')
        vm.a = '    '
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('    ')
        vm.a = null
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('')
        vm.a = undefined
      })
      .then(() => {
        expect(vm.$el.innerHTML).toBe('')
      })
      .then(done)
  })
})

Dependencies

Source

View on GitHub

Frequently Asked Questions

What does html.spec.ts do?

html.spec.ts is a source file in the vue codebase, written in typescript.

What does html.spec.ts depend on?

html.spec.ts imports 1 module(s): vue.

Where is html.spec.ts in the architecture?

html.spec.ts is located at test/unit/features/directives/html.spec.ts (directory: test/unit/features/directives).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free