fix test cases

Author: manu4543

src/getResponsiveImageAttributes.ts

@@ -3,7 +3,7 @@ import { buildSrc } from './url'
 
 /* Default break‑point pools */
 const DEFAULT_DEVICE_BREAKPOINTS = [640, 750, 828, 1080, 1200, 1920, 2048, 3840] as const
-const DEFAULT_IMAGE_BREAKPOINTS = [16, 32, 48, 64, 96, 128, 256, 320, 420] as const
+const DEFAULT_IMAGE_BREAKPOINTS = [16, 32, 48, 64, 96, 128, 256, 384] as const
 
 export interface GetImageAttributesOptions extends SrcOptions {
   width?: number               // explicit rendered width
@@ -62,11 +62,13 @@ export function getResponsiveImageAttributes(
       .map((w, i) => `${buildURL(w)} ${descriptorKind === 'w' ? w : i + 1}${descriptorKind}`)
       .join(', ') || undefined
 
+  const finalSizes = sizes ?? (descriptorKind === 'w' ? '100vw' : undefined)
+
   return {
     src: buildURL(candidates[candidates.length - 1]), // largest candidate
     srcSet,
-    sizes: sizes ?? (descriptorKind === 'w' ? '100vw' : undefined),
-    width,
+    ...(finalSizes ? { sizes: finalSizes } : {}), // include only when defined
+    ...(width !== undefined ? { width } : {}),  // include only when defined
   }
 }
 

test/getResponsiveImageAttributes.test.js

@@ -1,18 +1,17 @@
 const { expect } = require('chai');
 const { getResponsiveImageAttributes } = require('../src/getResponsiveImageAttributes');
 
-describe.only('getResponsiveImageAttributes – smoke run‑through', () => {
+describe.only('getResponsiveImageAttributes', () => {
   it('bare minimum input', () => {
     const out = getResponsiveImageAttributes({
       src: 'sample.jpg',
       urlEndpoint: 'https://ik.imagekit.io/demo',
     });
-    // Expected object based on default deviceSizes and imageSizes:
+    // Expected object based on default deviceBreakpoints and imageBreakpoints:
     expect(out).to.deep.equal({
       src: "https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max",
       srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/sample.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/sample.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/sample.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max 3840w",
-      sizes: "100vw",
-      width: undefined
+      sizes: "100vw"
     });
   });
 
@@ -26,8 +25,7 @@ describe.only('getResponsiveImageAttributes – smoke run‑through', () => {
     expect(out).to.deep.equal({
       src: "https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max",
       srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/sample.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/sample.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/sample.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max 3840w",
-      sizes: "100vw",
-      width: undefined
+      sizes: "100vw"
     });
   });
 
@@ -39,9 +37,8 @@ describe.only('getResponsiveImageAttributes – smoke run‑through', () => {
     });
     // When width is provided without sizes attribute, the DPR strategy should be used.
     expect(out).to.deep.equal({
-      src: "https://ik.imagekit.io/demo/sample.jpg?tr=w-750,c-at_max",
-      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-640,c-at_max 1x, https://ik.imagekit.io/demo/sample.jpg?tr=w-750,c-at_max 2x",
-      sizes: undefined,
+      src: "https://ik.imagekit.io/demo/sample.jpg?tr=w-828,c-at_max",
+      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-640,c-at_max 1x, https://ik.imagekit.io/demo/sample.jpg?tr=w-828,c-at_max 2x",
       width: 400
     });
   });
@@ -50,15 +47,14 @@ describe.only('getResponsiveImageAttributes – smoke run‑through', () => {
     const out = getResponsiveImageAttributes({
       src: 'sample.jpg',
       urlEndpoint: 'https://ik.imagekit.io/demo',
-      deviceSizes: [200, 400, 800],
-      imageSizes: [100],
+      deviceBreakpoints: [200, 400, 800],
+      imageBreakpoints: [100],
     });
     // For custom breakpoints, the breakpoints will be derived from the provided arrays.
     expect(out).to.deep.equal({
       src: "https://ik.imagekit.io/demo/sample.jpg?tr=w-800,c-at_max",
       srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-200,c-at_max 200w, https://ik.imagekit.io/demo/sample.jpg?tr=w-400,c-at_max 400w, https://ik.imagekit.io/demo/sample.jpg?tr=w-800,c-at_max 800w",
-      sizes: "100vw",
-      width: undefined
+      sizes: "100vw"
     });
   });
 
@@ -71,9 +67,8 @@ describe.only('getResponsiveImageAttributes – smoke run‑through', () => {
     });
     // The provided transformation should be preserved in the output.
     expect(out).to.deep.equal({
-      src: "https://ik.imagekit.io/demo/sample.jpg?tr=height-300,w-1200,c-at_max",
-      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=height-300,w-640,c-at_max 1x, https://ik.imagekit.io/demo/sample.jpg?tr=height-300,w-1200,c-at_max 2x",
-      sizes: undefined,
+      src: "https://ik.imagekit.io/demo/sample.jpg?tr=h-300:w-1080,c-at_max",
+      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=h-300:w-640,c-at_max 1x, https://ik.imagekit.io/demo/sample.jpg?tr=h-300:w-1080,c-at_max 2x",
       width: 500
     });
   });
@@ -87,8 +82,8 @@ describe.only('getResponsiveImageAttributes – smoke run‑through', () => {
     });
     // Both sizes and width are provided, so the function should apply the sizes attribute while using width for DPR strategy.
     expect(out).to.deep.equal({
-      src: "https://ik.imagekit.io/demo/sample.jpg?tr=w-1200,c-at_max",
-      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/sample.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/sample.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/sample.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max 3840w",
+      src: "https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max",
+      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/sample.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/sample.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/sample.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/sample.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max 3840w",
       sizes: "50vw",
       width: 600
     });
@@ -106,9 +101,8 @@ describe.only('getResponsiveImageAttributes – smoke run‑through', () => {
     });
     // Multiple caller transformations should be combined appropriately.
     expect(out).to.deep.equal({
-      src: "https://ik.imagekit.io/demo/sample.jpg?tr=height-300,aiRemoveBackground-true,w-828,c-at_max",
-      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=height-300,aiRemoveBackground-true,w-640,c-at_max 1x, https://ik.imagekit.io/demo/sample.jpg?tr=height-300,aiRemoveBackground-true,w-828,c-at_max 2x",
-      sizes: undefined,
+      src: "https://ik.imagekit.io/demo/sample.jpg?tr=h-300:e-bgremove:w-1080,c-at_max",
+      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=h-300:e-bgremove:w-640,c-at_max 1x, https://ik.imagekit.io/demo/sample.jpg?tr=h-300:e-bgremove:w-1080,c-at_max 2x",
       width: 450
     });
   });
@@ -122,9 +116,8 @@ describe.only('getResponsiveImageAttributes – smoke run‑through', () => {
     // When specified with a sizes attribute that prunes breakpoints, the output should reflect the pruned values.
     expect(out).to.deep.equal({
       src: "https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max",
-      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/sample.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/sample.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/sample.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max 3840w",
-      sizes: "(min-width: 800px) 33vw, 100vw",
-      width: undefined
+      srcSet: "https://ik.imagekit.io/demo/sample.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/sample.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/sample.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/sample.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/sample.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/sample.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/sample.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/sample.jpg?tr=w-3840,c-at_max 3840w",
+      sizes: "(min-width: 800px) 33vw, 100vw"
     });
   });
 });