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

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

@@ -0,0 +1,261 @@
+import { describe, test, expect } from 'vitest';
+import { renderAstroComponent } from '../tests/astro-helpers';
+import Link, { LinkField } from './Link.astro';
+import EmptyFieldEditingComponent from '../tests/test-components/EmptyFieldEditingComponent.astro';
+
+describe('<Link />', () => {
+  test('should render nothing with missing field', async () => {
+    const field = null as unknown as LinkField;
+    const rendered = await renderAstroComponent(Link, {
+      props: { field: field },
+    });
+    expect(rendered.innerHTML).to.equal('');
+  });
+
+  test('should render nothing with missing value', async () => {
+    const field = {};
+    const rendered = await renderAstroComponent(Link, {
+      props: { field: field },
+    });
+    expect(rendered.innerHTML).to.equal('');
+  });
+
+  test('should render value with editing explicitly disabled', async () => {
+    const field = {
+      value: {
+        href: '/lorem',
+        text: 'ipsum',
+      },
+    };
+    const rendered = (
+      await renderAstroComponent(Link, {
+        props: { field: field, editable: false },
+      })
+    ).querySelector('a');
+    expect(rendered?.outerHTML).to.contain(field.value.href);
+    expect(rendered?.outerHTML).to.contain(field.value.text);
+  });
+
+  test('should render with href directly on provided field', async () => {
+    const field = {
+      href: '/lorem',
+      text: 'ipsum',
+    };
+    const rendered = (
+      await renderAstroComponent(Link, {
+        props: { field: field },
+      })
+    ).querySelector('a');
+    expect(rendered?.outerHTML).to.contain(field.href);
+    expect(rendered?.outerHTML).to.contain(field.text);
+  });
+
+  test('should not add extra hash when linktype is anchor', async () => {
+    const field = {
+      linktype: 'anchor',
+      href: '#anchor',
+      text: 'anchor link',
+      anchor: 'anchor',
+    };
+    const rendered = (
+      await renderAstroComponent(Link, {
+        props: { field: field },
+      })
+    ).querySelector('a');
+    expect(rendered?.outerHTML).to.contain(`href="${field.href}"`);
+    expect(rendered?.text).to.equal(field.text);
+  });
+
+  test('should render all value attributes', async () => {
+    const field = {
+      value: {
+        href: '/lorem',
+        anchor: 'foo',
+        text: 'ipsum',
+        class: 'my-link',
+        title: 'My Link',
+        target: '_blank',
+        querystring: 'foo=bar',
+      },
+    };
+    const rendered = (
+      await renderAstroComponent(Link, {
+        props: { field: field },
+      })
+    ).querySelector('a');
+    expect(rendered?.outerHTML).to.contain(
+      `href="${field.value.href}?${field.value.querystring}#${field.value.anchor}"`
+    );
+    expect(rendered?.outerHTML).to.contain(`class="${field.value.class}"`);
+    expect(rendered?.outerHTML).to.contain(`title="${field.value.title}"`);
+    expect(rendered?.outerHTML).to.contain(`target="${field.value.target}"`);
+  });
+
+  test('should render other attributes with other props provided', async () => {
+    const field = {
+      value: {
+        href: '/lorem',
+        text: 'ipsum',
+      },
+    };
+    const rendered = (
+      await renderAstroComponent(Link, {
+        props: { field: field, id: 'my-link', accessKey: 'a' },
+      })
+    ).querySelector('a');
+    expect(rendered?.outerHTML).to.contain('id="my-link"');
+    expect(rendered?.outerHTML).to.contain('accesskey="a"');
+  });
+
+  describe('edit mode', () => {
+    const testMetadata = {
+      contextItem: {
+        id: '{09A07660-6834-476C-B93B-584248D3003B}',
+        language: 'en',
+        revision: 'a0b36ce0a7db49418edf90eb9621e145',
+        version: 1,
+      },
+      fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}',
+      fieldType: 'single-line',
+      rawValue: 'Test1',
+    };
+
+    test('should render field metadata component when metadata property is present', async () => {
+      const field = {
+        href: '/lorem',
+        text: 'ipsum',
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(Link, {
+        props: { field: field },
+      });
+
+      expect(rendered.innerHTML).to.equal(
+        [
+          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+            testMetadata
+          )}</code>`,
+          '<a href="/lorem">ipsum</a>',
+          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+        ].join('')
+      );
+    });
+
+    test('should render default empty field component when field value is not present', async () => {
+      const field = {
+        value: { href: undefined },
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(Link, {
+        props: { field: field },
+      });
+
+      expect(rendered.innerHTML).to.equal(
+        [
+          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+            testMetadata
+          )}</code>`,
+          '<span>[No text in field]</span>',
+          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+        ].join('')
+      );
+    });
+
+    test('should render default empty field component when field value href is not present', async () => {
+      const field = {
+        href: undefined,
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(Link, {
+        props: { field: field },
+      });
+
+      expect(rendered.innerHTML).to.equal(
+        [
+          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+            testMetadata
+          )}</code>`,
+          '<span>[No text in field]</span>',
+          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+        ].join('')
+      );
+    });
+
+    test('should render custom empty field component when provided, when field value is not present', async () => {
+      const field = {
+        value: { href: undefined },
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(Link, {
+        props: {
+          field: field,
+          emptyFieldEditingComponent: EmptyFieldEditingComponent,
+        },
+      });
+
+      expect(rendered.innerHTML).to.equal(
+        [
+          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+            testMetadata
+          )}</code>`,
+          '<span class="empty-field-value-placeholder">Custom Empty field value</span>',
+          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+        ].join('')
+      );
+    });
+
+    test('should render custom empty field component when provided, when field value href is not present', async () => {
+      const field = {
+        href: undefined,
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(Link, {
+        props: {
+          field: field,
+          emptyFieldEditingComponent: EmptyFieldEditingComponent,
+        },
+      });
+
+      expect(rendered.innerHTML).to.equal(
+        [
+          `<code type="text/sitecore" chrometype="field" class="scpm" kind="open">${JSON.stringify(
+            testMetadata
+          )}</code>`,
+          '<span class="empty-field-value-placeholder">Custom Empty field value</span>',
+          '<code type="text/sitecore" chrometype="field" class="scpm" kind="close"></code>',
+        ].join('')
+      );
+    });
+
+    test('should render nothing when field value is not present, when editing is explicitly disabled', async () => {
+      const field = {
+        value: undefined,
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(Link, {
+        props: { field: field, editable: false },
+      });
+
+      expect(rendered.innerHTML).to.equal('');
+    });
+
+    test('should render nothing when field value href is empty, when editing is explicitly disabled', async () => {
+      const field = {
+        value: { href: undefined },
+        metadata: testMetadata,
+      };
+
+      const rendered = await renderAstroComponent(Link, {
+        props: { field: field, editable: false },
+      });
+
+      expect(rendered.innerHTML).to.equal('');
+    });
+  });
+});

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

@@ -0,0 +1,21 @@
+import { describe, test, expect } from 'vitest';
+import { renderAstroComponent } from '../tests/astro-helpers';
+import MissingComponent from './MissingComponent.astro';
+
+describe('<MissingComponent>', () => {
+  test('should accept and display custom error', async () => {
+    const errorMsg = 'Oops, I errored again';
+    const props = {
+      rendering: {
+        componentName: 'test',
+      },
+      errorOverride: errorMsg,
+    };
+
+    const result = await renderAstroComponent(MissingComponent, {
+      props: props,
+    });
+
+    expect(result.querySelector('div p')?.textContent).to.contain(errorMsg);
+  });
+});

package/src/components/Placeholder/Placeholder.astro

@@ -1,5 +1,5 @@
 ---
-import { ComponentRendering } from '@sitecore-content-sdk/core/layout';
+import { ComponentRendering } from '@sitecore-content-sdk/content/layout';
 import ErrorBoundary from '../ErrorBoundary.astro';
 import PlaceholderMetadata from './PlaceholderMetadata.astro';
 import { useSitecore } from '../../context';
@@ -7,26 +7,21 @@ import RenderWrapper from '../RenderWrapper.astro';
 import EmptyPlaceholder from './EmptyPlaceholder.astro';
 import { PlaceholderProps } from './models';
 import { getPlaceholderRenderings } from './placeholder-utils';
-import { getComponentsForRenderingData } from './PlaceholderUtils.astro';
+import { getPlaceholderComponents } from './PlaceholderUtils.astro';
 
 const props = Astro.props as PlaceholderProps;
 
 const { page } = useSitecore();
-const childProps: PlaceholderProps = { ...props, page };
 
-delete childProps.componentMap;
-
-const renderingData = childProps.rendering;
-
-const placeholderData = getPlaceholderRenderings(
-  renderingData,
-  childProps.name,
-  childProps.page.mode.isEditing
+const placeholderRenderings = getPlaceholderRenderings(
+  props.rendering,
+  props.name,
+  page.mode.isEditing
 );
 
-const isEmpty = !placeholderData.length;
+const isEmpty = !placeholderRenderings.length;
 
-const components = getComponentsForRenderingData(placeholderData, childProps);
+const components = getPlaceholderComponents(props, placeholderRenderings);
 ---
 
 {
@@ -34,30 +29,30 @@ const components = getComponentsForRenderingData(placeholderData, childProps);
     <RenderWrapper
       wrapper={
         isEmpty
-          ? childProps.page.mode.isEditing && EmptyPlaceholder
-          : childProps.render
+          ? page.mode.isEditing && EmptyPlaceholder
+          : props.render
       }
     >
       <ErrorBoundary>
-        <RenderWrapper wrapper={isEmpty && childProps.renderEmpty}>
+        <RenderWrapper wrapper={isEmpty && props.renderEmpty}>
           {
             // Conditional rendering based on editing mode
-            childProps.page.mode.isEditing ? (
+            page.mode.isEditing ? (
               <PlaceholderMetadata
-                placeholderName={childProps.name}
-                rendering={childProps.rendering as ComponentRendering}
+                placeholderName={props.name}
+                rendering={props.rendering as ComponentRendering}
               >
                 {components.map((component) => {
                   const Component = component.component.component;
 
                   return (
-                    <RenderWrapper wrapper={childProps.renderEach}>
+                    <RenderWrapper wrapper={props.renderEach}>
                       <PlaceholderMetadata
                         rendering={component.rendering as ComponentRendering}
                       >
                         {!component.component.isEmpty && (
                           <ErrorBoundary
-                            errorComponent={childProps.errorComponent}
+                            errorComponent={props.errorComponent}
                             {...component.props}
                           >
                             <Component {...component.props} />
@@ -78,11 +73,11 @@ const components = getComponentsForRenderingData(placeholderData, childProps);
                   return (
                     <RenderWrapper
                       wrapper={
-                        isEmpty ? childProps.renderEmpty : childProps.renderEach
+                        isEmpty ? props.renderEmpty : props.renderEach
                       }
                     >
                       <ErrorBoundary
-                        errorComponent={childProps.errorComponent}
+                        errorComponent={props.errorComponent}
                         {...component.props}
                       >
                         <Component {...component.props} />