Added unit tests for loadFromCanvas and interval features

Author: jvalen

package-lock.json

@@ -32,6 +32,11 @@
     "express"
   ],
   "license": "MIT",
+  "jest": {
+    "setupFiles": [
+      "jest-canvas-mock"
+    ]
+  },
   "dependencies": {
     "autoprefixer": "^9.7.2",
     "blob-stream": "^0.1.3",
@@ -107,6 +112,7 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^3.0.0",
     "jest": "^24.8.0",
+    "jest-canvas-mock": "^2.3.1",
     "lint-staged": "^9.2.0",
     "prettier": "^1.18.2",
     "stylelint": "^10.1.0",

package.json

@@ -1,6 +1,9 @@
-export default function getTimeInterval(currentFrameIndex, totalFrames) {
-  const equalPercentage = 100 / totalFrames;
-  return totalFrames === 1
+export default function getTimeInterval(
+  currentFrameIndex = 0,
+  totalFrames = 1
+) {
+  const equalPercentage = 100 / (totalFrames || 1);
+  return totalFrames === 1 || totalFrames === 0
     ? 100
     : Math.round((currentFrameIndex + 1) * equalPercentage * 10) / 10;
 }

src/utils/intervals.js

@@ -2,26 +2,26 @@ import { fromJS } from 'immutable';
 import shortid from 'shortid';
 import getTimeInterval from './intervals';
 
-const getHeightIntervals = (imageHeight, numberOfFrames) => {
-  const heightPerFrame = Math.floor(imageHeight / numberOfFrames);
+export const getDimensionIntervals = (dimension, numberOfFrames) => {
+  const dimensionPerFrame = Math.floor(dimension / numberOfFrames);
   const intervals = [];
-  let top = 0;
-  let bottom = heightPerFrame;
+  let start = 0;
+  let end = dimensionPerFrame;
   for (let i = 0; i < numberOfFrames; i++) {
     intervals.push({
-      top,
-      bottom,
+      start,
+      end,
       timePercentage: getTimeInterval(i, numberOfFrames)
     });
-    top += heightPerFrame;
-    bottom += heightPerFrame;
+    start += dimensionPerFrame;
+    end += dimensionPerFrame;
   }
   return intervals;
 };
 
 const generateFrames = (imageContext, numberOfFrames, pixSize = 1) => {
   const { width, height } = imageContext.canvas;
-  const heightIntervals = getHeightIntervals(height, numberOfFrames);
+  const heightIntervals = getDimensionIntervals(height, numberOfFrames);
   const frameCollection = [];
 
   heightIntervals.forEach(heightInterval => {
@@ -30,8 +30,8 @@ const generateFrames = (imageContext, numberOfFrames, pixSize = 1) => {
 
     const grid = [];
     for (
-      let y = heightInterval.top;
-      y + pixelHeight <= heightInterval.bottom;
+      let y = heightInterval.start;
+      y + pixelHeight <= heightInterval.end;
       y += pixelWidth
     ) {
       for (let x = 0; x + pixelWidth <= width; x += pixelWidth) {
@@ -54,11 +54,13 @@ const generateFrames = (imageContext, numberOfFrames, pixSize = 1) => {
     });
   });
 
+  console.log(frameCollection);
+
   return fromJS(frameCollection);
 };
 
 export const getCanvasDimensions = canvasRef => {
-  if (canvasRef) {
+  if (canvasRef && canvasRef.current) {
     const canvas = canvasRef.current;
     const context = canvas.getContext('2d');
     return { w: context.canvas.width, h: context.canvas.height };

src/utils/loadFromCanvas.js

@@ -0,0 +1,27 @@
+import getTimeInterval from '../../src/utils/intervals';
+
+describe('intervals tests', () => {
+  describe('getTimeInterval', () => {
+    describe('When the total of frames value is 0 or 1', () => {
+      it('should return always 100', () => {
+        expect(getTimeInterval(0, 0)).toEqual(100);
+        expect(getTimeInterval(1, 0)).toEqual(100);
+        expect(getTimeInterval(0, 1)).toEqual(100);
+        expect(getTimeInterval(1, 1)).toEqual(100);
+      });
+    });
+    describe('When the total of frames value is greater than 1', () => {
+      it('should return the proper interval', () => {
+        expect(getTimeInterval(0, 2)).toEqual(50);
+        expect(getTimeInterval(1, 2)).toEqual(100);
+        expect(getTimeInterval(0, 3)).toEqual(33.3);
+        expect(getTimeInterval(1, 3)).toEqual(66.7);
+        expect(getTimeInterval(2, 3)).toEqual(100);
+        expect(getTimeInterval(0, 4)).toEqual(25);
+        expect(getTimeInterval(1, 4)).toEqual(50);
+        expect(getTimeInterval(2, 4)).toEqual(75);
+        expect(getTimeInterval(3, 4)).toEqual(100);
+      });
+    });
+  });
+});

test/utils/intervals.test.js

@@ -0,0 +1,92 @@
+import 'jest-canvas-mock';
+import {
+  getDimensionIntervals,
+  getCanvasDimensions
+} from '../../src/utils/loadFromCanvas';
+
+describe('loadFromCanvas tests', () => {
+  describe('getCanvasDimensions', () => {
+    describe('When the canvas ref received is not valid', () => {
+      it('should return width and height 0', () => {
+        const expectedOutput = { w: 0, h: 0 };
+        expect(getCanvasDimensions(null)).toEqual(expectedOutput);
+        expect(getCanvasDimensions({})).toEqual(expectedOutput);
+      });
+    });
+    describe('When canvasRef contains a reference to a canvas', () => {
+      it('should return its width and height dimensions', () => {
+        const CANVAS_WIDTH = 100;
+        const CANVAS_HEIGHT = 200;
+        const canvas = document.createElement('canvas');
+        canvas.width = CANVAS_WIDTH;
+        canvas.height = CANVAS_HEIGHT;
+        const canvasRef = { current: canvas };
+        const expectedOutput = { w: CANVAS_WIDTH, h: CANVAS_HEIGHT };
+
+        expect(getCanvasDimensions(canvasRef)).toEqual(expectedOutput);
+      });
+    });
+  });
+  describe('getDimensionIntervals', () => {
+    describe('If only one frame is received', () => {
+      describe('and dimension is greater than 0', () => {
+        it('should return only an interval 0-100, 100%', () => {
+          const expectedOutput = [
+            {
+              start: 0,
+              end: 100,
+              timePercentage: 100
+            }
+          ];
+          expect(getDimensionIntervals(100, 1)).toEqual(expectedOutput);
+        });
+      });
+      describe('and dimension is 0 or null', () => {
+        it('should return only an interval 0-0, 100%', () => {
+          const expectedOutput = [
+            {
+              start: 0,
+              end: 0,
+              timePercentage: 100
+            }
+          ];
+          expect(getDimensionIntervals(0, 1)).toEqual(expectedOutput);
+          expect(getDimensionIntervals(null, 1)).toEqual(expectedOutput);
+        });
+      });
+    });
+
+    describe('For a given dimension size and more than one frame', () => {
+      it('should return each equal interval with start, end and time percentage', () => {
+        const expectedOutput = [
+          {
+            start: 0,
+            end: 25,
+            timePercentage: 25
+          },
+          {
+            start: 25,
+            end: 50,
+            timePercentage: 50
+          },
+          {
+            start: 50,
+            end: 75,
+            timePercentage: 75
+          },
+          {
+            start: 75,
+            end: 100,
+            timePercentage: 100
+          }
+        ];
+        expect(getDimensionIntervals(100, 4)).toEqual(expectedOutput);
+      });
+    });
+    describe('If the frame value is 0 or null', () => {
+      it('should return an empty array', () => {
+        expect(getDimensionIntervals(100, 0)).toEqual([]);
+      });
+    });
+  });
+});