test: add test for URI encoding

Author: danielroe

test/unit/image.test.ts

@@ -42,4 +42,16 @@ describe('Renders simple image', () => {
     const sizes = wrapper.find('img').element.getAttribute('sizes')
     expect(sizes).toBe('(max-width: 500px) 500px, 900px')
   })
+
+  it('encodes characters', () => {
+    const img = mount(NuxtImg, {
+      propsData: {
+        width: 200,
+        height: 200,
+        sizes: '200,500:500,900:900',
+        src: '/汉字.png'
+      }
+    })
+    expect(img.html()).toMatchInlineSnapshot('"<img src=\\"/_ipx/s_900x900/%E6%B1%89%E5%AD%97.png\\" width=\\"200\\" height=\\"200\\" data-nuxt-img=\\"\\" sizes=\\"(max-width: 500px) 500px, 900px\\" srcset=\\"/_ipx/s_500x500/%E6%B1%89%E5%AD%97.png 500w, /_ipx/s_900x900/%E6%B1%89%E5%AD%97.png 900w\\">"')
+  })
 })

test/unit/picture.test.ts

@@ -70,10 +70,10 @@ describe('Renders simple image', () => {
 
     await nextTick()
 
-    ;[['source', 'srcset', '/_ipx/f_webp&s_500x500/image.jpeg'], ['img', 'src']].forEach(([element, attribute, src]) => {
-      const domSrc = wrapper.find(element).element.getAttribute(attribute)
-      expect(domSrc).toContain(src || newSource)
-    })
+      ;[['source', 'srcset', '/_ipx/f_webp&s_500x500/image.jpeg'], ['img', 'src']].forEach(([element, attribute, src]) => {
+        const domSrc = wrapper.find(element).element.getAttribute(attribute)
+        expect(domSrc).toContain(src || newSource)
+      })
   })
 
   it('sizes', () => {
@@ -89,4 +89,21 @@ describe('Renders simple image', () => {
     })
     expect(wrapper.html()).toMatchInlineSnapshot('"<picture><img data-nuxt-pic=\\"\\" src=\\"/image.svg\\"></picture>"')
   })
+
+  it('encodes characters', () => {
+    const img = mount(NuxtPicture, {
+      propsData: {
+        loading: 'lazy',
+        width: 200,
+        height: 200,
+        sizes: '200,500:500,900:900',
+        src: '/汉字.png'
+      }
+    })
+    expect(img.html()).toMatchInlineSnapshot(`
+      "<picture>
+        <source type=\\"image/webp\\" sizes=\\"(max-width: 500px) 500px, 900px\\" srcset=\\"/_ipx/f_webp&s_500x500/%E6%B1%89%E5%AD%97.png 500w, /_ipx/f_webp&s_900x900/%E6%B1%89%E5%AD%97.png 900w\\"><img width=\\"200\\" height=\\"200\\" data-nuxt-pic=\\"\\" src=\\"/_ipx/f_png&s_900x900/%E6%B1%89%E5%AD%97.png\\" sizes=\\"(max-width: 500px) 500px, 900px\\" srcset=\\"/_ipx/f_png&s_500x500/%E6%B1%89%E5%AD%97.png 500w, /_ipx/f_png&s_900x900/%E6%B1%89%E5%AD%97.png 900w\\">
+      </picture>"
+    `)
+  })
 })