Approximate text width by multiplying amount of characters

...instead of relying on Canvas.measureText for that. This means that the
calculation is no longer dependent on how the OS renders fonts and therefore
makes the test suite simpler, and portable across OS environments.

Author: pablosichert

test/Truncate.js

@@ -5,7 +5,6 @@ import unexpectedDOM from 'unexpected-dom';
 import sinon from 'sinon';
 import { jsdom } from 'jsdom';
 import requestAnimationFrame, { cancel as cancelAnimationFrame } from 'raf';
-import Canvas from 'canvas';
 import React, { Component } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { renderToString } from 'react-dom/server';
@@ -36,6 +35,9 @@ const expect = unexpected.clone()
     })
 ;
 
+const characterWidth = 6; // px
+const measureWidth = text => text.length * characterWidth;
+
 describe('<Truncate />', () => {
     it('should be a React component', () => {
         expect(Truncate, 'to be a', Component.constructor);
@@ -72,7 +74,6 @@ describe('<Truncate />', () => {
         before(() => {
             global.document = jsdom();
             global.window = global.document.defaultView;
-            global.window.Canvas = Canvas;
             global.window.requestAnimationFrame = requestAnimationFrame;
             global.window.cancelAnimationFrame = cancelAnimationFrame;
             Object.defineProperty(global.window.HTMLElement.prototype, 'innerText', {
@@ -110,7 +111,11 @@ describe('<Truncate />', () => {
             }
         });
 
-        describe('with a box of 85px mocked out', () => {
+        // Mock out a box that's 14 characters wide
+        const numCharacters = 14;
+        const width = numCharacters * characterWidth;
+
+        describe(`with a box of ${width}px mocked out`, () => {
             const renderIntoBox = component => renderIntoDocument(
                 <div>
                     {component}
@@ -119,16 +124,13 @@ describe('<Truncate />', () => {
 
             before(() => {
                 sinon.stub(global.window.HTMLDivElement.prototype,
-                    'getBoundingClientRect', () => ({ width: 85 })
+                    'getBoundingClientRect', () => ({ width })
                 );
 
-                // Approximate .offsetWidth with context.measureText
+                // Approximate .offsetWidth
                 sinon.stub(Truncate.prototype,
                     'ellipsisWidth', node => {
-                        const canvas = document.createElement('canvas');
-                        const context = canvas.getContext('2d');
-
-                        return context.measureText(node.textContent).width;
+                        return measureWidth(node.textContent);
                     }
                 );
             });
@@ -151,7 +153,7 @@ describe('<Truncate />', () => {
 
                 expect(component, 'to display text', `
                     This text should
-                    stop after here…
+                    stop after here …
                 `);
             });
 
@@ -225,7 +227,7 @@ describe('<Truncate />', () => {
                 );
 
                 expect(component, 'to display text', `
-                    Thereisasuperl…
+                    Thereisasuperlo…
                 `);
             });
 
@@ -240,7 +242,7 @@ describe('<Truncate />', () => {
 
                 expect(component, 'to display text', `
                     I'm curious what
-                    the … read more
+                    the… read more
                 `);
             });
 
@@ -257,7 +259,7 @@ describe('<Truncate />', () => {
                 );
 
                 expect(component, 'to display text', `
-                    Some old cont…
+                    Some old conte…
                 `);
 
                 render(
@@ -270,7 +272,7 @@ describe('<Truncate />', () => {
                 );
 
                 expect(component, 'to display text', `
-                    Some new con…
+                    Some new cont…
                 `);
             });
 
@@ -360,20 +362,16 @@ describe('<Truncate />', () => {
         it('should render without an error when the last line is exactly as wide as the container', () => {
             const text = 'Foo bar - end of text';
 
-            const canvas = document.createElement('canvas');
-            const context = canvas.getContext('2d');
-            const measureText = context.measureText.bind(context);
-
             sinon.stub(global.window.HTMLDivElement.prototype,
                 'getBoundingClientRect', () => ({
-                    width: measureText(text).width
+                    width: measureWidth(text)
                 })
             );
 
-            // Approximate .offsetWidth with context.measureText
+            // Approximate .offsetWidth
             sinon.stub(Truncate.prototype,
                 'ellipsisWidth', node => {
-                    return measureText(node.textContent).width;
+                    return measureWidth(text);
                 }
             );