From f24d66d746e30f552da78746c5ae82fb09ad4821 Mon Sep 17 00:00:00 2001
From: Maya Shavin <6650139+mayashavin@users.noreply.github.com>
Date: Fri, 13 Nov 2020 16:07:22 +0200
Subject: [PATCH] fix(cloudinary): fit types, auto format & quality  (#76)

---
 src/providers/cloudinary/runtime.ts | 26 ++++++++++++++++++++++----
 test/unit/plugin.test.ts            |  2 +-
 test/unit/providers.test.ts         | 12 ++++++------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/providers/cloudinary/runtime.ts b/src/providers/cloudinary/runtime.ts
index 3384ac985..7fefb0d50 100644
--- a/src/providers/cloudinary/runtime.ts
+++ b/src/providers/cloudinary/runtime.ts
@@ -6,7 +6,8 @@ const operationsGenerator = createOperationsGenerator({
     fit: 'c',
     width: 'w',
     height: 'h',
-    format: 'f'
+    format: 'f',
+    quality: 'q'
   },
   valueMap: {
     fit: {
@@ -14,19 +15,36 @@ const operationsGenerator = createOperationsGenerator({
       inside: 'pad',
       outside: 'lpad',
       cover: 'fit',
-      contain: 'scale'
+      contain: 'scale',
+      minCover: 'mfit',
+      minInside: 'mpad',
+      thumbnail: 'thumb',
+      cropping: 'crop',
+      coverLimit: 'limit'
     }
   },
   joinWith: ',',
   formatter: (key, value) => `${key}_${value}`
 })
 
+const defaultModifiers = {
+  format: 'auto',
+  quality: 'auto'
+}
+
 export default <RuntimeProvider> {
   getImage (src: string, modifiers: ImageModifiers, options: any) {
-    const operations = operationsGenerator(modifiers)
+    const mergeModifiers = {
+      ...modifiers,
+      format: modifiers.format || defaultModifiers.format,
+      quality: modifiers.quality || defaultModifiers.quality
+    }
+
+    const srcWithoutExtension = src.replace(/\.[^/.]+$/, '')
+    const operations = operationsGenerator(mergeModifiers as ImageModifiers)
 
     return {
-      url: cleanDoubleSlashes(options.baseURL + '/' + operations + src)
+      url: cleanDoubleSlashes(options.baseURL + '/' + operations + srcWithoutExtension)
     }
   }
 }
diff --git a/test/unit/plugin.test.ts b/test/unit/plugin.test.ts
index bf5c89a23..c0f368991 100644
--- a/test/unit/plugin.test.ts
+++ b/test/unit/plugin.test.ts
@@ -50,7 +50,7 @@ describe('Plugin', () => {
 
   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/test.png')
+    expect(image.url).toEqual('https://res.cloudinary.com/nuxt/image/upload/r_100,f_auto,q_auto/test')
   })
 
   test('Deny undefined provider', () => {
diff --git a/test/unit/providers.test.ts b/test/unit/providers.test.ts
index 5838aaec0..23fbc893a 100644
--- a/test/unit/providers.test.ts
+++ b/test/unit/providers.test.ts
@@ -9,7 +9,7 @@ const images = [
   {
     args: ['/test.png', {}],
     local: { isStatic: true, url: '/_image/ipx/local/_/_/test.png' },
-    cloudinary: { url: '/test.png' },
+    cloudinary: { url: '/f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/' },
     fastly: { url: '/test.png?' },
     imgix: { url: '/test.png?' }
@@ -17,7 +17,7 @@ const images = [
   {
     args: ['/test.png', { width: 200 }],
     local: { isStatic: true, url: '/_image/ipx/local/_/w_200/test.png' },
-    cloudinary: { url: '/w_200/test.png' },
+    cloudinary: { url: '/w_200,f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
     fastly: { url: '/test.png?width=200' },
     imgix: { url: '/test.png?w=200' }
@@ -25,7 +25,7 @@ const images = [
   {
     args: ['/test.png', { height: 200 }],
     local: { isStatic: true, url: '/_image/ipx/local/_/h_200/test.png' },
-    cloudinary: { url: '/h_200/test.png' },
+    cloudinary: { url: '/h_200,f_auto,q_auto/test' },
     twicpics: { url: '/test.png?twic=v1/cover=-x200' },
     fastly: { url: '/test.png?height=200' },
     imgix: { url: '/test.png?h=200' }
@@ -33,7 +33,7 @@ const images = [
   {
     args: ['/test.png', { width: 200, height: 200 }],
     local: { isStatic: true, url: '/_image/ipx/local/_/s_200_200/test.png' },
-    cloudinary: { url: '/w_200,h_200/test.png' },
+    cloudinary: { url: '/w_200,h_200,f_auto,q_auto/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' }
@@ -41,7 +41,7 @@ const images = [
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain' }],
     local: { isStatic: true, url: '/_image/ipx/local/_/s_200_200_contain/test.png' },
-    cloudinary: { url: '/w_200,h_200,c_scale/test.png' },
+    cloudinary: { url: '/w_200,h_200,c_scale,f_auto,q_auto/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' }
@@ -49,7 +49,7 @@ const images = [
   {
     args: ['/test.png', { width: 200, height: 200, fit: 'contain', format: 'jpeg' }],
     local: { isStatic: true, url: '/_image/ipx/local/jpeg/s_200_200_contain/test.png' },
-    cloudinary: { url: '/w_200,h_200,c_scale,f_jpeg/test.png' },
+    cloudinary: { url: '/w_200,h_200,c_scale,f_jpeg,q_auto/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' }