@ghentcdh/ui 1.0.5 → 1.1.0

package/testing.mjs

@@ -0,0 +1,420 @@
+class r {
+  constructor(t) {
+    this.locator = t;
+  }
+  /** Access the Page this harness was scoped against. */
+  page() {
+    return this.locator.page();
+  }
+  /** Get the underlying Locator — useful for assertions or further scoping. */
+  asLocator() {
+    return this.locator;
+  }
+}
+const e = (x, t, a) => x.getByRole(t, { name: a });
+class i extends r {
+  static byId(t, a) {
+    return new i(e(t, "textbox", a));
+  }
+  /** Resolve by visible label (the `<legend>` text). */
+  static byLabel(t, a) {
+    return new i(e(t, "textbox", a));
+  }
+  static for(t) {
+    return new i(t);
+  }
+  async fill(t) {
+    return await this.locator.click(), await this.locator.fill(t), this;
+  }
+  /** Type character-by-character — useful when the control reacts to each keystroke. */
+  async type(t) {
+    return await this.locator.click(), await this.locator.pressSequentially(t), this;
+  }
+  async clear() {
+    return await this.locator.fill(""), this;
+  }
+  async value() {
+    return this.locator.inputValue();
+  }
+  async blur() {
+    return await this.locator.press("Tab"), this;
+  }
+}
+class o extends r {
+  static byId(t, a) {
+    return new o(e(t, "spinbutton", a));
+  }
+  static byLabel(t, a) {
+    return new o(e(t, "spinbutton", a));
+  }
+  static for(t) {
+    return new o(t);
+  }
+  async fill(t) {
+    return await this.locator.click(), await this.locator.fill(String(t)), await this.locator.press("Tab"), this;
+  }
+  async clear() {
+    return await this.locator.fill(""), this;
+  }
+  async value() {
+    const t = await this.locator.inputValue();
+    return t === "" ? null : Number(t);
+  }
+}
+class c extends r {
+  static byId(t, a) {
+    return new c(e(t, "textbox", a));
+  }
+  static byLabel(t, a) {
+    return new c(e(t, "textbox", a));
+  }
+  static for(t) {
+    return new c(t);
+  }
+  async fill(t) {
+    return await this.locator.click(), await this.locator.fill(t), this;
+  }
+  async clear() {
+    return await this.locator.fill(""), this;
+  }
+  async value() {
+    return this.locator.inputValue();
+  }
+}
+class s extends r {
+  static byId(t, a) {
+    return new s(e(t, "checkbox", a));
+  }
+  static byLabel(t, a) {
+    return new s(e(t, "checkbox", a));
+  }
+  static for(t) {
+    return new s(t);
+  }
+  async fill(t) {
+    return t ? await this.locator.check() : await this.locator.uncheck(), this;
+  }
+  async toggle() {
+    return await this.locator.click(), this;
+  }
+  async value() {
+    return this.locator.isChecked();
+  }
+}
+class l extends r {
+  static byId(t, a) {
+    return new l(e(t, "combobox", a));
+  }
+  static byLabel(t, a) {
+    return new l(e(t, "combobox", a));
+  }
+  static for(t) {
+    return new l(t);
+  }
+  async open() {
+    return await this.locator.click(), this;
+  }
+  async fill(t) {
+    return this.select(t);
+  }
+  async select(t) {
+    return await this.open(), await this.page().getByRole("option", { name: t }).locator("a").click(), this;
+  }
+  async value() {
+    return (await this.locator.textContent())?.trim() ?? "";
+  }
+  /** Click the "Clear" button rendered next to the select. */
+  async clear() {
+    return await this.locator.locator(
+      'xpath=ancestor::*[@role="select"][1]'
+    ).getByRole("button", { name: "Clear" }).click(), this;
+  }
+  /**
+   * Click the "Create new" button. Requires `enableCreate` to be set on
+   * the component (SelectWrapper conditionally renders the button).
+   */
+  async clickCreateNew() {
+    await this.locator.locator(
+      'xpath=ancestor::*[@role="select"][1]'
+    ).getByRole("button", { name: "create" }).click();
+  }
+}
+class n extends r {
+  static byId(t, a) {
+    return new n(e(t, "combobox", a));
+  }
+  static byLabel(t, a) {
+    return new n(e(t, "combobox", a));
+  }
+  static for(t) {
+    return new n(t);
+  }
+  /** Type a query, wait for the matching option, click it. */
+  async fill(t) {
+    return await this.locator.click(), await this.locator.fill(t), await this.page().getByRole("option", { name: t }).locator("a").click(), this;
+  }
+  /** Just type a query without selecting — useful for asserting dropdown state. */
+  async query(t) {
+    return await this.locator.click(), await this.locator.fill(t), this;
+  }
+  /** Pick a specific option by visible label, after `query()` has filtered. */
+  async pickOption(t) {
+    return await this.page().getByRole("option", { name: t }).locator("a").click(), this;
+  }
+  /** Press a key — useful for arrow-down / Enter / Esc keyboard nav tests. */
+  async press(t) {
+    return await this.locator.press(t), this;
+  }
+  /** Click the "Create new" button (requires `enableCreate`). */
+  async clickCreateNew() {
+    await this.locator.locator(
+      'xpath=ancestor::*[@role="select"][1]'
+    ).getByRole("button", { name: "create" }).click();
+  }
+  async clear() {
+    return await this.locator.locator(
+      'xpath=ancestor::*[@role="select"][1]'
+    ).getByRole("button", { name: "Clear" }).click(), this;
+  }
+  async value() {
+    return this.locator.inputValue();
+  }
+  /** The listbox is portaled — locate it relative to the Page. */
+  listbox() {
+    return this.page().getByRole("listbox");
+  }
+  options() {
+    return this.page().getByRole("option");
+  }
+}
+class u extends r {
+  static byId(t, a) {
+    return new u(e(t, "combobox", a));
+  }
+  static byLabel(t, a) {
+    return new u(e(t, "combobox", a));
+  }
+  static for(t) {
+    return new u(t);
+  }
+  async open() {
+    return await this.locator.click(), this;
+  }
+  async fill(t) {
+    await this.open();
+    for (const a of t)
+      await this.page().getByRole("option", { name: a }).locator("a").click();
+    return await this.locator.click(), this;
+  }
+  async select(t) {
+    return await this.open(), await this.page().getByRole("option", { name: t }).locator("a").click(), this;
+  }
+  /** Remove a selected chip by its label. */
+  async removeChip(t) {
+    return await this.locator.locator(
+      'xpath=ancestor::*[@role="select"][1]'
+    ).getByText(t, { exact: !0 }).getByRole("button").click(), this;
+  }
+}
+class h extends r {
+  static byId(t, a) {
+    return new h(e(t, "textbox", a));
+  }
+  static byLabel(t, a) {
+    return new h(e(t, "textbox", a));
+  }
+  static for(t) {
+    return new h(t);
+  }
+  /** The editable inner surface — TipTap renders a nested `role="textbox"`. */
+  get editor() {
+    return this.locator.getByRole("textbox");
+  }
+  async fill(t) {
+    return await this.editor.fill(t), this;
+  }
+  async clear() {
+    return await this.editor.fill(""), this;
+  }
+  async typeBold(t) {
+    return await this.toolbar("B").click(), await this.editor.pressSequentially(t), await this.toolbar("B").click(), this;
+  }
+  async typeItalic(t) {
+    return await this.toolbar("I").click(), await this.editor.pressSequentially(t), await this.toolbar("I").click(), this;
+  }
+  async type(t) {
+    return await this.editor.pressSequentially(t), this;
+  }
+  toolbar(t) {
+    return this.locator.getByRole("button", { name: t });
+  }
+  /** Is a toolbar mark currently active (the lib adds `btn-active`)? */
+  async isMarkActive(t) {
+    return (await this.toolbar(t).getAttribute("class") ?? "").includes("btn-active");
+  }
+}
+class y extends r {
+  /**
+   * Resolve by the dialog's accessible name (the `modalTitle` shown in the
+   * `<h3>`). Note: matches are case-insensitive substring.
+   */
+  static byTitle(t, a) {
+    return new y(
+      t.getByRole("dialog", { name: a })
+    );
+  }
+  /** Resolve the only-open dialog. Useful when there's just one at a time. */
+  static current(t) {
+    return new y(t.getByRole("dialog"));
+  }
+  static for(t) {
+    return new y(t);
+  }
+  // ── interactions ──────────────────────────────────────────────────────
+  async clickClose() {
+    return await this.locator.getByRole("button", { name: "Close" }).click(), this;
+  }
+  /** Press Esc on the dialog (handled by the native `<dialog>` element). */
+  async pressEscape() {
+    return await this.locator.press("Escape"), this;
+  }
+  /** Click outside the modal box to attempt a backdrop close. */
+  async clickBackdrop() {
+    return await this.locator.click({ position: { x: 5, y: 5 } }), this;
+  }
+  /** Click an action button in the modal's `#actions` slot by accessible name. */
+  async clickAction(t) {
+    return await this.locator.getByRole("button", { name: t }).click(), this;
+  }
+  // ── inspection ────────────────────────────────────────────────────────
+  /** The `<h3>` title element. */
+  title() {
+    return this.locator.locator("h3").first();
+  }
+  /** The content slot wrapper. */
+  content() {
+    return this.locator.locator('[id$="_content"]').first();
+  }
+  /** Whether the dialog is currently visible (for `expect().toBeVisible()`). */
+  asLocator() {
+    return this.locator;
+  }
+}
+class b extends r {
+  /** Resolve by accessible name (button text / aria-label). */
+  static byName(t, a) {
+    return new b(e(t, "button", a));
+  }
+  static for(t) {
+    return new b(t);
+  }
+  async click() {
+    return await this.locator.click(), this;
+  }
+  async isDisabled() {
+    return this.locator.isDisabled();
+  }
+  async text() {
+    return await this.locator.textContent() ?? "";
+  }
+}
+class p extends r {
+  /** Resolve by the collapse title text. */
+  static byTitle(t, a) {
+    const f = t.getByLabel(`Toggle ${a}`);
+    return new p(f.locator(".."));
+  }
+  static for(t) {
+    return new p(t);
+  }
+  /** Toggle open/close by clicking the hidden checkbox. */
+  async toggle() {
+    return await this.checkbox().click(), this;
+  }
+  /** Whether the collapse is currently open (checkbox checked). */
+  async isOpen() {
+    return this.checkbox().isChecked();
+  }
+  /** The title text element. */
+  title() {
+    return this.locator.locator(".collapse-title span").first();
+  }
+  /** The content wrapper. */
+  content() {
+    return this.locator.locator(".collapse-content");
+  }
+  checkbox() {
+    return this.locator.locator('input[type="checkbox"]');
+  }
+}
+class w extends r {
+  /** Resolve the alert by its message text. */
+  static byMessage(t, a) {
+    return new w(
+      t.getByRole("alert").filter({ hasText: a })
+    );
+  }
+  /** Resolve the first (or only) alert on the page. */
+  static first(t) {
+    return new w(t.getByRole("alert").first());
+  }
+  static for(t) {
+    return new w(t);
+  }
+  async message() {
+    return await this.locator.locator("span").textContent() ?? "";
+  }
+  async hasClass(t) {
+    return (await this.locator.getAttribute("class") ?? "").includes(t);
+  }
+}
+class g extends r {
+  /** Resolve the drawer as the `<main>` containing the panels. */
+  static root(t) {
+    return new g(t.locator("main").first());
+  }
+  static for(t) {
+    return new g(t);
+  }
+  async toggleLeft() {
+    return await this.leftButton().click(), this;
+  }
+  async toggleRight() {
+    return await this.rightButton().click(), this;
+  }
+  async isLeftOpen() {
+    return await this.leftButton().getAttribute("aria-expanded") === "true";
+  }
+  async isRightOpen() {
+    return await this.rightButton().getAttribute("aria-expanded") === "true";
+  }
+  leftPanel() {
+    return this.locator.locator("#drawer-left-panel");
+  }
+  rightPanel() {
+    return this.locator.locator("#drawer-right-panel");
+  }
+  leftButton() {
+    return this.locator.locator('button[aria-controls="drawer-left-panel"]');
+  }
+  rightButton() {
+    return this.locator.locator('button[aria-controls="drawer-right-panel"]');
+  }
+}
+export {
+  w as AlertHarness,
+  n as AutocompleteHarness,
+  s as BooleanHarness,
+  b as ButtonHarness,
+  p as CollapseHarness,
+  g as DrawerHarness,
+  r as Harness,
+  h as MarkdownHarness,
+  y as ModalHarness,
+  u as MultiSelectHarness,
+  o as NumberHarness,
+  l as SelectHarness,
+  c as TextAreaHarness,
+  i as TextHarness,
+  e as byRole
+};