style.spec.ts — vue Source File

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

File typescript 2 imports

Entity Profile

Dependency Diagram

graph LR
  b7c61c7d_2783_2075_4066_aeeae79ed289["style.spec.ts"]
  22f6e3b3_fd99_35d7_94cf_527e68438cb3["patch"]
  b7c61c7d_2783_2075_4066_aeeae79ed289 --> 22f6e3b3_fd99_35d7_94cf_527e68438cb3
  973389ac_8625_30a3_53ce_b1b48fae58c5["vnode"]
  b7c61c7d_2783_2075_4066_aeeae79ed289 --> 973389ac_8625_30a3_53ce_b1b48fae58c5
  style b7c61c7d_2783_2075_4066_aeeae79ed289 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { patch } from 'web/runtime/patch'
import VNode from 'core/vdom/vnode'

describe('vdom style module', () => {
  it('should create an element with style', () => {
    const vnode = new VNode('p', { style: { fontSize: '12px' } })
    const elm = patch(null, vnode)
    expect(elm.style.fontSize).toBe('12px')
  })

  it('should create an element with array style', () => {
    const vnode = new VNode('p', {
      style: [{ fontSize: '12px' }, { color: 'red' }]
    })
    const elm = patch(null, vnode)
    expect(elm.style.fontSize).toBe('12px')
    expect(elm.style.color).toBe('red')
  })

  it('should change elements style', () => {
    const vnode1 = new VNode('p', { style: { fontSize: '12px' } })
    const vnode2 = new VNode('p', {
      style: { fontSize: '10px', display: 'block' }
    })
    patch(null, vnode1)
    const elm = patch(vnode1, vnode2)
    expect(elm.style.fontSize).toBe('10px')
    expect(elm.style.display).toBe('block')
  })

  it('should remove elements attrs', () => {
    const vnode1 = new VNode('p', { style: { fontSize: '12px' } })
    const vnode2 = new VNode('p', { style: { display: 'block' } })
    patch(null, vnode1)
    const elm = patch(vnode1, vnode2)
    expect(elm.style.fontSize).toBe('')
    expect(elm.style.display).toBe('block')
  })

  it('border related style should update correctly', () => {
    const vnode1 = new VNode('p', {
      style: { border: '10px solid red', 'border-bottom': '10px solid blue' }
    })
    const vnode2 = new VNode('p', {
      style: {
        'border-right': '10px solid red',
        'border-bottom': '10px solid blue'
      }
    })
    patch(null, vnode1)
    const elm = patch(vnode1, vnode2)
    expect(elm.style.borderBottom).toBe('10px solid blue')
  })
})

Dependencies

patch
vnode

Source

View on GitHub

Frequently Asked Questions

What does style.spec.ts do?

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

What does style.spec.ts depend on?

style.spec.ts imports 2 module(s): patch, vnode.

Where is style.spec.ts in the architecture?

style.spec.ts is located at test/unit/modules/vdom/modules/style.spec.ts (directory: test/unit/modules/vdom/modules).

Analyze Your Own Codebase

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

Try Supermodel Free