Added test for main shape class

Also improved coverage across shape classes

src/patterns.js

@@ -1,11 +1,10 @@
-import { BACKGROUND_COLOR, PATTERN_COLOR } from './config';
 import shapes, { getRandomShape } from './shapes/index';
 
 export function draw (
   shapeType = 'square',
-  backgroundColor = BACKGROUND_COLOR,
-  patternColor = PATTERN_COLOR,
-  size = 20
+  backgroundColor,
+  patternColor,
+  size
 ) {
   const patternCanvas = document.createElement('canvas');
   const patternContext = patternCanvas.getContext('2d');

src/shapes/box.js

@@ -8,15 +8,15 @@ export default class Box extends Shape {
 
     this.setStrokeProps();
 
-    this.drawBox(0, 0);
+    this.drawBox();
     this.drawBox(halfSize, halfSize);
 
     this._context.stroke();
 
     return this._canvas;
   }
 
-  drawBox(offsetX, offsetY) {
+  drawBox(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const halfSize = size / 2;
     const gap = size / 20;

src/shapes/cross-dash.js

@@ -10,7 +10,7 @@ export default class CrossDash extends Shape {
     this.setStrokeProps();
 
     const cross = new Cross();
-    cross.drawCross.call(this, 0, 0);
+    cross.drawCross.call(this);
 
     const dash = new Dash();
     dash.drawDash.call(this, halfSize, halfSize);

src/shapes/cross.js

@@ -8,18 +8,18 @@ export default class Cross extends Shape {
 
     this.setStrokeProps();
 
-    this.drawCross(0, 0);
+    this.drawCross();
     this.drawCross(halfSize, halfSize);
 
     this._context.stroke();
 
     return this._canvas;
   }
 
-  drawCross(offsetX, offsetY) {
+  drawCross(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const halfSize = size / 2;
-    const gap = 1;
+    const gap = 2;
 
     this._context.moveTo(offsetX + gap, offsetY + gap);
     this._context.lineTo((halfSize - gap) + offsetX, (halfSize - gap) + offsetY);

src/shapes/dash.js

@@ -8,18 +8,18 @@ export default class Dash extends Shape {
 
     this.setStrokeProps();
 
-    this.drawDash(0, 0);
+    this.drawDash();
     this.drawDash(halfSize, halfSize);
 
     this._context.stroke();
 
     return this._canvas;
   }
 
-  drawDash(offsetX, offsetY) {
+  drawDash(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const halfSize = size / 2;
-    const gap = 1;
+    const gap = 2;
 
     this._context.moveTo(offsetX + gap, offsetY + gap);
     this._context.lineTo((halfSize - gap) + offsetX, (halfSize - gap) + offsetY);

src/shapes/diagonal.js

@@ -8,15 +8,15 @@ export default class Diagonal extends Shape {
 
     this.setStrokeProps();
 
-    this.drawDiagonalLine(0, 0);
+    this.drawDiagonalLine();
     this.drawDiagonalLine(halfSize, halfSize);
 
     this._context.stroke();
 
     return this._canvas;
   }
 
-  drawDiagonalLine(offsetX, offsetY) {
+  drawDiagonalLine(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const halfSize = size / 2;
     const gap = 1;

src/shapes/diamond-box.js

@@ -8,15 +8,15 @@ export default class DiamondBox extends Diamond {
 
     this.setStrokeProps();
 
-    this.drawDiamond(0, 0);
+    this.drawDiamond();
     this.drawDiamond(halfSize, halfSize);
 
     this._context.stroke();
 
     return this._canvas;
   }
 
-  drawDiamond(offsetX, offsetY) {
+  drawDiamond(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const halfSize = (size / 2) - 1;
     const quarterSize = size / 4;

src/shapes/diamond.js

@@ -8,15 +8,15 @@ export default class Diamond extends Shape {
 
     this.setFillProps();
 
-    this.drawDiamond(0, 0);
+    this.drawDiamond();
     this.drawDiamond(halfSize, halfSize);
 
     this._context.fill();
 
     return this._canvas;
   }
 
-  drawDiamond(offsetX, offsetY) {
+  drawDiamond(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const halfSize = size / 2;
     const quarterSize = size / 4;

src/shapes/dot-dash.js

@@ -19,7 +19,7 @@ export default class DotDash extends Shape {
     this.setFillProps();
 
     const dot = new Dot();
-    dot.drawDot.call(this, 0, 0);
+    dot.drawDot.call(this);
 
     this._context.fill();
 

src/shapes/dot.js

@@ -8,15 +8,15 @@ export default class Dot extends Shape {
 
     this.setFillProps();
 
-    this.drawDot(0, 0);
+    this.drawDot();
     this.drawDot(halfSize, halfSize);
 
     this._context.fill();
 
     return this._canvas;
   }
 
-  drawDot(offsetX, offsetY, diameter = this._size / 10) {
+  drawDot(offsetX = 0, offsetY = 0, diameter = this._size / 10) {
     const size = this._size;
     const quarterSize = size / 4;
     const x = quarterSize + offsetX;

src/shapes/line.js

@@ -8,15 +8,15 @@ export default class Line extends Shape {
 
     this.setStrokeProps();
 
-    this.drawLine(0, 0);
+    this.drawLine();
     this.drawLine(halfSize, halfSize);
 
     this._context.stroke();
 
     return this._canvas;
   }
 
-  drawLine(offsetX, offsetY) {
+  drawLine(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const quarterSize = size / 4;
 

src/shapes/plus.js

@@ -8,7 +8,7 @@ export default class Plus extends Shape {
 
     this.setStrokeProps();
 
-    this.drawPlus(0, 0);
+    this.drawPlus();
     this.drawPlus(halfSize, halfSize);
 
     this._context.stroke();

src/shapes/shape.js

@@ -1,7 +1,8 @@
+import { BACKGROUND_COLOR, PATTERN_COLOR } from '../config';
 import { POINT_STYLE } from '../config';
 
 export default class Shape {
-  constructor(size, backgroundColor, patternColor) {
+  constructor(size = 20, backgroundColor = BACKGROUND_COLOR, patternColor = PATTERN_COLOR) {
     this._canvas = document.createElement('canvas');
     this._context = this._canvas.getContext('2d');
 

src/shapes/square.js

@@ -8,15 +8,15 @@ export default class Square extends Shape {
 
     this.setFillProps();
 
-    this.drawSquare(0, 0);
+    this.drawSquare();
     this.drawSquare(halfSize, halfSize);
 
     this._context.fill();
 
     return this._canvas;
   }
 
-  drawSquare(offsetX, offsetY) {
+  drawSquare(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const halfSize = size / 2;
     const gap = size / 20;

src/shapes/triangle.js

@@ -8,15 +8,15 @@ export default class Triangle extends Shape {
 
     this.setFillProps();
 
-    this.drawTriangle(0, 0);
+    this.drawTriangle();
     this.drawTriangle(halfSize, halfSize);
 
     this._context.fill();
 
     return this._canvas;
   }
 
-  drawTriangle(offsetX, offsetY) {
+  drawTriangle(offsetX = 0, offsetY = 0) {
     const size = this._size;
     const halfSize = size / 2;
     const quarterSize = size / 4;

src/shapes/zigzag.js

@@ -6,15 +6,15 @@ export default class Zigzag extends Shape {
 
     this.setStrokeProps();
 
-    this.drawZigzag(0);
+    this.drawZigzag();
     this.drawZigzag(this._size / 2);
 
     this._context.stroke();
 
     return this._canvas;
   }
 
-  drawZigzag(offsetY) {
+  drawZigzag(offsetY = 0) {
     const size = this._size;
     const quarterSize = size / 4;
     const halfSize = size / 2;

test/shapes/shape.js

@@ -0,0 +1,19 @@
+import { expect } from 'chai';
+import * as jsdom from 'jsdom';
+import Shape from '../../src/shapes/shape';
+
+global.document = jsdom.jsdom('<html></html>');
+
+describe('shape', () => {
+  it('should create a canvas with the secified size', () => {
+    const shape = new Shape(40);
+
+    expect(shape._canvas.width).to.eql(40);
+  });
+
+  it('should use a default size of `20` if no size is specifed', () => {
+    const shape = new Shape();
+
+    expect(shape._canvas.width).to.eql(20);
+  });
+});