alanbsmith / babel-plugin-transform-react-qa-classes

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

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

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-classes
# or yarn add -d

Use

.babelrc

{
  "presets": ["es2015", "react"], // This asumes that you use those presets
  "env": {
    "dev": {
      "plugins": ["transform-react-qa-classes"]
    }
  }
}

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:

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

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

with CLI

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

or programatically with babel-core

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