Merge pull request #17 from FabricElements/lint

Lint and test and optimization
FabricElements · Aug 25, 2017 · b4e6bc7 · b4e6bc7
2 parents 866cdce + f522d5f
commit b4e6bc7
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 73 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -24,9 +24,23 @@
       }
     ],
     "no-var": "off",
-    "require-jsdoc": "off"
+    "require-jsdoc": ["error", {
+      "require": {
+        "FunctionDeclaration": true,
+        "MethodDefinition": false,
+        "ClassDeclaration": true,
+        "ArrowFunctionExpression": false
+      }
+    }]
   },
   "globals": {
-    "Polymer": true
+    "Polymer": true,
+    "suite": true,
+    "test": true,
+    "fixture": true,
+    "expect": true,
+    "setup": true,
+    "MockInteractions": true,
+    "WCT": true
   }
 }
diff --git a/.jsbeautifyrc b/.jsbeautifyrc
@@ -6,5 +6,6 @@
   "indent_with_tabs": false,
   "preserve_newlines": true,
   "max_preserve_newlines": 2,
-  "eval_code": true
+  "eval_code": true,
+  "space_after_anon_function": false
 }
diff --git a/.travis.yml b/.travis.yml
@@ -11,6 +11,7 @@ addons:
 before_script:
   - npm install -g polymer-cli
   - polymer install
+  - npm run lint:javascript
   - polymer lint
 script:
   - xvfb-run polymer test --skip-plugin sauce
diff --git a/skeleton-focal.html b/skeleton-focal.html
@@ -98,7 +98,6 @@
      * @demo demo/index.html
      */
     class SkeletonFocal extends Polymer.GestureEventListeners(Polymer.Element) {
-
       static get is() {
         return 'skeleton-focal';
       }

diff --git a/test/index.html b/test/index.html
@@ -11,7 +11,7 @@
 <script>
   // Load and run all tests (.html, .js):
   WCT.loadSuites([
-    'skeleton-focal_test.html'
+    'skeleton-focal_test.html',
   ]);
 </script>
 

diff --git a/test/skeleton-focal_test.html b/test/skeleton-focal_test.html
@@ -20,69 +20,78 @@
 </head>
 <body>
 
-  <test-fixture id="basicDefault">
-    <template>
-      <skeleton-focal></skeleton-focal>
-    </template>
-  </test-fixture>
-
-  <test-fixture id="basicImage">
-    <template>
-      <skeleton-focal src="https://source.unsplash.com/random/300x200"></skeleton-focal>
-    </template>
-  </test-fixture>
-
-  <script>
-    /* eslint-disable no-undef,max-len */
-
-    function getCenter(box) {
-      return {
-        x: box.left + (box.width / 2),
-        y: box.top + (box.height / 2),
-      };
-    }
-
-    suite('basic behavior', function() {
-      test('instantiating the element with default properties works', function() {
-        const element = fixture('basicDefault');
-
-        expect(element.x).to.equal(0.5);
-        expect(element.y).to.equal(0.5);
-      });
+<test-fixture id="basicDefault">
+  <template>
+    <skeleton-focal></skeleton-focal>
+  </template>
+</test-fixture>
+
+<test-fixture id="basicImage">
+  <template>
+    <skeleton-focal src="http://source.unsplash.com/random/300x200"></skeleton-focal>
+  </template>
+</test-fixture>
+
+<script>
+
+  /**
+   * Get center of the container
+   *
+   * @param {object} box
+   * @return {{x: *, y: *}}
+   */
+  function getCenter(box) {
+    return {
+      x: box.left + (box.width / 2),
+      y: box.top + (box.height / 2),
+    };
+  }
+
+  suite('basic behavior', () => {
+    let element;
+
+    setup(() => {
+      element = fixture('basicDefault');
+    });
+    test('instantiating the element with default properties works', () => {
+      expect(element.x).to.equal(0.5);
+      expect(element.y).to.equal(0.5);
+    });
+  });
+
+  suite('dragging behavior', () => {
+    let element;
+    let dragIcon;
+    let drag;
+    let image;
+
+    setup(() => {
+      element = fixture('basicImage');
+      dragIcon = element.shadowRoot.querySelector('#dragIcon');
+      drag = element.shadowRoot.querySelector('#drag');
+      image = element.shadowRoot.querySelector('iron-image');
     });
 
-    suite('dragging behavior', function() {
-      let element;
-      let dragIcon;
-      let drag;
-      let image;
-
-      setup(function() {
-        element = fixture('basicImage');
-        dragIcon = element.shadowRoot.querySelector('#dragIcon');
-        drag = element.shadowRoot.querySelector('#drag');
-        image = element.shadowRoot.querySelector('iron-image');
-      });
-
-      test('the handle center should be aligned with the image center by default', function(done) {
-        image.addEventListener('loaded-changed', function onLoadedChanged() {
-          if (!image.loaded) return;
+    test('Handle and image center should be aligned by default', (done) => {
+      image.addEventListener('loaded-changed', () => {
+        if (!image.loaded) return;
 
-          const imageBounds = image.getBoundingClientRect();
-          const dragIconBounds = dragIcon.getBoundingClientRect();
+        const imageBounds = image.getBoundingClientRect();
+        const dragIconBounds = dragIcon.getBoundingClientRect();
 
-          expect(
-            getCenter(imageBounds)
-          ).to.deep.equal(
-            getCenter(dragIconBounds)
-          );
+        expect(
+          getCenter(imageBounds)
+        ).to.deep.equal(
+          getCenter(dragIconBounds)
+        );
 
-          done();
-        });
+        done();
       });
+    });
 
-      test('when dragging the handle to the top left x and y properties should update', function(done) {
-        image.addEventListener('loaded-changed', function onLoadedChanged() {
+    test('Dragging the handle to the top/left, x/y properties should update',
+      (done) => {
+        image.addEventListener('loaded-changed', () => {
           if (!image.loaded) return;
 
           const imageBounds = image.getBoundingClientRect();
@@ -91,7 +100,9 @@
             y: imageBounds.top,
           };
 
-          MockInteractions.track(drag, -imageBounds.width / 2, -imageBounds.height / 2);
+          MockInteractions.track(drag,
+            -imageBounds.width / 2,
+            -imageBounds.height / 2);
 
           const dragBounds = drag.getBoundingClientRect();
 
@@ -103,8 +114,9 @@
         });
       });
 
-      test('when dragging the handle to the bottom left x and y properties should update', function(done) {
-        image.addEventListener('loaded-changed', function onLoadedChanged() {
+    test('Dragging the handle to the bottom/left, x/y properties should update',
+      (done) => {
+        image.addEventListener('loaded-changed', () => {
           if (!image.loaded) return;
 
           const imageBounds = image.getBoundingClientRect();
@@ -113,7 +125,9 @@
             y: imageBounds.top + imageBounds.height,
           };
 
-          MockInteractions.track(drag, -imageBounds.width / 2, imageBounds.height / 2);
+          MockInteractions.track(drag,
+            -imageBounds.width / 2,
+            imageBounds.height / 2);
 
           const dragBounds = drag.getBoundingClientRect();
 
@@ -125,8 +139,9 @@
         });
       });
 
-      test('when dragging the handle to the top right x and y properties should update', function(done) {
-        image.addEventListener('loaded-changed', function onLoadedChanged() {
+    test('Dragging the handle to the top/right, x/y properties should update',
+      (done) => {
+        image.addEventListener('loaded-changed', () => {
           if (!image.loaded) return;
 
           const imageBounds = image.getBoundingClientRect();
@@ -135,7 +150,9 @@
             y: imageBounds.top,
           };
 
-          MockInteractions.track(drag, imageBounds.width / 2, -imageBounds.height / 2);
+          MockInteractions.track(drag,
+            imageBounds.width / 2,
+            -imageBounds.height / 2);
 
           const dragBounds = drag.getBoundingClientRect();
 
@@ -147,8 +164,9 @@
         });
       });
 
-      test('when dragging the handle to the bottom right x and y properties should update', function(done) {
-        image.addEventListener('loaded-changed', function onLoadedChanged() {
+    test('Dragging the handle to the bottom/right, x/y properties should update',
+      (done) => {
+        image.addEventListener('loaded-changed', () => {
           if (!image.loaded) return;
 
           const imageBounds = image.getBoundingClientRect();
@@ -157,7 +175,9 @@
             y: imageBounds.top + imageBounds.height,
           };
 
-          MockInteractions.track(drag, imageBounds.width / 2, imageBounds.height / 2);
+          MockInteractions.track(drag,
+            imageBounds.width / 2,
+            imageBounds.height / 2);
 
           const dragBounds = drag.getBoundingClientRect();
 
@@ -168,8 +188,8 @@
           done();
         });
       });
-    });
-  </script>
+  });
+</script>
 
 </body>
 </html>