0

I just want to test the Front-End part. So, here is my problem:

Background

I have a robust Ruby on Rails (V3.2) backend app and an entiry new and separate front-end app with ReactJs (V16.4).

Problem

We begin to test React app with the help of Selenium-Webdriver and JestJs, we managed to try several views, but the problem arose when we made POST requests to the rails API.

I don't want to fill my database (development) with garbage because of the tests.

Ex: What happens when I want to test the creation of a new user?.

Possible solutions thought

I was thinking in 3 solutions:

  1. Intercept the API calls and mock them by imitating their response (ex: at submitting click using selenium-webdriver).
  2. Make use of Rails test environment through React
  3. Just revert the call of the API doing the opposite, this would mean creating often undesirable actions in the controller. (ex: doing a delete for each post)
fcabanasm
  • 81
  • 7

3 Answers3

1

It depends if you want to test the whole stack (frontend/backend) or only the frontend part.

Frontend tests

If you only want to test the frontend part go with your first solution : mock API calls.

You will be limited if you just use the selenium-webdriver directly. I would recommend using nightwatch or testcafe. Testcafe does not depend on selenium. This is also optional in the latest versions of Nightwatch.

Testcafe includes a Request mocking API : http://devexpress.github.io/testcafe/documentation/test-api/intercepting-http-requests/mocking-http-responses.html

With Nightwatch you could use nock. See Nightwatch Mock HTTP Requests

Full stack tests

If you want to test the whole stack, you may use this approach : implement a custom API endpoint to allow for resetting your database in a clean state before or after tests execution. (like "/myapi/clean")

You should disable access to this endpoint in production environments.

You can then implement test hooks (before/after) to call your custom api endpoint :

Ricovitch
  • 2,278
  • 1
  • 21
  • 28
  • I just want to test the front-end part. I have searched, but I have not found how to mock the API calls using selenium-webdriver, maybe I should use another tool instead of selenium-webdriver – fcabanasm Sep 11 '18 at 16:36
  • I updated my answer with more details on mocking API calls and links to nigthwatch and testcafe solutions – Ricovitch Sep 12 '18 at 10:55
0

You could have a test environment. From my experience, garbage data generated by tests is not such a big deal. You can periodically clean it up. Or you can spin up a new environment for every test run.

Herman Starikov
  • 2,636
  • 15
  • 26
0

Finally I decided to use enzyme with jest and sinon.

example code:

import { mount } from "enzyme";
import sinon from "sinon";

beforeAll(() => {
 server = sinon.fakeServer.create();
 const initialState = {
  example: ExampleData,
  auth: AuthData
 };
 wrapper = mount(
  <Root initialState={initialState}>
    <ExampleContainer />
  </Root>
 );
});

it("example description", () => {
  server.respondWith("POST", "/api/v1/example", [
    200,
      { "Content-Type": "application/json" },
      'message: "Example message OK"'
    ]);
  server.respond();
  expect(wrapper.find(".response").text().to.equal('Example message OK');
})

In the code above we can see how to intercept API calls using the test DOM created by the enzyme and then mock API responses using sinon.

fcabanasm
  • 81
  • 7