Component Testing

data-testid

To facilitate the usage of component testing libraries such as React Testing Library you have the option of adding a data-testid attribute to a component's corresponding elements. By passing data-testid in as a prop with a value of the desired string ID, this attribute will be appended to all component elements that include a unique Abyss class name. Please see the Integration tab and the Classes sub-heading for each component to determine which elements will receive this test ID. The resulting data-testid value will be a concatenated string that combines the value passed in with the prop and the element's unique class name.

For example, the following code:

will render the following HTML:

<div
  class="abyss-c-jtltpf abyss-c-fixGjY abyss-c-jtltpf-ifGHEql-css abyss-text-input-root"
  data-testid="test-id-abyss-text-input-root"
>
  <div
    class="abyss-c-bZNrxE abyss-c-bZNrxE-dOdSmz-alignLayout-left abyss-c-bZNrxE-ffYFGe-alignItems-center abyss-c-bZNrxE-ifnEfcC-css abyss-layout-group"
  >
    <div class="abyss-c-enKwaM abyss-c-enKwaM-igvblZO-css">
      <label
        class="abyss-c-knRSDk abyss-c-knRSDk-gKRIQW-hideLabel-true abyss-text-input-label"
        data-testid="test-id-abyss-text-input-label"
        id="abyss-y9q4qkifm"
        for="abyss-wxdrjokl1"
        style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
        >Input with Test ID</label
      >
    </div>
  </div>
  <div class="abyss-c-icOYki">
    <div
      class="abyss-c-cuQeox abyss-form-input-wrapper-container"
      data-testid="test-id-abyss-form-input-wrapper-container"
    >
      <div
        class="abyss-c-giggew abyss-c-giggew-cezigA-orientation-left abyss-text-input-left-element-wrapper"
        data-testid="test-id-abyss-text-input-left-element-wrapper"
      ></div>
      <input
        name="dataTestId"
        id="abyss-wxdrjokl1"
        aria-required="false"
        aria-invalid="false"
        aria-labelledby="abyss-y9q4qkifm"
        placeholder="Text Input with data-testid"
        autocomplete="off"
        type="text"
        class="abyss-c-bYxkbq abyss-c-bYxkbq-bCrMLQ-inputType-text abyss-c-bYxkbq-iPJLV-css abyss-text-input"
        data-testid="test-id-abyss-text-input"
      />
      <div
        class="abyss-c-giggew abyss-c-giggew-czsSGP-orientation-right abyss-text-input-right-element-wrapper"
        data-testid="test-id-abyss-text-input-right-element-wrapper"
      ></div>
    </div>
  </div>
  <div
    class="abyss-c-dhzjXW abyss-text-input-descriptors"
    data-testid="test-id-abyss-text-input-descriptors"
  ></div>
</div>

data-testid​

data-testid