03 Test context

As you might have already seen, the test files are regular Jest files that use the regular Jest test function.

However, there are a couple of extra global variables provided by Frontend Testing Tools which you may be seeing for the first time. Take a look at this example:

test(NAME, () =>
  testCtx[0]
    .browserOpen()
    .setupStart()
    .eiUse()

NAME

This global variable holds the test name generated based on the name and location of the test file.

For example, if this is the test file:

frontend-tests/todo_list/happy_path/test.js

then NAME equals todo_list-happy_path

testCtx

This object provides access to "contexts", which are the skeletons of your tests.

These are some examples of how you can access contexts:

const [c1, c2] = testCtx;
const c3 = testCtx[2];

Contexts focus on sharing variables between different modules and chaining asynchronous methods. That's why you can write something like this:

const result = testCtx[0]
  .tlFindByTestId("myForm")
  .containerSet("form")
  .tlFindByText("form", "add", (button) => button.click())
  .screenshotTake("added");

It returns a Promise and handles for you all the necessary waiting for:

1. The element with the data-testid="myForm" attribute to appear
2. Remembering it as the "form" container
3. Finding and clicking "add" within that "form"
4. Recording/comparing the screenshot named "added"

The result will always be a Promise, even if none of the methods was asynchronous. It'll resolve to the value returned by the last method (which is screenshotTake in this case).

Most of the time one context will be sufficient, but you can use as many contexts in one test case as you want. One of the use cases for this would be to control multiple browser windows at once.

Installing modules

If you have a module you'd like to install, do it like this:

const myModule = {
  name: "myModule",
  methods: {
    hi: function (...args) {
      console.log("hi there");
    },
  },
};

testCtx.swapModule(myModule);