diff --git a/__tests__/src/components/ViewerInfo.test.js b/__tests__/src/components/ViewerInfo.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..357d0392db8f679aa9c9124a690328b07c6cedaf
--- /dev/null
+++ b/__tests__/src/components/ViewerInfo.test.js
@@ -0,0 +1,28 @@
+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);
+  });
+});
diff --git a/__tests__/src/components/WindowViewer.test.js b/__tests__/src/components/WindowViewer.test.js
index 19054e8b1c3b7e7de374770791769325f9eb2125..1b2109690b82a100e4b226f16e4e07018f736f07 100644
--- a/__tests__/src/components/WindowViewer.test.js
+++ b/__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,
diff --git a/src/components/ViewerInfo.js b/src/components/ViewerInfo.js
index 31c2acd73b9e0b5811726c1ab3e3671ade359a54..94c1b361f57312dd049e91d40268b16dd892e5d8 100644
--- a/src/components/ViewerInfo.js
+++ b/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>
     );