@exdst-sitecore-content-sdk/astro 0.0.16 → 0.0.19

package/src/components/ErrorBoundary.astro.test.ts

@@ -0,0 +1,252 @@
+import { describe, test, expect, vi, beforeAll, afterAll } from 'vitest';
+import { mockSitecoreContext, renderAstroComponent } from '../tests/astro-helpers';
+import { ComponentRendering, LayoutServicePageState } from '@sitecore-content-sdk/content/layout';
+import { Page } from '@sitecore-content-sdk/content/client';
+import CustomErrorComponent from '../tests/test-components/CustomErrorComponent.astro';
+import ErrorBoundaryWithError from '../tests/test-components/ErrorBoundaryWithError.astro';
+
+describe('ErrorBoundary', () => {
+  vi.spyOn(console, 'error').mockImplementation(() => undefined);
+
+  const testComponentProps = {
+    page: {
+      locale: 'en',
+      layout: {
+        sitecore: {
+          context: {},
+          route: null,
+        },
+      },
+      mode: {
+        name: LayoutServicePageState.Normal,
+        isPreview: false,
+        isNormal: false,
+        isEditing: false,
+        isDesignLibrary: false,
+        designLibrary: {
+          isVariantGeneration: false,
+        },
+      },
+    },
+  };
+
+  describe('when in page editing or preview mode', () => {
+    test('Should render custom error component when custom error component is provided and error is thrown', async () => {
+      const previewContext = { ...testComponentProps };
+
+      previewContext.page.mode.isPreview = true;
+
+      mockSitecoreContext(previewContext.page);
+
+      const testComponentName = 'Test component Name';
+      const rendering: ComponentRendering = {
+        componentName: testComponentName,
+      };
+
+      const rendered = await renderAstroComponent(ErrorBoundaryWithError, {
+        props: { rendering: rendering, errorComponent: CustomErrorComponent },
+      });
+
+      expect(rendered.querySelectorAll('div').length).to.equal(1);
+      expect(rendered.querySelector('div')?.textContent).to.equal(
+        'This is a custom error component!'
+      );
+    });
+
+    test('Should render errors message and errored component name when error is thrown in edit mode', async () => {
+      const editingContext = {
+        ...testComponentProps,
+      };
+
+      editingContext.page.mode.isEditing = true;
+      mockSitecoreContext(editingContext.page);
+
+      const testComponentName = 'Test component Name';
+      const rendering: ComponentRendering = {
+        componentName: testComponentName,
+      };
+
+      const errorMessage = 'an error occured';
+
+      const rendered = await renderAstroComponent(ErrorBoundaryWithError, {
+        props: { rendering: rendering },
+      });
+
+      const ems = rendered.querySelectorAll('em');
+      expect(rendered.innerHTML).to.contain('class="sc-content-sdk-placeholder-error"');
+      expect(rendered.innerHTML).to.contain('A rendering error occurred in component');
+      expect(ems.length).to.equal(2);
+      expect(ems[0].textContent).to.equal(testComponentName);
+      expect(ems[1].textContent).to.equal(errorMessage);
+    });
+
+    test('Should render errors message and errored component name when error is thrown in preview mode', async () => {
+      const previewContext = { ...testComponentProps };
+
+      previewContext.page.mode.isPreview = true;
+      mockSitecoreContext(previewContext.page);
+
+      const testComponentName = 'Test component Name';
+      const rendering: ComponentRendering = {
+        componentName: testComponentName,
+      };
+
+      const errorMessage = 'an error occured';
+
+      const rendered = await renderAstroComponent(ErrorBoundaryWithError, {
+        props: { rendering: rendering },
+      });
+
+      const ems = rendered.querySelectorAll('em');
+
+      expect(rendered.innerHTML).to.contain('class="sc-content-sdk-placeholder-error"');
+      expect(rendered.innerHTML).to.contain('A rendering error occurred in component');
+      expect(ems.length).to.equal(2);
+      expect(ems[0].textContent).to.equal(testComponentName);
+      expect(ems[1].textContent).to.equal(errorMessage);
+    });
+  });
+
+  describe('when in development mode', () => {
+    beforeAll(() => {
+      process.env.NODE_ENV = 'development';
+    });
+
+    afterAll(() => {
+      delete process.env.NODE_ENV;
+    });
+
+    test('Should render custom error component when custom error component is provided and error is thrown', async () => {
+      const rendered = await renderAstroComponent(ErrorBoundaryWithError, {
+        props: { errorComponent: CustomErrorComponent },
+      });
+
+      expect(rendered.querySelectorAll('div').length).to.equal(1);
+      expect(rendered.querySelector('div')?.textContent).to.equal(
+        'This is a custom error component!'
+      );
+    });
+
+    test('Should render errors message and errored component name when error is thrown and is in page editing mode', async () => {
+      const editingContext = {
+        ...testComponentProps,
+      };
+      editingContext.page.mode.isEditing = true;
+      mockSitecoreContext(editingContext.page);
+
+      const testComponentName = 'Test component Name';
+      const rendering: ComponentRendering = {
+        componentName: testComponentName,
+      };
+
+      const errorMessage = 'an error occured';
+
+      const rendered = await renderAstroComponent(ErrorBoundaryWithError, {
+        props: { rendering: rendering },
+      });
+
+      const ems = rendered.querySelectorAll('em');
+      expect(rendered.innerHTML).to.contain('class="sc-content-sdk-placeholder-error"');
+      expect(rendered.innerHTML).to.contain('A rendering error occurred in component');
+      expect(ems.length).to.equal(2);
+      expect(ems[0].textContent).to.equal(testComponentName);
+      expect(ems[1].textContent).to.equal(errorMessage);
+    });
+
+    test('Should render errors message and errored component name when error is thrown and is not in page editing mode', async () => {
+      const normalContext = { ...testComponentProps };
+
+      normalContext.page.mode.isNormal = true;
+      mockSitecoreContext(normalContext.page);
+
+      const testComponentName = 'Test component Name';
+      const rendering: ComponentRendering = {
+        componentName: testComponentName,
+      };
+
+      const errorMessage = 'an error occured';
+
+      const rendered = await renderAstroComponent(ErrorBoundaryWithError, {
+        props: { rendering: rendering },
+      });
+
+      const ems = rendered.querySelectorAll('em');
+
+      expect(rendered.innerHTML).to.contain('class="sc-content-sdk-placeholder-error"');
+      expect(rendered.innerHTML).to.contain('A rendering error occurred in component');
+      expect(ems.length).to.equal(2);
+      expect(ems[0].textContent).to.equal(testComponentName);
+      expect(ems[1].textContent).to.equal(errorMessage);
+    });
+  });
+
+  describe('when not in page editing and not in development mode', () => {
+    test('Should render custom error component when custom error component is provided and error is thrown', async () => {
+      const page: Page = {
+        locale: 'en',
+        layout: {
+          sitecore: {
+            context: {},
+            route: null,
+          },
+        },
+        mode: {
+          name: LayoutServicePageState.Normal,
+          isNormal: false,
+          isPreview: false,
+          isEditing: false,
+          isDesignLibrary: false,
+          designLibrary: {
+            isVariantGeneration: false,
+          },
+        },
+      };
+
+      mockSitecoreContext(page);
+
+      const rendered = await renderAstroComponent(ErrorBoundaryWithError, {
+        props: { errorComponent: CustomErrorComponent },
+      });
+
+      expect(rendered.querySelectorAll('div').length).to.equal(1);
+      expect(rendered.querySelector('div')?.textContent).to.equal(
+        'This is a custom error component!'
+      );
+    });
+
+    test('Should render default errors message when error is thrown and custom error component is not provided', async () => {
+      const errorMessage = 'an error occured';
+
+      const page: Page = {
+        locale: 'en',
+        layout: {
+          sitecore: {
+            context: {},
+            route: null,
+          },
+        },
+        mode: {
+          name: LayoutServicePageState.Normal,
+          isNormal: false,
+          isPreview: false,
+          isEditing: false,
+          isDesignLibrary: false,
+          designLibrary: {
+            isVariantGeneration: false,
+          },
+        },
+      };
+
+      mockSitecoreContext(page);
+
+      const rendered = await renderAstroComponent(ErrorBoundaryWithError);
+
+      expect(rendered.innerHTML).to.contain('class="sc-content-sdk-placeholder-error"');
+      expect(rendered.innerHTML).to.contain(
+        'There was a problem loading this section.' // eslint-disable-line
+      );
+      expect(rendered.querySelectorAll('em').length).to.equal(0);
+      expect(rendered.innerHTML).to.not.contain(errorMessage);
+    });
+  });
+});

package/src/components/ErrorComponent.astro

@@ -0,0 +1,16 @@
+---
+/**
+ * Simple error component applying basic error styling.
+ * Use either the `message` prop or slot content, but not both.
+ * @internal
+ */
+interface ErrorComponentProps {
+  message?: string;
+}
+
+const { message } = Astro.props as ErrorComponentProps;
+---
+
+<div class="sc-content-sdk-placeholder-error">
+  {message ? message : <slot />}
+</div>

package/src/components/ErrorComponent.astro.test.ts

@@ -0,0 +1,31 @@
+import { describe, test, expect } from 'vitest';
+import { renderAstroComponent } from '../tests/astro-helpers';
+import ErrorComponent from './ErrorComponent.astro';
+
+describe('ErrorComponent', () => {
+  test('should render message prop with correct CSS class', async () => {
+    const message = 'Test error message';
+
+    const rendered = await renderAstroComponent(ErrorComponent, {
+      props: { message: message },
+    });
+
+    expect(
+      rendered.querySelector('.sc-content-sdk-placeholder-error')?.textContent?.trim()
+    ).to.equal(message);
+  });
+
+  test('should render children when provided without message', async () => {
+    const content = 'Child error content';
+
+    const rendered = await renderAstroComponent(ErrorComponent, {
+      slots: {
+        default: `<span>${content}</span>`,
+      },
+    });
+
+    expect(rendered.querySelector('.sc-content-sdk-placeholder-error')?.textContent).to.equal(
+      content
+    );
+  });
+});

package/src/components/FieldMetadata.astro

@@ -3,7 +3,7 @@
  * The component which renders field metadata markup
  */
 
-import { MetadataKind } from '@sitecore-content-sdk/core/editing';
+import { MetadataKind } from '@sitecore-content-sdk/content/editing';
 
 interface FieldMetadataProps {
   metadata: { [key: string]: unknown };

package/src/components/FieldMetadata.astro.test.ts

@@ -0,0 +1,40 @@
+import { describe, test, expect } from 'vitest';
+import FieldMetadata from './FieldMetadata.astro';
+import { renderAstroComponent } from '../tests/astro-helpers';
+
+describe('<FieldMetadata />', () => {
+  test('should render field metadata', async () => {
+    const props = {
+      metadata: {
+        contextItem: {
+          id: '{09A07660-6834-476C-B93B-584248D3003B}',
+          language: 'en',
+          revision: 'a0b36ce0a7db49418edf90eb9621e145',
+          version: 1,
+        },
+        fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+        fieldType: 'date',
+        rawValue: 'Test1',
+      },
+    };
+
+    const Foo = '<h2>foo</h2>';
+
+    const rendered = await renderAstroComponent(FieldMetadata, {
+      props: { ...props },
+      slots: {
+        default: Foo,
+      },
+    });
+
+    expect(rendered.innerHTML).to.equal(
+      [
+        `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+          props.metadata
+        )}</code>`,
+        '<h2>foo</h2>',
+        '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+      ].join('')
+    );
+  });
+});

package/src/components/File.astro

@@ -1,5 +1,5 @@
 ---
-import { isFieldValueEmpty } from '@sitecore-content-sdk/core/layout';
+import { isFieldValueEmpty } from '@sitecore-content-sdk/content/layout';
 
 export interface FileFieldValue {
   [propName: string]: unknown;
@@ -8,6 +8,10 @@ export interface FileFieldValue {
   displayName?: string;
 }
 
+/**
+ * The interface for the File field.
+ * @public
+ */
 export interface FileField {
   value: FileFieldValue;
 }

package/src/components/File.astro.test.ts

@@ -0,0 +1,68 @@
+import { describe, test, expect } from 'vitest';
+import { renderAstroComponent } from '../tests/astro-helpers';
+import File, { FileField } from './File.astro';
+
+describe('<File />', () => {
+  test('should render nothing with missing field', async () => {
+    const field: FileField = null!;
+    const rendered = await renderAstroComponent(File, {
+      props: { field: field },
+    });
+    expect(rendered.innerHTML).to.equal('');
+  });
+
+  test('should render nothing with missing value', async () => {
+    const field = {
+      editable: 'lorem',
+    };
+    const rendered = await renderAstroComponent(File, {
+      props: { field: field },
+    });
+    expect(rendered.innerHTML).to.equal('');
+  });
+
+  test('should render with src directly on provided field', async () => {
+    const field = {
+      src: '/lorem',
+      title: 'ipsum',
+    };
+    const rendered = (
+      await renderAstroComponent(File, {
+        props: { field: field },
+      })
+    ).querySelector('a');
+    expect(rendered?.outerHTML).to.contain(field.src);
+    expect(rendered?.outerHTML).to.contain(field.title);
+  });
+
+  test('should render display name if no title', async () => {
+    const field = {
+      value: {
+        src: '/lorem',
+        displayName: 'ipsum',
+      },
+    };
+    const rendered = (
+      await renderAstroComponent(File, {
+        props: { field: field },
+      })
+    ).querySelector('a');
+    expect(rendered?.outerHTML).to.contain(field.value.displayName);
+  });
+
+  test('should render other attributes with other props provided', async () => {
+    const field = {
+      value: {
+        src: '/lorem',
+        title: 'ipsum',
+      },
+    };
+    const rendered = (
+      await renderAstroComponent(File, {
+        props: { field: field, id: 'my-file', class: 'my-css' },
+      })
+    ).querySelector('a');
+    expect(rendered?.outerHTML).to.contain('id="my-file"');
+    expect(rendered?.outerHTML).to.contain('class="my-css"');
+  });
+});

package/src/components/HiddenRendering.astro.test.ts

@@ -0,0 +1,36 @@
+import { describe, test, expect } from 'vitest';
+import { renderAstroComponent } from '../tests/astro-helpers';
+import HiddenRendering from './HiddenRendering.astro';
+
+describe('<HiddenRendering />', () => {
+  test('should render', async () => {
+    const rendered = await renderAstroComponent(HiddenRendering, {
+      props: { container: document.body },
+    });
+
+    expect(rendered.querySelectorAll('div > *')).to.have.length(1);
+
+    const style = rendered
+      .querySelector('div')
+      ?.getAttribute('style')
+      ?.trim()
+      ?.split(';')
+      .reduce<Record<string, string>>((acc, style) => {
+        if (style.split(':')[0]) acc[style.split(':')[0].trim()] = style.split(':')[1].trim();
+        return acc;
+      }, {});
+
+    // Instead of checking exact equality, we'll verify required styles are present
+    expect(style).to.include({
+      'background-size': '3px 3px',
+      display: 'flex',
+      'justify-content': 'center',
+      'align-items': 'center',
+      padding: '30px',
+      color: '#aaa',
+    });
+
+    // Verify the div contains the expected text
+    expect(rendered.textContent).to.equal('The component is hidden');
+  });
+});

package/src/components/Image.astro

@@ -1,24 +1,36 @@
 ---
-import { mediaApi } from '@sitecore-content-sdk/core/media';
+import { mediaApi } from '@sitecore-content-sdk/content/media';
 import { EditableFieldProps } from './sharedTypes';
 import {
   FieldMetadata,
   isFieldValueEmpty,
-} from '@sitecore-content-sdk/core/layout';
+} from '@sitecore-content-sdk/content/layout';
 import { addClassName } from '../utils';
 import WithFieldMetadata from '../enhancers/WithFieldMetadata.astro';
 import WithEmptyFieldEditingComponent from '../enhancers/WithEmptyFieldEditingComponent.astro';
 import DefaultEmptyFieldEditingComponentImage from './DefaultEmptyFieldEditingComponentImage.astro';
 
+/**
+ * The interface for the Image field value.
+ * @public
+ */
 export interface ImageFieldValue {
   [attributeName: string]: unknown;
   src?: string;
 }
 
+/**
+ * The interface for the Image field.
+ * @public
+ */
 export interface ImageField {
   value?: ImageFieldValue;
 }
 
+/**
+ * The interface for the Image size parameters.
+ * @public
+ */
 export interface ImageSizeParameters {
   [attr: string]: string | number | undefined;
   /** Fixed width of the image */
@@ -57,6 +69,10 @@ export interface BaseImageProps {
   mediaUrlPrefix?: RegExp;
 }
 
+/**
+ * The interface for the Image component props.
+ * @public
+ */
 export interface ImageProps extends BaseImageProps, EditableFieldProps {
   srcSet?: ImageSizeParameters[];
 }
@@ -132,8 +148,6 @@ const attrs = getImageAttrs(
   imageParams,
   mediaUrlPrefix
 );
-
-console.log("Attrs", attrs);
 ---
 
 {