wip

Sitefinity · Dec 20, 2023 · 70b07fc · 70b07fc
1 parent c54a2f4
commit 70b07fc
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 7 deletions.
diff --git a/src/nextjs-framework/widgets/image/image.tsx b/src/nextjs-framework/widgets/image/image.tsx
@@ -90,22 +90,22 @@ export async function Image(props: WidgetContext<ImageEntity>) {
     if (entity.ClickAction === ImageClickAction.OpenOriginalSize) {
         return (
           <a href={imageItem.Url} className={anchorClass}>
-            {renderImageTag(imageViewModel)}
+            {renderImageTag(imageViewModel, dataAttributes)}
           </a>
         );
     } else if (entity.ClickAction === ImageClickAction.OpenLink && !!entity.ActionLink?.href) {
         const anchorAttributes = generateAnchorAttrsFromLink(entity.ActionLink, anchorClass);
         return (
           <a {...anchorAttributes}>
-            {renderImageTag(imageViewModel)}
+            {renderImageTag(imageViewModel, dataAttributes)}
           </a>
         );
     } else {
-        return renderImageTag(imageViewModel, viewModelCssClass);
+        return renderImageTag(imageViewModel, dataAttributes, viewModelCssClass);
     }
 }
 
-function renderImageTag(imageModel: ImageViewModel, classAttributeValue?: string) {
+function renderImageTag(imageModel: ImageViewModel, dataAttributes: Dictionary, classAttributeValue?: string) {
     let imageClassName: string | undefined = imageModel.FitToContainer ? 'img-fluid' : undefined;
     let imageCustomAttributes = getCustomAttributes(imageModel.Attributes, 'Image');
     const imageAltAttribute = imageModel.AlternativeText || undefined;
@@ -117,7 +117,7 @@ function renderImageTag(imageModel: ImageViewModel, classAttributeValue?: string
         }
 
         return (
-          <picture className={pictureWrapperClass}>
+          <picture className={pictureWrapperClass} {...dataAttributes}>
             {
                     imageModel.Thumbnails.map((thumbnail, idx) => {
                         const sourceWidth = imageModel.Width && thumbnail.Width !== imageModel.Width ? thumbnail.Width : undefined;
@@ -155,7 +155,7 @@ function renderImageTag(imageModel: ImageViewModel, classAttributeValue?: string
     }
 
     return (
-      <span>
+      <span {...dataAttributes}>
         {renderImage(imageCustomAttributes, imageClassName, imageModel.SelectedImageUrl, imageModel.Title, imageAltAttribute)}
       </span>
     );

diff --git a/tests/__snapshots__/image.test.tsx.snap b/tests/__snapshots__/image.test.tsx.snap
@@ -176,6 +176,66 @@ exports[`image with selected image item(Image_OriginalSize_Rendered) 1`] = `
 </div>
 `;
 
+exports[`render image in edit mode with original size 1`] = `
+<div>
+  <span
+    data-sfemptyicon="picture-o"
+    data-sfemptyiconaction="Edit"
+    data-sfemptyicontext="Select image"
+    data-sfhasquickeditoperation="true"
+    data-sfid="static"
+    data-sfiscontentwidget="true"
+    data-sfisempty="false"
+    data-sfisemptyvisualhidden="false"
+    data-sfisorphaned="false"
+    data-sfname="SitefinityImage"
+    data-sftitle="Image"
+    draggable="true"
+  >
+    <img
+      alt="ImageAlternativeText"
+      loading="lazy"
+      src="https://systemvalforsnapshot"
+      title="Image"
+    />
+  </span>
+</div>
+`;
+
+exports[`render image in edit mode with responsive setting 1`] = `
+<div>
+  <picture
+    class="d-inline-block"
+    data-sfemptyicon="picture-o"
+    data-sfemptyiconaction="Edit"
+    data-sfemptyicontext="Select image"
+    data-sfhasquickeditoperation="true"
+    data-sfid="static"
+    data-sfiscontentwidget="true"
+    data-sfisempty="false"
+    data-sfisemptyvisualhidden="false"
+    data-sfisorphaned="false"
+    data-sfname="SitefinityImage"
+    data-sftitle="Image"
+    draggable="true"
+  >
+    <source
+      height="160"
+      media="(max-width: 160px)"
+      srcset="https://systemvalforsnapshot"
+      type="image/jpeg"
+      width="160"
+    />
+    <img
+      alt="ImageAlternativeText"
+      loading="lazy"
+      src="https://systemvalforsnapshot"
+      title="Image"
+    />
+  </picture>
+</div>
+`;
+
 exports[`responsive image (Image_Responsive_Rendered) 1`] = `
 <div>
   <picture

diff --git a/tests/content-block.test.tsx b/tests/content-block.test.tsx
@@ -2,7 +2,7 @@
 import { waitFor } from '@testing-library/react';
 import { RenderType, WidgetTester } from './framework/widget-tester';
 import { RestSdkTypes, RestService } from '../src/nextjs-framework/rest-sdk';
-import { ContentBlockEntity } from '../src/nextjs-framework/widgets';
+import { ContentBlockEntity } from '../src/nextjs-framework/widgets/content-block/content-block.entity';
 
 test('Content block render Content property', async () => {
     await WidgetTester.testWidgetRender<ContentBlockEntity>({

diff --git a/tests/image.test.tsx b/tests/image.test.tsx
@@ -405,3 +405,62 @@ test('image as link should set margins to anchor (ImageAsLinkShouldSetMarginsToA
         }
     });
 });
+
+test('render image in edit mode with responsive setting', async () => {
+    await WidgetTester.testWidgetRender<ImageEntity>({
+        name: 'SitefinityImage',
+        properties: {
+            Item: {
+                Id: sdkItem.Id,
+                Provider: sdkItem.Provider
+            },
+            FitToContainer: false,
+            ImageSize: ImageDisplayMode.Responsive
+        },
+        render: RenderType.Edit,
+        assert: async (element) => {
+            await waitFor(() => {
+
+                const actualElement = element.querySelector('[data-sfid]');
+                actualElement?.setAttribute('data-sfid', 'static');
+
+                const sourceElement = element.querySelector('source');
+                expect(sourceElement?.getAttribute('srcset')).toBeDefined();
+                sourceElement?.setAttribute('srcset', 'https://systemvalforsnapshot');
+
+                const imgElement = element.querySelector('img');
+                expect(imgElement?.getAttribute('src')).toBeDefined();
+                imgElement?.setAttribute('src', 'https://systemvalforsnapshot');
+
+                expect(element).toMatchSnapshot();
+            });
+        }
+    });
+});
+
+test('render image in edit mode with original size', async () => {
+    await WidgetTester.testWidgetRender<ImageEntity>({
+        name: 'SitefinityImage',
+        properties: {
+            Item: {
+                Id: sdkItem.Id,
+                Provider: sdkItem.Provider
+            },
+            FitToContainer: false,
+            ImageSize: ImageDisplayMode.OriginalSize
+        },
+        render: RenderType.Edit,
+        assert: async (element) => {
+            await waitFor(() => {
+                const actualElement = element.querySelector('[data-sfid]');
+                actualElement?.setAttribute('data-sfid', 'static');
+
+                const imgElement = element.querySelector('img');
+                expect(imgElement?.getAttribute('src')).toBeDefined();
+                imgElement?.setAttribute('src', 'https://systemvalforsnapshot');
+
+                expect(element).toMatchSnapshot();
+            });
+        }
+    });
+});