Add Tests & 100% Code Coverage (+ some related standardization)

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.gitignore

@@ -1,8 +1,28 @@
+### custom ###
+
+# build output
+build/
+# test coverage output
+coverage/
+
+### Node ###
+
+# Logs
+logs
+*.log
 npm-debug.log*
+
+# Dependency directories
 node_modules/
 
-build/
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
 *.tgz
 
-.DS_Store
-*~
+# dotenv environment variables file
+.env

.travis.yml

@@ -2,4 +2,8 @@ language: node_js
 # default is apparently 0.10.48
 node_js: '10.16.0'
 
-script: npm run test:pub
+script: npm test -- --coverage
+after_script:
+  # upload coverage reports to CodeCov
+  - bash <(curl -s https://codecov.io/bash)
+  - npm run test:pub

README.md

@@ -11,6 +11,7 @@
 [![dw](https://img.shields.io/npm/dw/trim-canvas.svg)](https://npmjs.org/package/trim-canvas)
 <br><!-- status / activity -->
 [![build status](https://img.shields.io/travis/agilgur5/trim-canvas/master.svg)](https://travis-ci.org/agilgur5/trim-canvas)
+[![code coverage](https://img.shields.io/codecov/c/gh/agilgur5/trim-canvas/master.svg)](https://codecov.io/gh/agilgur5/trim-canvas)
 <br>
 [![NPM](https://nodei.co/npm/trim-canvas.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/package/trim-canvas)
 
@@ -25,7 +26,7 @@ A tiny (< 100 LoC) library for trimming whitespace from a `canvas` element with
 ```javascript
 import trimCanvas from 'trim-canvas'
 
-let canvas = document.createElement('canvas')
+const canvas = document.createElement('canvas')
 
 // do some drawing on it ...
 

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  transform: {
+    // use babel-jest@23 for babel@6 support (https://github.com/facebook/jest/issues/8230#issuecomment-479470547)
+    '\\.js$': require.resolve('babel-jest')
+  }
+}

package.json

@@ -29,16 +29,19 @@
     "lint": "standard index.js",
     "build:watch": "webpack --watch -d",
     "build:prod": "webpack -p",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "test:pub": "npm run build:prod && npm pack",
     "pub": "npm run build:prod && npm publish",
     "changelog": "changelog-maker"
   },
   "devDependencies": {
     "@agilgur5/changelog-maker": "^3.0.0",
     "babel-core": "^6.0.14",
+    "babel-jest": "^23.6.0",
     "babel-loader": "^6.0.0",
     "babel-preset-es2015": "^6.6.0",
+    "canvas-prebuilt": "^1.6.11",
+    "jest": "^24.9.0",
     "webpack": "^1.12.2"
   }
 }

index.js → src/index.js

@@ -1,24 +1,24 @@
 export default function trimCanvas (canvas) {
-  let context = canvas.getContext('2d')
+  const context = canvas.getContext('2d')
 
-  let imgWidth = canvas.width
-  let imgHeight = canvas.height
+  const imgWidth = canvas.width
+  const imgHeight = canvas.height
 
-  let imgData = context.getImageData(0, 0, imgWidth, imgHeight).data
+  const imgData = context.getImageData(0, 0, imgWidth, imgHeight).data
 
   // get the corners of the relevant content (everything that's not white)
-  let cropTop = scanY(true, imgWidth, imgHeight, imgData)
-  let cropBottom = scanY(false, imgWidth, imgHeight, imgData)
-  let cropLeft = scanX(true, imgWidth, imgHeight, imgData)
-  let cropRight = scanX(false, imgWidth, imgHeight, imgData)
+  const cropTop = scanY(true, imgWidth, imgHeight, imgData)
+  const cropBottom = scanY(false, imgWidth, imgHeight, imgData)
+  const cropLeft = scanX(true, imgWidth, imgHeight, imgData)
+  const cropRight = scanX(false, imgWidth, imgHeight, imgData)
 
   // + 1 is needed because this is a difference, there are n + 1 pixels in
   // between the two numbers inclusive
-  let cropXDiff = (cropRight - cropLeft) + 1
-  let cropYDiff = (cropBottom - cropTop) + 1
+  const cropXDiff = (cropRight - cropLeft) + 1
+  const cropYDiff = (cropBottom - cropTop) + 1
 
   // get the relevant data from the calculated coordinates
-  let trimmedData = context.getImageData(cropLeft, cropTop, cropXDiff,
+  const trimmedData = context.getImageData(cropLeft, cropTop, cropXDiff,
     cropYDiff)
 
   // set the trimmed width and height
@@ -48,13 +48,13 @@ function getAlpha (x, y, imgWidth, imgData) {
 
 // finds the first y coord in imgData that is not white
 function scanY (fromTop, imgWidth, imgHeight, imgData) {
-  let offset = fromTop ? 1 : -1
-  let firstCol = fromTop ? 0 : imgHeight - 1
+  const offset = fromTop ? 1 : -1
+  const firstCol = fromTop ? 0 : imgHeight - 1
 
   // loop through each row
-  for (var y = firstCol; fromTop ? (y < imgHeight) : (y > -1); y += offset) {
+  for (let y = firstCol; fromTop ? (y < imgHeight) : (y > -1); y += offset) {
     // loop through each column
-    for (var x = 0; x < imgWidth; x++) {
+    for (let x = 0; x < imgWidth; x++) {
       // if not white, return col
       if (getAlpha(x, y, imgWidth, imgData)) {
         return y
@@ -68,13 +68,13 @@ function scanY (fromTop, imgWidth, imgHeight, imgData) {
 
 // finds the first x coord in imgData that is not white
 function scanX (fromLeft, imgWidth, imgHeight, imgData) {
-  let offset = fromLeft ? 1 : -1
-  let firstRow = fromLeft ? 0 : imgWidth - 1
+  const offset = fromLeft ? 1 : -1
+  const firstRow = fromLeft ? 0 : imgWidth - 1
 
   // loop through each column
-  for (var x = firstRow; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {
+  for (let x = firstRow; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {
     // loop through each row
-    for (var y = 0; y < imgHeight; y++) {
+    for (let y = 0; y < imgHeight; y++) {
       // if not white, return row
       if (getAlpha(x, y, imgWidth, imgData)) {
         return x

test/index.spec.js

@@ -0,0 +1,34 @@
+import trimCanvas from '../src/index.js'
+
+describe('trimCanvas', () => {
+  it('should trim whitespace (and nothing else)', () => {
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+    canvas.width = 1000
+    canvas.height = 1000
+
+    ctx.fillStyle = 'purple'
+    ctx.fillRect(450, 450, 100, 100) // 100x100 purple box in center
+    ctx.fillRect(550, 550, 100, 100) // 100x100 purple box down-right of center
+    // should look like this basically:
+    //      _
+    //     |_|_
+    //       |_|
+    //
+
+    trimCanvas(canvas)
+    expect(canvas.width).toBe(200)
+    expect(canvas.height).toBe(200)
+  })
+
+  it('should trim everything if only whitespace', () => {
+    const canvas = document.createElement('canvas')
+    canvas.width = 1000
+    canvas.height = 1000
+
+    trimCanvas(canvas)
+    // should probably be 0, not 1, but that's easier said than done: https://github.com/agilgur5/trim-canvas/pull/9#discussion_r352376718
+    expect(canvas.width).toBe(1)
+    expect(canvas.height).toBe(1)
+  })
+})

webpack.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  entry: './index.js',
+  entry: './src/index.js',
   output: {
     path: './build',
     filename: 'index.js',