Major clean up and better unit test coverage (#4)

* updated README * feat(resize): new approach to resizing font * docs: Updated README, commit template - Updated README - Added git commit template (standard-version style) * fix(ruler): corrected ruler div for measuring - removed addition of line-height from wrapper and cloned ruler - removed cloning border + padding styles for ruler * fix(tests): fix/remove tests, change example Still unable to properly test DOM specific code that relies on getBoundingClientRect, computedStyle, offsetWidth, etc., so direct unit testing of the component isn't really possible. - skipped the component tests (for now) - modified the example setup * style(eslint): Fixed eslint related issues - eslint corrections to style - addition of missing jsx-a11y eslint dep * style(eslint): eslint update, changes to style updated eslint deps and then corrected for new styling changes * build(webpack): changes for using webpack 2 - minor changes to config moving from webpack 1.x to 2.x * feat: refactored implementation and testing - Cleaned up the implementation to figure out the fill size for fonts. - ensured that if child props of the wrapped element change, resizing is triggered (not just on window resize) - moved unit tests to mocha + electron to allow real browser testing given limitations of jsdom * fix: eslint fixes * fix(testing): added xvfb for test:cov * fix(testing): unit test fixes - removed spec-xunit-file reporter from mocha - removed console logs from test * chore: cleaning up folders - removed .vscode folder from repo * fix(build): fixing test run on travis * fix(build): fixing travis build + xvfb * fix(build): fixes for travis build * fix(build): more travis + xvfb fixes * fix(build): travis. errors. ugh... * fix(build): travis test running issues fix * fix(testing): trying to determine travis test:cov failures * fix(testing): tracing down travis test errors * fix(testing): travis testing issues digging * fix(testing): tracking down travis test issues * fix(testing): tracking down travis test issues * fix(testing): tracking down travis test issues * fix(testing): tracking down testing errors on travis * chore(testing): cleaned up non-used code * fix(testing): fixes for travis test runs * fix(testing): additional unit tests - additional unit tests for dom-utils and shallow-equal * chore: clean up old code - removed jest config from package.json - added cov to npm clean script - added tests to .npmignore
datchley · Apr 27, 2017 · 556836f · 556836f
1 parent 6b7551d
commit 556836f
Show file tree

Hide file tree

Showing 25 changed files with 722 additions and 484 deletions.
diff --git a/.commit-template.txt b/.commit-template.txt
@@ -0,0 +1,40 @@
+<type>(<scope>): <subject>
+
+<body>
+
+<footer>
+
+# -- Type --
+# Must be one of the following:
+#
+# feat: A new feature
+# fix: A bug fix
+# docs: Documentation only changes
+# style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+# refactor: A code change that neither fixes a bug nor adds a feature
+# perf: A code change that improves performance
+# test: Adding missing tests or correcting existing tests
+# build: Changes that affect the build system, CI configuration or external dependencies (example scopes: gulp, broccoli, npm)
+# chore: Other changes that don't modify src or test files
+#
+
+# -- Scope --
+# The scope could be anything specifying place of the commit change. For example Compiler, ElementInjector, etc.
+#
+
+# -- Subject --
+# The subject contains a succinct description of the change:
+# use the imperative, present tense: "change" not "changed" nor "changes"
+# don't capitalize first letter
+# no dot (.) at the end
+#
+
+# -- Body --
+# Just as in the subject, use the imperative, present tense: "change" not "changed" nor "changes".
+# The body should include the motivation for the change and contrast this with previous behavior.
+#
+
+# -- Footer --
+# The footer should contain any information about Breaking Changes and is also the place to reference GitHub issues that this commit Closes.
+# Breaking Changes should start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then used for this.
+#
diff --git a/.eslintignore b/.eslintignore
@@ -1,4 +1,8 @@
 lib
 **/node_modules
 **/webpack.config.js
-examples/**/server.js
+examples/**/server.js
+build/
+node_modules/
+cov/
+tests/
diff --git a/.eslintrc → .eslintrc.json b/.eslintrc → .eslintrc.json
@@ -12,7 +12,10 @@
     "react/react-in-jsx-scope": 2,
     "comma-dangle": 0,
     "brace-style": ["error", "stroustrup", { "allowSingleLine": true }],
-    "space-before-function-paren": 0
+    "space-before-function-paren": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "no-underscore-dangle": 0,
+    "no-plusplus": 0
   },
   "plugins": [
     "react"

diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,6 @@ node_modules
 .DS_Store
 dist
 lib
-coverage
+cov/
+coverage/
+.vscode/*
diff --git a/.npmignore b/.npmignore
@@ -1,6 +1,6 @@
 .DS_Store
 *.log
 src
-test
+tests
 examples
 coverage
diff --git a/.travis.yml b/.travis.yml
@@ -2,12 +2,24 @@ sudo: false
 language: node_js
 node_js:
   - stable
+addons:
+  apt:
+    packages:
+      - xvfb
+install:
+  - export DISPLAY=':99.0'
+  - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+  - npm install
+before_script:
+  - export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start
 script:
   - npm test
 before_install:
   - npm i -g makeshift && makeshift -s @datchley -r https://registry.npmjs.org
 after_success:
+  - export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start
   - npm run test:cov
+  - ls cov/*
 deploy:
   provider: npm
   email: david.m.atchley@gmail.com

diff --git a/README.md b/README.md
@@ -1,7 +1,10 @@
 # React ScaleText Component
 
+[![NPM Version](https://img.shields.io/npm/v/react-scale-text.svg)](https://www.npmjs.com/package/react-scale-text)
 [![Coverage Status](https://coveralls.io/repos/github/datchley/react-scale-text/badge.svg?branch=master)](https://coveralls.io/github/datchley/react-scale-text?branch=master)
 [![Build Status](https://travis-ci.org/datchley/react-scale-text.svg?branch=master)](https://travis-ci.org/datchley/react-scale-text)
+[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/conventional-changelog/standard-version)
+
 
 `ScaleText` is a component that allows for dynamically sizing the text within a given component to fit its parent container's width and height. It should work with various positioning and should scale the text smoothly.  The scaling of an elements text is done on initial render, and then triggered again from a window resize, which should keep the child element's text scaled to the parent's dimensions.
 

diff --git a/examples/simple/index.html b/examples/simple/index.html
@@ -2,7 +2,13 @@
   <head>
     <title>ScaleText Examples</title>
     <style type="text/css">
-      *, *:before, *:after {
+      * {
+        font-family: Roboto,sans-serif;
+        font-weight: 400;
+        line-height: 1.42857;
+      }
+
+      *:before, *:after {
         box-sizing: border-box;
       }
 
@@ -12,84 +18,37 @@
 
       body {
         font-family: 'Source Sans Pro', 'Lucida Grande', sans-serif;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 25px;
-        letter-spacing: inherit;
+      }
+
+      .box-container {
+        display: flex;
+        flex-wrap: wrap;
       }
 
       .box {
-        position: relative;
         display: inline-block;
-        width: 20vw;
-        height: 20vw;
-        overflow: hidden;
-        padding: 5px;
-        text-align: center;
+        position: relative;
+        width: calc(100px + 7vw);
+        height: calc(100px + 7vw);
         border: 1px solid #ccc;
-        margin: 5px;
-      }
-
-      .box-text {
-        white-space: nowrap;
-      }
-
-      .description {
-        width: 100%;
+        padding: 4px;
+        border-radius: 4px;
+        margin: 2px;
+        font-size: 1em;
       }
 
       .centered {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-      }
-
-      .circle {
-        position: relative;
-        width: 2em;
-        height: 0;
-        padding: 1em 0;
-        margin: 1em auto;
-        border-radius: 50%;
-        background: #a7cd80;
-        color: #ffffff;
-      }
-
-      .xcontent {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
         text-align: center;
       }
 
-      .xcontent:before {
-        content: '';
-        vertical-align: middle;
-        display: inline-block;
-        width: 0;
-        height: 100%;
-      }
-
-      .xcontent span {
-        vertical-align: middle;
-        display: inline-block;
-        line-height: 1;
-        font-size: 1em;
+      .small {
+        font-size: .5em;
+        color: #ccc;
       }
-
-      .line { padding: 0.5em; }
-      .line--1 { padding-left: 1em; }
-      .line--2 { padding-left: 2em; }
-      .line--3 { padding-left: 3em; }
-      .line--4 { padding-left: 4em; }
-      code {
-        color: #666;
-        font-size: .8em;
-      }
-
     </style>
   </head>
   <body>