Initial test suite added.

Author: jeremenichelli

Diff for: .eslintrc.json

@@ -1,9 +1,14 @@
 {
     "env": {
         "browser": true,
-        "commonjs": true
+        "commonjs": true,
+        "es6": true,
+        "node": true
     },
     "extends": "eslint:recommended",
+    "parserOptions": {
+        "sourceType": "module"
+    },
     "rules": {
         "accessor-pairs": "error",
         "array-bracket-newline": "error",
@@ -14,8 +19,17 @@
         "array-callback-return": "error",
         "array-element-newline": "off",
         "arrow-body-style": "error",
-        "arrow-parens": "error",
-        "arrow-spacing": "error",
+        "arrow-parens": [
+            "error",
+            "as-needed"
+        ],
+        "arrow-spacing": [
+            "error",
+            {
+                "after": true,
+                "before": true
+            }
+        ],
         "block-scoped-var": "error",
         "block-spacing": "error",
         "brace-style": [
@@ -91,14 +105,7 @@
         "lines-around-comment": "error",
         "lines-around-directive": "error",
         "max-depth": "error",
-        "max-len": [
-            "error",
-            {
-              "code": 80,
-              "tabWidth": 2,
-              "ignoreStrings": true
-            }
-        ],
+        "max-len": "error",
         "max-lines": "off",
         "max-nested-callbacks": "error",
         "max-params": "error",
@@ -134,7 +141,7 @@
         "no-extend-native": "error",
         "no-extra-bind": "error",
         "no-extra-label": "error",
-        "no-extra-parens": "off",
+        "no-extra-parens": "error",
         "no-floating-decimal": "error",
         "no-implicit-coercion": "error",
         "no-implicit-globals": "error",
@@ -182,7 +189,7 @@
         "no-self-compare": "error",
         "no-sequences": "error",
         "no-shadow": "error",
-        "no-shadow-restricted-names": "off",
+        "no-shadow-restricted-names": "error",
         "no-spaced-func": "error",
         "no-sync": "error",
         "no-tabs": "error",
@@ -209,7 +216,7 @@
         "no-whitespace-before-property": "error",
         "no-with": "error",
         "nonblock-statement-body-position": "error",
-        "object-curly-newline": "error",
+        "object-curly-newline": "off",
         "object-curly-spacing": [
             "error",
             "always"
@@ -219,6 +226,10 @@
         "one-var": "off",
         "one-var-declaration-per-line": "error",
         "operator-assignment": "error",
+        "operator-linebreak": [
+            "error",
+            null
+        ],
         "padded-blocks": "off",
         "padding-line-between-statements": "error",
         "prefer-arrow-callback": "error",
@@ -260,10 +271,7 @@
             "error",
             "always"
         ],
-        "strict": [
-            "error",
-            "global"
-        ],
+        "strict": "off",
         "switch-colon-spacing": "error",
         "symbol-description": "error",
         "template-curly-spacing": "error",
@@ -272,19 +280,13 @@
             "error",
             "never"
         ],
-        "valid-jsdoc": [
-            "error",
-            {
-                "requireReturnDescription": false,
-                "requireParamDescription": false
-            }
-        ],
         "vars-on-top": "off",
+        "wrap-iife": "error",
         "wrap-regex": "error",
         "yield-star-spacing": "error",
         "yoda": [
             "error",
             "never"
         ]
     }
-}
+}

Diff for: README.md

@@ -53,6 +53,18 @@ Are you done? Awesome, submit a pull request explaining your changes.
 _This is a polyfill, not library, so make sure the behavior you are introducing is in the spec._
 
 
+### Requirements
+
+- Node version required: 7.10.0
+
+_On tests files we are using ES2015, but the polyfill is written in ES5 for browser compatibility._
+
+
+### Watch tests
+
+If you want to watch tests as you write your code run `npm test -- --watch`.
+
+
 ## Browser Support
 
 Successfully working in:

Diff for: package.json

@@ -17,29 +17,32 @@
   ],
   "dependencies": {},
   "devDependencies": {
+    "ava": "^0.25.0",
     "eslint": "^4.7.1",
     "husky": "^0.14.3",
     "lint-staged": "^6.0.1",
+    "lodash.clone": "^4.5.0",
+    "lodash.clonedeep": "^4.5.0",
     "prettier": "^1.10.2",
     "rollup": "^0.50.0",
     "uglify-js": "^3.1.1"
   },
   "main": "dist/smoothscroll.js",
   "scripts": {
-    "lint": "eslint src/**/*.js",
+    "lint": "eslint {src,test}/**/*.js",
     "pretest": "npm run lint",
-    "test": "echo 'Sorry, no tests yet, just linting' && exit 0",
+    "test": "ava test/smoothscroll.test.js --verbose",
     "precommit": "lint-staged",
     "prebuild": "npm test",
     "build": "rollup -c rollup.config.js",
     "preminify": "npm run build",
     "minify": "uglifyjs dist/smoothscroll.js -c -m -o dist/smoothscroll.min.js --verbose",
-    "listdiff": "prettier --list-different src/**/*.js",
-    "format": "prettier --write src/**/*.js"
+    "listdiff": "prettier --list-different {src,test}/**/*.js",
+    "format": "prettier --write {src,test}/**/*.js"
   },
   "lint-staged": {
     "linters": {
-      "src/**/*.js": [
+      "{src,test}/**/*.js": [
         "prettier --list-different",
         "git add"
       ]

Diff for: src/smoothscroll.js

@@ -18,6 +18,20 @@ function polyfill() {
   var Element = w.HTMLElement || w.Element;
   var SCROLL_TIME = 468;
 
+  // object gathering original scroll methods
+  var original = {
+    scroll: w.scroll || w.scrollTo,
+    scrollBy: w.scrollBy,
+    elementScroll: Element.prototype.scroll || scrollElement,
+    scrollIntoView: Element.prototype.scrollIntoView
+  };
+
+  // define timing method
+  var now =
+    w.performance && w.performance.now
+      ? w.performance.now.bind(w.performance)
+      : Date.now;
+
   /**
    * indicates if a the current browser is made by Microsoft
    * @method isMicrosoftBrowser
@@ -37,20 +51,6 @@ function polyfill() {
    */
   var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
 
-  // object gathering original scroll methods
-  var original = {
-    scroll: w.scroll || w.scrollTo,
-    scrollBy: w.scrollBy,
-    elementScroll: Element.prototype.scroll || scrollElement,
-    scrollIntoView: Element.prototype.scrollIntoView
-  };
-
-  // define timing method
-  var now =
-    w.performance && w.performance.now
-      ? w.performance.now.bind(w.performance)
-      : Date.now;
-
   /**
    * changes scroll position inside an element
    * @method scrollElement

Diff for: test/smoothscroll.test.js

@@ -0,0 +1,105 @@
+import clone from 'lodash.clonedeep';
+import smoothscroll from '../src/smoothscroll';
+import test from 'ava';
+
+// mock window object
+const mockedWindow = {
+  Element: {
+    prototype: {
+      scroll: f => f,
+      scrollBy: f => f,
+      scrollIntoView: f => f
+    }
+  },
+  scroll: f => f,
+  scrollBy: f => f,
+  navigator: {
+    userAgent: 'test'
+  },
+  performance: {
+    now: f => f
+  },
+  requestAnimationFrame: f => f
+};
+
+// mock document object
+const mockedDocument = {
+  documentElement: {
+    style: {}
+  }
+};
+
+// expose clean browser objects as global
+test.beforeEach(() => {
+  global.window = clone(mockedWindow);
+  global.document = clone(mockedDocument);
+});
+
+// clean browser objects after each test
+test.afterEach.always(() => {
+  global.window = null;
+  global.document = null;
+});
+
+test('polyfill is available as method', t => {
+  t.truthy(typeof smoothscroll.polyfill === 'function');
+});
+
+test('polyfill overrides native methods when polyfill is not supported', t => {
+  const originalWindowScroll = window.scroll;
+  const originalWindowScrollBy = window.scrollBy;
+  const originalElScroll = window.Element.prototype.scroll;
+  const originalElScrollBy = window.Element.prototype.scrollBy;
+  const originalElScrollIntoView = window.Element.prototype.scrollIntoView;
+
+  smoothscroll.polyfill();
+
+  // global methods were replaced
+  t.not(window.scroll, originalWindowScroll);
+  t.not(window.scrollBy, originalWindowScrollBy);
+  t.not(window.Element.prototype.scroll, originalElScroll);
+  t.not(window.Element.prototype.scrollBy, originalElScrollBy);
+  t.not(window.Element.prototype.scrollIntoView, originalElScrollIntoView);
+});
+
+test('polyfill bails out when polyfill is supported', t => {
+  const originalWindowScroll = window.scroll;
+  const originalWindowScrollBy = window.scrollBy;
+  const originalElScroll = window.Element.prototype.scroll;
+  const originalElScrollBy = window.Element.prototype.scrollBy;
+  const originalElScrollIntoView = window.Element.prototype.scrollIntoView;
+
+  // global methods remained untouched
+  document.documentElement.style.scrollBehavior = 'auto';
+
+  smoothscroll.polyfill();
+
+  t.is(window.scroll, originalWindowScroll);
+  t.is(window.scrollBy, originalWindowScrollBy);
+  t.is(window.Element.prototype.scroll, originalElScroll);
+  t.is(window.Element.prototype.scrollBy, originalElScrollBy);
+  t.is(window.Element.prototype.scrollIntoView, originalElScrollIntoView);
+});
+
+test('polyfill overrides native methods when implementation is forced', t => {
+  const originalWindowScroll = window.scroll;
+  const originalWindowScrollBy = window.scrollBy;
+  const originalElScroll = window.Element.prototype.scroll;
+  const originalElScrollBy = window.Element.prototype.scrollBy;
+  const originalElScrollIntoView = window.Element.prototype.scrollIntoView;
+
+  // simulate smooth scroll spec native support
+  document.documentElement.style.scrollBehavior = 'auto';
+
+  // force implementation
+  window.__forceSmoothScrollPolyfill__ = true;
+
+  smoothscroll.polyfill();
+
+  // global methods were forcefully replaced
+  t.not(window.scroll, originalWindowScroll);
+  t.not(window.scrollBy, originalWindowScrollBy);
+  t.not(window.Element.prototype.scroll, originalElScroll);
+  t.not(window.Element.prototype.scrollBy, originalElScrollBy);
+  t.not(window.Element.prototype.scrollIntoView, originalElScrollIntoView);
+});