babel-plugin-transform-react-qa

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.

Before	After
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> ) } }

Before

After

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>
    )
  }
}

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:

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

That depends on the Test suit, with PageObject can work like that:

div(:component, data_qa: 'component')

Install

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

Use

.babelrc

{
  "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.

with CLI

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

or programatically with babel-core

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

Collaborate

Thank you for collaborate with this plugins.

Each PR must have test that support it. Please duplicate fixture inside test/fixtures/react and write your own.

LICENSE

MIT

babel-plugin-transform-react-qa