alanbsmith / babel-plugin-transform-react-qa-classes Goto Github PK

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

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

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

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

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

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