JSPM – babel-plugin-transform-react-qa-attributes@0.0.9

Package Exports

babel-plugin-transform-react-qa-attributes

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-transform-react-qa-attributes) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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", {
        "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 component.js

or programatically with babel-core

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