Babel plugin transform React qa classes
![npm](https://img.shields.io/npm/dm/localeval.svg)
This babel 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>
)
}
}
|
This plugin asumes that you are using React and Babel as a building tool to generate your bundle.
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
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