# babel-plugin-transform-react-qa-attributes

> Add component's name in `data-qa` attributes to React Components Edit

Latest version **0.0.9** (published 2018-10-18) · 0 weekly downloads

## Install

```sh
npm install babel-plugin-transform-react-qa-attributes
pnpm add babel-plugin-transform-react-qa-attributes
yarn add babel-plugin-transform-react-qa-attributes
bun add babel-plugin-transform-react-qa-attributes
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2018-10-18 |
| First published | 2018-10-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | developerdave |
| Keywords | babel, plugin, react, component, qa, automate test |

## Links

- npm: https://www.npmjs.com/package/babel-plugin-transform-react-qa-attributes
- Repository: https://github.com/arizonatribe/babel-plugin-transform-react-qa-attributes
- Homepage: https://github.com/arizonatribe/babel-plugin-transform-react-qa-attributes#readme
- Issues: https://github.com/arizonatribe/babel-plugin-transform-react-qa-attributes/issues
- npm.io page: https://npm.io/package/babel-plugin-transform-react-qa-attributes

## Dependencies (3)

- [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) 4.3.0
- [lodash.kebabcase](https://npm.io/package/lodash.kebabcase.md) 4.1.1
- [lodash.snakecase](https://npm.io/package/lodash.snakecase.md) 4.1.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.9 (latest) — 2018-10-18
- 0.0.8 — 2018-10-17

## README

## Babel plugin transform React qa classes
[![Build Status](https://travis-ci.org/tanapoln/babel-plugin-transform-react-qa-classes.svg?branch=master)](https://travis-ci.org/tanapoln/babel-plugin-transform-react-qa-classes) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) [![npm](https://img.shields.io/npm/dm/localeval.svg)](https://www.npmjs.com/package/babel-plugin-transform-react-qa)

  FORKED FROM [davesnx/babel-plugin-transform-react-qa-classes](https://github.com/davesnx/babel-plugin-transform-react-qa-classes)

This plugin adds the component name as a `data-qa` in each React Component.

<table>
  <tr>
    <th>Before</th>
    <th>After</th>
  </tr>
  <tr>
    <td>
      <pre>
class componentName extends Component {
  render () {
    return (
      &lt;div&gt;
        &lt;div&gt;Hello world&lt;/div&gt;
      &lt;/div&gt;
    )
  }
}
      </pre>
    </td>
    <td>
      <pre>
class componentName extends Component {
  render () {
    return (
      &lt;div data-qa='component-name'&gt;
        &lt;div&gt;Hello world&lt;/div&gt;
      &lt;/div&gt;
    )
  }
}
      </pre>
    </td>
  </tr>
</table>

### Why?

Basically the idea is to facilitate Automate Testing on Frontend Applications.
Automate Frontend highly requires get the DOMElements and interact with them, adding `data-qa` attributes make it more easy.

They would only need to get the element like that:

```js
document.querySelectorAll('[data-qa="component"]')
```

That depends on the Test suit, with [`PageObject`](https://github.com/cheezy/page-object) can work like that:

```ruby
div(:component, data_qa: 'component')
```

### Install
```bash
npm install --save-dev babel-plugin-transform-react-qa
# or yarn add -d
```

### Use
`.babelrc`
```json
{
  "presets": ["es2015", "react"], // This asumes that you use those presets
  "env": {
    "dev": {
      "plugins": ["transform-react-qa"]
    }
  }
}
```

> Note: Adding this plugin only on `DEV` mode (or `PREPROD`) allows not having this `data-qa` attributes on production.

You can specify the format of the name that you want and the name of the attribute:

```json
{
  "presets": ["es2015", "react"], // This asumes that you use those presets
  "env": {
    "dev": {
      "plugins": ["transform-react-qa", {
        "attribute": "qa-property",
        "format": "camel"
      }]
    }
  }
}
```

> Note: format can be: "camel" (camelCase), "snake" (snake_case) or "kebab" (kebab-case).

#### with CLI

```bash
babel --plugins transform-react-qa component.js
```

#### or programatically with [babel-core](https://www.npmjs.com/package/babel-core)

```js
require('babel-core').transform(`code`, {
  plugins: ['transform-react-qa']
})
```

---
_Source: https://npm.io/package/babel-plugin-transform-react-qa-attributes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._