fix(mobile-first): ensure we always fall back to closest layout

html-next · Mar 16, 2016 · 74109e3 · 74109e3
1 parent a4f4f7f
commit 74109e3
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/addon/services/device/layout.js b/addon/services/device/layout.js
@@ -61,6 +61,7 @@ export default Service.extend({
     });
 
     bps.forEach((bp, i) => {
+
       Ember.defineProperty(this, `is${capitalize(bp.name)}`, computed('width', function() {
         let width = this.get('width');
         let next = bps[i + 1];
@@ -70,6 +71,13 @@ export default Service.extend({
         }
         return width >= bp.begin;
       }));
+
+      Ember.defineProperty(this, `isAtLeast${capitalize(bp.name)}`, computed('width', function() {
+        let width = this.get('width');
+
+        return width >= bp.begin;
+      }));
+
     });
   },
 

diff --git a/lib/compile.js b/lib/compile.js
@@ -3,7 +3,7 @@
 var fs = require('fs');
 var EOL = require('os').EOL;
 var chalk = require('chalk');
-var debug = false;
+var debug = true;
 
 module.exports = function compile(file, layouts, breakpoints) {
   var inputs = [];
@@ -67,11 +67,11 @@ function orderedLayouts(layouts, breakpoints) {
 }
 
 function makeFirstTest(name) {
-  return '{{#if FlexiLayout.is' + capitalize(name) + '}}';
+  return '{{#if FlexiLayout.isAtLeast' + capitalize(name) + '}}';
 }
 
 function makeMiddleTest(name) {
-  return '{{else if FlexiLayout.is' + capitalize(name) + '}}';
+  return '{{else if FlexiLayout.isAtLeast' + capitalize(name) + '}}';
 }
 
 function capitalize(str) {

diff --git a/tests/acceptance/mobile-first-test.js b/tests/acceptance/mobile-first-test.js
@@ -16,15 +16,17 @@ moduleForAcceptance('Acceptance | mobile-first', {
   }
 });
 
-test('visiting /tests/mobile-first', function(assert) {
-  visit('/tests/mobile-first');
+test('Breakpoints fall back to the closest defined breakpoint', function(assert) {
   let { deviceLayout } = assert;
   let breakpoints = deviceLayout.get('breakpoints');
   let bp = {};
+
   breakpoints.forEach(function(point) {
     bp[point.name] = point.begin + 5;
   });
 
+  visit('/tests/mobile-first');
+
   deviceLayout.set('width', bp.mobile);
 
   andThen(function() {
@@ -43,6 +45,13 @@ test('visiting /tests/mobile-first', function(assert) {
 
       andThen(() => {
         assert.equal(find('h1.layout-test').text(), 'Desktop!', `The layout renders the desktop layout when width is ${bp.desktop}`);
+        run(() => {
+          deviceLayout.set('width', bp.huge);
+        });
+
+        andThen(() => {
+          assert.equal(find('h1.layout-test').text(), 'Desktop!', `The layout renders the desktop layout when width is ${bp.huge}`);
+        });
 
       });
     });