test: fix unit tests

src/providers/local/runtime.ts

@@ -23,7 +23,7 @@ export default <RuntimeProvider> {
 
     return {
       url: `/_image/local/remote/${modifiers.format || '_'}/${operationsString}/${src}`,
-      static: true
+      isStatic: true
     }
   }
 }

test/fixture/utils/img.ts

@@ -0,0 +1,80 @@
+require('jsdom-global')()
+const { mount } = require('@vue/test-utils')
+
+export function testComponent (Component, props) {
+  let src = '/image.png'
+  function $img () {
+    return src
+  }
+  $img.sizes = () => {
+    return [{
+      width: 200,
+      url: src
+    }, {
+      width: 500,
+      media: '(min-width: 500px)',
+      url: src
+    }, {
+      width: 900,
+      media: '(min-width: 900px)',
+      format: 'webp',
+      url: src
+    }]
+  }
+  $img.getPlaceholder = () => `/placeholder${src}`
+  let wrapper
+  test('Mount', () => {
+    // render the component
+    wrapper = mount({
+      inject: ['$img'],
+      ...Component
+    }, {
+      propsData: {
+        ...props,
+        src
+      },
+      provide: {
+        $img
+      }
+    })
+  })
+  test('Set src', () => {
+    const domSrc = wrapper.element.getAttribute('src')
+    expect(domSrc).toEqual(src)
+  })
+  test('Generate alt', () => {
+    expect(wrapper.vm.generatedAlt).toEqual('image')
+    const domAlt = wrapper.element.getAttribute('alt')
+    expect(domAlt).toEqual('image')
+  })
+
+  test('Change src', (done) => {
+    src = '/image.jpeg'
+    wrapper.setProps({ src })
+    process.nextTick(() => {
+      if (props.lazy === false) {
+        const domSrcBefore = wrapper.find('.nuxt-img').element.getAttribute('src')
+        expect(domSrcBefore).toEqual(src)
+        return done()
+      }
+
+      const domSrcAfter = wrapper.find('.nuxt-img').element.getAttribute('src')
+      expect(domSrcAfter).toEqual(src)
+      done()
+    })
+  })
+
+  test('sizes', () => {
+    const possibleSizes = [
+      '200px, (min-width: 500px) 500px, (min-width: 900px) 900px',
+      '200px'
+    ]
+    const sizes = wrapper.find('.nuxt-img').element.getAttribute('sizes')
+    expect(possibleSizes).toContain(sizes)
+  })
+
+  test('noscript', () => {
+    const noscript = wrapper.find('noscript')
+    expect(noscript.exists()).toBe(!!props.noScript)
+  })
+}

test/fixture/utils/componet.ts → test/fixture/utils/picture.ts

@@ -119,7 +119,7 @@ function testImageSets (wrapper) {
     '(min-width: 900px) 900px, (min-width: 500px) 500px, 200px',
     '200px'
   ]
-  const sizes = wrapper.find('.__nim_o').element.getAttribute('sizes')
+  const sizes = wrapper.find('.nuxt-img').element.getAttribute('sizes')
   expect(possibleSizes).toContain(sizes)
 }
 

test/unit/image.test.ts

@@ -1,52 +1,10 @@
-import { testComponent } from '../fixture/utils/componet'
+import { testComponent } from '../fixture/utils/img'
 import Component from '~/src/runtime/nuxt-img'
 
 describe('Renders simple image', () => {
   testComponent(Component, {
-    lazy: true,
     width: 200,
     height: 200,
-    sizes: '200,500:500,900:900 (webp)'
-  })
-})
-
-describe('Renders lazy=false', () => {
-  testComponent(Component, {
-    lazy: false,
-    width: '200px',
-    height: 200,
-    sizes: [
-      {
-        width: 200
-      }, {
-        width: 500,
-        breakpoint: 500
-      }, {
-        width: 900,
-        breakpoint: 900,
-        format: 'webp'
-      }
-    ]
-  })
-})
-
-describe('Renders noscript', () => {
-  testComponent(Component, {
-    lazy: true,
-    noScript: true,
-    width: 200,
-    height: 200,
-    sizes: [
-      {
-        width: 200
-      }, {
-        width: 500,
-        breakpoint: 500
-      }, {
-        width: 900,
-        media: '(min-width: 900px)',
-        format: 'webp'
-      }
-    ]
+    sizes: '200,500:500,900:900'
   })
 })

test/unit/picture.test.ts

@@ -1,4 +1,4 @@
-import { testComponent } from '../fixture/utils/componet'
+import { testComponent } from '../fixture/utils/picture'
 import Component from '~/src/runtime/nuxt-picture'
 
 describe('Renders simple image', () => {

test/unit/plugin.test.ts

@@ -44,20 +44,20 @@ describe('Plugin', () => {
   })
 
   test('Generate Random Image', () => {
-    const image = nuxtContext.$img('random:/test.png')
+    const image = nuxtContext.$img('/test.png', { provider: 'random' })
     expect(image.url).toEqual('https://source.unsplash.com/random/600x400')
   })
 
   test('Generate Circle Image with Cloudinary', () => {
-    const image = nuxtContext.$img('cloudinary+circle:/test.png', {})
-    expect(image.url).toEqual('https://res.cloudinary.com/nuxt/image/upload/r_100,f_auto,q_auto/test')
+    const image = nuxtContext.$img('/test.png', { provider: 'cloudinary', preset: 'circle' })
+    expect(image.url).toEqual('https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,r_100/test')
   })
 
   test('Deny undefined provider', () => {
-    expect(() => nuxtContext.$img('invalid:/test.png', {})).toThrow(Error)
+    expect(() => nuxtContext.$img('/test.png', { provider: 'invalid' })).toThrow(Error)
   })
 
   test('Deny undefined preset', () => {
-    expect(() => nuxtContext.$img('+invalid:/test.png', {})).toThrow(Error)
+    expect(() => nuxtContext.$img('/test.png', { preset: 'invalid' })).toThrow(Error)
   })
 })

test/unit/providers.test.ts

@@ -9,48 +9,48 @@ import imgix from '~/src/providers/imgix'
 const images = [
   {
     args: ['/test.png', {}],
-    local: { isStatic: true, url: '/_image/local/local/_/_/test.png' },
+    local: { isStatic: true, url: '/_image/local/remote/_/_/test.png' },
     cloudinary: { url: '/f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/' },
     fastly: { url: '/test.png?' },
     imgix: { url: '/test.png?' }
   },
   {
     args: ['/test.png', { width: 200 }],
-    local: { isStatic: true, url: '/_image/local/local/_/w_200/test.png' },
-    cloudinary: { url: '/w_200,f_auto,q_auto/test' },
+    local: { isStatic: true, url: '/_image/local/remote/_/w_200/test.png' },
+    cloudinary: { url: '/f_auto,q_auto,w_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
     fastly: { url: '/test.png?width=200' },
     imgix: { url: '/test.png?w=200' }
   },
   {
     args: ['/test.png', { height: 200 }],
-    local: { isStatic: true, url: '/_image/local/local/_/h_200/test.png' },
-    cloudinary: { url: '/h_200,f_auto,q_auto/test' },
+    local: { isStatic: true, url: '/_image/local/remote/_/h_200/test.png' },
+    cloudinary: { url: '/f_auto,q_auto,h_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=-x200' },
     fastly: { url: '/test.png?height=200' },
     imgix: { url: '/test.png?h=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200 }],
-    local: { isStatic: true, url: '/_image/local/local/_/s_200_200/test.png' },
-    cloudinary: { url: '/w_200,h_200,f_auto,q_auto/test' },
+    local: { isStatic: true, url: '/_image/local/remote/_/s_200_200/test.png' },
+    cloudinary: { url: '/f_auto,q_auto,w_200,h_200/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x200' },
     fastly: { url: '/test.png?width=200&height=200' },
     imgix: { url: '/test.png?w=200&h=200' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
-    local: { isStatic: true, url: '/_image/local/local/_/s_200_200_contain/test.png' },
-    cloudinary: { url: '/w_200,h_200,c_scale,f_auto,q_auto/test' },
+    local: { isStatic: true, url: '/_image/local/remote/_/s_200_200_contain/test.png' },
+    cloudinary: { url: '/f_auto,q_auto,w_200,h_200,c_scale/test' },
     twicpics: { url: '/test.png?twic=v1/contain=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds' },
     imgix: { url: '/test.png?w=200&h=200&fit=fill' }
   },
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
-    local: { isStatic: true, url: '/_image/local/local/jpeg/s_200_200_contain/test.png' },
-    cloudinary: { url: '/w_200,h_200,c_scale,f_jpeg,q_auto/test' },
+    local: { isStatic: true, url: '/_image/local/remote/jpeg/s_200_200_contain/test.png' },
+    cloudinary: { url: '/f_jpeg,q_auto,w_200,h_200,c_scale/test' },
     twicpics: { url: '/test.png?twic=v1/format=jpeg/contain=200x200' },
     fastly: { url: '/test.png?width=200&height=200&fit=bounds&format=jpeg' },
     imgix: { url: '/test.png?w=200&h=200&fit=fill&fm=jpeg' }