# 3. Add selectable doc attribute for testing

Date: 2020-06-22

## Status

Implemented

## Context

Having recently implemented sealed FlowTypes for Component Props, it is no longer pass down arbitrary attributes to the html attributes and have then render to the DOM. Unfortunately, both the e2e testing with Cypress and integration testing with Enzyme make use of these selectable DOM attributes to target elements.

## Decision

This ADR proposes adding a dedicated `TestingProps` mixin e.g. `type TestingProps = {|...|}` which can be used to accept a testing attribute to render to the DOM. Developers may optionally supply the attribute to ascribe a unique name to the component to be used in writing E2E tests.

Options for the specific attribute to render include:

1. Add a testing mixin which will render the attribute `data-qa` to the DOM `type TestingProps = {| data-qa?: string |}`.
1. Using the native html `id` attribute for targeting.
1. Using the `data-cy` attribute which is occasionally implemented for targeting.

The majoirty feeling appears to be leaning towards the dedicated `data-qa` because it does not risk accidental targeting by other applications like the native `id` attribute does, and doesn't tie Patchwork to Cypress, like the `data-cy` attribute does.

## Consequences

Pros:

- It will become easier to write E2E and integration tests because there will be a dedicated selectable attribute.

Cons:

- Some places currently specify `data-cy` and will need to be updated.