36:3 error 'setBreakpoint' is not defined no-undef

[ramblingbarney]

// acceptance-test

import { test } from 'qunit'; import moduleForAcceptance from 'monkees-stream-1-1/tests/helpers/module-for-acceptance';

moduleForAcceptance('Acceptance | Home Desktop');

test('example test', function(assert) { setBreakpoint('desktop'); visit('/home');

andThen(function() { assert.equal(currentURL(), '/home'); assert.equal(find('.header-links').length, 5, 'Desktop Navigation Menu Bar visible'); // assert something specific to mobile }); });

// ember test -server

Source:

@http://localhost:7357/assets/tests.js:92:5 runTest@http://localhost:7357/assets/test-support.js:4071:16 run@http://localhost:7357/assets/test-support.js:4057:6 runTest/<@http://localhost:7357/assets/test-support.js:4263:7 advance@http://localhost:7357/assets/test-support.js:3709:6 begin@http://localhost:7357/assets/test-support.js:5530:4 scheduleBegin/<@http://localhost:7357/assets/test-support.js:5490:6

// xvfb-run npm test -l firefox

36:3 error 'setBreakpoint' is not defined no-undef

// breakpoint.js

export default { mobile: '(max-width: 767px)', tablet: '(min-width: 768px) and (max-width: 991px)', desktop: '(min-width: 992px)' };

//testem.js

/ eslint-env node / module.exports = { test_page: 'tests/index.html?hidepassed', disable_watching: true, launch_in_ci: [ 'Firefox' ], launch_in_dev: [ 'Firefox' ], browser_args: { Firefox: { mode: 'ci', args: [ '--disable-gpu', '--headless', '--remote-debugging-port=9222', '--window-size=1440,900' ] }, } };

//package.json

{ "name": "monkees-stream-1-1", "version": "0.0.0", "private": true, "description": "Small description for monkees-stream-1-1 goes here", "license": "MIT", "author": "", "directories": { "doc": "doc", "test": "tests" }, "repository": "", "scripts": { "build": "ember build", "start": "ember server", "test": "ember test" }, "devDependencies": { "broccoli-asset-rev": "^2.4.5", "ember-ajax": "^3.0.0", "ember-cli": "~2.16.2", "ember-cli-app-version": "^3.0.0", "ember-cli-babel": "^6.6.0", "ember-cli-dependency-checker": "^2.0.0", "ember-cli-eslint": "^4.0.0", "ember-cli-htmlbars": "^2.0.1", "ember-cli-htmlbars-inline-precompile": "^1.0.0", "ember-cli-inject-live-reload": "^1.4.1", "ember-cli-qunit": "^4.0.0", "ember-cli-shims": "^1.1.0", "ember-cli-sri": "^2.1.0", "ember-cli-uglify": "^2.0.0", "ember-data": "~2.16.2", "ember-export-application-global": "^2.0.0", "ember-load-initializers": "^1.0.0", "ember-resolver": "^4.0.0", "ember-responsive": "^2.0.5", "ember-screen": "^0.2.0", "ember-source": "~2.16.0", "ember-welcome-page": "^3.0.0", "loader.js": "^4.2.3" }, "engines": { "node": "^4.5 || 6. || >= 7." }, "dependencies": { "browser-launcher": "^1.0.0", "phantomjs": "^2.1.7" } }

[k-fish]

Did you install ember-responsive properly? You should have a test helper generated into your tests directory.

https://github.com/freshbooks/ember-responsive/blob/master/blueprints/ember-responsive/files/tests/helpers/responsive.js#L48

[ramblingbarney]

Yes, followed instructions right down the testing instructions npm test, executed ember g ember-responsive to finish the install as directed //test/helpers/response.js

import Ember from 'ember'; import MediaService from 'ember-responsive/media';

const { getOwner } = Ember; const { classify } = Ember.String;

MediaService.reopen({ // Change this if you want a different default breakpoint in tests. _defaultBreakpoint: 'desktop',

_breakpointArr: Ember.computed('breakpoints', function() { return Object.keys(this.get('breakpoints')) || Ember.A([]); }),

_forceSetBreakpoint(breakpoint) { let found = false;

const props = {};
this.get('_breakpointArr').forEach(function(bp) {
  const val = bp === breakpoint;
  if (val) {
    found = true;
  }

  props[`is${classify(bp)}`] = val;
});

if (found) {
  this.setProperties(props);
} else {
  throw new Error(
    `You tried to set the breakpoint to ${breakpoint}, which is not in your app/breakpoint.js file.`
  );
}

},

match() {}, // do not set up listeners in test

init() { this._super(...arguments);

this._forceSetBreakpoint(this.get('_defaultBreakpoint'));

} });

export default Ember.Test.registerAsyncHelper('setBreakpoint', function(app, breakpoint) { // this should use getOwner once that's supported const mediaService = app.deprecatedInstance.lookup('service:media'); mediaService._forceSetBreakpoint(breakpoint); });

export function setBreakpointForIntegrationTest(container, breakpoint) { const mediaService = getOwner(container).lookup('service:media'); mediaService._forceSetBreakpoint(breakpoint); container.set('media', mediaService);

return mediaService; }

[ramblingbarney]

appreciate your quick response on this

[florianEnoh]

hello, Same problem for me :(

Ember-responsive is correctly installed, my tests suites works fine but my linter gets error: 'setBreakpoint' is not defined.

[k-fish]

Alright, sounds like it might be due to a new Ember version, I'll try to repro locally.

[k-fish]

Actually, I think I remember the cause of this now. I'm fairly certain it's because you didn't register the acceptance helper in start-app (https://guides.emberjs.com/v2.16.0/testing/acceptance/).

// tests/helpers/start-app.js
import './responsive';

I realize that this isn't in the readme, so I'll add in a bit. For the time being, I've made an example of a working acceptance test with breakpoints. https://github.com/k-fish/ember-responsive-acceptance-test-example

This is the line I believe you may need to add.
https://github.com/k-fish/ember-responsive-acceptance-test-example/blob/39b8c162b0b6415b3bbf0eea8987ee61e496c31d/tests/helpers/start-app.js

Let me know if this fixes your issues 😄

[ramblingbarney]

Thanks, that fixed the issue, appreciate your help on this one, saved me rebuilding the project with another solution

[k-fish]

Glad to hear it.

Closing this for now. Let me know if your issue is still unfixed @Hypernikao.