From 2f642a6c7391707355c6500295592f417d5f6211 Mon Sep 17 00:00:00 2001 From: Simon Ihmig Date: Sun, 9 Jun 2024 17:38:13 +0200 Subject: [PATCH] Add cdn tests --- packages/cdn/package.json | 6 ++- packages/cdn/tests/cloudinary.test.ts | 75 +++++++++++++++++++++++++++ packages/cdn/tests/imgix.test.ts | 56 ++++++++++++++++++++ packages/core/src/config.ts | 5 +- pnpm-lock.yaml | 3 ++ 5 files changed, 142 insertions(+), 3 deletions(-) create mode 100644 packages/cdn/tests/cloudinary.test.ts create mode 100644 packages/cdn/tests/imgix.test.ts diff --git a/packages/cdn/package.json b/packages/cdn/package.json index e5030e316..5a9625fad 100644 --- a/packages/cdn/package.json +++ b/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" diff --git a/packages/cdn/tests/cloudinary.test.ts b/packages/cdn/tests/cloudinary.test.ts new file mode 100644 index 000000000..1a6e06934 --- /dev/null +++ b/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('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', + ); + }); +}); diff --git a/packages/cdn/tests/imgix.test.ts b/packages/cdn/tests/imgix.test.ts new file mode 100644 index 000000000..2a11ae8d2 --- /dev/null +++ b/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('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', + ); + }); +}); diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index c6d2f35c9..060e4e81c 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -6,6 +6,9 @@ export function getConfig>( return configNamespaces.get(namespace) as C | undefined; } -export function setConfig(namespace: string, config: object): void { +export function setConfig>( + namespace: string, + config: C, +): void { configNamespaces.set(namespace, config); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b4c3b0a31..886b1b1d0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -67,6 +67,9 @@ importers: typescript: specifier: 5.4.5 version: 5.4.5 + vitest: + specifier: 1.6.0 + version: 1.6.0(@types/node@20.14.2)(jsdom@19.0.0)(terser@5.31.0) packages/core: devDependencies: