nue/packages/nuekit/test/render/svg.test.js at 6b1e137f1eef73860f4bfe9faceaefd1b019104c · nobkd/nue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

import { renderFonts, renderHMR, renderSVG, convertHTMLTag } from '../../src/render/svg'

const testfile = import.meta.filename

test('renderFont / inlined', async () => {
  const [ css ] = await renderFonts({ Test: testfile })
  expect(css).toInclude('data:font/woff2;base64')
  expect(css.length).toBeGreaterThan(200)
  expect(css).toInclude('@font-face')
})

test('renderFonts / external', async () => {
  const [ css ] = await renderFonts({ Test: 'test.woff2' }, true)
  expect(css).toBe(`@font-face { font-family: 'Test'; src: url('/test.woff2')}`)
})

test('renderFonts: bad path', async () => {
  const ret = await renderFonts({ Test: 'foo' })
  expect(ret).toEqual([])
})

test('renderHMR', () => {
  const html = renderHMR({
    body: '<svg>',
    base: 'foo.svg',
    fonts: ['@font-face {}'],
    styles: [{ url: '/foo.css' }]
  })

  expect(html).toInclude('@font-face')
  expect(html).toInclude('href="/foo.css"')
  expect(html).toInclude('/@nue/hmr.js')
  expect(html).toInclude('<body><svg></body>')
})

test('renderSVG', async () => {

  const asset = {
    async data() { return {} },
    async components() { return [] },
    async config() { return {} },

    base: 'test.svg',

    async parse() {
      const attr = [{ name: 'width', val: 100 }, { name: 'height', val: 100 }]
      return {
        root: { tag: 'svg', attr, meta: { css: '[ table ]' } },
      }
    },
    async assets() {
      async function text() { return `:root { --brand: #ccc }` }
      return [ { is_css: true, path: 'table.css', url: '/table.css', text } ]
    },
  }


  // SVG
  const svg = await renderSVG(asset, { fonts: { Test: testfile } })
  expect(svg).toInclude("url('data:font/woff2;base64")
  expect(svg).toInclude(':root{--brand:#ccc}')
  expect(svg).toInclude('</style></svg>')

  // HTML (HMR)
  const html = await renderSVG(asset, { hmr: true, fonts: { Test: 'test.woff' } })
  expect(html).toInclude('<!doctype html>')
  expect(html).toInclude('@font-face')
  expect(html).toInclude('<link rel="stylesheet" href="/table.css">')
  expect(html).toInclude('xmlns="http://www.w3.org/2000/svg')
  expect(html).toInclude('0 0 100 100')

})


test('custom <html> tag', () => {
  const { tag, children, attr } = convertHTMLTag({ tag: 'html', children: [{ tag: 'table' }] })
  expect(tag).toBe('foreignObject')
  expect(attr.length).toBe(4)
  expect(children[0].attr[0].name).toEqual('xmlns')

})