#2144: replaces html special char by unicode number, adds test

__tests__/src/components/ViewerInfo.test.js

+import React from 'react';
+import { shallow } from 'enzyme';
+import { Typography } from '@material-ui/core';
+import { ViewerInfo } from '../../../src/components/ViewerInfo';
+
+/** create wrapper */
+function createWrapper(props) {
+  return shallow(
+    <ViewerInfo
+      canvasCount={8}
+      canvasIndex={2}
+      canvasLabel="testLabel"
+      t={k => k}
+      {...props}
+    />,
+  );
+}
+
+describe('ViewerNavigation', () => {
+  let wrapper;
+
+  it('renders the component', () => {
+    wrapper = createWrapper();
+    expect(wrapper.find(Typography).length).toBe(1);
+    expect(wrapper.find(Typography).at(0)
+      .matchesElement(<Typography>3 of 8 • testLabel</Typography>)).toBe(true);
+  });
+});

__tests__/src/components/WindowViewer.test.js

@@ -7,6 +7,7 @@ import WindowCanvasNavigationControls from '../../../src/containers/WindowCanvas
 import fixture from '../../fixtures/version-2/019.json';
 import emptyCanvasFixture from '../../fixtures/version-2/emptyCanvas.json';
 import otherContentFixture from '../../fixtures/version-2/299843.json';
+import ViewerInfo from '../../../src/containers/ViewerInfo';
 
 let mockManifest = {
   id: 123,

src/components/ViewerInfo.js

@@ -20,10 +20,7 @@ export class ViewerInfo extends Component {
       <div className={ns('osd-info')}>
         <Typography variant="caption" className={ns('canvas-label')}>
           {`${canvasIndex + 1} ${t('of')} ${canvasCount}`}
-          {
-            // eslint-disable-next-line prefer-template
-            canvasLabel && ' • ' + canvasLabel
-          }
+          {canvasLabel && ` ${String.fromCharCode(8226)} ${canvasLabel}`}
         </Typography>
       </div>
     );