vue3-yuanma/packages/compiler-sfc/__tests__/templateTransformSrcset.spec.ts
Evan You 6a0be882d4 feat(compiler-sfc): support transforming absolute asset urls
BREAKING CHANGE: `@vue/compiler-sfc`'s `transformAssetUrlsBase` option
has been removed. It is merged into `trasnformAssetUrls` which now also
accepts the format of

  ```ts
  {
    base?: string
    includeAbsolute?: string
    tags?: { [name: string]: string[] }
  }
  ```
2020-05-04 16:45:19 -04:00

61 lines
1.9 KiB
TypeScript

import { generate, baseParse, transform } from '@vue/compiler-core'
import {
transformSrcset,
createSrcsetTransformWithOptions
} from '../src/templateTransformSrcset'
import { transformElement } from '../../compiler-core/src/transforms/transformElement'
import { transformBind } from '../../compiler-core/src/transforms/vBind'
import {
AssetURLOptions,
normalizeOptions
} from '../src/templateTransformAssetUrl'
function compileWithSrcset(template: string, options?: AssetURLOptions) {
const ast = baseParse(template)
const srcsetTrasnform = options
? createSrcsetTransformWithOptions(normalizeOptions(options))
: transformSrcset
transform(ast, {
nodeTransforms: [srcsetTrasnform, transformElement],
directiveTransforms: {
bind: transformBind
}
})
return generate(ast, { mode: 'module' })
}
const src = `
<img src="./logo.png" srcset="./logo.png"/>
<img src="./logo.png" srcset="./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png, ./logo.png 2x"/>
<img src="./logo.png" srcset="./logo.png 2x, ./logo.png"/>
<img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x"/>
<img src="./logo.png" srcset="./logo.png, ./logo.png 2x, ./logo.png 3x"/>
<img src="/logo.png" srcset="/logo.png, /logo.png 2x"/>
<img src="https://example.com/logo.png" srcset="https://example.com/logo.png, https://example.com/logo.png 2x"/>
<img src="/logo.png" srcset="/logo.png, ./logo.png 2x"/>
`
describe('compiler sfc: transform srcset', () => {
test('transform srcset', () => {
expect(compileWithSrcset(src).code).toMatchSnapshot()
})
test('transform srcset w/ base', () => {
expect(
compileWithSrcset(src, {
base: '/foo'
}).code
).toMatchSnapshot()
})
test('transform srcset w/ includeAbsolute: true', () => {
expect(
compileWithSrcset(src, {
includeAbsolute: true
}).code
).toMatchSnapshot()
})
})