show.spec.ts — vue Source File

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

File typescript 1 imports

Entity Profile

Dependency Diagram

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

Relationship Graph

Source Code

import Vue from 'vue'

describe('Directive v-show', () => {
  it('should check show value is truthy', () => {
    const vm = new Vue({
      template: '<div><span v-show="foo">hello</span></div>',
      data: { foo: true }
    }).$mount()
    expect(vm.$el.firstChild.style.display).toBe('')
  })

  it('should check show value is falsy', () => {
    const vm = new Vue({
      template: '<div><span v-show="foo">hello</span></div>',
      data: { foo: false }
    }).$mount()
    expect(vm.$el.firstChild.style.display).toBe('none')
  })

  it('should update show value changed', done => {
    const vm = new Vue({
      template: '<div><span v-show="foo">hello</span></div>',
      data: { foo: true }
    }).$mount()
    expect(vm.$el.firstChild.style.display).toBe('')
    vm.foo = false
    waitForUpdate(() => {
      expect(vm.$el.firstChild.style.display).toBe('none')
      vm.foo = {}
    })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('')
        vm.foo = 0
      })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('none')
        vm.foo = []
      })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('')
        vm.foo = null
      })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('none')
        vm.foo = '0'
      })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('')
        vm.foo = undefined
      })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('none')
        vm.foo = 1
      })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('')
      })
      .then(done)
  })

  it('should respect display value in style attribute', done => {
    const vm = new Vue({
      template:
        '<div><span v-show="foo" style="display:block">hello</span></div>',
      data: { foo: true }
    }).$mount()
    expect(vm.$el.firstChild.style.display).toBe('block')
    vm.foo = false
    waitForUpdate(() => {
      expect(vm.$el.firstChild.style.display).toBe('none')
      vm.foo = true
    })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('block')
      })
      .then(done)
  })

  it('should support unbind when reused', done => {
    const vm = new Vue({
      template:
        '<div v-if="tester"><span v-show="false"></span></div>' +
        '<div v-else><span @click="tester=!tester">show</span></div>',
      data: { tester: true }
    }).$mount()
    expect(vm.$el.firstChild.style.display).toBe('none')
    vm.tester = false
    waitForUpdate(() => {
      expect(vm.$el.firstChild.style.display).toBe('')
      vm.tester = true
    })
      .then(() => {
        expect(vm.$el.firstChild.style.display).toBe('none')
      })
      .then(done)
  })
})

Dependencies

Source

View on GitHub

Frequently Asked Questions

What does show.spec.ts do?

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

What does show.spec.ts depend on?

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

Where is show.spec.ts in the architecture?

show.spec.ts is located at test/unit/features/directives/show.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