Add test/win-resize

theavuth9 · Oct 8, 2016 · 755afdc · 755afdc
1 parent d6e9679
commit 755afdc
Show file tree

Hide file tree

Showing 8 changed files with 204 additions and 4 deletions.
diff --git a/src/leader-line.js b/src/leader-line.js
@@ -683,6 +683,7 @@
           aSeg.values.some(function(aSegValue, i) { return aSegValue !== bSeg.values[i]; });
       });
   }
+  window.pathDataHasChanged = pathDataHasChanged; // [DEBUG/]
 
   function bBox2PathData(bBox) {
     var right = bBox.right != null ? bBox.right : bBox.left + bBox.width,
@@ -5156,11 +5157,11 @@
   });
 
   // Update position automatically
-  LeaderLine.positionWhenWindowResize = true;
+  LeaderLine.positionByWindowResize = true;
   window.addEventListener('resize', AnimEvent.add(function(/* event */) {
-    traceLog.add('<ATTACHMENTS.positionWhenWindowResize>'); // [DEBUG/]
+    traceLog.add('<positionByWindowResize>'); // [DEBUG/]
     // var eventWindow;
-    if (LeaderLine.positionWhenWindowResize) {
+    if (LeaderLine.positionByWindowResize) {
       // eventWindow = event.target;
       Object.keys(insProps).forEach(function(id) {
         // Checking window may be needed when managing each window is supported.
@@ -5175,7 +5176,7 @@
         update(insProps[id], {position: true});
       });
     }
-    traceLog.add('</ATTACHMENTS.positionWhenWindowResize>'); // [DEBUG/]
+    traceLog.add('</positionByWindowResize>'); // [DEBUG/]
   }), false);
 
   return LeaderLine;

diff --git a/test/SHAPE_GAP.html b/test/SHAPE_GAP.html
@@ -37,6 +37,7 @@
 
   <script src="../src/defs.js"></script>
   <script src="../src/path-data-polyfill/path-data-polyfill.js"></script>
+  <script src="../node_modules/anim-event/anim-event.js"></script>
   <script src="./traceLog.js"></script>
   <script src="../src/leader-line.js"></script>
   <script>

diff --git a/test/index.html b/test/index.html
@@ -19,6 +19,7 @@
   <script src="spec/socket.js"></script>
   <script src="spec/options.js"></script>
   <script src="spec/stats.js"></script>
+  <script src="spec/win-resize.js"></script>
 
   <script src="spec/func-PATH_FLUID.js"></script>
 

diff --git a/test/spec/funcs/funcs.html b/test/spec/funcs/funcs.html
@@ -2,6 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <script src="/anim-event.min.js"></script>
   <script src="/src/leader-line.js"></script>
 </head>
 <body>

diff --git a/test/spec/funcs/isElement.html b/test/spec/funcs/isElement.html
@@ -2,6 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <script src="/anim-event.min.js"></script>
   <script src="/src/leader-line.js"></script>
 </head>
 <body>

diff --git a/test/spec/win-resize.js b/test/spec/win-resize.js
@@ -0,0 +1,139 @@
+/* eslint-env jasmine */
+/* global loadPage:false */
+/* eslint no-underscore-dangle: [2, {"allow": ["_id"]}] */
+
+describe('window resize', function() {
+  'use strict';
+
+  var window, document, traceLog, pageDone, frame, orgWidth, orgHeight, pathDataHasChanged,
+    iframeDoc, ll1, ll2, ll3, ll4;
+
+  beforeAll(function loadBefore(beforeDone) {
+    loadPage('spec/win-resize/page.html', function(frmWindow, frmDocument, body, done) {
+      window = frmWindow;
+      document = frmDocument;
+      frame = window.frameElement;
+      orgWidth = frame.style.width;
+      orgHeight = frame.style.height;
+
+      iframeDoc = document.getElementById('iframe1').contentDocument;
+      ll1 = new window.LeaderLine(document.getElementById('elm1'), document.getElementById('elm2'));
+      ll2 = new window.LeaderLine(document.getElementById('elm3'), document.getElementById('elm4'));
+      ll3 = new window.LeaderLine(iframeDoc.getElementById('elm1'), iframeDoc.getElementById('elm2'));
+      ll4 = new window.LeaderLine(iframeDoc.getElementById('elm3'), iframeDoc.getElementById('elm4'));
+
+      traceLog = window.traceLog;
+      traceLog.enabled = true;
+      pathDataHasChanged = window.pathDataHasChanged;
+      pageDone = done;
+      beforeDone();
+    }, 'window resize');
+  });
+
+  afterAll(function() {
+    frame.style.width = orgWidth;
+    frame.style.height = orgHeight;
+    pageDone();
+  });
+
+  it('update position when window is resized', function(done) {
+    var pathData1, pathData2, pathData3, pathData4, frameBBox;
+
+    pathData1 = window.insProps[ll1._id].linePath.getPathData();
+    pathData2 = window.insProps[ll2._id].linePath.getPathData();
+    pathData3 = window.insProps[ll3._id].linePath.getPathData();
+    pathData4 = window.insProps[ll4._id].linePath.getPathData();
+
+    frameBBox = frame.getBoundingClientRect();
+    traceLog.clear();
+    frame.style.width = (frameBBox.width - 50) + 'px';
+    setTimeout(function() {
+      expect(traceLog.getTaggedLog('positionByWindowResize')).toEqual(['id=1', 'id=2', 'id=3', 'id=4']);
+      expect(pathDataHasChanged(pathData1, window.insProps[ll1._id].linePath.getPathData())).toBe(true);
+      expect(pathDataHasChanged(pathData2, window.insProps[ll2._id].linePath.getPathData())).toBe(true);
+      expect(pathDataHasChanged(pathData3, window.insProps[ll3._id].linePath.getPathData())).toBe(true);
+      expect(pathDataHasChanged(pathData4, window.insProps[ll4._id].linePath.getPathData())).toBe(true);
+      done();
+    }, 100);
+  });
+
+  it('no-update position when sub window is resized', function(done) {
+    var pathData1, pathData2, pathData3, pathData4;
+
+    pathData1 = window.insProps[ll1._id].linePath.getPathData();
+    pathData2 = window.insProps[ll2._id].linePath.getPathData();
+    pathData3 = window.insProps[ll3._id].linePath.getPathData();
+    pathData4 = window.insProps[ll4._id].linePath.getPathData();
+
+    traceLog.clear();
+    document.getElementById('iframe1').style.width = '50%';
+    setTimeout(function() {
+      expect(traceLog.getTaggedLog('positionByWindowResize') == null).toEqual(true);
+      expect(pathDataHasChanged(pathData1, window.insProps[ll1._id].linePath.getPathData())).toBe(false);
+      expect(pathDataHasChanged(pathData2, window.insProps[ll2._id].linePath.getPathData())).toBe(false);
+      expect(pathDataHasChanged(pathData3, window.insProps[ll3._id].linePath.getPathData())).toBe(false);
+      expect(pathDataHasChanged(pathData4, window.insProps[ll4._id].linePath.getPathData())).toBe(false);
+      done();
+    }, 100);
+  });
+
+  it('update position all even if it is not changed when window is resized', function(done) {
+    var pathData1, pathData2, pathData3, pathData4, frameBBox,
+      iframeStyle = document.getElementById('iframe1').style;
+
+    iframeStyle.width = '400px';
+    iframeStyle.height = '500px';
+    ll3.position();
+    ll4.position();
+    // The elements in iframe are not moved.
+
+    pathData1 = window.insProps[ll1._id].linePath.getPathData();
+    pathData2 = window.insProps[ll2._id].linePath.getPathData();
+    pathData3 = window.insProps[ll3._id].linePath.getPathData();
+    pathData4 = window.insProps[ll4._id].linePath.getPathData();
+
+    frameBBox = frame.getBoundingClientRect();
+    traceLog.clear();
+    frame.style.width = (frameBBox.width - 50) + 'px';
+    setTimeout(function() {
+      expect(traceLog.getTaggedLog('positionByWindowResize')).toEqual(['id=1', 'id=2', 'id=3', 'id=4']);
+      expect(traceLog.getTaggedLog('updatePosition')).toEqual([
+        'position_socketXYSE[0]', 'position_socketXYSE[1]', 'new-position', // ll1
+        'position_socketXYSE[0]', 'position_socketXYSE[1]', 'new-position', // ll2
+        'not-updated', 'not-updated' // ll3, ll4
+      ]);
+      expect(pathDataHasChanged(pathData1, window.insProps[ll1._id].linePath.getPathData())).toBe(true);
+      expect(pathDataHasChanged(pathData2, window.insProps[ll2._id].linePath.getPathData())).toBe(true);
+      expect(pathDataHasChanged(pathData3, window.insProps[ll3._id].linePath.getPathData())).toBe(false); // No change
+      expect(pathDataHasChanged(pathData4, window.insProps[ll4._id].linePath.getPathData())).toBe(false); // No change
+      done();
+    }, 100);
+  });
+
+  it('disabled positionByWindowResize', function(done) {
+    var pathData1, pathData2, pathData3, pathData4, frameBBox,
+      elm1 = document.getElementById('elm1'), elm2 = document.getElementById('elm2'), elm1Left, elm2Left;
+
+    pathData1 = window.insProps[ll1._id].linePath.getPathData();
+    pathData2 = window.insProps[ll2._id].linePath.getPathData();
+    pathData3 = window.insProps[ll3._id].linePath.getPathData();
+    pathData4 = window.insProps[ll4._id].linePath.getPathData();
+    elm1Left = elm1.getBoundingClientRect().left;
+    elm2Left = elm2.getBoundingClientRect().left;
+
+    frameBBox = frame.getBoundingClientRect();
+    traceLog.clear();
+    window.LeaderLine.positionByWindowResize = false;
+    frame.style.width = (frameBBox.width + 70) + 'px';
+    setTimeout(function() {
+      expect(elm1.getBoundingClientRect().left).not.toBe(elm1Left);
+      expect(elm2.getBoundingClientRect().left).not.toBe(elm2Left);
+      expect(traceLog.getTaggedLog('positionByWindowResize')).toEqual([]);
+      expect(pathDataHasChanged(pathData1, window.insProps[ll1._id].linePath.getPathData())).toBe(false);
+      expect(pathDataHasChanged(pathData2, window.insProps[ll2._id].linePath.getPathData())).toBe(false);
+      expect(pathDataHasChanged(pathData3, window.insProps[ll3._id].linePath.getPathData())).toBe(false);
+      expect(pathDataHasChanged(pathData4, window.insProps[ll4._id].linePath.getPathData())).toBe(false);
+      done();
+    }, 100);
+  });
+});
diff --git a/test/spec/win-resize/page-c1.html b/test/spec/win-resize/page-c1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    div {
+      position: absolute;
+      width: 100px;
+      height: 30px;
+      background-color: rgba(150, 255, 127, 0.5);
+    }
+  </style>
+</head>
+<body>
+  <div id="elm1" style="left: 5%; top: 5%;">elm1</div>
+  <div id="elm2" style="left: 45%; top: 20%;">elm2</div>
+  <div id="elm3" style="left: 5%; top: 30%;">elm3</div>
+  <div id="elm4" style="left: 70%; top: 60%;">elm4</div>
+</body>
+</html>
diff --git a/test/spec/win-resize/page.html b/test/spec/win-resize/page.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="/src/defs.js"></script>
+  <script src="/src/anim.js"></script>
+  <script src="/src/path-data-polyfill/path-data-polyfill.js"></script>
+  <script src="/anim-event.min.js"></script>
+  <script src="/traceLog.js"></script>
+  <script src="/src/leader-line.js"></script>
+  <style>
+    div {
+      position: absolute;
+      width: 100px;
+      height: 30px;
+      background-color: rgba(150, 255, 127, 0.5);
+    }
+
+    #iframe1 {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      width: 35%;
+      height: 50%;
+    }
+  </style>
+</head>
+<body>
+  <div id="elm1" style="left: 5%; top: 5%;">elm1</div>
+  <div id="elm2" style="left: 45%; top: 20%;">elm2</div>
+  <div id="elm3" style="left: 5%; top: 30%;">elm3</div>
+  <div id="elm4" style="left: 70%; top: 60%;">elm4</div>
+
+  <iframe id="iframe1" src="page-c1.html"></iframe>
+</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ @@
     <html>
     <head>
       <meta charset="utf-8">
+      <script src="/anim-event.min.js"></script>
       <script src="/src/leader-line.js"></script>
     </head>
     <body>
@@ Expand Down @@