app-walkthrough
Version:
An intuitive guided walkthrough library with UI highlighting and voice narration for web apps.
67 lines (66 loc) • 3.17 kB
JavaScript
import { JSDOM } from "jsdom";
import { findElement, hasTextContent } from "../findElement";
import { buttonsFixture } from "./fixtures/domFixtures";
describe("findElement in buttonsFixture", () => {
let container;
beforeEach(() => {
const dom = new JSDOM(buttonsFixture, { url: "https://localhost" });
container = dom.window.document.body;
});
it("finds second button by index", () => {
const selectors = [{ selector: "button", index: 1 }]; // second button
const el = findElement(selectors, container);
// expect(el).toBeInstanceOf(HTMLElement);
expect(el === null || el === void 0 ? void 0 : el.textContent).toContain("Text2");
// console.log("el.innerHTML:", el?.textContent);
});
it.skip("finds button by exact text", () => {
const selectors = [{ selector: "button", target: "Text1" }];
const el = findElement(selectors, container);
expect(el).toBeInstanceOf(HTMLElement);
expect(hasTextContent(el, "Text1")).toBe(true);
});
it("returns undefined if no button with text found", () => {
const selectors = [{ selector: "button", target: "Nonexistent" }];
const el = findElement(selectors, container);
expect(el).toBeUndefined();
});
it("returns undefined if index out of bounds", () => {
const selectors = [{ selector: "button", index: 100 }];
const el = findElement(selectors, container);
expect(el).toBeUndefined();
});
it("works with multi-button fixture and text + index", () => {
// Find second button containing text 'Cancel'
const selectors = [{ selector: "button", target: "Textm", index: 0 }];
const el = findElement(selectors, container);
if (!el) {
throw new Error("元素未找到");
}
// expect(el).toBeInstanceOf(HTMLElement);
expect(hasTextContent(el, "Textm")).toBe(true);
expect(el === null || el === void 0 ? void 0 : el.classList.contains("textm1")).toBe(true);
expect(el === null || el === void 0 ? void 0 : el.classList.contains("textm2")).toBe(false);
});
it("works with mixed tags and finds div by class", () => {
const selectors = [{ selector: "button.textm1" }];
const el = findElement(selectors, container);
if (!el) {
throw new Error("元素未找到");
}
// expect(el).toBeInstanceOf(HTMLElement);
expect(el === null || el === void 0 ? void 0 : el.classList.contains("textm1")).toBe(true);
expect(el === null || el === void 0 ? void 0 : el.classList.contains("textm2")).toBe(false);
expect(hasTextContent(el, "Textm")).toBe(true);
});
it.skip("chain multiple selectors", () => {
// Suppose we want the span inside the first button
const selectors = [{ selector: "button", index: 0 }, { selector: "span.class1" }];
const el = findElement(selectors, container);
if (!el) {
throw new Error("元素未找到");
}
expect(el).toBeInstanceOf(HTMLElement);
expect(hasTextContent(el, "Text1")).toBe(true);
});
});