02 Your first test

Once Frontend Testing Tools are installed and configured, writing tests is easy.

Let's say you're testing the "happy path" of a "todo list". That's the file structure necessary for this test:

$ tree frontend-tests
frontend-tests
├── jest.config.js
└── todo_list
    └── happy_path
        ├── rest.js
        └── test.js

todo_list is the tested module while happy_path is the particular case we tests. test.js is where you place your test:

test(NAME, () =>
  testCtx[0]
    .browserOpen()
    .setupStart()
    .eiUse()
    .setupFinish()
    .screenshotTake("loaded")
);

And this is an example of an API mock that goes into the rest.js file:

module.exports = [
  {
    request: { method: "GET", path: "/items" },
    response: {
      json: [
        { value: "a", id: 1 },
        { value: "b", id: 2 },
        { value: "c", id: 3 },
      ],
    },
  },
];

These are the things that will happen:

1. The address specified in the APP_ROOT_URL environmental variable will be loaded in the browser
2. Your mocks from the rest.js file will be automatically prefixed with todo_list-happy_path and picked up by Endpoint Imposter
3. Through the means of the window._testSetHttpApiUrl function the app will be instructed to use that particular prefixed Endpoint Imposter URL instead of the real API
4. A screenshot will be recorded so that in the future the app may be compared with it

Next, you may want to:

• become fluent in screenshots
• explore the existing modules as well as write your own
• use all the power of Endpoint Imposter