@exdst-sitecore-content-sdk/astro 0.0.23 → 0.0.25

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

@@ -1,252 +0,0 @@
-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.test.ts

@@ -1,31 +0,0 @@
-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.test.ts

@@ -1,40 +0,0 @@
-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.test.ts

@@ -1,68 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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');
-  });
-});