0

We are doing end to end UI testing using Protractor and using Jasmine as BDD framework. We need text of UI to be validated against the data from REST API, for which we are using Axios!! Is this the right approach? Sample code is mentioned below:

import axios from "axios";

describe("Some test for ", () => {

beforeEach(function(done) {
  axios
    .get(
     "******************"
    )
    .then(response => {
      data_file = response.data;
      done();
    });
});

it("some spec ", done => {
  expect($('#someId').getText()).toBe(data_file.someData);
  done();
});

});

Can we use Chakram instead of Axios inside Jasmine in Protractor for fetching data?

If the above approaches are wrong, then what is the correct way of testing UI against data from REST end points? (Chai + Mocha + Chakram + Protractor) or anything else?

Honey Thakuria
  • 223
  • 3
  • 16
  • 1
    that completely invalid the purpose of testing. Testing should not depend on any data from external source, instead use mock data rather than calling the api – brk Jan 18 '19 at 07:36
  • In our case test data is too much and the API which we are using are believed to be producing correct data only, that's the reason we are using this approach. – Honey Thakuria Jan 18 '19 at 07:45
  • 2
    I would echo @brk 's suggestion. Attempt to mock / stub the data for your UI testing, and test your REST API integration separately. – Mo A Jan 18 '19 at 10:43

1 Answers1

1

It could be. The done() callback tells Jasmine that you are doing an async task; however, you should be careful to catch the errors.

Adding in done.fail

import axios from "axios";

describe("Some test for ", () => {

  beforeEach(function(done) {
    axios
      .get(
       "******************"
      )
      .then(response => {
        data_file = response.data;
        done();
      })
      // if the above fails to .get, then we should catch here and fail with a message
      .catch(error => {
        done.fail('axios.get failed to execute');
      });
  });

Better approach. Using async / await

In your Protractor config, you will need to add SELENIUM_PROMISE_MANAGER: false to enable async / await. This will now require you to await all promises.

import axios from "axios";

describe("Some test for ", () => {

  beforeEach(async () => {
    try {
      const data_file = await axios.get("******************").data;
    } catch (e) {
      console.error('axios.get failed to execute');
      throw e;  // throwing errors should fail the spec.
    }
  });

  it("some spec ", async () => {
    // .getText returns a Promise<string> so you'll need to await it
    // to get the string value.
    expect(await $('#someId').getText()).toBe(data_file.someData);
  });  
});
cnishina
  • 5,016
  • 1
  • 23
  • 40
  • Thanks for the answer. Also, could you tell if Chakram should be used for fetching data while performing UI test using Jasmine / Mocha with protractor instead of axios. – Honey Thakuria Jan 20 '19 at 14:54
  • For Jasmine / Mocha, we recommend Jasmine since it is what we use to test the Protractor project. I do not see the difference between chakram or axios. In my opinion / preference, I prefer node's http lib or request node module. I also try to avoid the request node module since the dependency tree is huge. Anyway, they all appear to do similar things. – cnishina Jan 20 '19 at 21:54
  • I agree. When I try to use chakram.get in beforeEach method to return the promise, it doesn't work. Even if I use chakram.wait() after it, it does not work. – Honey Thakuria Jan 21 '19 at 03:45