Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/davesnx/babel-plugin-transform-react-qa-classes
Add component's name in `data-qa` attributes to React Components
https://github.com/davesnx/babel-plugin-transform-react-qa-classes
babel babel-plugin qa qatools react react-components
Last synced: 5 days ago
JSON representation
Add component's name in `data-qa` attributes to React Components
- Host: GitHub
- URL: https://github.com/davesnx/babel-plugin-transform-react-qa-classes
- Owner: davesnx
- License: mit
- Created: 2017-04-12T17:20:21.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-01-24T09:35:26.000Z (almost 3 years ago)
- Last Synced: 2024-10-19T11:11:22.680Z (17 days ago)
- Topics: babel, babel-plugin, qa, qatools, react, react-components
- Language: JavaScript
- Homepage:
- Size: 1.2 MB
- Stars: 42
- Watchers: 4
- Forks: 16
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Babel plugin transform React qa classes
[](https://travis-ci.org/davesnx/babel-plugin-transform-react-qa-classes) [](http://standardjs.com/) [](https://www.npmjs.com/package/babel-plugin-transform-react-qa-classes)
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](https://reactjs.org) and [Babel](https://babeljs.io) 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:
```js
document.querySelectorAll('[data-qa="component"]')
```
That depends on the Test suit stack, for example with Ruby and [`PageObject`](https://github.com/cheezy/page-object) looks like that:
```ruby
div(:component, data_qa: 'component')
```
### Install
```bash
npm install --save-dev babel-plugin-transform-react-qa-classes
# or yarn add -D
```
### Use
Inside `.babelrc`:
```json
{
"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`:
```json
{
"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
```bash
babel --plugins transform-react-qa-classes component.js
```
#### or programatically with [babel-core](https://www.npmjs.com/package/babel-core)
```js
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](https://github.com/jamiebuilds/babel-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](https://github.com/commitizen/cz-cli) 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](https://davesnx.typeform.com/to/JrKgBc) :P
## License
MIT