Merge pull request #613 from simonihmig/cdn-tests

Add cdn tests

packages/cdn/package.json

@@ -19,7 +19,8 @@
     "lint:js:fix": "eslint . --fix",
     "lint:types": "tsc --noEmit",
     "start": "pkgroll --watch",
-    "test": "echo 'No tests available'",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "prepack": "pnpm turbo build"
   },
   "dependencies": {
@@ -36,7 +37,8 @@
     "eslint-plugin-prettier": "5.1.3",
     "pkgroll": "2.1.1",
     "prettier": "3.3.1",
-    "typescript": "5.4.5"
+    "typescript": "5.4.5",
+    "vitest": "1.6.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

packages/cdn/tests/cloudinary.test.ts

@@ -0,0 +1,75 @@
+import { beforeAll, describe, expect, test } from 'vitest';
+import { CloudinaryConfig, cloudinaryProvider } from '../src';
+import { setConfig } from '@responsive-image/core';
+
+describe('cloudinary', function () {
+  beforeAll(() => {
+    setConfig<CloudinaryConfig>('cloudinary', { cloudName: 'dummy' });
+  });
+
+  test('it supports jpg, png, webp, avif image types by default', function () {
+    const result = cloudinaryProvider('foo/bar.jpg');
+
+    expect(result?.imageTypes).toEqual(['png', 'jpeg', 'webp', 'avif']);
+  });
+
+  test('it supports custom image types', function () {
+    const result = cloudinaryProvider('foo/bar.jpg', { formats: ['webp'] });
+
+    expect(result?.imageTypes).toEqual(['webp']);
+  });
+
+  test('it returns correct fetch image URLs', function () {
+    const result = cloudinaryProvider('https://via.placeholder.com/150');
+
+    expect(result.imageUrlFor(100, 'jpeg')).toBe(
+      'https://res.cloudinary.com/dummy/image/fetch/w_100,c_limit,q_auto,f_jpg/https%3A%2F%2Fvia.placeholder.com%2F150',
+    );
+
+    expect(result.imageUrlFor(1000, 'webp')).toBe(
+      'https://res.cloudinary.com/dummy/image/fetch/w_1000,c_limit,q_auto,f_webp/https%3A%2F%2Fvia.placeholder.com%2F150',
+    );
+  });
+
+  test('it returns correct upload image URLs', function () {
+    const result = cloudinaryProvider('foo/bar.jpg');
+
+    expect(result.imageUrlFor(100, 'jpeg')).toBe(
+      'https://res.cloudinary.com/dummy/image/upload/w_100,c_limit,q_auto/foo/bar.jpeg',
+    );
+
+    expect(result.imageUrlFor(1000, 'webp')).toBe(
+      'https://res.cloudinary.com/dummy/image/upload/w_1000,c_limit,q_auto/foo/bar.webp',
+    );
+  });
+
+  test('it returns custom params', function () {
+    const result = cloudinaryProvider('foo/bar.jpg', {
+      transformations: 'co_rgb:20a020,e_colorize:50',
+    });
+
+    expect(result.imageUrlFor(100, 'jpeg')).toBe(
+      'https://res.cloudinary.com/dummy/image/upload/co_rgb:20a020,e_colorize:50/w_100,c_limit,q_auto/foo/bar.jpeg',
+    );
+  });
+
+  test('it returns custom chained params', function () {
+    const result = cloudinaryProvider('foo/bar.jpg', {
+      transformations: 'co_rgb:20a020,e_colorize:50/ar_1.0,c_fill,w_150/r_max',
+    });
+
+    expect(result.imageUrlFor(100, 'jpeg')).toBe(
+      'https://res.cloudinary.com/dummy/image/upload/co_rgb:20a020,e_colorize:50/ar_1.0,c_fill,w_150/r_max/w_100,c_limit,q_auto/foo/bar.jpeg',
+    );
+  });
+
+  test('it supports custom quality setting', function () {
+    const result = cloudinaryProvider('foo/bar.jpg', {
+      quality: 50,
+    });
+
+    expect(result.imageUrlFor(100, 'jpeg')).toBe(
+      'https://res.cloudinary.com/dummy/image/upload/w_100,c_limit,q_50/foo/bar.jpeg',
+    );
+  });
+});

packages/cdn/tests/imgix.test.ts

@@ -0,0 +1,56 @@
+import { beforeAll, describe, expect, test } from 'vitest';
+import { ImgixConfig, imgixProvider } from '../src';
+import { setConfig } from '@responsive-image/core';
+
+describe('imgix', function () {
+  beforeAll(() => {
+    setConfig<ImgixConfig>('imgix', { domain: 'dummy.imgix.net' });
+  });
+
+  test('it supports jpg, png and webp image types by default', function () {
+    const result = imgixProvider('foo/bar.jpg');
+
+    expect(result?.imageTypes).toEqual(['png', 'jpeg', 'webp']);
+  });
+
+  test('it supports custom image types', function () {
+    const result = imgixProvider('foo/bar.jpg', { formats: ['webp'] });
+
+    expect(result?.imageTypes).toEqual(['webp']);
+  });
+
+  test('it returns correct image URLs', function () {
+    const result = imgixProvider('foo/bar.jpg');
+
+    expect(result.imageUrlFor(100, 'jpeg')).toBe(
+      'https://dummy.imgix.net/foo/bar.jpg?fm=jpg&w=100&fit=max',
+    );
+
+    expect(result.imageUrlFor(1000, 'webp')).toBe(
+      'https://dummy.imgix.net/foo/bar.jpg?fm=webp&w=1000&fit=max',
+    );
+  });
+
+  test('it returns custom params', function () {
+    const result = imgixProvider('foo/bar.jpg', {
+      params: {
+        monochrome: '44768B',
+        px: 10,
+      },
+    });
+
+    expect(result.imageUrlFor(100, 'jpeg')).toBe(
+      'https://dummy.imgix.net/foo/bar.jpg?fm=jpg&w=100&fit=max&monochrome=44768B&px=10',
+    );
+  });
+
+  test('it supports custom quality setting', function () {
+    const result = imgixProvider('foo/bar.jpg', {
+      quality: 50,
+    });
+
+    expect(result.imageUrlFor(100, 'jpeg')).toBe(
+      'https://dummy.imgix.net/foo/bar.jpg?fm=jpg&w=100&fit=max&q=50',
+    );
+  });
+});

packages/core/src/config.ts

@@ -6,6 +6,9 @@ export function getConfig<C extends object = Record<string, unknown>>(
   return configNamespaces.get(namespace) as C | undefined;
 }
 
-export function setConfig(namespace: string, config: object): void {
+export function setConfig<C extends object = Record<string, unknown>>(
+  namespace: string,
+  config: C,
+): void {
   configNamespaces.set(namespace, config);
 }