This babel plugin adds the component name as a data-qa
in each React Component.
Before | After |
---|---|
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.
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
)
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')
npm install --save-dev babel-plugin-transform-react-qa-classes
# or yarn add -D
Inside .babelrc
:
{
"presets": ["es2015", "react"],
"env": {
"dev": {
"plugins": ["transform-react-qa-classes"]
}
}
}
Note: Adding this plugin only on
DEV
mode (orPREPROD
) allows not havingdata-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).
babel --plugins transform-react-qa-classes component.js
or programatically with babel-core
require('babel-core').transform(`code`, {
plugins: ['transform-react-qa-classes']
})
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.
Is your company using it? I would love to know more! Could you answer this small Typeform :P
MIT