From 5c2d70edfe1a77d479513953fe9315ef92aa6eb6 Mon Sep 17 00:00:00 2001 From: sccalabr <4111230+sccalabr@users.noreply.github.com> Date: Sat, 5 Oct 2024 22:58:39 -0700 Subject: [PATCH] Writing tests and fixing default to match documentation. --- .../src/helpers/getCldOgImageUrl.ts | 2 +- .../GetCldOgImageUrl/GetCldOgImageUrl.test.ts | 70 ++++++++++-------- .../tests/images/turtle.jpeg | Bin 8840 -> 0 bytes 3 files changed, 40 insertions(+), 32 deletions(-) delete mode 100644 packages/svelte-cloudinary/tests/images/turtle.jpeg diff --git a/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts b/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts index e2d560f1..731c3129 100644 --- a/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts +++ b/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts @@ -33,7 +33,7 @@ export function getCldOgImageUrl( ...options, format: options.format ?? 'jpg', width: options.width ?? 1200, - height: options.height ?? 627, + height: options.height ?? 630, }, configOverride, analyticsOverride, diff --git a/packages/svelte-cloudinary/tests/GetCldOgImageUrl/GetCldOgImageUrl.test.ts b/packages/svelte-cloudinary/tests/GetCldOgImageUrl/GetCldOgImageUrl.test.ts index 5c639085..02aa46fc 100644 --- a/packages/svelte-cloudinary/tests/GetCldOgImageUrl/GetCldOgImageUrl.test.ts +++ b/packages/svelte-cloudinary/tests/GetCldOgImageUrl/GetCldOgImageUrl.test.ts @@ -1,47 +1,55 @@ import { render, screen, cleanup } from '@testing-library/svelte'; import { afterEach, describe, expect, it, vi } from 'vitest'; -import { CldOgImage } from '$src/index'; +import { CldOgImage, getCldOgImageUrl } from '$src/index'; import { tick } from 'svelte'; -describe('CldOgImage', () => { +describe('GetCldOgImage', () => { afterEach(() => { cleanup(); }); + it('should render a Cloudinary image with defualts', () => { + const url = getCldOgImageUrl( + { + src: 'sample', + }, + { cloud: { cloudName: 'testing' } }, + ); + expect(url).toContain('sample'); + expect(url).toContain('h_630'); + expect(url).toContain('w_1200'); + expect(url).toContain('c_fill'); + expect(url).toContain('g_center'); + }); + it('should render a Cloudinary image with the given attributes', () => { - render(CldOgImage, { - props: { - src: 'packages/svelte-cloudinary/tests/images/turtle.jpeg', - alt: 'turtle', + const url = getCldOgImageUrl( + { + src: 'sample', width: 300, height: 200, - config: { cloud: { cloudName: 'testing' } }, + crop: { type: 'auto', gravity: 'east' }, }, - }); - console.log(screen); - expect(getMetaTagContent('og:image')).toContain( - 'https://res.cloudinary.com', - ); - expect(getMetaTagContent('og:image')).toContain( - 'packages/svelte-cloudinary/tests/images/turtle.jpeg', + { cloud: { cloudName: 'testing' } }, ); - expect(getMetaTagContent('og:image:secure_url')).toContain( - 'packages/svelte-cloudinary/tests/images/turtle.jpeg', - ); - expect(getMetaTagContent('og:image:secure_url')).toContain( - 'packages/svelte-cloudinary/tests/images/turtle.jpeg', - ); - expect(getMetaTagContent('og:image:width')).toContain('300'); - expect(getMetaTagContent('og:image:height')).toContain('200'); - expect(getMetaTagContent('og:image:alt')).toContain('turtle'); + expect(url).toContain('sample'); + expect(url).toContain('h_200'); + expect(url).toContain('w_300'); + expect(url).toContain('c_auto'); + expect(url).toContain('g_east'); }); -}); -function getMetaTagContent(name: string): string { - const metaTag = document.querySelector(`meta[property="${name}"]`); - if (!metaTag) { - throw new Error(`Meta tag with name "${name}" not found.`); - } + it('should work with global config from environment variables', () => { + const cloudName = crypto.randomUUID(); + vi.stubEnv('VITE_CLOUDINARY_CLOUD_NAME', cloudName); - return metaTag.getAttribute('content') || 'null'; -} + const url = getCldOgImageUrl({ + src: 'sample', + }); + expect(url).toContain('sample'); + expect(url).toContain('h_630'); + expect(url).toContain('w_1200'); + expect(url).toContain('c_fill'); + expect(url).toContain('g_center'); + }); +}); diff --git a/packages/svelte-cloudinary/tests/images/turtle.jpeg b/packages/svelte-cloudinary/tests/images/turtle.jpeg deleted file mode 100644 index c332e9823b44afe481cd64e2ac9a19e980a6fc19..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8840 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