diff --git a/__tests__/src/components/LabelValueMetadata.test.js b/__tests__/src/components/LabelValueMetadata.test.js
index 7eaa41c70b6a15aed121cf5b549fffcf0594718d..24d4d0ce204bb04944861bf44c2a9c0b601243fa 100644
--- a/__tests__/src/components/LabelValueMetadata.test.js
+++ b/__tests__/src/components/LabelValueMetadata.test.js
@@ -1,5 +1,6 @@
import React from 'react';
import { shallow } from 'enzyme';
+import SanitizedHtml from '../../../src/components/SanitizedHtml';
import LabelValueMetadata from '../../../src/components/LabelValueMetadata';
describe('LabelValueMetadata', () => {
@@ -25,14 +26,23 @@ describe('LabelValueMetadata', () => {
it('renders a dt/dd for each label/value pair', () => {
expect(wrapper.find('dl').length).toEqual(1);
-
expect(wrapper.find('dt').length).toEqual(2);
+ expect(wrapper.find('dd').length).toEqual(2);
+ });
+
+ it('renders correct labels in dt', () => {
expect(wrapper.find('dt').first().text()).toEqual('Label 1');
expect(wrapper.find('dt').last().text()).toEqual('Label 2');
+ });
- expect(wrapper.find('dd').length).toEqual(2);
- expect(wrapper.find('dd').first().text()).toEqual('Value 1');
- expect(wrapper.find('dd').last().text()).toEqual('Value 2');
+ it('renders SanitizedHtml component in dt for each value', () => {
+ expect(wrapper.find('dd').first().find(SanitizedHtml).length).toBe(1);
+ expect(wrapper.find('dd').last().find(SanitizedHtml).length).toBe(1);
+ });
+
+ it('passes value string to SanitizedHtml', () => {
+ expect(wrapper.find(SanitizedHtml).first().props().htmlString).toBe('Value 1');
+ expect(wrapper.find(SanitizedHtml).last().props().htmlString).toBe('Value 2');
});
});
diff --git a/__tests__/src/components/WindowSideBarInfoPanel.test.js b/__tests__/src/components/WindowSideBarInfoPanel.test.js
index ea9d1f7a2214d86e42c75237d0733643bf235deb..c9cbc2cb76e08ad2c775d2373091e959ebdb9663 100644
--- a/__tests__/src/components/WindowSideBarInfoPanel.test.js
+++ b/__tests__/src/components/WindowSideBarInfoPanel.test.js
@@ -2,9 +2,11 @@ import React from 'react';
import { shallow } from 'enzyme';
import Typography from '@material-ui/core/Typography';
import WindowSideBarInfoPanel from '../../../src/components/WindowSideBarInfoPanel';
+import SanitizedHtml from '../../../src/components/SanitizedHtml';
import LabelValueMetadata from '../../../src/components/LabelValueMetadata';
describe('WindowSideBarInfoPanel', () => {
+ const metadata = [{ label: {}, value: {} }];
let wrapper;
describe('when metadata is present', () => {
@@ -13,43 +15,73 @@ describe('WindowSideBarInfoPanel', () => {
<WindowSideBarInfoPanel
canvasLabel="The Canvas Label"
canvasDescription="The Canvas Description"
- canvasMetadata={[{ label: {}, value: {} }]}
+ canvasMetadata={metadata}
manifestLabel="The Manifest Label"
manifestDescription="The Manifest Description"
+ manifestMetadata={metadata}
+ t={str => str}
/>,
).dive();
});
- it('renders canvas level label, description, and metadata', () => {
+ it('renders header', () => {
expect(
- wrapper.find('WithStyles(Typography)[variant="h3"]').first().matchesElement(
+ wrapper.find(Typography).at(0).matchesElement(
+ <Typography>aboutThisItem</Typography>,
+ ),
+ ).toBe(true);
+ });
+
+ it('renders canvas label', () => {
+ expect(
+ wrapper.find(Typography).at(1).matchesElement(
<Typography>The Canvas Label</Typography>,
),
).toBe(true);
+ });
+ it('renders canvas description in SanitizedHtml component', () => {
expect(
- wrapper.find('WithStyles(Typography)[variant="body2"]').first().matchesElement(
- <Typography>The Canvas Description</Typography>,
+ wrapper.find(Typography).at(2).matchesElement(
+ <Typography>
+ <SanitizedHtml htmlString="The Canvas Description" ruleSet="iiif" />
+ </Typography>,
),
).toBe(true);
+ });
- expect(wrapper.find(LabelValueMetadata).length).toBe(2); // one for canvas one for manifest
+ it('renders canvas metadata in LabelValueMetadata component', () => {
+ expect(
+ wrapper.find(LabelValueMetadata).at(0).matchesElement(
+ <LabelValueMetadata labelValuePairs={metadata} />,
+ ),
+ ).toBe(true);
});
- it('renders manifest level label, description, and metadata', () => {
+ it('renders manifest label', () => {
expect(
- wrapper.find('WithStyles(Typography)[variant="h3"]').last().matchesElement(
+ wrapper.find(Typography).at(3).matchesElement(
<Typography>The Manifest Label</Typography>,
),
).toBe(true);
+ });
+ it('renders manifest description in SanitizedHtml component', () => {
expect(
- wrapper.find('WithStyles(Typography)[variant="body2"]').last().matchesElement(
- <Typography>The Manifest Description</Typography>,
+ wrapper.find(Typography).at(4).matchesElement(
+ <Typography>
+ <SanitizedHtml htmlString="The Manifest Description" ruleSet="iiif" />
+ </Typography>,
),
).toBe(true);
+ });
- expect(wrapper.find(LabelValueMetadata).length).toBe(2); // one for canvas one for manifest
+ it('renders manifest metadata in LabelValueMetadata component', () => {
+ expect(
+ wrapper.find(LabelValueMetadata).at(1).matchesElement(
+ <LabelValueMetadata labelValuePairs={metadata} />,
+ ),
+ ).toBe(true);
});
});
@@ -60,15 +92,17 @@ describe('WindowSideBarInfoPanel', () => {
).dive();
});
- it('does not render empty elements', () => {
+ it('does render header', () => {
expect(
- wrapper.find('WithStyles(Typography)[variant="h2"]').first().matchesElement(
+ wrapper.find(Typography).first().matchesElement(
<Typography>aboutThisItem</Typography>,
),
).toBe(true);
+ });
- expect(wrapper.find('WithStyles(Typography)[variant="h3"]').length).toEqual(0);
- expect(wrapper.find('WithStyles(Typography)[variant="body2"]').length).toEqual(0);
+ it('does not render empty elements elements', () => {
+ expect(wrapper.find(Typography).length).toBe(1); // only header element
+ expect(wrapper.find(LabelValueMetadata).length).toBe(0);
});
});
});
diff --git a/src/components/LabelValueMetadata.js b/src/components/LabelValueMetadata.js
index 4721dc32d56290d0e7ae9bec12fd16e2f5cc137f..df1c26765a0ed6a24d2c14c1b67b2613072cd88b 100644
--- a/src/components/LabelValueMetadata.js
+++ b/src/components/LabelValueMetadata.js
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
+import SanitizedHtml from './SanitizedHtml';
/**
* Renders label/value pair metadata in a dl
@@ -24,8 +25,12 @@ class LabelValueMetadata extends Component {
return (
<dl>
{labelValuePairs.reduce((acc, labelValuePair, i) => acc.concat([
- <dt key={`label-${i}`}>{labelValuePair.label}</dt>,
- <dd key={`value-${i}`}>{labelValuePair.value}</dd>,
+ <dt key={`label-${i}`}>
+ {labelValuePair.label}
+ </dt>,
+ <dd key={`value-${i}`}>
+ <SanitizedHtml htmlString={labelValuePair.value} ruleSet="iiif" />
+ </dd>,
]), [])}
</dl>
);
diff --git a/src/components/WindowSideBarInfoPanel.js b/src/components/WindowSideBarInfoPanel.js
index 9766310542c71b49fbf390bb8fd7816a8b9e78f4..9c7b424297da934c2bf82d3cf7820f863b879aeb 100644
--- a/src/components/WindowSideBarInfoPanel.js
+++ b/src/components/WindowSideBarInfoPanel.js
@@ -4,8 +4,10 @@ import Divider from '@material-ui/core/Divider';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import LabelValueMetadata from './LabelValueMetadata';
+import SanitizedHtml from './SanitizedHtml';
import ns from '../config/css-ns';
+
/**
* WindowSideBarInfoPanel
*/
@@ -25,16 +27,48 @@ class WindowSideBarInfoPanel extends Component {
manifestMetadata,
t,
} = this.props;
+
return (
<div className={ns('window-sidebar-info-panel')}>
- <Typography variant="h2" className={classes.windowSideBarH2}>{t('aboutThisItem')}</Typography>
- {canvasLabel && <Typography variant="h3" className={classes.windowSideBarH3}>{canvasLabel}</Typography>}
- {canvasDescription && <Typography variant="body2">{canvasDescription}</Typography>}
- {canvasMetadata && <LabelValueMetadata labelValuePairs={canvasMetadata} />}
+
+ <Typography variant="h2" className={classes.windowSideBarH2}>
+ {t('aboutThisItem')}
+ </Typography>
+
+ {canvasLabel && (
+ <Typography variant="h3" className={classes.windowSideBarH3}>
+ {canvasLabel}
+ </Typography>
+ )}
+
+ {canvasDescription && (
+ <Typography variant="body2">
+ <SanitizedHtml htmlString={canvasDescription} ruleSet="iiif" />
+ </Typography>
+ )}
+
+ {canvasMetadata.length > 0 && (
+ <LabelValueMetadata labelValuePairs={canvasMetadata} />
+ )}
+
<Divider />
- {manifestLabel && <Typography variant="h3" className={classes.windowSideBarH3}>{manifestLabel}</Typography>}
- {manifestDescription && <Typography variant="body2">{manifestDescription}</Typography>}
- {manifestMetadata && <LabelValueMetadata labelValuePairs={manifestMetadata} />}
+
+ {manifestLabel && (
+ <Typography variant="h3" className={classes.windowSideBarH3}>
+ {manifestLabel}
+ </Typography>
+ )}
+
+ {manifestDescription && (
+ <Typography variant="body2">
+ <SanitizedHtml htmlString={manifestDescription} ruleSet="iiif" />
+ </Typography>
+ )}
+
+ {manifestMetadata.length > 0 && (
+ <LabelValueMetadata labelValuePairs={manifestMetadata} />
+ )}
+
</div>
);
}