app-walkthrough/dist/utils/__tests__/fixtures/domFixtures.js

An intuitive guided walkthrough library with UI highlighting and voice narration for web apps.

import { createElementHtml } from "./domUtils";
export const buttonsFixture = `
  <div>
    ${createElementHtml({ tag: "button", text: "Text1", className: "class1", iconName: "text1" })}
    ${createElementHtml({ tag: "button", text: "Text2", className: "class2", iconName: "text2" })}
    ${createElementHtml({ tag: "button", text: "Textm", className: "textm1", iconName: "text" })}
    ${createElementHtml({ tag: "button", text: "Textm", className: "textm2", iconName: "text2" })}
    ${createElementHtml({ tag: "span", text: "span1", className: "span1", iconName: "span1" })}
    ${createElementHtml({ tag: "span", text: "span2", className: "span2", iconName: "span2" })}
    ${createElementHtml({ tag: "input", text: "", className: "input1", iconName: "input1" })}
    ${createElementHtml({ tag: "input", text: "", className: "input2", iconName: "input2" })}
  </div>
`;
export const mixedTagFixture = `
  <div>
    ${createElementHtml({ tag: "div", text: "Div Text", className: "div-class", iconName: "home" })}
    ${createElementHtml({
    tag: "span",
    text: "Span Text",
    className: "span-class",
    iconName: "star",
})}
    ${createElementHtml({
    tag: "button",
    text: "Button Text",
    className: "button-class",
    iconName: "send",
})}
    <input type="text" class="input-class" value="Input Value" />
  </div>
`;
export const multiButtonFixture = `
  <div>
    ${createElementHtml({ tag: "button", text: "Save", className: "save-text", iconName: "save" })}
    ${createElementHtml({
    tag: "button",
    text: "Cancel",
    className: "cancel-text",
    iconName: "cancel",
})}
    ${createElementHtml({
    tag: "button",
    text: "Delete",
    className: "delete-text",
    iconName: "delete",
})}
    <input type="button" class="input-button-class" value="Input Button" />
  </div>
`;