templateTransformSrcset.spec.ts 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. import { generate, baseParse, transform } from '@vue/compiler-core'
  2. import {
  3. transformSrcset,
  4. createSrcsetTransformWithOptions
  5. } from '../src/templateTransformSrcset'
  6. import { transformElement } from '../../compiler-core/src/transforms/transformElement'
  7. import { transformBind } from '../../compiler-core/src/transforms/vBind'
  8. import {
  9. AssetURLOptions,
  10. normalizeOptions
  11. } from '../src/templateTransformAssetUrl'
  12. function compileWithSrcset(template: string, options?: AssetURLOptions) {
  13. const ast = baseParse(template)
  14. const srcsetTransform = options
  15. ? createSrcsetTransformWithOptions(normalizeOptions(options))
  16. : transformSrcset
  17. transform(ast, {
  18. nodeTransforms: [srcsetTransform, transformElement],
  19. directiveTransforms: {
  20. bind: transformBind
  21. }
  22. })
  23. return generate(ast, { mode: 'module' })
  24. }
  25. const src = `
  26. <img src="./logo.png" srcset=""/>
  27. <img src="./logo.png" srcset="./logo.png"/>
  28. <img src="./logo.png" srcset="./logo.png 2x"/>
  29. <img src="./logo.png" srcset="./logo.png 2x"/>
  30. <img src="./logo.png" srcset="./logo.png, ./logo.png 2x"/>
  31. <img src="./logo.png" srcset="./logo.png 2x, ./logo.png"/>
  32. <img src="./logo.png" srcset="./logo.png 2x, ./logo.png 3x"/>
  33. <img src="./logo.png" srcset="./logo.png, ./logo.png 2x, ./logo.png 3x"/>
  34. <img src="/logo.png" srcset="/logo.png, /logo.png 2x"/>
  35. <img src="https://example.com/logo.png" srcset="https://example.com/logo.png, https://example.com/logo.png 2x"/>
  36. <img src="/logo.png" srcset="/logo.png, ./logo.png 2x"/>
  37. <img src="data:image/png;base64,i" srcset="data:image/png;base64,i 1x, data:image/png;base64,i 2x"/>
  38. `
  39. describe('compiler sfc: transform srcset', () => {
  40. test('transform srcset', () => {
  41. expect(compileWithSrcset(src).code).toMatchSnapshot()
  42. })
  43. test('transform srcset w/ base', () => {
  44. expect(
  45. compileWithSrcset(src, {
  46. base: '/foo'
  47. }).code
  48. ).toMatchSnapshot()
  49. })
  50. test('transform srcset w/ includeAbsolute: true', () => {
  51. expect(
  52. compileWithSrcset(src, {
  53. includeAbsolute: true
  54. }).code
  55. ).toMatchSnapshot()
  56. })
  57. })