more test coverage

adotpeng · Mar 7, 2018 · 5cec375 · 5cec375
1 parent f566d75
commit 5cec375
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 12 deletions.
diff --git a/.eslintrc-jest b/.eslintrc-jest
@@ -5,7 +5,9 @@
   },
   "globals": {
     "document": true,
-    "clock": true
+    "clock": true,
+    "MouseEvent": true,
+    "TouchEvent": true
   },
   "rules": {
     "id-length": [0],

diff --git a/src/__tests__/HanziWriter-test.js b/src/__tests__/HanziWriter-test.js
@@ -381,4 +381,93 @@ describe('HanziWriter', () => {
       expect(writer._quiz).toBe(null);
     });
   });
+
+  describe('mouse and touch events', () => {
+    let writer;
+    beforeEach(async () => {
+      document.body.innerHTML = '<div id="target"></div>';
+      writer = new HanziWriter('target', '人');
+      await writer._withDataPromise;
+      writer.quiz();
+      await resolvePromises();
+    });
+
+    it('starts a user stroke on mousedown', () => {
+      const evt = new MouseEvent('mousedown', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 170,
+        clientY: 127,
+      });
+      const svg = document.querySelector('#target svg');
+      svg.getBoundingClientRect = () => ({ left: 50, top: 60 });
+      const canceled = !svg.dispatchEvent(evt);
+      expect(canceled).toBe(true);
+      expect(writer._quiz.startUserStroke).toHaveBeenCalledTimes(1);
+      expect(writer._quiz.startUserStroke).toHaveBeenCalledWith({x: 120, y: 67});
+    });
+
+    it('starts a user stroke on touchstart', () => {
+      const evt = new TouchEvent('touchstart', {
+        bubbles: true,
+        cancelable: true,
+        touches: [{
+          clientX: 170,
+          clientY: 127,
+        }],
+      });
+      const svg = document.querySelector('#target svg');
+      svg.getBoundingClientRect = () => ({ left: 50, top: 60 });
+      const canceled = !svg.dispatchEvent(evt);
+      expect(canceled).toBe(true);
+      expect(writer._quiz.startUserStroke).toHaveBeenCalledTimes(1);
+      expect(writer._quiz.startUserStroke).toHaveBeenCalledWith({x: 120, y: 67});
+    });
+
+    it('continues a user stroke on mousemove', () => {
+      const evt = new MouseEvent('mousemove', {
+        bubbles: true,
+        cancelable: true,
+        clientX: 170,
+        clientY: 127,
+      });
+      const svg = document.querySelector('#target svg');
+      svg.getBoundingClientRect = () => ({ left: 50, top: 60 });
+      const canceled = !svg.dispatchEvent(evt);
+      expect(canceled).toBe(true);
+      expect(writer._quiz.continueUserStroke).toHaveBeenCalledTimes(1);
+      expect(writer._quiz.continueUserStroke).toHaveBeenCalledWith({x: 120, y: 67});
+    });
+
+    it('continues a user stroke on touchmove', () => {
+      const evt = new TouchEvent('touchmove', {
+        bubbles: true,
+        cancelable: true,
+        touches: [{
+          clientX: 170,
+          clientY: 127,
+        }],
+      });
+      const svg = document.querySelector('#target svg');
+      svg.getBoundingClientRect = () => ({ left: 50, top: 60 });
+      const canceled = !svg.dispatchEvent(evt);
+      expect(canceled).toBe(true);
+      expect(writer._quiz.continueUserStroke).toHaveBeenCalledTimes(1);
+      expect(writer._quiz.continueUserStroke).toHaveBeenCalledWith({x: 120, y: 67});
+    });
+
+    it('ends a user stroke on mouseup', () => {
+      const evt = new MouseEvent('mouseup', { bubbles: true, cancelable: true });
+      const svg = document.querySelector('#target svg');
+      svg.dispatchEvent(evt);
+      expect(writer._quiz.endUserStroke).toHaveBeenCalledTimes(1);
+    });
+
+    it('ends a user stroke on touchend', () => {
+      const evt = new TouchEvent('touchend', { bubbles: true, cancelable: true });
+      const svg = document.querySelector('#target svg');
+      svg.dispatchEvent(evt);
+      expect(writer._quiz.endUserStroke).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/src/characterActions.js b/src/characterActions.js
@@ -1,16 +1,6 @@
 const Mutation = require('./Mutation');
 const { objRepeat } = require('./utils');
 
-const hideStrokes = (charName, character, duration) => {
-  return [
-    new Mutation(
-      `character.${charName}.strokes`,
-      objRepeat({ opacity: 0 }, character.strokes.length),
-      { duration, force: true },
-    ),
-  ];
-};
-
 const showStrokes = (charName, character, duration) => {
   return [
     new Mutation(
@@ -105,7 +95,6 @@ const animateCharacterLoop = (charName, character, fadeDuration, speed, delayBet
 
 module.exports = {
   showStrokes,
-  hideStrokes,
   showCharacter,
   hideCharacter,
   animateCharacter,