editor/e2e/modal-driver.ts

import { v1 as uuid } from "uuid";
import { PlaywrightHelper } from "./playwright-helper";

export class ModalDriver {
  private readonly helper = new PlaywrightHelper();

  public when = {
    fillLayers: async (opts: { type: string; layer?: string; id?: string }) => {
      const { when, get, then } = this.helper;
      const id = opts.id ?? `${opts.type}:${uuid()}`;

      await when.select("add-layer.layer-type.select", opts.type);
      await when.type("add-layer.layer-id.input", id);

      if (opts.layer) {
        const input = get.elementByTestId("add-layer.layer-source-block").locator("input");
        await input.click();
        await input.fill(opts.layer);
        // The source input is a controlled downshift combobox; wait for React to
        // settle on the typed value before submitting.
        await then(input).shouldHaveValue(opts.layer);
        // Close the autocomplete menu so it does not intercept the add button.
        await get.elementByTestId("add-layer.layer-id.input").click();
      }
      await when.click("add-layer");

      return id;
    },

    open: async () => {
      await this.helper.when.click("layer-list:add-layer");
    },

    close: async (key: string) => {
      await this.helper.when.click(key + ".close-modal");
    },
  };
}