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

Babel plugin transform React qa classes

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

function FancyComponent () {
  return (
    <div>
      <div>Hello world</div>
    </div>
  )
}
      

function FancyComponent () {
  return (
    <div data-qa='fancy-component'>
      <div>Hello world</div>
    </div>
  )
}
      

This plugin asumes that you are using React and Babel as a building tool to generate your bundle.

Features

Works with:

• class components
• styled-components
• arrow components
• without JSX
• option to configure the attribute name (default data-qa)
• formats different the value of the attribute (default camelCase)

Why?

The idea is to facilitate Automate Testing on Frontend Applications. Automate Frontend highly requires to get the DOMElements and interact with them, adding data-qa attributes automatically to all the components will make it more easy, rather than do it by code, with this way you won't have this data-qa in production code.

On the testing site would need to get the element like that:

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

That depends on the Test suit stack, for example with Ruby and PageObject looks like that:

div(:component, data_qa: 'component')

Install

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

Use

Inside .babelrc:

{
  "presets": ["es2015", "react"],
  "env": {
    "dev": {
      "plugins": ["transform-react-qa-classes"]
    }
  }
}

Note: Adding this plugin only on DEV mode (or PREPROD) allows not having data-qa attributes on production.

You can specify the format of the name that you want and the name of the attribute, inside your babelrc:

{
  "presets": ["es2015", "react"],
  "env": {
    "dev": {
      "plugins": ["transform-react-qa-classes", {
        "attribute": "qa-property",
        "format": "camel"
      }]
    }
  }
}

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

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

Contributing

PRs for additional features are welcome!

There's still a few feature that are missing, for example each change of the state of the component is added as a data-qa-state into the DOM. Support for more libraries.

I recommend checking this handbook about how to write babel plugins in order to learn.

• Clone the repo: git clone https://github.com/davesnx/babel-plugin-transform-react-qa-classes
• Fork it & set origin as this repo: git remote set-url origin https://github.com/YOUR_USERNAME/babel-plugin-transform-react-qa-classes.git
• Create a branch: git checkout -b BRANCH_NAME
• Do the code
• Create a PR to this repo.

In order to do the commits I prefer to use Commitizen and there's a githook setted up when you push it runs the tests.

Feedback

Is your company using it? I would love to know more! Could you answer this small Typeform :P

License

MIT