@blaze-cms/react-page-builder 0.146.0-node18-core-styles-tooltips.58 → 0.146.0-node18-core-styles-tooltips.60

package/src/helpers/get-component-id.js

@@ -1,9 +1,12 @@
 import cssesc from 'cssesc';
 import { COMPONENT_ID_PREFIX } from '../constants';
 
-const getComponentId = componentName =>
-  cssesc(`${COMPONENT_ID_PREFIX}${componentName.replace(/\s+/g, '-')}`, {
-    isIdentifier: true
-  });
+const getComponentId = (componentName, noPrefix = false, toLowerCase = false) => {
+  let id = `${noPrefix ? '' : COMPONENT_ID_PREFIX}${componentName.replace(/\s+/g, '-')}`;
+  if (toLowerCase) {
+    id = id.toLowerCase();
+  }
+  return cssesc(id, { isIdentifier: true });
+};
 
 export default getComponentId;

package/tests/unit/src/components/ContentGroup/ContentGroup.test.js

@@ -7,9 +7,62 @@ import ContentGroup from '../../../../../src/components/ContentGroup/ContentGrou
 
 jest.mock('../../../../../src/components/ContentGroup/ContentGroupTabs', () => ({
   __esModule: true,
-  default: ({ contentType }) => <div data-testid="content-group-tabs">Inner: {contentType}</div>
+  default: ({ contentType, sectionsData = [] }) => (
+    <div data-testid="content-group-tabs" data-content-type={contentType}>
+      {sectionsData.map(([name, label]) => (
+        <span key={name} data-section-name={name}>
+          {label}
+        </span>
+      ))}
+    </div>
+  )
 }));
 
+jest.mock('../../../../../src/components/ContentGroup/ContentGroupAccordion', () => ({
+  __esModule: true,
+  default: ({ contentType, sectionsData = [] }) => (
+    <div data-testid="content-group-accordion" data-content-type={contentType}>
+      {sectionsData.map(([name, label]) => (
+        <span key={name} data-section-name={name}>
+          {label}
+        </span>
+      ))}
+    </div>
+  )
+}));
+
+jest.mock('../../../../../src/components/ContentGroup/ContentGroupDataFetcher', () => ({
+  __esModule: true,
+  default: ({ dataProperty, contentType }) => (
+    <div
+      data-testid="content-group-data-fetcher"
+      data-property={dataProperty}
+      data-content-type={contentType}
+    />
+  )
+}));
+
+jest.mock('../../../../../src/components/ContentGroup/helpers', () => {
+  const actual = jest.requireActual('../../../../../src/components/ContentGroup/helpers');
+  return {
+    ...actual,
+    buildDataSections: jest.fn(items =>
+      items.reduce(
+        (acc, item) => {
+          if (!item || !item.label || !item.text) return acc;
+          const name = item.label.toLowerCase().replace(/\s+/g, '-');
+          acc.groupSections.push(<div key={name}>{item.text}</div>);
+          acc.sectionsData.push([name, item.label]);
+          return acc;
+        },
+        { groupSections: [], sectionsData: [] }
+      )
+    )
+  };
+});
+
+const testId1 = 'content-group-tabs';
+const testId2 = 'content-group-data-fetcher';
 const TestChild = ({ children }) => <div>{children}</div>;
 const buildChildren = (sectionsCount = 2) => (
   <div>
@@ -20,6 +73,11 @@ const buildChildren = (sectionsCount = 2) => (
   </div>
 );
 
+const simpleDataFixture = [
+  { label: 'Tab One', text: 'Content for tab one' },
+  { label: 'Tab Two', text: 'Content for tab two' }
+];
+
 describe('ContentGroup component', () => {
   it('matches snapshots for tab and sidepanel', () => {
     const { asFragment: tabContentGroup } = render(ContentGroup, {
@@ -33,57 +91,154 @@ describe('ContentGroup component', () => {
     expect(sidepanelContentGroup()).toMatchSnapshot();
   });
 
-  it('wraps output in FAQPage schema when isFaqContent is true', () => {
-    const { container } = render(ContentGroup, {
-      contentType: 'tab',
-      isFaqContent: true,
-      children: buildChildren()
+  it('returns empty string for an invalid contentType', () => {
+    const { container } = render(ContentGroup, { contentType: 'unknown' });
+    expect(container.firstChild).toBeNull();
+  });
+
+  describe('simpleData prop', () => {
+    it('renders ContentGroupTabs when simpleData is provided', () => {
+      const { getByTestId } = render(ContentGroup, {
+        contentType: 'tab',
+        simpleData: simpleDataFixture
+      });
+
+      expect(getByTestId(testId1)).toBeTruthy();
     });
 
-    const faqWrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
-    expect(faqWrapper).toBeTruthy();
-  });
+    it('renders ContentGroupAccordion when contentType is accordion and simpleData is provided', () => {
+      const { getByTestId } = render(ContentGroup, {
+        contentType: 'accordion',
+        simpleData: simpleDataFixture
+      });
+
+      expect(getByTestId('content-group-accordion')).toBeTruthy();
+    });
 
-  it('spreads customHtmlProps onto the wrapper element', () => {
-    const customHtmlProps = [
-      { name: 'data-testid', value: 'content-group-wrapper' },
-      { name: 'aria-label', value: 'My group' }
-    ];
-    const { container } = render(ContentGroup, {
-      contentType: 'tab',
-      isFaqContent: true,
-      customHtmlProps,
-      children: buildChildren()
+    it('passes sectionsData derived from simpleData to the group component', () => {
+      const { getByTestId } = render(ContentGroup, {
+        contentType: 'tab',
+        simpleData: simpleDataFixture
+      });
+
+      const tabs = getByTestId(testId1);
+      expect(tabs.querySelector('[data-section-name="tab-one"]')).toBeTruthy();
+      expect(tabs.querySelector('[data-section-name="tab-two"]')).toBeTruthy();
     });
 
-    const wrapper = container.querySelector('div[data-testid="content-group-wrapper"]');
-    expect(wrapper).toBeTruthy();
-    expect(wrapper.getAttribute('aria-label')).toBe('My group');
+    it('renders nothing when simpleData is an empty array', () => {
+      const { container } = render(ContentGroup, {
+        contentType: 'tab',
+        simpleData: []
+      });
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders nothing when all simpleData items are invalid', () => {
+      const { container } = render(ContentGroup, {
+        contentType: 'tab',
+        simpleData: [{ label: 'no text' }, { text: 'no label' }]
+      });
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('prefers simpleData over dataProperty when both are provided', () => {
+      const { getByTestId, queryByTestId } = render(ContentGroup, {
+        contentType: 'tab',
+        simpleData: simpleDataFixture,
+        dataProperty: 'someProperty'
+      });
+
+      expect(getByTestId(testId1)).toBeTruthy();
+      expect(queryByTestId(testId2)).toBeNull();
+    });
   });
 
-  it('excludes customHtmlProps entries with value "null" from the wrapper', () => {
-    const customHtmlProps = [{ name: 'data-skip', value: 'null' }];
-    const { container } = render(ContentGroup, {
-      contentType: 'tab',
-      isFaqContent: true,
-      customHtmlProps,
-      children: buildChildren()
+  describe('dataProperty prop', () => {
+    it('renders ContentGroupDataFetcher when dataProperty is a string and no simpleData', () => {
+      const { getByTestId } = render(ContentGroup, {
+        contentType: 'tab',
+        dataProperty: 'myDataProp'
+      });
+
+      expect(getByTestId(testId2)).toBeTruthy();
     });
 
-    const wrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
-    expect(wrapper).toBeTruthy();
-    expect(wrapper.getAttribute('data-skip')).toBeNull();
+    it('passes the first element when dataProperty is an array', () => {
+      const { getByTestId } = render(ContentGroup, {
+        contentType: 'tab',
+        dataProperty: ['myDataProp', 'ignored']
+      });
+
+      const fetcher = getByTestId(testId2);
+      expect(fetcher.getAttribute('data-property')).toBe('myDataProp');
+    });
+
+    it('passes contentType to ContentGroupDataFetcher', () => {
+      const { getByTestId } = render(ContentGroup, {
+        contentType: 'accordion',
+        dataProperty: 'myDataProp'
+      });
+
+      expect(getByTestId(testId2).getAttribute('data-content-type')).toBe('accordion');
+    });
   });
 
-  it('renders correctly with an empty customHtmlProps array', () => {
-    const { container } = render(ContentGroup, {
-      contentType: 'tab',
-      isFaqContent: true,
-      customHtmlProps: [],
-      children: buildChildren()
+  describe('FAQ / structured data', () => {
+    it('wraps output in FAQPage schema when isFaqContent is true', () => {
+      const { container } = render(ContentGroup, {
+        contentType: 'tab',
+        isFaqContent: true,
+        children: buildChildren()
+      });
+
+      const faqWrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
+      expect(faqWrapper).toBeTruthy();
     });
 
-    const faqWrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
-    expect(faqWrapper).toBeTruthy();
+    it('spreads customHtmlProps onto the wrapper element', () => {
+      const customHtmlProps = [
+        { name: 'data-testid', value: 'content-group-wrapper' },
+        { name: 'aria-label', value: 'My group' }
+      ];
+      const { container } = render(ContentGroup, {
+        contentType: 'tab',
+        isFaqContent: true,
+        customHtmlProps,
+        children: buildChildren()
+      });
+
+      const wrapper = container.querySelector('div[data-testid="content-group-wrapper"]');
+      expect(wrapper).toBeTruthy();
+      expect(wrapper.getAttribute('aria-label')).toBe('My group');
+    });
+
+    it('excludes customHtmlProps entries with value "null" from the wrapper', () => {
+      const customHtmlProps = [{ name: 'data-skip', value: 'null' }];
+      const { container } = render(ContentGroup, {
+        contentType: 'tab',
+        isFaqContent: true,
+        customHtmlProps,
+        children: buildChildren()
+      });
+
+      const wrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
+      expect(wrapper).toBeTruthy();
+      expect(wrapper.getAttribute('data-skip')).toBeNull();
+    });
+
+    it('renders correctly with an empty customHtmlProps array', () => {
+      const { container } = render(ContentGroup, {
+        contentType: 'tab',
+        isFaqContent: true,
+        customHtmlProps: [],
+        children: buildChildren()
+      });
+
+      const faqWrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
+      expect(faqWrapper).toBeTruthy();
+    });
   });
 });

package/tests/unit/src/components/ContentGroup/helpers/build-data-sections.test.js

@@ -0,0 +1,115 @@
+import buildDataSections from '../../../../../../src/components/ContentGroup/helpers/build-data-sections';
+
+jest.mock(
+  'next/dynamic',
+  () => component =>
+    // Return a simple placeholder component for testing
+    function DynamicComponent(props) {
+      return <div {...props} />;
+    }
+);
+
+jest.mock(
+  '../../../../../../src/helpers/get-component-id',
+  () => name => name.toLowerCase().replace(/\s+/g, '-')
+);
+
+describe('buildDataSections helper', () => {
+  it('should return empty arrays when items is empty', () => {
+    const result = buildDataSections([]);
+
+    expect(result).toEqual({ groupSections: [], sectionsData: [] });
+  });
+
+  it('should return empty arrays when called with no arguments', () => {
+    const result = buildDataSections();
+
+    expect(result).toEqual({ groupSections: [], sectionsData: [] });
+  });
+
+  it('should skip items that are null or undefined', () => {
+    const result = buildDataSections([null, undefined]);
+
+    expect(result).toEqual({ groupSections: [], sectionsData: [] });
+  });
+
+  it('should skip items missing a label', () => {
+    const result = buildDataSections([{ text: 'Some text' }]);
+
+    expect(result).toEqual({ groupSections: [], sectionsData: [] });
+  });
+
+  it('should skip items missing text', () => {
+    const result = buildDataSections([{ label: 'Some label' }]);
+
+    expect(result).toEqual({ groupSections: [], sectionsData: [] });
+  });
+
+  it('should build sectionsData entries as [sectionName, label] tuples', () => {
+    const items = [
+      { label: 'Section One', text: 'Content one' },
+      { label: 'Section Two', text: 'Content two' }
+    ];
+
+    const { sectionsData } = buildDataSections(items);
+
+    expect(sectionsData).toHaveLength(2);
+    expect(sectionsData[0][1]).toBe('Section One');
+    expect(sectionsData[1][1]).toBe('Section Two');
+  });
+
+  it('should build a groupSections entry for each valid item', () => {
+    const items = [
+      { label: 'Tab A', text: 'Text A' },
+      { label: 'Tab B', text: 'Text B' },
+      { label: 'Tab C', text: 'Text C' }
+    ];
+
+    const { groupSections, sectionsData } = buildDataSections(items);
+
+    expect(groupSections).toHaveLength(3);
+    expect(sectionsData).toHaveLength(3);
+  });
+
+  it('should mix valid and invalid items, only including valid ones', () => {
+    const items = [
+      { label: 'Good', text: 'Content' },
+      null,
+      { label: 'Also Good', text: 'More content' },
+      { label: 'Missing text' },
+      { text: 'Missing label' }
+    ];
+
+    const { groupSections, sectionsData } = buildDataSections(items);
+
+    expect(groupSections).toHaveLength(2);
+    expect(sectionsData).toHaveLength(2);
+    expect(sectionsData[0][1]).toBe('Good');
+    expect(sectionsData[1][1]).toBe('Also Good');
+  });
+
+  it('should derive sectionName from the label via getComponentId', () => {
+    const items = [{ label: 'My Section', text: 'Content' }];
+
+    const { sectionsData } = buildDataSections(items);
+
+    // getComponentId is mocked to: name.toLowerCase().replace(/\s+/g, '-')
+    expect(sectionsData[0][0]).toBe('my-section');
+  });
+
+  it('should keep sectionName and label in sync within sectionsData', () => {
+    const items = [
+      { label: 'First Item', text: 'Text one' },
+      { label: 'Second Item', text: 'Text two' }
+    ];
+
+    const { sectionsData } = buildDataSections(items);
+
+    sectionsData.forEach(([sectionName, label]) => {
+      expect(typeof sectionName).toBe('string');
+      expect(typeof label).toBe('string');
+      expect(sectionName.length).toBeGreaterThan(0);
+      expect(label.length).toBeGreaterThan(0);
+    });
+  });
+});

package/tests/unit/src/helpers/get-component-id.test.js

@@ -7,6 +7,7 @@ jest.mock('cssesc');
 describe('Get component Id', () => {
   beforeEach(() => {
     cssesc.mockClear();
+    cssesc.mockImplementation(str => str);
   });
 
   it('should call cssesc with correct arguments', () => {
@@ -33,4 +34,67 @@ describe('Get component Id', () => {
     const result = getComponentId('Test');
     expect(typeof result).toBe('string');
   });
+
+  it('should replace spaces with dashes in the component name', () => {
+    const componentName = 'My Component Name';
+    getComponentId(componentName);
+
+    expect(cssesc).toHaveBeenCalledWith(`${COMPONENT_ID_PREFIX}My-Component-Name`, {
+      isIdentifier: true
+    });
+  });
+
+  describe('noPrefix parameter', () => {
+    it('should include the prefix by default (noPrefix = false)', () => {
+      getComponentId('MyComponent');
+
+      const calledWith = cssesc.mock.calls[0][0];
+      expect(calledWith.startsWith(COMPONENT_ID_PREFIX)).toBe(true);
+    });
+
+    it('should omit the prefix when noPrefix is true', () => {
+      getComponentId('MyComponent', true);
+
+      const calledWith = cssesc.mock.calls[0][0];
+      expect(calledWith.startsWith(COMPONENT_ID_PREFIX)).toBe(false);
+      expect(calledWith).toBe('MyComponent');
+    });
+
+    it('should include the prefix when noPrefix is explicitly false', () => {
+      getComponentId('MyComponent', false);
+
+      expect(cssesc).toHaveBeenCalledWith(`${COMPONENT_ID_PREFIX}MyComponent`, {
+        isIdentifier: true
+      });
+    });
+  });
+
+  describe('toLowerCase parameter', () => {
+    it('should not lowercase by default (toLowerCase = false)', () => {
+      getComponentId('MyComponent');
+
+      const calledWith = cssesc.mock.calls[0][0];
+      expect(calledWith).toBe(`${COMPONENT_ID_PREFIX}MyComponent`);
+    });
+
+    it('should lowercase the id when toLowerCase is true', () => {
+      getComponentId('MyComponent', false, true);
+
+      expect(cssesc).toHaveBeenCalledWith(`${COMPONENT_ID_PREFIX}mycomponent`, {
+        isIdentifier: true
+      });
+    });
+
+    it('should lowercase when both noPrefix and toLowerCase are true', () => {
+      getComponentId('MyComponent', true, true);
+
+      expect(cssesc).toHaveBeenCalledWith('mycomponent', { isIdentifier: true });
+    });
+
+    it('should lowercase spaces-replaced-with-dashes when toLowerCase is true', () => {
+      getComponentId('My Section Label', true, true);
+
+      expect(cssesc).toHaveBeenCalledWith('my-section-label', { isIdentifier: true });
+    });
+  });
 });