Skip to content

Commit

Permalink
Merge pull request #146 from adobe/issue/allowed-components-title
Browse files Browse the repository at this point in the history
The `jcr:title` of the component should be used in Template Editor in the Allowed Component section.
  • Loading branch information
aplanche authored Mar 1, 2023
2 parents c1ec51b + 0564707 commit 0578cc5
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 3 deletions.
5 changes: 2 additions & 3 deletions src/components/AllowedComponentsContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@ type Props = {
const AllowedComponentsContainer = (props: Props): JSX.Element => {
const { placeholderClassNames = '', allowedComponents, title } = props;
const { components } = allowedComponents;
const emptyLabel = Texts.EMPTY_LABEL;
const listLabel = components && components.length > 0 ? title : emptyLabel;
const listLabel = components && components.length > 0 ? title : Texts.EMPTY_LABEL;

return (
<div className={`${ClassNames.ALLOWED_LIST_PLACEHOLDER} ${ClassNames.NEW_SECTION} ${placeholderClassNames}`}>
Expand All @@ -38,7 +37,7 @@ const AllowedComponentsContainer = (props: Props): JSX.Element => {
<div
data-cq-data-path={component.path}
key={component.path}
data-emptytext={emptyLabel}
data-emptytext={component.title ? component.title : Texts.EMPTY_COMPONENT_TITLE}
className={ClassNames.ALLOWED_COMPONENT_PLACEHOLDER}
/>
))}
Expand Down
1 change: 1 addition & 0 deletions src/constants/texts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@ export const Texts = Object.freeze({
* The label to be displayed when no components are allowed in AllowedComponentsContainer
*/
EMPTY_LABEL: 'No allowed components',
EMPTY_COMPONENT_TITLE: '–',
});
33 changes: 33 additions & 0 deletions test/components/AllowedComponentsContainer.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import AllowedComponentsContainer from '../../src/components/AllowedComponentsContainer';
import { AllowedComponentList } from '../../src/types/AEMModel';
import { Texts } from '../../src/constants';

describe('AllowedComponentsContainer ->', () => {
const DEFAULT_TITLE = 'Layout Container';
Expand Down Expand Up @@ -84,4 +85,36 @@ describe('AllowedComponentsContainer ->', () => {
expect(allowedComponentsContainer.querySelectorAll(ALLOWED_COMPONENT_PLACEHOLDER_SELECTOR).length).toEqual(2);
});
});

describe('AllowedComponentPlaceholder ->', () => {
const renderAllowedComponentPlaceholder = ({ title = null, path = '' }) => {
const allowedComponents: AllowedComponentList = {
applicable: true,
components: [
{
path,
title,
},
],
};
render(generateAllowedComponentsContainer(allowedComponents));
const node = screen.getByTestId('testcontainer');
return node.querySelector(ALLOWED_COMPONENT_PLACEHOLDER_SELECTOR) as HTMLElement;
};

it('should contain title', () => {
const placeholder = renderAllowedComponentPlaceholder({ title: COMPONENT_TEXT_TITLE });
expect(placeholder.dataset.emptytext).toEqual(COMPONENT_TEXT_TITLE);
});

it('should contain empty title when none provided', () => {
const placeholder = renderAllowedComponentPlaceholder({});
expect(placeholder.dataset.emptytext).toEqual(Texts.EMPTY_COMPONENT_TITLE);
});

it('should contain path', () => {
const placeholder = renderAllowedComponentPlaceholder({ path: COMPONENT_TEXT_PATH });
expect(placeholder.dataset.cqDataPath).toEqual(COMPONENT_TEXT_PATH);
});
});
});

0 comments on commit 0578cc5

Please sign in to comment.