Testing flexi breakpoints

Flexi is an ember addon that enables you to factor out your device-specific layouts into individual template files.

An example structure for a posts route might be:

app/
  templates/
    posts/
      -layouts/
        mobile.hbs
        tablet.hbs
        desktop.hbs
        huge.hbs

This allows you to focus on one segment in isolation, which is great for productivity. Flexi also gives an added performance boost by optimizing your build based on your target device sizes.

A proper acceptance test suite will hit each of these devices, especially where differences are significant. To do this, you will need a test helper to set the device width for the test.

Create a helper called setDevice.

ember generate test-helper set-device

Implement setDevice to receive a target breakpoint (e.g. “mobile”), and override the width on flexi’s device layout service.

Don’t forget to import the helper in start-app.js.

You can now test breakpoints in your acceptance tests. Say you had a mobile.hbs layout for the index route, and it contained a “for-mobile-only” div. You can test that it shows up like this:

Happy breakpoint testing!