IE test fixes

Author: STRML

lib/utils/domFns.es6

@@ -130,6 +130,7 @@ export function getTouchIdentifier(e: MouseTouchEvent): ?number {
 const userSelectPrefix = getPrefix('user-select');
 const userSelect = browserPrefixToStyle('user-select', userSelectPrefix);
 const userSelectStyle = `;${userSelect}: none;`;
+const userSelectReplaceRegExp = new RegExp(`;?${userSelect}: none;`); // leading ; not present on IE
 
 // Note we're passing `document` b/c we could be iframed
 export function addUserSelectStyles(body: HTMLElement) {
@@ -139,7 +140,7 @@ export function addUserSelectStyles(body: HTMLElement) {
 
 export function removeUserSelectStyles(body: HTMLElement) {
   const style = body.getAttribute('style') || '';
-  body.setAttribute('style', style.replace(userSelectStyle, ''));
+  body.setAttribute('style', style.replace(userSelectReplaceRegExp, ''));
 }
 
 export function styleHacks(childStyle: Object = {}): Object {

package.json

@@ -6,8 +6,8 @@
   "browser": "dist/react-draggable.js",
   "scripts": {
     "test": "make test",
-    "test-debug": "karma start --browsers=Chrome --single-run",
-    "test-ie": "karma start --browsers=IE --single-run",
+    "test-debug": "karma start --browsers=Chrome",
+    "test-ie": "karma start --browsers=IE",
     "dev": "make dev",
     "build": "make clean build",
     "lint": "make lint"

specs/draggable.spec.jsx

@@ -324,7 +324,7 @@ describe('react-draggable', function () {
     });
 
     it('should add and remove user-select styles', function () {
-      const userSelectStyleStr = `;${userSelectStyle}: none;`;
+      const userSelectStyleStr = `${userSelectStyle}: none;`;
 
       drag = TestUtils.renderIntoDocument(
         <Draggable>
@@ -334,11 +334,11 @@ describe('react-draggable', function () {
 
       const node = ReactDOM.findDOMNode(drag);
 
-      assert(document.body.getAttribute('style') === '');
+      assert(!document.body.getAttribute('style'));
       TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
-      assert(document.body.getAttribute('style') === userSelectStyleStr);
+      assert(document.body.getAttribute('style').indexOf(userSelectStyleStr) !== -1);
       TestUtils.Simulate.mouseUp(node);
-      assert(document.body.getAttribute('style') === '');
+      assert(!document.body.getAttribute('style'));
     });
 
     it('should not add and remove user-select styles when disabled', function () {
@@ -351,11 +351,11 @@ describe('react-draggable', function () {
 
       const node = ReactDOM.findDOMNode(drag);
 
-      assert(document.body.getAttribute('style') === '');
+      assert(!document.body.getAttribute('style'));
       TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
-      assert(document.body.getAttribute('style') === '');
+      assert(!document.body.getAttribute('style'));
       TestUtils.Simulate.mouseUp(node);
-      assert(document.body.getAttribute('style') === '');
+      assert(!document.body.getAttribute('style'));
     });
 
     it('should not add and remove user-select styles when onStart returns false', function () {
@@ -369,11 +369,11 @@ describe('react-draggable', function () {
 
       const node = ReactDOM.findDOMNode(drag);
 
-      assert(document.body.getAttribute('style') === '');
+      assert(!document.body.getAttribute('style'));
       TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
-      assert(document.body.getAttribute('style') === '');
+      assert(!document.body.getAttribute('style'));
       TestUtils.Simulate.mouseUp(node);
-      assert(document.body.getAttribute('style') === '');
+      assert(!document.body.getAttribute('style'));
     });
 
     it('should be draggable when in an iframe', function (done) {
@@ -401,7 +401,7 @@ describe('react-draggable', function () {
     });
 
     it('should add and remove user-select styles to iframe’s body when in an iframe', function (done) {
-      const userSelectStyleStr = `;${userSelectStyle}: none;`;
+      const userSelectStyleStr = `${userSelectStyle}: none;`;
 
       const dragElement = (
         <Draggable onDrag={function() { dragged = true; }}>
@@ -416,14 +416,14 @@ describe('react-draggable', function () {
         const node = iframeDoc.querySelector('.react-draggable');
         iframeDoc.body.setAttribute('style', '');
 
-        assert(iframeDoc.body.getAttribute('style') === '');
-        assert(document.body.getAttribute('style') === '');
+        assert(!iframeDoc.body.getAttribute('style'));
+        assert(!document.body.getAttribute('style'));
         TestUtils.Simulate.mouseDown(node, {clientX: 0, clientY: 0});
-        assert(iframeDoc.body.getAttribute('style') === userSelectStyleStr);
-        assert(document.body.getAttribute('style') === '');
+        assert(iframeDoc.body.getAttribute('style').indexOf(userSelectStyleStr) !== -1);
+        assert(!document.body.getAttribute('style'));
         TestUtils.Simulate.mouseUp(node);
-        assert(iframeDoc.body.getAttribute('style') === '');
-        assert(document.body.getAttribute('style') === '');
+        assert(!iframeDoc.body.getAttribute('style'));
+        assert(!document.body.getAttribute('style'));
 
         renderRoot.parentNode.removeChild(renderRoot);
         done();