Writing tests and fixing default to match documentation.

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,

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');
+	});
+});