Fix null query and leaking media query

Add tests, and a test for automatic paren wrapping Fixes #10
PolymerElements · Oct 6, 2015 · fc49315 · fc49315
1 parent 34abf0a
commit fc49315
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 5 deletions.
diff --git a/iron-media-query.html b/iron-media-query.html
@@ -48,23 +48,47 @@
       query: {
         type: String,
         observer: 'queryChanged'
+      },
+
+      _boundMQHandler: {
+        value: function() {
+          return this.queryHandler.bind(this);
+        }
       }
+    },
+
+    attached: function() {
+      this.queryChanged();
+    },
 
+    detached: function() {
+      this._remove();
     },
 
-    created: function() {
-      this._mqHandler = this.queryHandler.bind(this);
+    _add: function() {
+      if (this._mq) {
+        this._mq.addListener(this._boundMQHandler);
+      }
     },
 
-    queryChanged: function(query) {
+    _remove: function() {
       if (this._mq) {
-        this._mq.removeListener(this._mqHandler);
+        this._mq.removeListener(this._boundMQHandler);
+      }
+      this._mq = null;
+    },
+
+    queryChanged: function() {
+      this._remove();
+      var query = this.query;
+      if (!query) {
+        return;
       }
       if (query[0] !== '(') {
         query = '(' + query + ')';
       }
       this._mq = window.matchMedia(query);
-      this._mq.addListener(this._mqHandler);
+      this._add();
       this.queryHandler(this._mq);
     },
 

diff --git a/test/basic.html b/test/basic.html
@@ -61,6 +61,42 @@
             assert.equal(mq.queryMatches, true);
           });
 
+          test('automatically wrap with parens', function() {
+            mq.query = 'min-width: 1px';
+            assert.equal(mq.queryMatches, true);
+          });
+
+          suite('query does not activate on empty string or null', function() {
+
+            test('empty string', function() {
+              mq.query = '';
+              assert.notOk(mq._mq);
+            });
+
+            test('null', function() {
+              mq.query = null;
+              assert.notOk(mq._mq);
+            });
+
+          });
+
+          test('media query destroys on detach', function() {
+            mq.query = '(max-width: 800px)';
+            mq.parentNode.removeChild(mq);
+            Polymer.dom.flush();
+            assert.notOk(mq._mq);
+          });
+
+          test('media query re-enables on attach', function() {
+            mq.query = '(max-width: 800px)';
+            var parent = mq.parentNode;
+            parent.removeChild(mq);
+            Polymer.dom.flush();
+            parent.appendChild(mq);
+            Polymer.dom.flush();
+            assert.ok(mq._mq);
+          });
+
         });
 
       });