Repository: hustcc/jest-canvas-mock
Pull request #1 (2018-01-31 15:19:09)

Added canvas as a property to the context2d.
Hi,

For a test, we were using a library which uses the canvas property on the context object to retrieve the canvas. According to the specs of the canvas API, this property has to be defined as well. Hence I have added it to the context object.

Any comments are appreciated.

Kind Regards,

coveralls: 
[![Coverage Status](https://coveralls.io/builds/15308631/badge)](https://coveralls.io/builds/15308631)

Coverage increased (+0.2%) to 92.857% when pulling **755d8f4a79bf815785245f897d41650fe627414c on stijndepestel:master** into **bda9bc965e2dfd92f50162e45f6489ff51476e3b on hustcc:master**.

hustcc: Thank you for your pr. But write like above, maybe better ?

```js
// ...

const createContext2d = jest.fn((type, canvas) => {
  const ctx = jestWrapper(context2d);
  ctx.canvas = canvas;
});

export default createContext2d;
```


stijndepestel: I've updated accordingly and added a test to verify the canvas property exists.

Patch:
diff --git a/lib/canvas.js b/lib/canvas.js
index 6e62953..14f99a4 100644
--- a/lib/canvas.js
+++ b/lib/canvas.js
@@ -14,7 +14,7 @@ var createCanvas = function createCanvas() {
   var div = document.createElement('div'); // use div to mock it's api
 
   div.getContext = function (param) {
-    return param === '2d' ? (0, _context2d2.default)('2d') : {};
+    return param === '2d' ? (0, _context2d2.default)('2d', div) : {};
   };
   return div;
 }; /**
diff --git a/lib/context2d.js b/lib/context2d.js
index 151bfc1..58439c9 100644
--- a/lib/context2d.js
+++ b/lib/context2d.js
@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-/**
- * Created by hustcc 17/12/25.
- * Contract: i@hust.cc
- */
+
+var _canvas = require('./canvas');
+
+var _canvas2 = _interopRequireDefault(_canvas);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var context2d = {
   fillRect: function fillRect() {},
@@ -81,17 +83,22 @@ var context2d = {
   isPointInStroke: function isPointInStroke() {
     return true;
   }
-};
+}; /**
+    * Created by hustcc 17/12/25.
+    * Contract: i@hust.cc
+    */
 
-var jestWrapper = function jestWrapper(obj) {
-  Object.keys(obj).forEach(function (key) {
-    obj[key] = jest.fn(obj[key]);
+var jestWrapper = function jestWrapper(fs) {
+  Object.keys(fs).forEach(function (key) {
+    fs[key] = jest.fn(fs[key]);
   });
-  return obj;
+  return fs;
 };
 
-var createContext2d = jest.fn(function () {
-  return jestWrapper(context2d);
+var createContext2d = jest.fn(function (type, canvas) {
+  var ctx = jestWrapper(context2d);
+  ctx.canvas = canvas;
+  return ctx;
 });
 
 exports.default = createContext2d;
\ No newline at end of file
diff --git a/src/canvas.js b/src/canvas.js
index 304bb28..2d82172 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -8,7 +8,7 @@ import createContext2d from './context2d';
 const createCanvas = () => {
   const div = document.createElement('div'); // use div to mock it's api
 
-  div.getContext = param => param === '2d' ? createContext2d('2d') : {};
+  div.getContext = param => param === '2d' ? createContext2d('2d', div) : {};
   return div;
 };
 
diff --git a/src/context2d.js b/src/context2d.js
index 0159789..e62cf74 100644
--- a/src/context2d.js
+++ b/src/context2d.js
@@ -3,6 +3,8 @@
  * Contract: i@hust.cc
  */
 
+ import canvas from './canvas';
+
 const context2d = {
   fillRect: () => {},
   clearRect: () => {},
@@ -55,13 +57,18 @@ const context2d = {
   isPointInStroke: () => true,
 };
 
-const jestWrapper = obj => {
-  Object.keys(obj).forEach(key => {
-    obj[key] = jest.fn(obj[key]);
+
+const jestWrapper = (fs) => {
+  Object.keys(fs).forEach(key => {
+      fs[key] = jest.fn(fs[key]);
   });
-  return obj;
+  return fs;
 };
 
-const createContext2d = jest.fn(() => jestWrapper(context2d));
+const createContext2d = jest.fn((type, canvas) => {
+  const ctx = jestWrapper(context2d);
+  ctx.canvas = canvas;
+  return ctx;
+});
 
 export default createContext2d;


Test patch:
diff --git a/__tests__/index.js b/__tests__/index.js
index 1363a5e..15457cd 100644
--- a/__tests__/index.js
+++ b/__tests__/index.js
@@ -19,7 +19,7 @@ describe('canvas', () => {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
     expect(typeof ctx).toEqual('object');
-    expect(createContext2d).toHaveBeenLastCalledWith('2d');
+    expect(createContext2d).toHaveBeenLastCalledWith('2d', canvas);
 
     expect(canvas.getContext('webgl')).toEqual({});
   });
@@ -29,9 +29,12 @@ describe('canvas', () => {
     const ctx = canvas.getContext('2d');
 
     expect(typeof ctx).toBe('object');
+    expect(ctx.canvas).toBeDefined();
 
     Object.keys(ctx).forEach(key => {
-      ctx[key]();
+      if(typeof ctx[key] === "function"){
+        ctx[key]();
+      }
     });
 
     [