${JSON.stringify(
+ testMetadata
+ )}`,
+ '
',
+ '${JSON.stringify(
+ testMetadata
+ )}11-23-2001
'); }); + + it('should render field metadata component when metadata property is present', () => { + const testMetadata = { + contextItem: { + id: '{09A07660-6834-476C-B93B-584248D3003B}', + language: 'en', + revision: 'a0b36ce0a7db49418edf90eb9621e145', + version: 1, + }, + fieldId: '{414061F4-FBB1-4591-BC37-BFFA67F745EB}', + fieldType: 'date', + rawValue: 'Test1', + }; + + const props = { + field: { + value: '23-11-2001', + metadata: testMetadata, + }, + }; + + const rendered = mount(${JSON.stringify(
+ testMetadata
+ )}`,
+ '23-11-2001',
+ 'foo
; + + const rendered = mount( +${JSON.stringify(
+ props.metadata
+ )}`,
+ 'foo
', + '{data}
+ {props.children}
+ ${JSON.stringify(
+ testMetadata
+ )}`,
+ '
',
+ '${JSON.stringify(
+ testMetadata
+ )}`,
+ 'ipsum',
+ '');
expect(rendered.html()).to.contain('value');
});
+
+ it('should render field metadata component when metadata property is present', () => {
+ 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',
+ };
+
+ const field = {
+ value: 'value',
+ metadata: testMetadata,
+ };
+
+ const rendered = mount(${JSON.stringify(
+ testMetadata
+ )}`,
+ 'value',
+ ' = forwardRef(
- ({ field, tag, editable, ...otherProps }, ref) => {
+export const RichText: React.FC = withFieldMetadata(
+ // eslint-disable-next-line react/display-name
+ forwardRef(({ field, tag, editable, ...otherProps }, ref) => {
if (!field || (!field.editable && !field.value)) {
return null;
}
@@ -38,13 +41,15 @@ export const RichText: React.FC = forwardRef(
};
return React.createElement(tag || 'div', htmlProps);
- }
+ }),
+ true
);
export const RichTextPropTypes = {
field: PropTypes.shape({
value: PropTypes.string,
editable: PropTypes.string,
+ metadata: PropTypes.objectOf(PropTypes.any),
}),
tag: PropTypes.string,
editable: PropTypes.bool,
diff --git a/packages/sitecore-jss-react/src/components/Text.test.tsx b/packages/sitecore-jss-react/src/components/Text.test.tsx
index 788b2f3bbc..633cd1fbb9 100644
--- a/packages/sitecore-jss-react/src/components/Text.test.tsx
+++ b/packages/sitecore-jss-react/src/components/Text.test.tsx
@@ -10,24 +10,23 @@ describe('');
expect(rendered.html()).to.contain('value');
});
+
+ it('should render field metadata component when metadata property is present', () => {
+ 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',
+ };
+
+ const field = {
+ value: 'value',
+ metadata: testMetadata,
+ };
+
+ const rendered = mount(
+
+ test
+
+ );
+
+ expect(rendered.html()).to.equal(
+ [
+ `${JSON.stringify(
+ testMetadata
+ )}`,
+ 'value',
+ ' = ({
- field,
- tag,
- editable,
- encode,
- ...otherProps
-}) => {
- if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
- return null;
- }
+export const Text: React.FC = withFieldMetadata(
+ ({ field, tag, editable, encode, ...otherProps }) => {
+ if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
+ return null;
+ }
- // can't use editable value if we want to output unencoded
- if (!encode) {
- // eslint-disable-next-line no-param-reassign
- editable = false;
- }
+ // can't use editable value if we want to output unencoded
+ if (!encode) {
+ // eslint-disable-next-line no-param-reassign
+ editable = false;
+ }
- const isEditable = field.editable && editable;
+ const isEditable = field.editable && editable;
- let output: string | number | (ReactElement | string)[] = isEditable
- ? field.editable || ''
- : field.value === undefined
- ? ''
- : field.value;
+ let output: string | number | (ReactElement | string)[] = isEditable
+ ? field.editable || ''
+ : field.value === undefined
+ ? ''
+ : field.value;
- // when string value isn't formatted, we should format line breaks
- if (!field.editable && typeof output === 'string') {
- const splitted = String(output).split('\n');
+ // when string value isn't formatted, we should format line breaks
+ if (!field.editable && typeof output === 'string') {
+ const splitted = String(output).split('\n');
- if (splitted.length) {
- const formatted: (ReactElement | string)[] = [];
+ if (splitted.length) {
+ const formatted: (ReactElement | string)[] = [];
- splitted.forEach((str, i) => {
- const isLast = i === splitted.length - 1;
+ splitted.forEach((str, i) => {
+ const isLast = i === splitted.length - 1;
- formatted.push(str);
+ formatted.push(str);
- if (!isLast) {
- formatted.push(
);
- }
- });
+ if (!isLast) {
+ formatted.push(
);
+ }
+ });
- output = formatted;
+ output = formatted;
+ }
}
- }
-
- const setDangerously = isEditable || !encode;
- let children = null;
- const htmlProps: {
- [htmlAttributes: string]: unknown;
- children?: React.ReactNode;
- } = {
- ...otherProps,
- };
+ const setDangerously = isEditable || !encode;
- if (setDangerously) {
- htmlProps.dangerouslySetInnerHTML = {
- __html: output,
+ let children = null;
+ const htmlProps: {
+ [htmlAttributes: string]: unknown;
+ children?: React.ReactNode;
+ } = {
+ ...otherProps,
};
- } else {
- children = output;
- }
- if (tag || setDangerously) {
- return React.createElement(tag || 'span', htmlProps, children);
- } else {
- return {children} ;
+ if (setDangerously) {
+ htmlProps.dangerouslySetInnerHTML = {
+ __html: output,
+ };
+ } else {
+ children = output;
+ }
+
+ if (tag || setDangerously) {
+ return React.createElement(tag || 'span', htmlProps, children);
+ } else {
+ return {children} ;
+ }
}
-};
+);
Text.propTypes = {
field: PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
editable: PropTypes.string,
+ metadata: PropTypes.objectOf(PropTypes.any),
}),
tag: PropTypes.string,
editable: PropTypes.bool,
encode: PropTypes.bool,
};
-
Text.defaultProps = {
editable: true,
encode: true,
diff --git a/packages/sitecore-jss-react/src/enhancers/withFieldMetadata.test.tsx b/packages/sitecore-jss-react/src/enhancers/withFieldMetadata.test.tsx
new file mode 100644
index 0000000000..52701c72dc
--- /dev/null
+++ b/packages/sitecore-jss-react/src/enhancers/withFieldMetadata.test.tsx
@@ -0,0 +1,212 @@
+/* eslint-disable no-unused-expressions */
+import React, { forwardRef } from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import { withFieldMetadata } from './withFieldMetadata';
+import { describe } from 'node:test';
+
+describe('withFieldMetadata', () => {
+ 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',
+ };
+
+ type TestComponentProps = {
+ field?: {
+ value?: string;
+ metadata?: { [key: string]: unknown };
+ };
+ editable?: boolean;
+ };
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const TestComponent = (props: TestComponentProps) => {
+ return (
+
+ {props.field?.value}
+ foo
+ bar
+
+ );
+ };
+
+ // eslint-disable-next-line react/display-name
+ const TestComponentWithRef = forwardRef(
+ (props: TestComponentProps, ref: React.ForwardedRef) => {
+ return (
+
+ {props.field?.value}
+ foo
+ bar
+
+ );
+ }
+ );
+
+ it('should return component if field is empty', () => {
+ const props = {
+ editable: true,
+ };
+
+ const WrappedComponent = withFieldMetadata(TestComponent);
+
+ const rendered = mount(foo
bar
');
+ });
+
+ it('should render unwrapped component if metadata field is not provided', () => {
+ const props = {
+ field: {
+ value: 'test',
+ },
+ editable: true,
+ };
+
+ const WrappedComponent = withFieldMetadata(TestComponent);
+
+ const rendered = mount(test
foo
bar
');
+ });
+
+ it('should render unwrapped component if metadata is provided but field is not editable', () => {
+ const props = {
+ field: {
+ value: 'test',
+ metadata: testMetadata,
+ },
+ editable: false,
+ };
+
+ const WrappedComponent = withFieldMetadata(TestComponent);
+
+ const rendered = mount(test
foo
bar
');
+ });
+
+ it('should wrap field with provided metadata', () => {
+ const props = {
+ field: {
+ value: 'car',
+ metadata: testMetadata,
+ },
+ editable: true,
+ };
+
+ const WrappedComponent = withFieldMetadata(TestComponent);
+
+ const rendered = mount(${JSON.stringify(
+ testMetadata
+ )}`,
+ '',
+ 'car
',
+ 'foo
',
+ 'bar
',
+ '',
+ '();
+
+ const WrappedComponent = withFieldMetadata(TestComponentWithRef, true);
+
+ const rendered = mount(foo
');
+
+ expect(rendered.html()).to.equal('foo
bar
');
+ });
+
+ it('should render unwrapped component if metadata field is not provided', () => {
+ const props = {
+ field: {
+ value: 'test',
+ },
+ editable: true,
+ };
+
+ const ref = React.createRef();
+
+ const WrappedComponent = withFieldMetadata(TestComponentWithRef, true);
+
+ const rendered = mount(foo
');
+
+ expect(rendered.html()).to.equal('test
foo
bar
');
+ });
+
+ it('should render unwrapped component if metadata is provided but field is not editable', () => {
+ const props = {
+ field: {
+ value: 'test',
+ metadata: testMetadata,
+ },
+ editable: false,
+ };
+
+ const ref = React.createRef();
+
+ const WrappedComponent = withFieldMetadata(TestComponentWithRef, true);
+
+ const rendered = mount(foo
');
+
+ expect(rendered.html()).to.equal('test
foo
bar
');
+ });
+
+ it('should wrap field with provided metadata', () => {
+ const props = {
+ field: {
+ value: 'car',
+ metadata: testMetadata,
+ },
+ editable: true,
+ };
+
+ const ref = React.createRef();
+
+ const WrappedComponent = withFieldMetadata(TestComponentWithRef, true);
+
+ const rendered = mount(foo
');
+
+ expect(rendered.html()).to.equal(
+ [
+ `${JSON.stringify(
+ testMetadata
+ )}`,
+ '',
+ 'car
',
+ 'foo
',
+ 'bar
',
+ '',
+ '} FieldComponent the field component
+ * @param {boolean} isForwardRef set to 'true' if forward reference is needed
+ */
+export function withFieldMetadata<
+ FieldComponentProps extends WithMetadataProps,
+ RefElementType = HTMLElement
+>(FieldComponent: ComponentType, isForwardRef = false) {
+ if (isForwardRef) {
+ // eslint-disable-next-line react/display-name
+ return forwardRef(
+ ({ ...props }: FieldComponentProps, ref: React.ForwardedRef) => {
+ const metadata = props.field?.metadata;
+
+ if (!metadata || !props.editable) {
+ return
+
+ );
+ }
+ );
+ }
+
+ // eslint-disable-next-line react/display-name
+ return ({ ...props }: FieldComponentProps) => {
+ const metadata = props.field?.metadata;
+
+ if (!metadata || !props.editable) {
+ return
+
+ );
+ };
+}
diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts
index 057df7c5d5..4e07998a8b 100644
--- a/packages/sitecore-jss-react/src/index.ts
+++ b/packages/sitecore-jss-react/src/index.ts
@@ -99,3 +99,4 @@ export { withPlaceholder } from './enhancers/withPlaceholder';
export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
export { EditFrameProps, EditFrame } from './components/EditFrame';
export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
+export { withFieldMetadata } from './enhancers/withFieldMetadata';
');
expect(rendered.html()).to.contain('value');
});
+
+ it('should render field metadata component when metadata property is present', () => {
+ 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',
+ };
+
+ const field = {
+ value: 'value',
+ metadata: testMetadata,
+ };
+
+ const rendered = mount(
+
+ test
+
+ );
+
+ expect(rendered.html()).to.equal(
+ [
+ `${JSON.stringify(
+ testMetadata
+ )}`,
+ 'value',
+ ' = ({
- field,
- tag,
- editable,
- encode,
- ...otherProps
-}) => {
- if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
- return null;
- }
+export const Text: React.FC = withFieldMetadata(
+ ({ field, tag, editable, encode, ...otherProps }) => {
+ if (!field || (!field.editable && (field.value === undefined || field.value === ''))) {
+ return null;
+ }
- // can't use editable value if we want to output unencoded
- if (!encode) {
- // eslint-disable-next-line no-param-reassign
- editable = false;
- }
+ // can't use editable value if we want to output unencoded
+ if (!encode) {
+ // eslint-disable-next-line no-param-reassign
+ editable = false;
+ }
- const isEditable = field.editable && editable;
+ const isEditable = field.editable && editable;
- let output: string | number | (ReactElement | string)[] = isEditable
- ? field.editable || ''
- : field.value === undefined
- ? ''
- : field.value;
+ let output: string | number | (ReactElement | string)[] = isEditable
+ ? field.editable || ''
+ : field.value === undefined
+ ? ''
+ : field.value;
- // when string value isn't formatted, we should format line breaks
- if (!field.editable && typeof output === 'string') {
- const splitted = String(output).split('\n');
+ // when string value isn't formatted, we should format line breaks
+ if (!field.editable && typeof output === 'string') {
+ const splitted = String(output).split('\n');
- if (splitted.length) {
- const formatted: (ReactElement | string)[] = [];
+ if (splitted.length) {
+ const formatted: (ReactElement | string)[] = [];
- splitted.forEach((str, i) => {
- const isLast = i === splitted.length - 1;
+ splitted.forEach((str, i) => {
+ const isLast = i === splitted.length - 1;
- formatted.push(str);
+ formatted.push(str);
- if (!isLast) {
- formatted.push(
);
- }
- });
+ if (!isLast) {
+ formatted.push(
);
+ }
+ });
- output = formatted;
+ output = formatted;
+ }
}
- }
-
- const setDangerously = isEditable || !encode;
- let children = null;
- const htmlProps: {
- [htmlAttributes: string]: unknown;
- children?: React.ReactNode;
- } = {
- ...otherProps,
- };
+ const setDangerously = isEditable || !encode;
- if (setDangerously) {
- htmlProps.dangerouslySetInnerHTML = {
- __html: output,
+ let children = null;
+ const htmlProps: {
+ [htmlAttributes: string]: unknown;
+ children?: React.ReactNode;
+ } = {
+ ...otherProps,
};
- } else {
- children = output;
- }
- if (tag || setDangerously) {
- return React.createElement(tag || 'span', htmlProps, children);
- } else {
- return {children} ;
+ if (setDangerously) {
+ htmlProps.dangerouslySetInnerHTML = {
+ __html: output,
+ };
+ } else {
+ children = output;
+ }
+
+ if (tag || setDangerously) {
+ return React.createElement(tag || 'span', htmlProps, children);
+ } else {
+ return {children} ;
+ }
}
-};
+);
Text.propTypes = {
field: PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
editable: PropTypes.string,
+ metadata: PropTypes.objectOf(PropTypes.any),
}),
tag: PropTypes.string,
editable: PropTypes.bool,
encode: PropTypes.bool,
};
-
Text.defaultProps = {
editable: true,
encode: true,
diff --git a/packages/sitecore-jss-react/src/enhancers/withFieldMetadata.test.tsx b/packages/sitecore-jss-react/src/enhancers/withFieldMetadata.test.tsx
new file mode 100644
index 0000000000..52701c72dc
--- /dev/null
+++ b/packages/sitecore-jss-react/src/enhancers/withFieldMetadata.test.tsx
@@ -0,0 +1,212 @@
+/* eslint-disable no-unused-expressions */
+import React, { forwardRef } from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import { withFieldMetadata } from './withFieldMetadata';
+import { describe } from 'node:test';
+
+describe('withFieldMetadata', () => {
+ 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',
+ };
+
+ type TestComponentProps = {
+ field?: {
+ value?: string;
+ metadata?: { [key: string]: unknown };
+ };
+ editable?: boolean;
+ };
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const TestComponent = (props: TestComponentProps) => {
+ return (
+
+ {props.field?.value}
+ foo
+ bar
+
+ );
+ };
+
+ // eslint-disable-next-line react/display-name
+ const TestComponentWithRef = forwardRef(
+ (props: TestComponentProps, ref: React.ForwardedRef) => {
+ return (
+
+ {props.field?.value}
+ foo
+ bar
+
+ );
+ }
+ );
+
+ it('should return component if field is empty', () => {
+ const props = {
+ editable: true,
+ };
+
+ const WrappedComponent = withFieldMetadata(TestComponent);
+
+ const rendered = mount(foo
bar
');
+ });
+
+ it('should render unwrapped component if metadata field is not provided', () => {
+ const props = {
+ field: {
+ value: 'test',
+ },
+ editable: true,
+ };
+
+ const WrappedComponent = withFieldMetadata(TestComponent);
+
+ const rendered = mount(test
foo
bar
');
+ });
+
+ it('should render unwrapped component if metadata is provided but field is not editable', () => {
+ const props = {
+ field: {
+ value: 'test',
+ metadata: testMetadata,
+ },
+ editable: false,
+ };
+
+ const WrappedComponent = withFieldMetadata(TestComponent);
+
+ const rendered = mount(test
foo
bar
');
+ });
+
+ it('should wrap field with provided metadata', () => {
+ const props = {
+ field: {
+ value: 'car',
+ metadata: testMetadata,
+ },
+ editable: true,
+ };
+
+ const WrappedComponent = withFieldMetadata(TestComponent);
+
+ const rendered = mount(${JSON.stringify(
+ testMetadata
+ )}`,
+ '',
+ 'car
',
+ 'foo
',
+ 'bar
',
+ '',
+ '();
+
+ const WrappedComponent = withFieldMetadata(TestComponentWithRef, true);
+
+ const rendered = mount(foo
');
+
+ expect(rendered.html()).to.equal('foo
bar
');
+ });
+
+ it('should render unwrapped component if metadata field is not provided', () => {
+ const props = {
+ field: {
+ value: 'test',
+ },
+ editable: true,
+ };
+
+ const ref = React.createRef();
+
+ const WrappedComponent = withFieldMetadata(TestComponentWithRef, true);
+
+ const rendered = mount(foo
');
+
+ expect(rendered.html()).to.equal('test
foo
bar
');
+ });
+
+ it('should render unwrapped component if metadata is provided but field is not editable', () => {
+ const props = {
+ field: {
+ value: 'test',
+ metadata: testMetadata,
+ },
+ editable: false,
+ };
+
+ const ref = React.createRef();
+
+ const WrappedComponent = withFieldMetadata(TestComponentWithRef, true);
+
+ const rendered = mount(foo
');
+
+ expect(rendered.html()).to.equal('test
foo
bar
');
+ });
+
+ it('should wrap field with provided metadata', () => {
+ const props = {
+ field: {
+ value: 'car',
+ metadata: testMetadata,
+ },
+ editable: true,
+ };
+
+ const ref = React.createRef();
+
+ const WrappedComponent = withFieldMetadata(TestComponentWithRef, true);
+
+ const rendered = mount(foo
');
+
+ expect(rendered.html()).to.equal(
+ [
+ `${JSON.stringify(
+ testMetadata
+ )}`,
+ '',
+ 'car
',
+ 'foo
',
+ 'bar
',
+ '',
+ '} FieldComponent the field component
+ * @param {boolean} isForwardRef set to 'true' if forward reference is needed
+ */
+export function withFieldMetadata<
+ FieldComponentProps extends WithMetadataProps,
+ RefElementType = HTMLElement
+>(FieldComponent: ComponentType, isForwardRef = false) {
+ if (isForwardRef) {
+ // eslint-disable-next-line react/display-name
+ return forwardRef(
+ ({ ...props }: FieldComponentProps, ref: React.ForwardedRef) => {
+ const metadata = props.field?.metadata;
+
+ if (!metadata || !props.editable) {
+ return
+
+ );
+ }
+ );
+ }
+
+ // eslint-disable-next-line react/display-name
+ return ({ ...props }: FieldComponentProps) => {
+ const metadata = props.field?.metadata;
+
+ if (!metadata || !props.editable) {
+ return
+
+ );
+ };
+}
diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts
index 057df7c5d5..4e07998a8b 100644
--- a/packages/sitecore-jss-react/src/index.ts
+++ b/packages/sitecore-jss-react/src/index.ts
@@ -99,3 +99,4 @@ export { withPlaceholder } from './enhancers/withPlaceholder';
export { withDatasourceCheck } from './enhancers/withDatasourceCheck';
export { EditFrameProps, EditFrame } from './components/EditFrame';
export { ComponentBuilder, ComponentBuilderConfig } from './ComponentBuilder';
+export { withFieldMetadata } from './enhancers/withFieldMetadata';
test
+ ); - } - }); + if (!isLast) { + formatted.push(
); + } + }); - output = formatted; + output = formatted; + } } - } - - const setDangerously = isEditable || !encode; - let children = null; - const htmlProps: { - [htmlAttributes: string]: unknown; - children?: React.ReactNode; - } = { - ...otherProps, - }; + const setDangerously = isEditable || !encode; - if (setDangerously) { - htmlProps.dangerouslySetInnerHTML = { - __html: output, + let children = null; + const htmlProps: { + [htmlAttributes: string]: unknown; + children?: React.ReactNode; + } = { + ...otherProps, }; - } else { - children = output; - } - if (tag || setDangerously) { - return React.createElement(tag || 'span', htmlProps, children); - } else { - return
+
+ );
+ };
+
+ // eslint-disable-next-line react/display-name
+ const TestComponentWithRef = forwardRef(
+ (props: TestComponentProps, ref: React.ForwardedRef{props.field?.value}
+foo
+bar
+
+
+ );
+ }
+ );
+
+ it('should return component if field is empty', () => {
+ const props = {
+ editable: true,
+ };
+
+ const WrappedComponent = withFieldMetadata{props.field?.value}
+foo
+bar
+foo
bar
test
foo
bar
test
foo
bar
${JSON.stringify(
+ testMetadata
+ )}`,
+ '',
+ '
',
+ 'car
', + 'foo
', + 'bar
', + 'foo
'); + + expect(rendered.html()).to.equal('foo
bar
foo
'); + + expect(rendered.html()).to.equal('test
foo
bar
foo
'); + + expect(rendered.html()).to.equal('test
foo
bar
foo
'); + + expect(rendered.html()).to.equal( + [ + `${JSON.stringify(
+ testMetadata
+ )}`,
+ '',
+ '
',
+ 'car
', + 'foo
', + 'bar
', + '