"Transition to" redirects away from acceptance test page


#1

Hey!

I need again your help. I have a web app which uses ember-cli, ember-cli-mocha and ember-simple-auth. Now I wanted to write an acceptance test for the login page.

I used the blueprints to generate all the files and folder structure. I put two tests into my login test. One to check if /login is available and another to check if I can actually login. The second test works, but it redirects me to the page which is specified in simple-auth. Also the page switches to

from --> http://localhost:7357/9367/tests/index.html?hidepassed  
to --> http://localhost:7357/settings 

when I then change something in the code no tests are performed and I only see

Not found: /settings

Did I hooked something up wrong? Is this expected? Where can I start to search for the problem?

Hopefully some of you could give me a tip


#2

You need to have locationType=‘none’ for the test environment for this to work.


#3

Do you mean in environment.js? I tried it but it didn’t work. The following code is, what I tried to do after your reply:

module.exports = function (environment) {
    //...
    if (environment === 'test') {
        // ...
        ENV.locationType = 'none';
        // ...
    }
    // ...
    return ENV;
};

Any further tips or tricks how to solve this?

EDIT: just saw that with 0.1.3 locationType should be set to none by default see the changelog


#4

Still found no solution… I really need your help with this issue


#5

I bump it again, because I still didn’t found a solution. Any help is appreciated. BUMP :wink: Still no solution. Any hint, advice or trick is very appreciated :smile:


#6

You need something like a windowProxy that allows you acceptance tests to change window.location

I threw together a full example - check it out and let me know if you have any questions


#7

@toranb thank you for the detailed explanation. The problem is, that I don’t call window.location anywhere in my code. What I try to do is basically perform a login on my app. So I visit the login page, then fill in username and password and after that I submit the login form. Then the whole login process of ember-simple-auth kicks in and after that I’m redirected to the page which is specified to be the success-page after the login. So I’m not quite sure if a window proxy could help me in this case?

I just checked out the simple auth example [ 1 ]and there it works just fine. So there must be something wrong with my configuration…


#8

@toranb your example and the simple-auth-examples helped me to figure out that I didn’t setup anything wrong. My problem is just a case of “never-ever test your app after development”. Despite everybody knows and agrees to “write tests first” sometimes it happens that test are written afterwards. This was the reason why this issue was so hard to find. Too many dependencies to look for errors. But okay back to topic.

The main problem was that I made a mistake with my fixtures. So one fixture wasn’t recognized and a call to the server was made. The server responded correctly with “401 - unauthorized”. I had a sessionInvalidationSucceeded action defined on the application route and there the redirection to /login was done (via direct access to window.location, so I’ll have a good use case for your window-proxy :smile:). So it wasn’t the “transition-to” routeAfterAuthentication from simple-auth. It was just a programming error. I didn’t spot the problem with the fixture because the redirect was so fast that I didn’t see the network request in the chrome developer tools. Even “preserve log” didn’t show the request. Don’t know why. But yeah, I’m soooo happy that it works now.


#9

Hi, I tried to use the proxy but it failed in my case.

ember s

Tests open in localhost:4200/tests

<!-- app/components/accounts-list/template.hbs -->
<h3>Switch organization:</h3>
<ul class="list-unstyled">
  {{#each currentSession.user.accounts as |account|}}
    <!-- original link changed to action to handle window-proxy -->
    <!-- <li><a href="{{account.url}}">{{account.name}}</a></li> -->
    <li><span  {{action "foo" account.url}}>{{account.name}}</span></li>
  {{/each}}
</ul>
// app/components/accounts-list/component.js
import Ember from 'ember';
import windowProxy from "ntfrontend/utils/window-proxy";

export default Ember.Component.extend({
  classNames: 'account-list',

  actions: {
    foo(url) {
      windowProxy.changeLocation(url);
    },
  }
});
module('Acceptance | organization update', {
  beforeEach: function() {
    application = startApp();
    originalChangeLocation = windowProxy.changeLocation;
    windowProxy.changeLocation = function(url) {
      // also tried without /tests
      url = 'http://myorg.localhost:4200/tests';
      window.location = url;
    };
  },
  afterEach: function() {
    Ember.run(application, 'destroy');
    windowProxy.changeLocation = originalChangeLocation;
  }
});

test('editing organization', function(assert) {
  // login user part
  visit('/auth/login');
  fillIn('#inputEmail', 'admin@admin.com');
  fillIn('#inputPassword', 'pass');
  click('button[type="submit"]');
  // user now is redirected to dashboard with organizations listing
  // but tests start anew and fails
  // end of login user part

  // changes location to http://myorg.localhost:4200/tests
  // and re-run the test that fails after
  click('.account-list span:first');
  
  visit('/organization/edit');
  andThen(function() {
    assert.equal(currentURL(), '/organization/edit');
  });
});

I didn’t want to move it to Stackoverflow as the context wasn’t held. Code snippets were faster to extract than creating the simple app—it this is not enough, I’ll try to to that.


#10

First up I’m confused by this comment

Tests open in localhost:4200/tests

Are you running tests or ember serve ? usually 4200 is the “ember s” (running app w/ express backend) and 7357 is the testem/qunit runner. Did you give my example a test run and if so what was different between your example and mine?


#11

For anyone stumbling over this, check that you have the following in your environment.js, which makes your transitionTos testable:

if (environment === 'test')
{
    ENV.locationType = 'none';
    ...
}

#12

I needed to mock changing window.location today for a test and I found ember-window-mock, v useful!