fix: added tests for util functions

datchley · Mar 14, 2017 · dc57577 · dc57577
1 parent 750c18a
commit dc57577
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 1 deletion.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,18 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "eslint-plugin-react": "^4.1.0",
     "ghooks": "^1.2.4",
     "jest": "^19.0.2",
+    "jsdom": "^9.12.0",
     "nyc": "^10.0.0",
     "react-addons-test-utils": "^15.0.1",
     "react-dom": "^15.0.1",
@@ -62,6 +63,7 @@
     "react": "^15.0.1"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
     ],

diff --git a/src/__tests__/utils.tests.js b/src/__tests__/utils.tests.js
@@ -0,0 +1,64 @@
+import { camelize, getStyle, getOverflow, hasOverflow } from '../utils';
+
+function createMockDiv (width, height, styles = {}) {
+  const div = document.createElement("div");
+  Object.assign(div.style, {
+    width: width+"px",
+    height: height+"px",
+  }, styles);
+
+  // we have to mock this for jsdom.
+  div.getBoundingClientRect = () => ({
+    width: div.style.width || width,
+    height: div.style.height || height,
+    top: 0,
+    left: 0,
+    right: div.style.width || width,
+    bottom: div.style.height || height,
+  });
+  return div;
+}
+
+describe('camelize()', () => {
+  it('correctly camelizes a dashed string', () => {
+    const before = 'not-camelized-string';
+    const after = 'notCamelizedString';
+    expect(camelize(before)).toEqual(after);
+  });
+  it('correctly camelizes a flat string', () => {
+    const before = 'singlestring';
+    const after = 'singlestring';
+    expect(camelize(before)).toEqual(after);
+  });
+});
+
+describe('getStyle()', () => {
+  it('correctly gets style properties from an element', () => {
+    document.body.innerHTML = `<html><body>
+      <div class="target" style="font-size: 12px">testing</div>
+    </body></html>`;
+
+    const target = document.querySelector('.target');
+    expect(getStyle(target, 'font-size')).toEqual('12px');
+  });
+});
+
+describe('getOverflow() + hasOverflow()', () => {
+  it('detects and tests for overflow', () => {
+    document.body.innerHTML = '<html><body></body></html>';
+
+    const parent = createMockDiv(100, 100, { overflow: 'hidden' });
+    document.body.appendChild(parent);
+    const child = createMockDiv(200, 200);
+    parent.appendChild(child);
+
+    expect(getOverflow(parent, child)).toMatchObject({ horizontal: true, vertical: true });
+    expect(hasOverflow(parent, child)).toEqual(true);
+    child.style.height = '100px';
+    expect(getOverflow(parent, child)).toMatchObject({ horizontal: true, vertical: false });
+    expect(hasOverflow(parent, child)).toEqual(true);
+    child.style.width = '100px';
+    expect(getOverflow(parent, child)).toMatchObject({ horizontal: false, vertical: false });
+    expect(hasOverflow(parent, child)).toEqual(false);
+  });
+});
diff --git a/src/utils.js b/src/utils.js
@@ -5,7 +5,7 @@
 import values from 'lodash/values';
 
 // Camelcase a dashed string, ie do-thing => doThing
-const camelize = (str) =>
+export const camelize = (str) =>
   str.replace(/\-(\w)/g, (s, letter) => letter.toUpperCase());
 
 // Detect if child overflows parent either veritcally or horizontally