Babel plugin transform React qa classes

FORKED FROM davesnx/babel-plugin-transform-react-qa-classes

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

class componentName extends Component {
  render () {
    return (
      <div>
        <div>Hello world</div>
      </div>
    )
  }
}
      

class componentName extends Component {
  render () {
    return (
      <div data-qa='component-name'>
        <div>Hello world</div>
      </div>
    )
  }
}
      

$3

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 can work like that:

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

$3

> 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

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