...
import {
  DriverBase,
  wrapWithAngularRouter,
  reduxStoreAsProp
} from "client/reactApp/utils/jest";

const WrappedComponent = reduxStoreAsProp(wrapWithAngularRouter(Organizations));

class OrganizationsDriver extends DriverBase {
  constructor() {
    super(WrappedComponent);
  }

  initElements() {
    this.openModalButton = this.wrapper.find("Header").find("button");
  }

  clickOpenModalButton() {
    this.openModalButton.simulate("click");
  }

  isAddMembersModalOpen() {
    return this.membersContainerElement.prop("isModalOpen") === true;
  }
}
...

...
import { flush, mockStore } from "client/reactApp/utils/jest";
import Driver from "./Organizations.driver";

jest.mock("./Members", () => {
  return () => "Members container";
});

const getMockedStore = () =>
  mockStore({
    organizations: {
      organizations: [{}]
    }
  });

describe("Containers::Organizations", () => {
  let driver;
  const angularRouter = { routerState: "" };

  beforeEach(() => {
    driver = new Driver();
    driver.init({
      angularRouter,
      store: getMockedStore()
    });
  });
});
...

...
it("tells Members container to open modal on action button click", async () => {
    driver.init({
      angularRouter: { ...angularRouter, routerState: "organizations.members" },
      store: getMockedStore()
    });

    driver.clickOpenModalButton();
    await flush();
    driver.update();
    expect(driver.isAddMembersModalOpen()).toBe(true);
  });
...

yarn test:client

...
it("tells Members container to open modal on action button click", async () => {
    driver.init({
      angularRouter: { ...angularRouter, routerState: "organizations.members" },
      store: getMockedStore()
    });

    expect(driver.getMembersList()).toMatchSnapshot();
  });
...

yarn test:client -u

yarn test:client

...
export class DriverBase {
  constructor(Component, props) {
    this.Component = Component;
  }

  init(props) {
    this.wrapper = mount(<this.Component {...props} />);
    ...
  }
}
...
export const wrapWithThemeProvider
...
export const wrapWithAngularRouter
...
export const wrapWithPermissionsProvider
...
export const reduxStoreAsProp
...
export const findReactComponentAndShallowRender
...

import { PageBase } from "./page-base";

export class LoginPage extends PageBase {
  async init(host) {
    await this.goToUrl(concatUrl(host, "signin"));
    this.emailInput = await this.waitForSelector("#input-email");
    this.passInput = await this.waitForSelector("#input-password");
  }

  async login(login, password) {
    await this.emailInput.setValue(login);
    await this.passInput.setValue(password);
    const signinButton = await this.waitForSelector(
      "button:enabled[type=submit]"
    );
    await signinButton.click();
  }
}

import { LoginPage } from "./e2e-test-helpers/login-page";

describe("smoke UI tests", () => {
  let page;
  beforeAll(async () => {
	page = new LoginPage(global.browser);
  });

  beforeEach(async () => {
    await liltApp.init();
  });

  it("can login", async () => {
    await loginPage.login("foo", "bar");
  });
});

yarn test-cli ui-e2e --target=beta-nonRbac [--debug]

export class PageBase {
  constructor(impl, useWdio) {
    this.impl = impl;
    this.useWdio = useWdio;
  }

  goToUrl(url) {
    return !this.useWdio ? this.impl.goto(url) : this.impl.url(url);
  }

  async waitForSelector(selector, timeoutOverride = undefined) {
    if (this.useWdio) {
      const elem = await this.impl.$(selector);
      await elem.waitForExist(timeoutOverride);
      return new BaseElem(elem, this.useWdio);
    }

    const elem = await this.impl.waitForSelector(selector);
    return new BaseElem(elem, this.useWdio);
  }
}