@instructure/ui-truncate-text 10.11.0 → 10.11.1-snapshot-2

package/lib/TruncateText/utils/__new-tests__/measureText.test.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _measureText = _interopRequireDefault(require("../measureText"));
+var _div, _div2, _div3, _div4;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+const baseStyle = {
+  fontSize: '16px',
+  fontFamily: 'Arial',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  letterSpacing: 'normal'
+};
+const getNodes = root => Array.from(root.childNodes).filter(node => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE);
+describe('measureText', () => {
+  beforeEach(() => {
+    _vitest.vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(() => {
+      return {
+        font: '',
+        measureText: _vitest.vi.fn(text => {
+          return {
+            width: text.length * 10
+          };
+        })
+      };
+    });
+  });
+  afterEach(() => {
+    _vitest.vi.restoreAllMocks();
+  });
+  it('should calculate the width of a single text node correctly', () => {
+    const node = document.createElement('div');
+    Object.assign(node.style, baseStyle);
+    node.textContent = 'Hello';
+    const width = (0, _measureText.default)([node]);
+    (0, _vitest.expect)(width).toBe(50); // 5 characters * 10 (mocked width per character)
+  });
+  it('should return zero for empty nodes', () => {
+    const node = document.createElement('div');
+    Object.assign(node.style, baseStyle);
+    node.textContent = '';
+    const width = (0, _measureText.default)([node]);
+    (0, _vitest.expect)(width).toBe(0);
+  });
+  it('should calculate text width correctly', () => {
+    (0, _react2.render)(_div || (_div = /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "stage",
+      style: baseStyle
+    }, "Lorem ipsum ", /*#__PURE__*/_react.default.createElement("span", {
+      style: baseStyle
+    }, "DOLOR SIT AMET."))));
+    const stage = _react2.screen.getByTestId('stage');
+    const nodes = getNodes(stage);
+    const width = (0, _measureText.default)(nodes, stage);
+    (0, _vitest.expect)(width).toBe(270);
+  });
+  it('should account for different nodes', async () => {
+    const _render = (0, _react2.render)(_div2 || (_div2 = /*#__PURE__*/_react.default.createElement("div", {
+        "data-testid": "stage",
+        style: baseStyle
+      }, "Lorem ipsum ", /*#__PURE__*/_react.default.createElement("span", {
+        style: baseStyle
+      }, "DOLOR SIT AMET.")))),
+      rerender = _render.rerender;
+    const stage = _react2.screen.getByTestId('stage');
+    const nodes = getNodes(stage);
+    const width = (0, _measureText.default)(nodes, stage);
+
+    // Set child
+    rerender(_div3 || (_div3 = /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "stage",
+      style: baseStyle
+    }, "Lorem ipsum DOLOR SIT AMET.")));
+    const stage2 = _react2.screen.getByTestId('stage');
+    const nodes2 = getNodes(stage2);
+    const width2 = (0, _measureText.default)(nodes2, stage2);
+    (0, _vitest.expect)(width).toEqual(width2);
+  });
+  it('should call measureText on a properly configured canvas 2d context', () => {
+    const mockedStyle = {
+      fontSize: '20px',
+      fontWeight: 'bold',
+      fontStyle: 'italic',
+      fontFamily: 'Arial'
+    };
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "stage",
+      style: mockedStyle
+    }, "Lorem ipsum"));
+    const stage = _react2.screen.getByTestId('stage');
+    const nodes = getNodes(stage);
+    (0, _measureText.default)(nodes, stage);
+
+    // The width calculation depends on the modified canvas context
+    const getContextSpy = HTMLCanvasElement.prototype.getContext;
+    const context = getContextSpy.mock.results[0].value;
+    (0, _vitest.expect)(context.measureText).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(context.font).toBe('bold italic 20px Arial');
+  });
+  it('should account for letter spacing styles', async () => {
+    const _render2 = (0, _react2.render)(_div4 || (_div4 = /*#__PURE__*/_react.default.createElement("div", {
+        "data-testid": "stage",
+        style: baseStyle
+      }, "Lorem ipsum"))),
+      rerender = _render2.rerender;
+    const stage = _react2.screen.getByTestId('stage');
+    const nodes = getNodes(stage);
+    const width = (0, _measureText.default)(nodes, stage);
+    (0, _vitest.expect)(width).toBe(110); // default mocked width (text.length * 10)
+
+    // Set letterSpacing
+    rerender(/*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "stage2",
+      style: {
+        ...baseStyle,
+        letterSpacing: '5px'
+      }
+    }, "Lorem ipsum"));
+    const stage2 = _react2.screen.getByTestId('stage2');
+    const nodes2 = getNodes(stage2);
+    const width2 = (0, _measureText.default)(nodes2, stage2);
+    (0, _vitest.expect)(width2).toBe(165); // default mocked width + letterOffset (text.length * letterSpacing)
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-truncate-text",
-  "version": "10.11.0",
+  "version": "10.11.1-snapshot-2",
   "description": "A TruncateText component made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,24 +24,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.11.0",
-    "@instructure/debounce": "10.11.0",
-    "@instructure/emotion": "10.11.0",
-    "@instructure/shared-types": "10.11.0",
-    "@instructure/ui-dom-utils": "10.11.0",
-    "@instructure/ui-react-utils": "10.11.0",
-    "@instructure/ui-testable": "10.11.0",
-    "@instructure/ui-utils": "10.11.0",
+    "@instructure/console": "10.11.1-snapshot-2",
+    "@instructure/debounce": "10.11.1-snapshot-2",
+    "@instructure/emotion": "10.11.1-snapshot-2",
+    "@instructure/shared-types": "10.11.1-snapshot-2",
+    "@instructure/ui-dom-utils": "10.11.1-snapshot-2",
+    "@instructure/ui-react-utils": "10.11.1-snapshot-2",
+    "@instructure/ui-testable": "10.11.1-snapshot-2",
+    "@instructure/ui-utils": "10.11.1-snapshot-2",
     "escape-html": "^1.0.3",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.11.0",
-    "@instructure/ui-color-utils": "10.11.0",
-    "@instructure/ui-test-utils": "10.11.0",
-    "@instructure/ui-text": "10.11.0",
-    "@instructure/ui-themes": "10.11.0",
-    "@types/escape-html": "^1.0.4"
+    "@instructure/ui-axe-check": "10.11.1-snapshot-2",
+    "@instructure/ui-babel-preset": "10.11.1-snapshot-2",
+    "@instructure/ui-color-utils": "10.11.1-snapshot-2",
+    "@instructure/ui-test-utils": "10.11.1-snapshot-2",
+    "@instructure/ui-text": "10.11.1-snapshot-2",
+    "@instructure/ui-themes": "10.11.1-snapshot-2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/escape-html": "^1.0.4",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "react": ">=16.14 <=18"

package/src/TruncateText/__new-tests__/TruncateText.test.tsx

@@ -0,0 +1,99 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import { vi, expect } from 'vitest'
+import type { MockInstance } from 'vitest'
+
+import '@testing-library/jest-dom'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { TruncateText } from '../index'
+
+const defaultText = 'Hello world! This is a long string that should truncate'
+
+describe('<TruncateText />', () => {
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as MockInstance
+  })
+
+  afterEach(() => {
+    consoleErrorMock.mockRestore()
+  })
+
+  it('should warn if children prop receives too deep of a node tree', async () => {
+    render(
+      <div style={{ width: '200px' }}>
+        <TruncateText>
+          Hello world!{' '}
+          <strong>
+            <span>This is a</span>
+          </strong>{' '}
+          long string that should truncate
+        </TruncateText>
+      </div>
+    )
+
+    const expectedErrorMessage =
+      'Some children are too deep in the node tree and will not render.'
+
+    await waitFor(() => {
+      expect(consoleErrorMock).toHaveBeenCalledWith(
+        expect.stringContaining(expectedErrorMessage),
+        expect.any(String)
+      )
+    })
+  })
+
+  it('should handle the empty string as a child', async () => {
+    let error = false
+
+    try {
+      const { rerender } = render(<TruncateText>{''}</TruncateText>)
+
+      rerender(<TruncateText>{'hello world'}</TruncateText>)
+      rerender(<TruncateText>{''}</TruncateText>)
+    } catch (_e) {
+      error = true
+    }
+
+    expect(error).toBe(false)
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = render(
+      <div style={{ width: '200px' }}>
+        <TruncateText>{defaultText}</TruncateText>
+      </div>
+    )
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+  })
+})

package/src/TruncateText/utils/__new-tests__/cleanData.test.tsx

@@ -0,0 +1,131 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { expect } from 'chai'
+import '@testing-library/jest-dom'
+import cleanData from '../cleanData'
+import { CleanDataOptions } from '../../props'
+
+describe('cleanData', () => {
+  it('should remove spaces from the end of character data', async () => {
+    const data = [['T', 'e', 's', 't', ' ', '...']]
+    const options: Required<CleanDataOptions> = {
+      truncate: 'character',
+      ellipsis: '...',
+      ignore: [' ']
+    }
+    const newData = cleanData(data, options)
+    expect(newData[0].join('')).to.equal('Test...')
+  })
+
+  it('should remove spaces from the end of word data', async () => {
+    const data = [['Test ', '...']]
+    const options: Required<CleanDataOptions> = {
+      truncate: 'word',
+      ellipsis: '...',
+      ignore: [' ']
+    }
+
+    const newData = cleanData(data, options)
+    expect(newData[0].join('')).to.equal('Test...')
+  })
+
+  it('should remove spaces from the middle of character data', async () => {
+    const data = [
+      ['H', 'e', 'l', 'l', 'o', ' ', '...', ' ', 'w', 'o', 'r', 'l', 'd']
+    ]
+    const options: Required<CleanDataOptions> = {
+      truncate: 'character',
+      ellipsis: '...',
+      ignore: [' ']
+    }
+
+    const newData = cleanData(data, options)
+    expect(newData[0].join('')).to.equal('Hello...world')
+  })
+
+  it('should remove spaces from the middle of word data', async () => {
+    const data = [['Hello ', '...', 'world']]
+    const options: Required<CleanDataOptions> = {
+      truncate: 'word',
+      ellipsis: '...',
+      ignore: [' ']
+    }
+
+    const newData = cleanData(data, options)
+    expect(newData[0].join('')).to.equal('Hello...world')
+  })
+
+  it('should do a thorough cleaning', async () => {
+    const data = [['T', 'e', 's', 't', '.', ' ', '...']]
+    const options: Required<CleanDataOptions> = {
+      truncate: 'character',
+      ellipsis: '...',
+      ignore: [' ', '.']
+    }
+
+    const newData = cleanData(data, options, true)
+    expect(newData[0].join('')).to.equal('Test...')
+  })
+
+  it('should remove spaces from the end of complex character data', async () => {
+    let data = [['H', 'e', 'l', 'l', 'o', ' '], ['...']]
+    const options: Required<CleanDataOptions> = {
+      truncate: 'character',
+      ellipsis: '...',
+      ignore: [' ']
+    }
+
+    let newData = cleanData(data, options)
+    const text = newData[0].join('') + newData[1].join('')
+
+    data = [
+      ['H', 'e', 'l', 'l', 'o', ' '],
+      ['w', 'o', 'r', 'l', 'd', ' ', '...']
+    ]
+    newData = cleanData(data, options)
+    const text2 = newData[0].join('') + newData[1].join('')
+
+    expect(text).to.equal('Hello...')
+    expect(text2).to.equal('Hello world...')
+  })
+
+  it('should remove spaces from the middle of complex word data', async () => {
+    let data = [['Hello ', '...'], ['world']]
+    const options: Required<CleanDataOptions> = {
+      truncate: 'word',
+      ellipsis: '...',
+      ignore: [' ']
+    }
+
+    let newData = cleanData(data, options)
+    const text = newData[0].join('') + newData[1].join('')
+
+    data = [['Hello '], ['...', 'world']]
+    newData = cleanData(data, options)
+    const text2 = newData[0].join('') + newData[1].join('')
+
+    expect(text).to.equal('Hello...world')
+    expect(text2).to.equal('Hello...world')
+  })
+})

package/src/TruncateText/utils/__new-tests__/cleanString.test.tsx

@@ -0,0 +1,57 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { expect } from 'chai'
+import '@testing-library/jest-dom'
+import cleanString from '../cleanString'
+
+describe('cleanSring', () => {
+  it('should remove spaces from start and end of string', async () => {
+    const string = ' Hello world '
+
+    const newString = cleanString(string, [' '])
+    expect(newString).to.equal('Hello world')
+  })
+
+  it('should remove spaces from only the end of string', async () => {
+    const string = ' Hello world '
+
+    const newString = cleanString(string, [' '], false)
+    expect(newString).to.equal(' Hello world')
+  })
+
+  it('should remove spaces and commas', async () => {
+    const string = ' Hello world,'
+
+    const newString = cleanString(string, [' ', ','])
+    expect(newString).to.equal('Hello world')
+  })
+
+  it('should do a thorough cleaning', async () => {
+    const string = 'Hello world. '
+
+    const newString = cleanString(string, [' ', '.'], false, true, true)
+    expect(newString).to.equal('Hello world')
+  })
+})

package/src/TruncateText/utils/__new-tests__/measureText.test.tsx

@@ -0,0 +1,173 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { vi, expect } from 'vitest'
+
+import '@testing-library/jest-dom'
+import measureText from '../measureText'
+
+const baseStyle = {
+  fontSize: '16px',
+  fontFamily: 'Arial',
+  fontWeight: 'normal',
+  fontStyle: 'normal',
+  letterSpacing: 'normal'
+}
+
+const getNodes = (root: Element) =>
+  Array.from(root.childNodes).filter(
+    (node) =>
+      node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE
+  )
+
+describe('measureText', () => {
+  beforeEach(() => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(
+      () => {
+        return {
+          font: '',
+          measureText: vi.fn((text: string) => {
+            return { width: text.length * 10 }
+          })
+        } as unknown as CanvasRenderingContext2D
+      }
+    )
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should calculate the width of a single text node correctly', () => {
+    const node = document.createElement('div')
+    Object.assign(node.style, baseStyle)
+    node.textContent = 'Hello'
+
+    const width = measureText([node])
+
+    expect(width).toBe(50) // 5 characters * 10 (mocked width per character)
+  })
+
+  it('should return zero for empty nodes', () => {
+    const node = document.createElement('div')
+    Object.assign(node.style, baseStyle)
+    node.textContent = ''
+
+    const width = measureText([node])
+
+    expect(width).toBe(0)
+  })
+
+  it('should calculate text width correctly', () => {
+    render(
+      <div data-testid="stage" style={baseStyle}>
+        Lorem ipsum <span style={baseStyle}>DOLOR SIT AMET.</span>
+      </div>
+    )
+    const stage = screen.getByTestId('stage')
+    const nodes = getNodes(stage)
+
+    const width = measureText(nodes, stage)
+
+    expect(width).toBe(270)
+  })
+
+  it('should account for different nodes', async () => {
+    const { rerender } = render(
+      <div data-testid="stage" style={baseStyle}>
+        Lorem ipsum <span style={baseStyle}>DOLOR SIT AMET.</span>
+      </div>
+    )
+    const stage = screen.getByTestId('stage')
+    const nodes = getNodes(stage)
+
+    const width = measureText(nodes, stage)
+
+    // Set child
+    rerender(
+      <div data-testid="stage" style={baseStyle}>
+        Lorem ipsum DOLOR SIT AMET.
+      </div>
+    )
+    const stage2 = screen.getByTestId('stage')
+    const nodes2 = getNodes(stage2)
+
+    const width2 = measureText(nodes2, stage2)
+
+    expect(width).toEqual(width2)
+  })
+
+  it('should call measureText on a properly configured canvas 2d context', () => {
+    const mockedStyle = {
+      fontSize: '20px',
+      fontWeight: 'bold',
+      fontStyle: 'italic',
+      fontFamily: 'Arial'
+    }
+
+    render(
+      <div data-testid="stage" style={mockedStyle}>
+        Lorem ipsum
+      </div>
+    )
+    const stage = screen.getByTestId('stage')
+    const nodes = getNodes(stage)
+
+    measureText(nodes, stage)
+
+    // The width calculation depends on the modified canvas context
+    const getContextSpy = HTMLCanvasElement.prototype.getContext as any
+    const context = getContextSpy.mock.results[0].value
+
+    expect(context.measureText).toHaveBeenCalledTimes(1)
+    expect(context.font).toBe('bold italic 20px Arial')
+  })
+
+  it('should account for letter spacing styles', async () => {
+    const { rerender } = render(
+      <div data-testid="stage" style={baseStyle}>
+        Lorem ipsum
+      </div>
+    )
+    const stage = screen.getByTestId('stage')
+    const nodes = getNodes(stage)
+    const width = measureText(nodes, stage)
+
+    expect(width).toBe(110) // default mocked width (text.length * 10)
+
+    // Set letterSpacing
+    rerender(
+      <div data-testid="stage2" style={{ ...baseStyle, letterSpacing: '5px' }}>
+        Lorem ipsum
+      </div>
+    )
+    const stage2 = screen.getByTestId('stage2')
+    const nodes2 = getNodes(stage2)
+    const width2 = measureText(nodes2, stage2)
+
+    expect(width2).toBe(165) // default mocked width + letterOffset (text.length * letterSpacing)
+  })
+})

package/tsconfig.build.json

@@ -7,6 +7,7 @@
   },
   "include": ["./src"],
   "references": [
+    { "path": "../ui-axe-check/tsconfig.build.json" },
     { "path": "../console/tsconfig.build.json" },
     { "path": "../debounce/tsconfig.build.json" },
     { "path": "../emotion/tsconfig.build.json" },