Move Selector

Sometimes you may have an issue where your framework does not allow you to modifying HTML in optimal places for Estimtest. A good example of this is the vite-vue example.

Estimtest (and all of it's helpers) is able to transfer itself to a better location if the property move-selector is provided. The Estimtest component will move itself when the user accepts the prompt to begin testing.

Example

In this example, pretend the component is placed under main while it needs to be placed under a div with the id of App. We can specify our component to move down by setting the move-selector attribute to be the parent of where you want to move the component. For instance, the example provided will move the Estimtest component one level up.

CLI

/estimtest.config.js

/** @type {import('estimtest-utils/config').EstimtestConfig} */
const config = {
  moveSelector: "#App"
}

export default config;

Vanilla HTML

/index.html

<body>
  <main>
    <estimtest-core move-selector="#App"></estimtest-core>
  </main>
  <footer></footer>
  <!-- MOVES HERE -->
</body>

Angular

/src/app/app.component.html

<body>
  <main>
    <estimtest-core move-selector="#App"/>
  </main>
  <footer/>
  <!-- MOVES HERE -->
</body>

React

/src/index.tsx

<body>
  <main>
    <EstimtestCore moveSelector="#App"/>
  </main>
  <footer/>
  {/* MOVES HERE */}
</body>

Vue

/src/App.vue

<body>
  <main>
    <estimtest-core move-selector="#App"/>
  </main>
  <footer/>
  <!-- MOVES HERE -->
</body>

tip

It is very likely that moving the Estimtest component with to the body will work.